#### 什么是HTML？
HTML:HyperText Markup Language 超文本标记语言
##### 什么是超文本？
比如我们需要在浏览器中呈现一篇文章，需要有标题和正文，但是浏览器不能区分哪些是标题，哪些是正文，所以html语言应运而生。
**html语言就是为了给它所包含的内容添加语义的**
通过一些特殊字符对普通文本进行标记，可以对他们添加各种各样的语义。
并且这些特殊字符在浏览器中不会被呈现，所以这些特殊字符被称为超文本。
`<h1>我是标题</h1>` 这代表一个标题
`<p>我是段落</p>` 这代表一个段落
-----
#### 网页的基本格式
```
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'/>
<title></title>
</head>
<body>
</body>
</html>
```
----
#### DTD Doctype Definition 文档类型声明
1.作用：
*告诉浏览器当前网页是根据W3C发布的哪个版本规范编写的,以便于浏览器正确地渲染显示网页
2.注意点：
*它不是html标签
*要写在一个html文件的首行
*浏览器会先读取一个网页的dtd，但并不完全依赖dtd，浏览器有一套自己的渲染规则
3.拓展：
*版本规范可以分为2个大版本，一个HTML规范，一个XHTML规范，每个大版本又分多个小版本定义。
-每个小版本直接按照浏览器处理模式又可以分为：standard Mode/almost standard Mode/ Quirk Mode
-每个小版本按照编写语法严谨程度又可以分为：Strict/Transitional/Frameset
-HTML语法比较松散，容错性强，XHTML语法严谨，容错性差。
----
#### html标签
1.作用:
*告诉浏览器这是一个网页，即html文档
2.注意点：
*它是网页的根标签，所有网页内容都要写在它内部
*html标签不区分大小写
3.分类：
1.按闭合方式分为：单标签/双标签
2.按嵌套关系分为：父标签/子标签
3.按布局方式分为：容器级标签/文本级标签
---
#### head标签
1.作用：
*给网页设置一些配置信息，浏览器解析网页时要先解析头部信息后才能正确地渲染网页给用户访问。
-指定网站的标题/指定网站的小图标
-添加网站的SEO相关的信息（网站的关键字，描述信息）
-添加一些外链的js/css文件
-添加一些浏览器适配内容
-指定浏览器解析字符集
-...
2.注意点
*head标签内部的信息都不会给用户查看，即在浏览器中不会显示Head标签内部的信息
----
#### title标签
1.作用：
*指定网页的标题，并且该标题会作为用户保存网页的默认标题
2.注意点：
-title标签必须要写在head标签内部
-title标签内容为空时，浏览器默认把html文件名作为当前网页的标题
----
#### meta标签
1.作用：
*告诉浏览器该网页的各种预配置信息，让浏览器以正确的方式渲染网页，告知搜索引擎各种SEO信息，设置自动跳转等
2.分类：
1.设置浏览器解析字符集
`<meta charset='utf-8'/>`
2.设置网页的关键字，能提高SEO搜索命中率，使网页更容易被用户访问到
`<meta name="keywords" content="IT前言技术、iOS技术、HTML5技术、Android技术" />`
3.设置网页信息描述，SEO所用
`<meta name="description" content="IT前言技术、iOS技术、HTML5技术、Android技术研究" />`
4.告诉搜索引擎当前网页的作者是谁
`<meta name="author" content="xxx" />`
5.告诉浏览器多久自动刷新一次页面并自动跳转到新页面，常用于新老域名替换时
`<meta http-equiv="Refresh" content="2；URL=http://www.baidu.com/">`
6.告知网络爬虫本网页能被爬取的权限限制
`<meta name="robots" content="all|none|index|follow|noindex|nofollow" />`
3.注意点：
##### 字符集&乱码问题
-字符集就是包含各种字符的集合，常用的有：ASCII，GBK2312,UTF-8
-乱码问题产生的原因：
开发人员编码encoding时使用的字符集与浏览器解码decoding时所使用的字符集不同。
-因此要解决乱码问题，需要在编码和解码时都指定为相同字符集即可。
-一般都使用UTF-8万国码
----
#### style标签
1.作用：告诉浏览器这里编写了css样式声明
2.注意点：
-必须写在head标签内部
----
#### script标签
1.作用：告诉浏览器该标签内部包含js代码，需要优先执行
2.注意点：
-可以写在head里，也可以写到body里。位置不定
-js代码执行极快，具有阻塞浏览器工作的作用
----
#### link标签
1.作用：告知浏览器这里需要引入一个外部文件
2.标签属性attr：
-type:外部文件类型
-src:外部文件路径
----
#### body标签
1.作用：告知浏览器这个标签内部的内容是网页上所需要显示的。
----
#### H1~H6标签 head
1.作用：告知浏览器这是一个标题
2.格式：`<h1>This is the title</h1>`
3.注意点：
-h1最大，h6最小，只有6级，超出无效
-一个网页只能有一个h1，它很重要，一般是该网页的LOGO
-标题标签是容器级标签，在浏览器中独占一行显示
----
#### p标签 paragrah
1.作用：告知浏览器这段文本是一个整体，称作段落
2.格式：`<p>This is a paragrah</p>`
3.注意点：
-p标签是html中是*文本级标签*，在css中是块级元素
-p标签独占一行，当浏览器一行不足以显示时，自动换行填充
----
#### hr标签 horizontal rule
1.作用：在浏览器中显示一条分割线
2.格式：<hr/>
3.注意点：
-它在浏览器中会独占一行
-由于Hr标签是用来添加样式的，没有语义，而html标签只负责声明网页的语义，因此这种标签已经被废弃，所有的样式都通过css来添加到网页
-标签中闭合的/可写可不写，如果不写是按照html规范来写，写/是按照xhtml规范写的
----
#### html注释 Annotation
1.作用：在网页文件上添加一段注释用来解释某一段程序或代码是什么意思，是开发者之间的交流方式
2.格式：`<!-- xxx -->`
3.注意点：
-html注释不能嵌套
-注释不会在浏览器中显示
-增强了代码的可读性
----
#### img标签 image
1.作用：在该标签处插入一张图片
2.格式：`<img src="" alt="" title=""/>`
3.attr：
-width:设置图片的宽度，通常设置width/height其一，另一个会等比拉伸/缩放
-height:设置图片的高度，如果width和height同时设置，可能会导致图片失真变形
-src: source 设置图片的路径+图片名称，通常使用相对路径
-title:设置该图片在网页中当鼠标悬停其上时，显示的提示文本
-alt: alternate 当浏览器根据src地址不能找到图片时返回alt属性中指定的文本
4.常见img的类型：
1.jpg/jpeg:有损压缩图片，可保存颜色较为丰富的图片，不支持透明效果
2.gif:有损压缩图片，保存动态图和颜色单一的图片，支持简单透明效果
3.png:无损压缩图片，可保存颜色很丰富的图片，体积较大，支持复杂透明效果
*选图规则：效果不一致选择好的，效果一致选择小的*
5.注意点：
-img标签是文本级标签，行内块元素，不独占一行
6.拓展：
####相对路径&绝对路径：
*相对路径*是从当前目录开始查找，./当前目录，../上一级目录，/下一级目录；
在开发中通常都使用相对路径，因为它可移植性强。
注意：
1.相对路径不能跨盘符
2.路径中不能使用中文，容易出错
*绝对路径*是从盘符开始查找并一直找到目标资源的。可移植性差，基本不使用
*网络路径*
----
#### br标签 break
1.作用：让内容换行，另起一行
2.格式：`<br/>`
3.注意点：
1.br标签无语义，而在现实中需要换行时都是因为另起了段落，因此要用p标签代替它
2.br标签写一个是换一行，写几个是换几行
----
#### a标签 anchor 锚点
1.作用：用于从一个位置跳转到另一个位置，一个网页跳转另一个网页
2.格式：`<a href="xxx" target="_self",title=""/>`
3.标签属性attr:
-href: hypertext reference
取值：
1.假链接：# 可跳转至网页顶部，javascript:; 占位符，不做任何动作
2.当前网页特定位置: #location 当前网页的某标签id值
3.其它网页特定位置：其它网页路径+#location
4.其它网页: 跳转网页(www.baidu.com)/点击下载(girl.zip)
-target:
取值：
1._self:默认取值，在当前页面跳转至链接网页
2._blank:在新的标签页打开链接网页
3._iframe.name.value:跳转至当前网页的内联框架
-title: 同img的title标签属性一样，鼠标悬停其上显示提示文本信息
4.注意点：
1.a标签属于文本级标签，行内元素，在浏览器中不会独占一行
3.如果a标签指定一个url地址，则href属性值必须加网络协议号http://或https://，否则不会跳转页面
4.a标签内不仅可以放文本，还可以放图片/其它。如果内部没有放置任何内容，则该a标签无法被用户访问到
5.在head标签内放入base标签，可以统一设置本页面的a标签跳转方式。如`<base target="_blank"/>`;当a内部声明target和base声明target相冲突时，以a的target属性值为准
----
#### 列表标签
1.作用：给一堆数据添加列表语义，告诉搜索引擎它们是一个整体
2.分类：
1. ul 无序列表
2. ol 有序列表
3. dl 自定义列表
3.注意点：
1. ul/ol都是组合标签，搭配子标签li(list item列表项)一起使用，因此它们中都不能再嵌套其它标签，而需要嵌套的标签都放在li内。li内可以存放大多数html标签。
2.dl和ul类似也是组合标签，搭配子标签dt(definition title 自定义标题)&dd(definition description 自定义描述)来使用.dl中不能放除dt/dd外的其他标签，而dt/dd内可以嵌套其它html标签。一个dt可以对应一个dd，也可以对应多个dd.但不能一个dd对应多个dt.
#### ul标签 Unordered List
1.作用：为一堆数据添加列表语义，声明它们是一个整体，并且数据没有先后之分
2.注意点：
1.ul/li 都是容器级标签，在浏览器中独占一行
2.ul默认自带列表项目符号，使用css属性 `list-style:none;`清除
3.ul>li应用广泛，常见应用场景有：新闻列表，商品列表，导航条等
#### ol标签 Ordered List
1.作用：为一堆数据添加列表语义，声明它们是一个整体，并且数据有先后之分
2.注意点：
1.和ul一样的注意点，基本上ol可以做的ul都可以做到，被ol替代，使用率比较低
2.应用场景：排行榜
#### dl标签 Definition List
1.作用：为一堆数据添加列表语义，声明它们是一个整体，并且用dt定义数据标题，用dd来定义标题的描述信息。
2.注意点：
1.dl>dt+dd都是容器级标签，在浏览器中独占一行
2.虽然一个dt可以没有dd，或对应多个dd,但是不推荐使用。推荐一个dt对应一个dd
3.应用场景：网站底部信息， 图文混排
----
#### table标签
1.作用：以表格形式将数据表现出来，当数据量很大的时候，表格形式被认为是最清晰的一种展现形式
2.格式：
```
<table>
<caption></caption> <!--table的标题-->
<thead> <!-- 表示table的头部-->
<tr> <!-- table row 表格的一行-->
<th></th> <!-- table head 列标题-->
<td></td> <!-- table data 单元格-->
</tr>
</thead>
<tbody> <!--表示table的主体内容-->
<tr>
<td></td>
</tr>
</tbody>
<tfoot> <!--表示table的尾部信息-->
<tr>
<td></td>
</tr>
</tfoot>
```
3.表格属性(含tr,td)：
1.width/height:
可以设置给table和td，如果不设置则默认：td被内容撑开，table被tr+td撑开。
如果给td手动设置了width/height,则只会影响到它所在的行/列的width/height，不会影响到整个表格的宽高。
2.align水平居中/valign垂直居中:
align:可以设置给 table/tr/td,同属性覆盖关系,tr最优先
取值:left/center/right
vlign:可以设置给tr/td，设置给table无效,同属性覆盖关系，tr最优先
取值：top/center/bottom
3.cellspacing外边距/cellpadding内边距:
只能设置给table
cellspacing默认为2px，指单元格直接的外边距
cellpadding默认为1px,指单元格内的内容与单元格边框的距离
4.bgcolor
可设置给table/tr/td，分别为它们添加背景色
5.rowspan列合并/colspan行合并
设置给td，需注意如果设置了rowspan/colspan,当前单元格就代表占用了多个td的位置，在html结构中就要删减掉多出来的单元格结构，否则表格结构会被破坏。
4.注意点：
1.table标签有一个border属性，默认情况border值为0，因此默认不会显示边框
2.table>tr>td也是一套组合标签，不能单独出现。
3.border-spacing边框间距/border-collapse边框整合:
在css中可以通过设置：border-spacing设置为0px,把table和td的外边距取消，但此时table和td的边框重叠效果难看，使用border-collapse:collapse;可以设置边框重叠，让表格达到的正常视觉效果。
4.caption标签是table的标题，在浏览器中会显示在表格外部，但在html语法中必须编写在table内部，并且紧贴table。
5.th标签是定义了列标题，一个表格首行通常都是列标题，可以用td代替th,但th语义更明确。
6.thead/tbody/tfoot通常都可以省略掉，其中tbody如果省略，浏览器会自动添加上。要注意tr不是table的子标签。
7.如果添加了thead&tfoot，那么它们有自己默认的高度，在更改整个表格高度时，它们不会发生变化，如果要改变它们的高度就要单独对他们设置。
8.由于部分浏览器对table支持不好，开发中很少使用它
5.拓展：
1.细线表格：
只利用表格属性，也可以做出CSS实现的效果,具体步骤如下：
1.给table设置bgcolor="black"
2.给tr设置bgcolor="white"
3.给table设置cellspacing="1px"
----
####form标签
1.作用：用于服务器搜集用户信息，让客户选择，填写各种信息并提交到服务器
2.格式：`<form action="url" method="post/get"><表单元素></form>`
3.attr:
-action:该表单要提交到的服务器url
-method:该表单在网络传输中使用什么方法传递(get:明文传输，post:暗文传输)
3.注意点：
1.它是容器级标签，在浏览器中独占一行
2.所有的表单元素必须写在form标签内，否则无法提交给服务器
3.form标签内包含多种表单元素，这些表单元素都具有默认的样式与功能
####常见的表单元素
####input标签
格式：`<input type="" name="" value=""/>`
attr:
1.type:根据type属性值取值不同，浏览器会生成多种功能不同，外观不同的元素
-radio:单选框
1.格式: `<input type="radio" />`
2.注意点：
1.radio是文本级标签，行内块元素，默认不会在浏览器中独占一行。
2.同一组radio天生不会互斥，如果想要它们互斥，需要为同组的radio都添加一个相同的name值
3.如果要让某个radio被默认选中，需要在标签内添加checked属性
4.最好设置checked="checked",而不单写checked属性名不赋值。这是遵从xhtml规范的写法
-checkbox：复选框
1.格式：`<input type="checkbox" />`
2.注意点：
1.checkbox是文本级标签，行内块元素，默认不会独占一行。
2.checkbox允许同时选中多个，但同组间也需要有相同的name值
3.如果要默认选中，也需要同radio一样设置checked="checked"
-text：明文文本框
1.格式：`<input type="text" />`
2.attr:
placeholder="xxx":默认的占位提示字符
autofocus=：默认让那个文本框获取焦点,注意同一页面下只能有一个文本框自动获焦
autocomplete="off/on":记录用户提交过的数据，即必须是form表单中，且必须有name属性的表单元素的value值.
accesskey="x":让用户自定义快捷键来获取文本框焦点，此时快捷键就是alt + "x"
required:强制用户输入内容，如果不输入内容就不能提交给服务器
maxlength="number"：文本输入最大长度
value若指定值，则会在浏览器中默认显示
3.注意点：
它是文本级标签，行内块元素，默认在浏览器中不会独占一行
-passowrd：暗文文本框
1.格式：`<input type="password" />`
2.注意点：同text
-file: 告诉浏览器，当前表单元素是需要选择文件上传
1.格式：`<input type="file" />`
2.注意点：
1.默认情况下只能选择一个文件
2.当表单元素获得属性multiple时，可以同时选中多个文件
-button：普通按钮
1.格式：`<input type="button" onclick=function(){...}`
2.注意点：
1.它是文本级标签，行内块元素，默认在浏览器中不会独占一行
2.它只是一个普通的按钮，通常用于配合js脚本来执行一些操作
-image：定义图片形式的提交按钮
1.格式：`<input type="image" src="" />`
2.attr:
src:引入图片的路径
3.注意点：
1.它是文本级标签，行内块元素，默认在浏览器中不会独占一行
2.把图片作为按钮点击
-submit：提交按钮
1.作用：把表单内各个具有name值的表单元素提交给服务器
2.格式：`<input type="submit" />`
3.注意点：
1.它是文本级标签，行内块元素，默认在浏览器中不会独占一行
2.这个按钮不用设置value值就会自带“提交”字样，如果有指定value值，则显示指定的value值，如果有指定value属性，但赋值为空，则只显示按钮，其上无提示文字
3.需要被提交到服务器的表单元素必须有name属性才能被submit提交
-reset：重置按钮
1.格式：`<input type="reset" />`
2.注意点：
1.它是文本级标签，行内块元素，默认在浏览器中不会独占一行
2.这个按钮不用设置value值就会自带"重置"文字，同submit
3.它只能清空在form表单标签内的表单元素已填写内容
-hidden：隐藏域
*注意点：
1.它是文本级标签，行内块元素，默认在浏览器中不会独占一行
2.它定义隐藏的输入字段
3.待补充···
-color：取色器
*注意点：
1.它是文本级标签，行内块元素，默认在浏览器中不会独占一行
2.h5新增，可以让用户在浏览器上选取想要的颜色
-date：日期控件
*注意点：
1.它是文本级标签，行内块元素，默认在浏览器中不会独占一行
2.h5新增，可以让用户在浏览器上选取日期
-number：数字控件
*注意点：
1.它是文本级标签，行内块元素，默认在浏览器中不会独占一行
2.h5新增，可以让用户在浏览器上选取数字
-email：可自动校验邮箱格式正确与否的邮箱控件
*注意点：
1.它是文本级标签，行内块元素，默认在浏览器中不会独占一行
2.h5新增，可以让用户在浏览器上便捷输入一个邮箱
-url：可校验是否输入了有效格式的URL地址
*注意点：
1.它是文本级标签，行内块元素，默认在浏览器中不会独占一行
2.h5新增，可以让用户在浏览器上便捷输入一个合法url地址
2.name:这个表单元素如果想要提交到服务器，就必须拥有name属性
3.value:这个表单元素的value值最终会提交给服务器(button的value除外)
####label标签
1.作用：扩展用户鼠标操作，比如点击输入框描述文字也能选中输入框
2.格式：
```
<!-- 给文本框添加绑定 -->
<label for="account">账户：</label>
<input type="text" id="account" />
<!-- 给单选框添加绑定 -->
<input type="radio" id="man" value="male" name="sex" />
<label for="man">男</label>
<!-- 给多选框添加绑定 -->
<input type="checkbox" id="basketball" name="sport" value="basketball" />
<label for="basketball">篮球</label>
```
3.注意点：
1.label标签是文本级标签，行内元素，默认在浏览器中不独占一行
2.要绑定给哪个表单元素就为表单元素添加一个id,然后让label标签的属性for的值等于表单元素的id值即可。
####datalist标签
1.作用：为输入框绑定带选项
2.格式：
```
<input type="text" list="cars" />
<datalist id="cars">
<option>奔驰</option>
<option>宝马</option>
<option>奥迪</option>
<option>法拉利</option>
</datalist>
```
3.注意点：
1.该元素属于容器级标签，行内块级元素，默认在浏览器内不独占一行
2.为datalist绑定一个id属性，把它的值赋给要添加绑定可选项的文本框的list属性即可。
3.datalist需要配合子标签option一起使用，他们是一套组合标签
4.datalist和select的区别在于：前者既支持输入文本，又可选择文本。后者只能选择，不能输入。
####select标签
1.作用：定义一个下拉列表，供用户点击选择
2.格式：
```
<span>你最喜欢的食物是：</span>
<select name="foods">
<optgroup label="水果">
<option selected="selected" value="apple">苹果</option>
<option>橘子</option>
<option>香蕉</option>
<option>梨子</option>
</optgroup>
<optgroup label="肉类">
<option>牛肉</option>
<option>羊肉</option>
<option>鸡肉</option>
<option>鱼肉</option>
</optgroup>
</select>
```
3.注意点：
1.select标签是容器级标签，行内块级元素，在浏览器中默认不会独占一行
2.搭配子标签option一起使用,name属性要设置给select父标签，value属性设置给option子标签。
3.要设置默认选中，给option标签添加属性selected="selected"
4.再搭配optgroup标签可以为备选项分类
5.select下拉列表只能选择不能输入，datalist备选项既能选择也可以输入
####textarea标签
1.作用：定义一个多行输入框
2.格式：
`<textarea rows="x" cols="y"></textarea>`
3.注意点：
1.该标签是一个容器级标签，行内块级元素，默认在浏览器中不换行
2.通过标签属性rows和cols可以设置高宽，但即使设置了默认显示高宽，实际操作时，也可以不受它的限制，可以一直输入，无限换行。
3.默认在浏览器中可以拖动改变宽高。
####filedset标签
1.作用：为表单元素创建分组
2.格式：
```
<form>
<filedset>
<legend>用户信息<legend>
用户名：<input type="text" name="username" />
密 码：<input type="password" name="pwd" />
</filedset>
<input type="reset" />
<input type="submit" />
</form>
```
3.注意点：
1.该标签是容器级标签，属于行内块级元素，不独占一行
2.filedset 和 子标签 legend搭配使用，legend负责为该分组命名
3.默认产生效果为黑色边框的框体包围其内的表单元素
----
####embed标签
1.作用：支持flash
2.格式：
```
<embed src="" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
```
####video标签
1.作用：用于视频播放
2.格式：
```
<!-- 第一种形式 -->
<video src=""></video>
<!-- 第二种形式 -->
<video>
<source src="" type="video/mp4" />
<source src="" type="video/webm" />
<source src="" type="video/ogg" />
</video>
```
3.标签属性：
1.src:视频资源的路径
2.autoplay:自动播放
3.controls:显示控制条
4.poster:播放开始之前的海报/占位图片路径
5.loop:循环播放
6.muted:静音
7.width/height:视频宽/高，和img一样
8.preload:预加载视频
4.注意点：
1.video标签是文本级标签，行内块元素，在浏览器中默认不能独占一行
2.preload 和 autoplay属性相冲，两者只能取其一
3.由于视频非常重要，所以各大浏览器厂商都不支持别人的格式，目前市面上没有一个浏览器可以支持所有的视频格式，因此开发第二种写法就是为了提高兼容性
4.但是在老版本的浏览器不支持h5标签，也可以通过js的方式进行兼容处理。
----
####audio标签
1.作用：播放音频文件
2.格式：`<audio src=""></audio>`
3.注意点：
1.audio标签是文本级标签，行内块元素，在浏览器中默认不独占一行
2.标签属性和video标签一样，只是没有poster 和 width/height 属性
----
####details & summery标签
1.格式：
```
<details>
<summery>西瓜</summery>
西瓜是一种好吃的水果。
</details>
```
2.注意点：
1.这套组合标签是容器级标签，块级元素，默认在浏览器中独占一行
2.默认情况下：详情折叠显示，只显示概要
----
####marquee标签
1.作用：跑马灯效果
2.格式：`<marquee></marquee>`
3.标签属性：
1.direction:left/right/up/down 设置滚动方向
2.scrollamount: 设置滚动速度，值越大，速度越快
3.loop:设置滚动次数，默认-1，无限滚动
4.behavior:slide/alternate 设置滚动方式，slide滚动到边界停止，alternate来回滚动
4.注意点：
1.该标签是容器级标签，块级元素，默认在浏览器中独占一行
2.marquee不是W3C定义的标签，只是各大浏览器都支持的很好
----
####被废弃的标签
<b></b> blod
<i></i> italic
<u></u> underlined
<s></s> strikethrough
注意点：
1.因为这些标签没有语义，纯粹是为了表现样式而设计，所以被废弃。
2.在开发中，可以利用这些无语义的标签作为css钩子来绘制图形
在前端开发中显示某个图形的方案：
1.通过没有语义的标签配合CSS来绘制(特点: 适合简单图形)
2.通过字体图标来实现(适合复杂的图形, 并且传输的速度快)
3.通过图片来实现(适合复杂的图形, 但是传递的速度相对较慢)
----
####替代被废弃的标签 discarded
<strong></strong>:内容强调，表现为加粗
<em></em>：语气强调，表现为斜体
<ins></ins>：新增的内容，表现为加下划线修饰
<del></del>：删除的内容，表现为加删除线装饰
----
####字符实体
HTML对于空格/tab/回车不敏感，即多个空格也会当做一个空格处理
以及部分html语法关键字即保留字占用，因此引入字符实体
常用的字符实体：
一个空格
> >
< <
© 版权符号
----
