[HTML]想学习？先来了解一下入门小知识吧

刘先生LSS

已于 2022-03-14 21:17:14 修改

阅读量1.2k

点赞数 5

文章标签：学习

于 2022-03-14 21:16:48 首次发布

本文链接：https://blog.csdn.net/hnspystqxskzlqc/article/details/123484121

版权

一、HTML是什么？

HTML：Hyper Text Markup Language(简写：HTML)

中文名：超文本标记语言

HTML是一种标记语言，通过大量的标签，来描述网页的各个组成部分。

二、基本格式

<!DOCTYPE html>
<html>
  <head>
  <title>html.基本格式</title>
  <meta charset="utf-8"/>
  </head>
  <body>
  </body>
</html>

三、基本标签

1.标签：

空格号： &ensp;&emsp;

大于号：>

小于号：<

版权号：©

双引号：&quto;

加粗：（有强调意义）；（单纯变粗）

变斜：（有强调意义）；（单纯变斜）

分行：

主题线：<hr/>

段落：

标题：<h1></h1>(有h1-h6)

如图代码所示：

<!DOCTYPE html>
<html>
  <head>
  <title>html.基本结构</title>
  <meta charset="utf-8"/>
  </head>
  <body>
    <p>这是第一个网页</p>
  </body>
</html>

注：

<!DOCTYPE html>指声明为HTML5文档；
html指HTML页面的根元素；
head指头部元素，<meta charset="utf-8"> 定义网页编码格式为 utf-8，为防止乱码；
title指文档名称；
body指可见的网页面内容，如上下图所示

效果所示：

小练习一：

<!DOCTYPE html>
<html>
  <head>
    <title>李清照简介</title>
	<meta charset="utf-8"/>
  </head>
  <body>
  <h1>人物简介</h1>
  <p><strong>李清照</strong><em>（1084年3月13日~1155年5月12日）</em>，宋代女词人，号易安居士，婉约词派代<br/>
  表，有“千古第一才女”之称。早期生活优裕，金兵入据中原时，流寓南方，境遇孤苦。<br/>
  所作词，前期多写其悠闲生活，后期多悲叹身世，情调伤感。形式上善用白描手法，自辟<br/>
  途径，语言清丽。论词强调协律，崇尚典雅，提出词“别是一家”之说，反对对作诗文之<br/>
  法作词，留有诗集《易安居士文集》、《易安词》等。<hr>
  &copy;你的版权所有
  </p>
  </body>
</html>

效果如下图所示：

小练习二：

<!DOCTYPE html>
<html>
  <head>
    <title>李清照-清平乐</title>
	<meta charset="utf-8"/>
  </head>
  <body>
    <h1>清平乐</h1><hr>
    <p>年年雪里，常插梅花醉，挼尽梅花无好意，赢得满衣清泪！<br/>
       今年海角天涯，萧萧两鬓生华。<br/>
       看取晚来风势，故应难看梅花<br/></p>
  </body>
</html>

效果如下图所示：

小练习三：

<!DOCTYPE html>
<html>
  <head>
    <title>京东读书新闻资讯页面</title>
	<meta charset="utf-8"/>
  </head>
  <body>
    <h1>看不见的完美硬币 ：细节的负担</h1>
    <h2>创新公司皮克斯的启示</h2><hr/>
	<p><img src="新建文件夹/书籍.jpg"  title="书籍"  width="200"  height="200"/><br/>
	<em>&nbsp;&nbsp;细节从来都是个好东西，完美的细节往往给我们赢得商业上的胜利。</em><br/>
	<em>但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竟然成了负担。</em><br/>
	<em>怎么打造完美的细节？又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。</em><br/>
	<h3>看不见的完美硬币：细节的负担</h3>
	</p>
  </body>
</html>

效果如下图所示：

2.图像

HTML 也通过标签 <img> 来定义的。宽高等属性也可以定义。

<!DOCTYPE html>
<html>
  <head>
    <title>图像</title>
	<meta charset="utf-8"/>
  </head>
  <body>
    <img src="list.jpg"  title="核桃"  width="600"  height="600"/>
  </body>
</html>

3.链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="https://www.baidu.com">百度</a>
	</body>
</html>

四、总结

好记性不如烂笔头，只要多敲代码，多记知识点，才能更好的吸收为自己的东西，加油！

本期讲解到此结束，咱们下期再见。

刘先生LSS

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
[HTML]想学习？先来了解一下入门小知识吧

目录一、HTML是什么？二、基本标签一、HTML是什么？HTML：Hyper Text Markup Language(简写：HTML)中文名：超文本标记语言HTML是一种标记语言，通过大量的标签，来描述网页的各个组成部分。二、基本标签特殊格式：空格号：&nbsp;&ensp;&emsp;大于号：&gt;小于号：&lt;版权号：&copy;双引号：&quto;加粗：<st..
复制链接

扫一扫