前端那点事02[pink老师]-HTML标签（上）
目标
1. 标签的书写规范
2. HTML骨架标签
3. 超链接标签
4. 写出图片标签并说出alt和title的区别
5. 说出相对路径的三种形式
本节博客：
- HTML语法规范
- HTML基本结构标签
- 开发工具
- HTML常用标签
- HTML中注释和特殊字符
1、HTML语法规范
标签分为单标签和双标签
1.1 基本语法概述
1.HTML标签是由尖括号包围的关键词，如 < html > 。
2.HTML标签通常是成对出现的，例如< html>和，我们称为双标签。标签中的第一个标签是开始标签，第二个标签是结束标签。
3.有些特殊的标签必须是单个标签（极少情况），例如
，我们称为单标签。
1.2 标签关系
双标签关系可以分为两类：包含关系和并列关系。
包含关系：
<head>
<title></title>
</head>
![前端那点事02[pink老师]-HTML标签（上）_第1张图片](http://img.e-com-net.com/image/info8/02b2f4f1abc34535be373429d6635a66.jpg)
并列关系：
<head></head>
<body></body>
![前端那点事02[pink老师]-HTML标签（上）_第2张图片](http://img.e-com-net.com/image/info8/b4e6b61f2e324a72a23a80412bb16ae5.jpg)
2、HTML基本结构标签
2.1 第一个HTML网页
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档。
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
欢迎您的到来
</body>
</html>
| 标签名 | 定义 | 说明 |
|---|---|---|
| < html >< /html > | HTML标签 | 页面中最大的标签，我们称为根标签 |
| < head >< /head > | 文档的头部 | 注意head标签中我们必须要设置的标签是title |
| < title >< /title > | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| < body >< /body > | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
HTML文档的后缀名必须是.html 或 .htm，浏览器的作用是读取HTML文档，并以网页的形式显示出它们。
此时，用浏览器打开这个网页，我们就可以预览我们写的第一个HTML文件了。
2.2 基本结构标签总结
![前端那点事02[pink老师]-HTML标签（上）_第3张图片](http://img.e-com-net.com/image/info8/b3f3655637e94e22b391df53a6e16a88.jpg)
![前端那点事02[pink老师]-HTML标签（上）_第4张图片](http://img.e-com-net.com/image/info8/f758b656861443419d886cbc8d7ae5a6.jpg)
3、网页开发工具
![前端那点事02[pink老师]-HTML标签（上）_第5张图片](http://img.e-com-net.com/image/info8/5a2e5c1ef41e498290aa923f9c300b76.jpg)
推荐下载VS code
下载地址：https://code.visualstudio.com/
推荐插件下载：
![前端那点事02[pink老师]-HTML标签（上）_第6张图片](http://img.e-com-net.com/image/info8/856056d5826a4fb9bf4cd632b066ad6b.jpg)
注：JS-CSS-HTML Formatter这个插件不要安装，非常不好用
3.1 文档类型声明标签
< !DOCTYPE >文档类型声明，作用就是告诉浏览器采用哪种HTML版本来显示网页。
< !DOCTYPE html >
这句代码的意思是：当前页面采用的是HTML5版本来显示网页
注意：
1.< !DOCTYPE >声明位于文档中的最前面的位置，处于< html >标签之前。
2.< !DOCTYPE >不是一个HTML标签，它就是文档类型的声明标签。
3.2 lang语言种类
用来定义当前文档显示的语言。
< html lang="en" >
告诉浏览器或者搜索引擎这是一个英文网站，本页面采取英文来显示。
1.en定义语言为英语
2.zh-CN定义语言为中文
简单来说定义为en就是英文网页，zh-CN就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档可以显示英文
这个属性对浏览器和搜索引擎（百度，谷歌等）有作用。
3.3字符集
字符集是多个字符的集合。以便计算机能够识别和存储各种文字。
在< head >标签内，可以通过==< meta >标签的charest==属性来规定HTML文档应该使用哪种字符编码。
< meta charest = "UTF-8">
charest常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
注：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用 “UTF-8” 编码，尽量统一写成标准的"UTF-8"，不要写成“utf8 或 UTF8”。
4、HTML常用标签
4.1 标签语义
记住每个标签的语义。简单理解即记住标签的含义，即这个标签是用来干嘛的。
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
如：标题标签、段落标签等……
4.2 标题标签< h1 > - < h6 >
<h1>标题标签</h1>
<h1>标题一共六级选</h1>123
<h2>文字加粗一行显</h2>
<h3>由大到小依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>
4.3 段落标签和换行标签
< p >标签用于定义段落标签，它可以将整个网页分为若干段落。
<p> 我是一个段落标签 <p>
单词 paragraph的缩写，意为段落。
标签语义：可以把HTML文档分割为若干段落。
特点：
1、文本在一个段落中会根据浏览器窗口的大小自动换行。
2、段落与段落之间保有空隙。
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文字强制换行显示，就需要使用换行标签< br / >。
< br / >
单词break的缩写，意为打断。
标签语义：强制换行。
特点：
1、< br / >是个单标签。
2、< br / >标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的距离。
4.4文本格式化标签
标签语义：突出重要性，比普通文字更重要
| 语义 | 标签 |
|---|---|
| 加粗 | < strong >< /strong >或 < b >< /b > |
| 倾斜 | < em >< /em >或< i >< /i > |
| 删除线 | < del >< /del >或< s >< /s > |
| 下划线 | < ins >< /ins >或< u >< /u > |
**说明：**推荐使用前一种，语义更强烈。
< strong >我是加粗< /strong >
4.5 < div >和< span >标签
< div >和< span >是没有语义的，它们就是一个盒子，用来装内容的。
div是division的缩写，表示分割、分区。span意为跨度、跨距。
特点：
1、< div >标签用来布局，但是现在一行只能放一个< div >。大盒子。
2、< span >标签用来布局，一行上可以多个< span >。小盒子
4.6图像标签和路径
1.图像标签
在HTML标签中，< img >标签用于定义HTML页面中的图像。
< img src = "图像URL">
单词image的缩写，意为图像。
src是< img >标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。
图像标签的其他属性：
![前端那点事02[pink老师]-HTML标签（上）_第7张图片](http://img.e-com-net.com/image/info8/ce9068ccdb7b473a9d91fe0142ccbcc4.jpg)
注意：
1、图像标签可以拥有多个属性，必须写在标签名的后面。
2、属性之间不分先后顺序，标签名与属性、属性与属性之间均已空格分开。
3、属性采取键值对的格式，即key = "value"的格式，属性 = “属性值”。
2.路径
目录文件夹
根目录：打开目录文件夹的第一层就是根目录。
1、相对路径
以引用文件所在位置为参考基础，而建立出的目录路径。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级，如< img src=“baidu.gif”> | |
| 下一级路径 | / | 图像文件位于HTML文件下一级，如< img src=“images/baidu.gif”> |
| 下一级路径 | …/ | 图像文件位于HTML文件上一级，如< img src="…/baidu.gif"> |
多层嵌套：…/…/…/
2、绝对路径
例如：C:\Users\123\Desktop\HTML
注：通常使用相对路径，绝对路径不用。