前端基础-1.HTML基础
0.概念知识
网站是网页的集合
web 的组成：结构（网页元素，图文声像音视频超链接，HTML）、表现（外观样式，CSS）、行为（交互，JavaScript）
前端代码——>浏览器：解析、渲染——>用户界面
浏览器通过渲染引擎渲染，每个浏览器不同：速度、性能、效果
web 标准：不同浏览器打开网页效果一样
结构、表现、行为 3 层分离
HTML 是标记语言，不是编程语言。网页中的固定结构是要通过特点的 HTML 标签进行描述
vsCode 的使用
1.双击打开软件。
⒉ 新建文件( Ctrl+N )。
3.保存( Ctrl +S ),注意移动要保存为.html 文件
4.Ctrl ＋加号键，Ctrl ＋减号键可以放大缩小视图 5.生成页面骨架结构：输入!按下 Tab 键 6.利用插件open in browser在浏览器中预览页面︰单击鼠标右键，在弹出出口中点击“Open In Default Browser”。
其他好用插件：auto rename tag，改标签名时会前后一起改
0.1 文档类型声明标签<!DOCTYPE>
<!DOCTYPE html>：当前页面采取的是 HTML5 版本来显示网页.
注意: 1.<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。 2.<!DOCTYPE>不是一个 HTML 标签，它就是文档类型声明标签。
0.2 语言种类 lang
用来定义当前文档显示的语言。
- en 定义语言为英语
- zh-CN 定义语言为中文
简单来说,定义为 en 就是英文网页,定义为 zh-CN 就是中文网页
其实对于文档显示来说，定义成 en 的文档也可以显示中文，定义成 zh-CN 的文档也可以显示英文
0.3 字符集 charset
<meta charset="UTF-8">：charset 常用的值有 ∶GB2312、BlG5、GBK 和 UTF-8，其中 UTF-8 也被称为万国码
1.网页结构
1.HTML（Hyper Text Mar-up Language，超文本标签语言），页面最大的根标签 2.头部部分：以<head>开始，以</head>结束；，必须要设置<title></title>标签为网页标题
主体部分：以<body>开始，以</body>结束
1.1 标签
标签及属性规则：以<标签名>表示标签的开始，以</标签名>表示标签的结束 ，如：
1 | <h3>标题3文本</h3> |
双标签/成对标签又称之为容器，如<head> </head>，一对标签中还可以嵌套其他的标签。例如，标题 3 文本标签<h3>中超链接标签<a>，表示为：
1 | <h3><a href="http://www.baidu.com">百度</a></h3> |
单标签不需要与之配对的结束标签，又称之为空标签 。例如<br>或<br/>
1.2 属性
标签属性写在开始标签内部
- 属性设置的一般格式为：
属性名＝"属性值"，属性值用双引号、单引号、不加引号都可以 - 一个标签可以有多个属性，用空格隔开，属性间没有顺序
1 | <a href="http://www.baidu.com" id="menu" class="c1">百度</a> |
标签名及属性名不区分大小写。
| 属性 | 用途 | 例子 |
|---|---|---|
| bgcolor | 设置背景颜色 | <body bgcolor="blue"> |
| background | 设置背景图片 | <body background="URL路径"> |
| text | 设置文本颜色 | <body text="blue"> |
| link | 设置超链接颜色 | <body link="blue"> |
| vlink | 设置已使用的超链接颜色 | <body vlink="blue"> |
| alink | 设置正在点击的超链接颜色 | <body alink="blue"> |
| leftmarging | 设置页面左边的空白 | <body leftmarging="50"> |
| topmarging | 设置页面上方的空白 | <body topmarging="30"> |
2.网页文本
1.注释标签
-
格式为
<!-- 注释内容 --> -
结束标签与开始标签可以不在一行上，长度不受限制。
-
浏览器不渲染注释，用户看不到
-
快捷键
Ctrl+/2.段落标签
-
基本格式为:
<p>文字</p> -
文本在一个段落中会根据浏览器窗口的大小自动换行，在新闻和文章的页面中，用于分段显示
-
段落和段落之间保有空隙
-
独占一行
3.强制换行标签
-
格式为:
文字<br /> -
走到 br 强制另起一行
-
br 只是简单另起一行，和段落不一样，中间无空隙
4.标题标签
-
基本格式为
<h#>标题文字</h#> -
#用来指定标题文字的大小，取1 ～ 6的整数值，取 1 时文字最大，取 6 时文字最小(只有 6 个) -
标题标签独占一行，就算
<h1>123</h1>XXX后面有东西，XXX 也会普通显示在下一行
<h1>123</h1>XXX选中标签里面的 h1，按快捷键CTRL+D，系统会自动选择最近的相同内容h1，继续按 D，会继续选择相同内容
5.水平线标签hr
<hr>单标签
注意看看 h 和 p 的高度
1 | <h1>1</h1> |
5.常用文字标签
是标签，不是属性
| 标记 | 用法 | 样式参考 |
|---|---|---|
<b>...</b> |
粗体 | 文字 |
<i>...</i> |
斜体 | 文字 |
<u>...</u>或<ins>...</ins> |
下划线(不推荐，会与超链接混淆) | 文字 |
<s>...</s>或<del>...</del> |
删除线 | |
<big>...</big> |
比正常字体大 | 文字 |
<samll>...</samll> |
比正常字体小 | |
<sup>...</sup> |
文本缩小后显示在上方 | 文字文字 |
<sub>...</sub> |
文本缩小后显示在下方 | 文字文字 |
<strong>...</strong> |
文本强调、突出显示加粗 | 文字 |
<em>...</em> |
文本强调、突出显示斜体 | 文字 |
1 | <body> |
html 默认空一格，不换行
3.图片 img
3.1 图片标签 img
img 是单标签
1.网页中使用的图片格式一般为JPEG 、GIF和PNG 3 种
2.HTML 使用<img>标签在网页中插入图片，其基本格式为
1 | <img src="路径/图片名" alt="描述" width="宽度" height="高度" /> |
- src是 img 标签的必须属性，用于指定图片的位置
- 图片+文字的上下布局可以考虑使用
h+img
<img>标签的常用属性如下：属性不分先后，用空格隔开
| 属性 | 值 | 描述 |
|---|---|---|
| src | URL | 必须，图片的来源 |
| alt | text | 必须，图片的替代文字 当图片加载失败时，才显示 alt 的文本 当图片加载成功时，不会显示 alt 的文本 |
| height | % px |
建议，图片高度 |
| width | % px |
建议，图片宽度 若只设置宽高中的一个，另一个会自动等比例缩放，图片不会变形 若同时设置了 width 和 height，若设置不当此时图片可能会变形 |
| title | text | 图片标题，鼠标悬停显示的文字 title 属性不仅仅可以用于图片标签，还可以用于其他标签 |
| hspace | px | 不推荐，图片左右的空白 |
| vspace | px | 不推荐，图片上下的空白 |
| border | PX | 不推荐，图片边框 |
| align | top bottom middle left right |
不推荐，根据周围文本来排列图片 |
1 | <img src="img.jpg" alt="我是XXX" title="嘿嘿嘿" width="500" border="15" /> |
3.2 路径
根目录：打开目录文件夹的第一层叫根目录，该 html 文件存放的这一层
相对路径
图片相对于 HTML 的位置
./表示当前路径，可省略
| 相对路径 | 符号 | 描述 |
|---|---|---|
| 同一级 | ./目标图片或者是目标图片 |
图片与 html 文件在同一层，<img src="baidu.png"/> |
| 下一级 | ./文件夹/文件或者是文件夹/文件 |
图片在 html 文件的下一层，<img src="文件夹/baidu.png"/>① 先知道在哪个文件夹 → 文件夹名字 ② 进入这个文件夹 → / ③ 此时看到目标文件 → 直接写目标文件名字 |
| 上一级 | ../ |
图片在 html 文件的上一层，<img src="../baidu.png"/> |
直接敲./或../后，会自动提示同级目录中有哪些文件，直接选择即可
绝对路径
从盘符开始，一般用\，与相对路径方向相反
- 盘符开头：`D:\day01\images\1.jpg
- 完整的网络地址：
https://www.itcast.cn/2018czgw/images/logo.gif（了解）
4.超级链接 a
1.HTML 使用超级链接与网络上的另一个文档相连。点击链接可以从一张页面跳转到另一张页面。 2.<a> 标签可用于创建超级链接，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
用 <a> 标签的 href (hyperlink reference 超级链接引用,href) 属性，创建指向另一个文档的链接
- 格式：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> - 开始标签
<a>和结束标签之间</a>的文字被作为超级链接来显示。 - a 标签默认文字有下划线
- a 标签从未点击过，默认文字显示蓝色
- a 标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
链接示例：
1 | <a href="http://www.xxx.com/">我的主页</a> |
4.1 绝对路径和相对路径
4.2 作为书签链接 a
书签标签<a>还可用于使用户“跳”到文档的某个部分
在链接文本的href 属性中，设置属性值为#+名字的形式，如<a href="#two">第2集</a>
找到目标位置标签，设置书签<a>的id 属性或 name 属性=刚才的名字(没有#号)，如<h3 id="two">第2集介绍<h3>
1 | <html> |
链接到其他文档的特定位置
Animals.htm
1 | <p> |
Animaldetails.htm
1 | <a name="Lion">狮子</a> |
4.3 属性
href 属性：属性值是跳转地址
外部链接：<a href="https : / / www .baidu.com/">百度一下</a>
内部链接：<a href="./目标网页.html">目标网页</ a>
target 属性：属性值是目标网页的打开形式
target=_self：默认值，在当前页面跳转。覆盖原本网页
target=_blank：在新窗口中跳转。保留原本网页
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
4.4 文件下载链接
如果链接到的文件不是 X.HTML 文件，而是作为下载的文件，其格式为
<a href="目标文件路径/下载文件名">链接源</a>
4.5 电子邮件链接
<a href=“mailto:xxx@yahoo.com”>请将您的疑问发送至David</A>
4.6 外部链接
连接到外部 html 文件
1 | <p> |
圣诞节当然少不了圣诞老人,然而圣经中并没有这号人物
5.表格 table
表格不是用来布局页面，而是用来展示数据。在网页中以行+列的单元格的方式整齐展示数据，如：学生成绩表
5.1 基本语法，tr、td、表头 th
<table></table>是用于定义表格的标签
<tr></tr>标签用于定义表格中的行,必须嵌套在 <table></table>标签中
<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
td 不是列的意思，字母 td 指表格数据(tabledata)，即数据单元格的内容
表头也是单元格，一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示
- th：表头单元格。表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示。书写在 tr 标签内部（用于替换 td 标签）
- caption：表格大标题。表示表格整体大标题，默认在表格整体顶部居中位置显示。书写在 table 标签内部
其他结构：让表格的内容结构分组，突出表格的不同部分，使语义更加清晰
- thead：表格头部
- tbody：表格主体
- tfoot：表格底部
表格结构标签内部用于包裹 tr 标签
表格的结构标签可以省略
5.2 属性
一般通过CSS来设置
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left 、center、 right |
规定表格相对周围元素的对齐方式。 |
| border | 数值或者""空 |
规定表格单元是否拥有边框，默认为""无边框 |
| cellpadding | px | 规定单元边沿与其内容之间的空白，默认 1 像素 |
| cellspacing | px | 规定单元格之间的空白，默认 2 像素 |
| width | px 或% | 规定表格的宽度 |
| bgcolor | 颜色值 RGB 或十六进制值 预定义色彩名称，red /blue/yellow 等 |
背景颜色，<TABLE bgcolor=颜色值> |
<TABLE width="200" height="100">表示一个长为 200 像素，宽为 100 像素的表格。
<TABLE width=20% height=10%>表示一个宽为窗口的 20%，高为窗口的 10%的表格。
5.3 例子
1.在 HTML 文档中，广泛使用表格来存放网页上的文本和图像
1 | <html> |
| 姓名 | 性别 | 分数 |
| Robert | M | 80 |
| Mary | F | 18 |
1 | <body> |
| 姓名 | 性别 | 分数 |
|---|---|---|
| Robert | M | 80 |
| Mary | F | 18 |
5.4 合并单元格
通过左上原则，确定保留谁删除谁
- 上下合并 → 只保留最上的，删除其他
- 左右合并 → 只保留最左的，删除其他
- 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
- 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
- 表格结构标签：table > thead > tr > td
① 跨列合并 COLSPAN
合并单元格（跨列）COLSPAN=n 属性表示跨多少列
1 | <head> |
| 第一学期 | 第二学期 | ||||
|---|---|---|---|---|---|
| 数学 | 科学 | 英语 | 数学 | 科学 | 英语 |
| 98 | 95 | 80 | 95 | 87 | 88 |
② 跨行合并 ROWSPAN
合并单元格（跨行）ROWSPAN=n 属性表示跨多少行
1 | <html> |
| 螺母 | 螺栓 | 锤子 | ||
|---|---|---|---|---|
| 第一季度 | 一月 | 2500 | 1000 | 1240 |
| 二月 | 3000 | 2500 | 4000 | |
| 三月 | 3200 | 1000 | 2400 |
6.多媒体
6.1.插入多媒体
在网页中加入多媒体最简单的方法就是利用<a>标签的 href 属性直接进行链接，其格式为
<a href="音频、视频或动画文件地址">链接源</a>
例如：<a href="rsc/1-same.mid">同一首歌</a>
或者：<a href="rsc/ybsp.wmv">WindowsMovieMaker样本视频</a>
又如：<a href="rsc/nmj.swf">鸟鸣涧</a>
6.2.在当前文档中播放音频
a.使用<embed>标签播放音频
使用 embed 标签嵌入音频文件的基本格式为：<embed src="音频文件地址" />
适当设置 embed 标签的属性，就可以实现网页背景音乐的效果，
如：<embed src="rsc/adls.mp3" hidden="true" autostart="true" loop="true"/>
b.使用<object> 标签播放音频
<object data="音频文件地址"></object>如：<object data="rsc/adls.mp3"></object>
c.使用 HTML5<audio>标签播放音频
<audio>标签主要用于播放声音文件或者音频流的标准。它支持 3 种音频格式，分别为Ogg、MP3和WAV。
常见属性：<audio src="./music.mp3" controls></ audio>
- src：音频路径
- controls：是否显示播放的控件
- autoplay：自动播放，有些浏览器不支持
- loop：循环播放
1 | <audio src="rsc/adls.mp3" controls="controls"> |
1 | <audio controls="controls"> |
6.3.在当前文档中播放视频
a.使用<embed> 标签播放视频
基本格式为:<embed width="视频宽度" height="视频高度" src="视频文件地址" />
如：<embed width="320" height="240" src="rsc/nmj.swf" />
b.用<object>标签嵌入视频文件
基本格式为<object width="视频宽度" height="视频高度" data="视频文件地址"></object>
如：<object width="320" height="240" data="rsc/nmj.swf"></object>
c.使用<video> 标签播放视频
<vedio> 标签主要是定义播放视频文件或者视频流的标准。它支持 3 种视频格式，分别为Ogg、MPEG4和WebM
常见属性：代码：<video src=" ./video.mp4" controls></video>
- src：视频路径
- controls：是否显示播放的控件
- autoplay：自动播放，谷歌浏览器中需配合 muted 实现静音播放
- loop：循环播放
1 | <video src="./video.mp4" controls autoplay muted></video> |
7.表单
定义表单的基本结构如下：
1 | <form action="“URL”" method="“get|post”name" ="“form_name”"> |
表单元素
| 标签 | 描述 |
|---|---|
<input> |
输入区 |
<textarea>...</textarea> |
多行文本框 |
<select>...</select> |
列表框 |
<label>...</label> |
文本标注 |
<fieldset>...</fieldset> |
表单分组 |
7.1 定义表单 form
<form>……</form>
- 定义一个表单，所有其他的表单元素标签（如 input、select 等）应写在
<form>…</form>标签内 - 主要属性：
- action：值为 URL，指向处理表单的程序，表单数据将被发送到此程序。
- method：设定数据的传送方式。get 或 post。
- name：设定表单的名字，在处理表单程序可能会用到。
1 | <form name="“form1”" action="“form_action.asp”" method="“get“">。。。</form> |
7.2 输入标签 input
<input >：输入标签,单标签- 用于制作各种表单输入区：如文本框、单选框、复选框、按钮等。在网页中显示收集用户信息的表单效果，如：登录页、注册页
- 主要属性：
- type：设置输入区的类型。属性值text、password、checkbox、radio、number、date等。input 标签可以通过
type属性值的不同，展示不同效果- text：文本框，用于输入单行文本
- password：密码框，用于输入密码
- radio：单选框，用于多选一
- checkbox：多选框，用于多选多
- file：文件选择，用于之后上传文件
- submit：提交按钮，用于提交
- reset：重置按钮，用于重置
- button：普通按钮，默认无功能，之后配合 js 添加功能
- name：输入区的名称，表单处理程序经常会用到
- value：对于不同的输入类型，用法不同
- disabled：用于设定输入元素不被输入和修改。无属性值。
- readonly：只读。无属性值
- type：设置输入区的类型。属性值text、password、checkbox、radio、number、date等。input 标签可以通过
- 对于不同的输入类型，value 属性的用法也不同：
- type=“text”, “password”- 定义输入区的初始值
- type=“button”, “reset”, “submit” - 定义按钮上的显示的文本
- type=“checkbox”, “radio”- 定义与输入相关联的值
- 注意：
<input type="checkbox">和<input type="radio">中必须设置 value 属性。
7.2.1 文本框 text
场景：在网页中显示输入单行文本的表单控件type=text
常用属性：placeholder。占位符。提示用户输入内容的文本
[[2.CSS 基础)。（拓展）value 属性和 name 属性作用介绍
value 属性：用户输入的内容，提交之后会发送给后端服务器
name 属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
后端接收到数据的格式是：name 的属性值 =value 的属性值
7.2.2 密码框 password
场景：在网页中显示输入密码的表单控件。type=password
常用属性：placeholder。占位符。提示用户输入内容的文本
type 后面跟的属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→ 文本框
7.2.3 单选 radio
场景：在网页中显示多选一的单选表单控件type=radio
常用属性：
- checked：默认选中
- name：分组。有相同 name 属性值的单选框为一组，一组中同时只能有一个被选中
- name 属性对于单选框有分组功能
单选按钮：
1 | <input type="“radio”" name="“sex”" value="“male”" /> 男 |
7.2.4 复选框
场景：在网页中显示多选的表单控件type=checkbox
常用属性：
- checked：默认选中
复选框用法：
1 | <input type="“checkbox”" name="“che”" value="“bike”" />自行车 |
同一组单选按钮和同一组复选框，要保持 name 属性值的一致，还可以设置 checked 属性
7.2.5 文件选择 file
场景：在网页中显示文件选择的表单控件。type=file
常用属性：multiple 多文件选择
7.2.6 按钮
场景：在网页中显示不同功能的按钮表单控件
input 的 type 属性值：
- submit：提交按钮。点击之后提交数据给后端服务器
- reset：重置按钮。点击之后恢复表单默认值
- button：普通按钮。默认无功能，之后配合 js 添加功能
如果需要实现以上按钮功能，需要配合 form 标签使用
提交按钮用法：
1 | <input type=“submit” value=“提交" > |
重置按钮用法：
1 | <input type=“reset” value=“重置" > |
7.3 按钮标签 button
场景：在网页中显示用户点击的按钮
button 的 type 属性值：同 input 的按钮系列
- submit：提交按钮。点击之后提交数据给后端服务器
- reset：重置按钮。点击之后恢复表单默认值
- button：普通按钮。默认无功能，之后配合 js 添加功能
PS：
谷歌浏览器中 button 默认是提交按钮
button 标签是双标签，更便于包裹其他内容：文字、图片等
7.4 下拉列表 select
<select>…</select>标签，用于制作下拉列表（选择栏），是下拉菜单的整体- 必须与
<option>…</option>标签结合使用，是下拉菜单的每一项- 被
<select>…</select>标签所包含，用于设置下拉列表的每个选项的内容。 - 主要属性：
- selected：用于设定下拉列表的初始选择状况，下拉菜单的默认选中
- value：若设置了 value 属性，则表单提交的内容即为 value 属性中设定的内容，而非下拉列表中显示的内容
- 被
7.5 多行文本框/文本域标签 textarea
<textarea>…</textarea>标签。在网页中提供可输入多行文本的表单控件- 开始标签和结束标签之间的文字将作为多行文本框的初值
主要属性：
- name ：多行文本框的名称
- rows：用于设定多行文本输入框的显示最大行数。
- cols：用于设定多行文本输入框的显示最大列数。
- wrap：用于设定转行方式。off / virtual / physical
- accesskey：用于设定一个激活文本框的快捷键，激活时要按住 Alt 键，再按设定的键即可
PS：
右下角可以拖拽改变大小
实际开发时针对于样式效果推荐用 CSS 设置
7.6 标注标签 label
<label>…</label>用于提升表单的可用性，方便操作- 将标签与指定的表单元素关联，当单击该 label 标签的时候，关联的元素会响应，方便鼠标用户使用
- label 标签常用于与checkbox 或 radio关联，以实现点击文字也能选中/取消 checkbox 或 radio
用法 ①：
- 使用 label 标签把内容（如：文本）包裹起来
- 在表单标签上添加 id 属性
- 在 label 标签的 for 属性中设置对应的 id 属性值
1 |
|
用法 ②：
- 直接使用 label 标签把内容（如：文本）和表单标签一起包裹起来
- 需要把 label 标签的 for 属性删除即可
1 |
|
1 | <label for="“c1”">性别</label> |
男
女
7.7 分组标签 fieldset
当表单元素很多时，可以将表单元素用<fieldset>标签进行分组，以免用户输入数据时眼花缭乱。而 legend 标签可以为分组设置标题。
1 | <fieldset> |
例子如下：
1 | <fieldset> |
8.列表标签
场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等
特点：按照行的方式，整齐显示内容
种类：无序列表、有序列表、自定义列表
无序列表最常用，有序列表偶尔用，自定义列表底部导航用
8.1 无序列表 ul
场景：在网页中表示一组无顺序之分的列表，如：新闻列表
UL：无序列表的整体，包裹 Li 标签
Li：无序列表的每一项，用于包含每一行的内容
显示特点：
- ul标签中只允许包含li标签
- li标签可以包含任意内容
- 列表的每一项前默认显示圆点标识，可以通过type属性来修改
- 默认/disc：实心圆点●
- circle：空心圆点○
- squre：方块■
1 | <ul> |
- 苹果
- 榴莲
- 橘子
- 火龙果
- 哈密瓜
8.2 有序列表 ol
场景：在网页中表示一组有顺序之分的列表，如：排行榜
显示特点： • 列表的每一项前默认显示序号标识
• OL 标签中只允许包含 li 标签
• li 标签可以包含任意内容
可以通过<ol>或<li>标签的type属性来设定5种不同的序号：“1”（阿拉伯数字）、“A”（大写英文字母）、“a”（小写英文字母）、“I”（大写罗马字母）和"i"（小写罗马字母）。
1 | <ol> |
- 张三：100分
- 李四：85分
- 王五：72分
8.3 自定义列表
场景：在网页的底部导航中通常会使用自定义列表实现
dL：自定义列表的整体，只允许包裹 dt/dd 标签
dt：自定义列表的主题
dd：自定义列表针对每项主题的每项内容。dd 前会默认显示缩进效果。
dt/dd 标签可以包含任意内容
1 | <dl> |
- 帮助中心
- 账户管理
- 订单指南
- 登录操作
- 账号
- 密码
8.特殊字符
字符失效：文本中含有特殊字符，如空格、<等符号导致把该符号是别为代码，
字符合并：在 html 代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
在网页中展示特殊符号效果时，需要使用字符实体替代
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 和 。 | 空格 | |
  |
| <和< | 小于号 | < |
< |
| >和> | 大于号 | > |
> |
| &和& | 和号 | & |
& |
| "和" | 引号 | " |
" |
| '和' | 撇号 | 'IE 不支持 |
' |
| ¢和¢ | 分 | ¢ |
¢ |
| £和£ | 磅 | £ |
£ |
| ¥和¥ | 日元 | ¥ |
¥ |
| € | 欧元 | € |
|
| § | 小节 | § |
|
| © | 版权 | © |
|
| ® | 注册商标 | ® |
|
| ° | 摄氏度 | ° |
|
| × | 乘号 | × |
|
| ÷ | 除号 | ÷ |
|
| ² | 平方 | ² |
|
| ³ | 立方 | ³ |
8.4属性
type：标签的样式类型
- disc、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha、none
image：设置用作列表项标签的图
- URL
position：声明列表标签相对于列表项内容的位置
- inside、outside
9.布局标签
9.1 没有语义的布局标签 div 和 span
div 标签：一行只显示一个（独占一行）
span 标签：一行可以显示多个
9.2 有语义的布局标签
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
以上标签显示特点和 div 一致，但是比 div 多了不同的语义
