1 html的定义
HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言。 标记：就是标签, <标签名称> </标签名称>, 比如: <html></html>、<h1></h1> 等，标签大多数都是成对出现的。
所谓超文本，有两层含义:
- 因为网页中还可以图片、视频、音频等内容(超越文本限制)
- 它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)
2 基本结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> 网页显示内容 </body> </html>
- 第一行<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。
- <html>...</html>标签是开发人员在告诉浏览器，整个网页是从<html>这里开始的，到<html>结束,也就是html文档的开始和结束标签。
- <head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。
- <body>...</body>标签是编写网页上显示的内容。
3 常用标签
<!-- 1、成对出现的标签：--> <h1>h1标题</h1> <div>这是一个div标签</div> <p>这个一个段落标签</p> <!-- 2、单个出现的标签： --> <br> <!--换行--> <img src="images/pic.jpg" alt="图片"> <hr> <!-- 3、带属性的标签，如src、alt 和 href等都是属性 --> <img src="images/pic.jpg" alt="图片"> <a href="http://www.baidu.com">百度网</a> <!-- 4、标签的嵌套 --> <div> <img src="images/pic.jpg" alt="图片"> <a href="http://www.baidu.com">百度网</a> </div>
Notice:
- 标签不区分大小写，但是推荐使用小写。
- 根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)
- 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签
- 单标签是一个标签组成，没有标签内容， 比如: img标签
更多关于标签部分内容，参考下方实例链接，通过一个个小实例去理解知识是个不错的学习方法。
4 重难点
4.1 字符实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：
&entity_name;
或
&#entity_number;
如需显示小于号，我们必须这样写：< 或 < 或 <
🔶提示： 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）,。
注意：这里区分大小写
4.2 路径
需要了解绝对路径与相对路径的区别与应用
4.3 padding和margin
在进行网页制作时都会遇到设定边距的情况，边距又分为外边距（margin）和内边距（padding）
margin的用法
1、设置距离同级标签的间距；
2、设置距离父标签的间距；
关于边距距离的设定，规则如下：
margin: 20px;/*四周相同*/ margin: 10px 20px;/*10px上下 20px左右 */ margin: 10px 15px 30px;/*10px上 15px左右 30px下*/ margin: 10px 15px 20px 25px;/*上右下左*/
设置自动居中则可以使用
margin：0 auto；
padding的用法
大体上来说，与padding 略有不同，但是在距离设定上一致，此处不再叙述
区别
margin和padding是在html中的盒模型的基础上出现的，margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。具体可以参考下示意图：
margin示意图：
padding示意图
