文章标题
文章内容
章节标签和内容标签
阮一峰老师的 HTML 教程
本文属于笔记性质，内容大部分出于上述教程，但会对内容进行组织，精简。
范围：五、六、七章节。
HTML5 标签
标签的意义在于只需要阅读 HTML 源码就能了解网页的大致结构。
HTML 标签的名称都带有语义化（semantic），所以在使用时尽量选择符合语义的标签。
语义良好的标签，不仅对开发者友好，又对计算机友好。
页眉
HTML5 标签列表：目前大约有 110 个标签。
记住所有的标签是不现实的，因此应该优先学习其中一些比较重要的标签和标签上面的属性。
本文记录一些常用的一些标签，其余一小部分标签会合为一篇或多篇，至于剩余部分的不重要的标签，则不记录。
标签的默认样式
浏览器会给标签设置一套默认样式，这样的话，没有 CSS， 浏览器渲染出的文本内容也能够正常的显示，而且能够区分出内容的重要程度，但是浏览器的默认样式实在是太丑了，而且不同的浏览器的默认样式还不统一，因此为了解决这种情况，出现了两种办法：
- CSS reset： 完全重置，将所有默认样式清除，有很多版本，自行搜索。
- CSS normalize： 使所有浏览器的默认样式统一。
章节标签
章节标签主要是用来表示网页的层次结构，当然这不是严格的进行划分，但大致上是这样一种情况。
常用的章节标签有如下这些：
| 标签名 | 含义 | 标签名 | 含义 |
|---|---|---|---|
header |
头部 | footer |
尾部 |
main |
主体 | aside |
旁支 |
section |
章节 | article |
文章 |
nav |
导航 | hgroup |
标题包含块 |
p |
段落 | h1-h6 |
标题 |
div |
划分块（无语义） |
header
既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。
一个页面可以有多个 header，但它们属于不同的场景中，也即一个具体的场景内只能包含一个，如网页的页眉就只能有一个。
注意： header 标签内不能嵌套另一个 header 或者 footer，但是并不强制。
<body>
<header>header>
<main>
<article>
<header>
<h2>文章标题h2>
<p>张三，发表于2010年1月1日p>
header>
article>
<section>
<header>header>
section>
main>
<footer>footer>
body>
footer
表示网页、文章或者章节的尾部。如果用于整张网页的尾部，通常会包含版权或其他相关信息。
用法和 header 一样，但一个表示头部，一个表示尾部。
<body>
<footer>
<p>© 2018 xxx 公司p>
footer>
body>
main
表示页面的主体内容，一个页面只能有一个 main 标签。该标签属于顶层标签，不能放置在其他的章节标签之中。
页眉
文章
article
表示页面里面一段完整的内容，通常表示一篇文章或者帖子。一张网页里面可以包含一个或篇文章。
文章标题
文章内容
aside
用来放置与网页或文章主要内容相关的间接部分，因此它有网页级别和文章级别。
主体内容
第一段
section
表示一个含有主题的独立部分，称之为章节。一个 article 标签可以包含有多个 section，当然一个 section 标签也能包含多个 article，这取决于当前页面的含义。
section 很适合做幻灯片展示，一个 section 代表一个幻灯片。
文章标题
第一章
...
第二章
...
nav
用来放置页面或者文章的导航信息，所以它也有页面级别和文章级别。通常 nav 标签会放在 header 里面，当然没有强制要求。
h1-h6
h1 是最高级别的标题，h6是最低级别的标题。
标题的使用要点：
- 浏览器默认一级标签字号最大，依次递减。
- 一级标题下可有多个二级标题，以此类推。
- 标题不能越级，一级标题下，直接三级标题，以此类推。
- 一般只用到前三级标签。
p
代表文章的一个段落，任何想以段落显示的内容，比如图片或者表单，都可以放进 p 标签中。
hello wrold
hgroup
如果主标题包含多级标题（如副标题），那么可以使用 hgroup 标签。
该标签使用较少，而且只能包含 h1-h6 标签。
奇诺之旅
-the Beautiful World-
div
这是一个通用标签，表示一个区块（division），它没有语义，如果网页需要一个块级元素容器，有没有其他合适的标签，那就能够使用这个标签。而且通常作为 CSS 样式的钩子，进行样式的指定。
狗子，你变了！
内容标签
内容标签用于表示网页的内容，当然划分也不是那么严格。
常用的内容标签有下面这些：
- span
- ol、ul、li
- dl、 dt、dd
- hr、br
- em、strong
- pre、code
- q、cite、blockquote
span
和 div 类似，这也是一个通用标签，没有语义，并且是内联标签（不会产生换行）。
这是一只狗子
ol、ul、li
-
ol：有序列表容器（ordered list），列表项的顺序具有一定的意义，该标签有三个属性：
- reversed： 顺序反过来
- start：属性值是整数，表示从第几开始。
- type： 显示的样式类型，比如阿拉伯数字，罗马数字等。
-
ul: 无序列表容器（unordered list），列表项的顺序无意义。
-
li: 列表项（list item）。
ol 标签内部 可以具有 li 标签， 而且还可以嵌套 ol 或者 ul 标签。
ul 标签内部可以具有 li 标签， 同样可以嵌套 ul 或者 ol 标签。
li 标签用于 ol 或 li 标签之中，表示列表项。
dl、 dt、dd
- dl： 一组术语的列表（description list）
- dt： 术语名（description term）
- dd: 术语解释（description detail）
dl 类似于 ol 或者 ul， 但是它的列表项的信息更加的详细 。
hr、br
- hr： 水平分割线，用于手动分割两个不同的主题，浏览器默认渲染为一条水平线，该标签是自闭合标签。现在很少使用，一般用 CSS 样式制作出水平线效果。
- br:因为 HTML 的渲染规则，直接敲击回车，回车是会转换成空格，所以该标签能够让网页产生换行效果，该标签也是自闭合标签。
em、strong
- em：表示语气的强调（emphasize），浏览器的默认渲染样式是斜体。
- strong： 表示内容本身的重要性， 浏览器默认渲染样式为粗体。
pre、code
-
pre: 保留原来的格式（preformatted），浏览器会保留该标签内部原始的换行和空格，并且默认以等宽字体显示标签内容。
注意：HTML 的其他标签在pre标签也还是起作用的，这个标签只是保留了空格和换行。 -
code: 表示标签内容是计算机代码，浏览器默认以等宽字体显示。
注意：code标签本身仅代表一行代码，如果想要多行代码，通常与pre标签连用。
q、cite、blockquote
- q：表示引用，不过他是内联标签，即不会自动换行，浏览器的默认样式是前后加上双引号。
- blockquote：也表示引用，不过他是块级标签，浏览器默认样式是缩进成块。
- cite: 表示引言出处或者作者，浏览器默认样式是斜体
q 和 blockquote 都具有 cite 属性（不是标签），属性值是网址，表示引用的来源，一般不显示在网页上。
