HTML 基础概念
HTML 基础概念
标签与元素
在上一节介绍中我们了解了 HTML 是一种用于定义内容结构的标记语言，它由一系列的 元素 组成，这些元素可以用来包围不同部分的内容，在页面上以 标签 的形式呈现。
标签：在 HTML 中，标签 用来创建一个 元素。HTML 元素的名称是在尖括号中使用的名称。
元素：元素是网页的一部分，在 XML 和 HTML 中，一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含。一个典型的元素包括一个具有一些属性的开始标签，中间的文本内容和一个结束标签。
元素 和 标签 不是同一种概念。代码中的标签用来标识元素的开始或结束，而元素是文档对象模型（DOM）中的一部分，文档对象模型会被浏览器渲染、展示为页面。
元素的结构
我们会以段落标签 <p> 为例，来了解元素的结构
元素的组成
<p class='content'> Hello World! </p>
- 开始标签（Opening tag）包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签（Closing tag）与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。
- 内容（Content）元素的内容，本例中就是所输入的文本（‘ this is a paragraph ’）。
- 元素（Element）开始标签、结束标签与内容相结合，便是一个完整的元素。
元素的属性
<p class='content'>...</p>
其中的class便是 <p> 标签的属性，属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，class 是属性名称，content 是属性的值。class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。
元素的属性应该包含
- 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
- 属性的名称，并接上一个等号。
- 由引号所包围的属性值。
不包含 ASCII 空格（以及 " ' ` = < > ）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。
关于 HTML 元素的属性还有很多，详情请参考 MDN。
嵌套元素
也可以将一个元素置于其他元素之中 —— 称作 嵌套。例如以下代码
<p> this is an <strong> example </strong></p>
在嵌套元素时，必须保证元素嵌套次序正确上面的代码首先使用 <p> 标签，然后是 <strong> 标签，因此要先结束 <strong> 标签，最后再结束 <p> 标签。
在写嵌套元素时，标签闭合的顺序应当是先写的标签最后闭合，后写的标签最先闭合。
<p> this is an <strong> example </p></strong>
这样的写法是不对的，没有按照正确的顺序将标签闭合。
空元素
不包含任何内容的元素称为空元素。比如 <input> 元素
<input type=text id=test-input>
上面的 <input> 元素包含两个属性，但是并没有 </input> 结束标签，元素里也没有内容。这是因为空元素不需要通过内容来产生效果，它的作用是向其所在的位置展示其他内容。
像 <input> 这样的空元素在 HTML 中还有许多，我们将会在接下来的内容中学习到他们。
在 HTML 中，无需在一个空元素的标签末尾添加 /。但如同上面 <input> 元素的例子。然而，这也是一种有效的语法，当你希望你的 HTML 是有效的 XML 时，这么做也没问题。
元素的分类
在 HTML 中元素大多数都是“块级”元素或行内元素。按照元素在浏览器页面中的表现，大体可以将元素分为以下两类
块级元素
块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”。
行内元素
行内元素只占据它对应标签的边框所包含的空间。
块级元素与行内元素的区别
| 分类 | 格式 | 内容 |
|---|---|---|
| 行内元素 | 默认情况下，行内元素不会以新行开始 | 一般情况下，行内元素只能包含数据和其他行内元素 |
| 块级元素 | 默认情况下，块级元素会新起一行 | 一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构 |
常见的块级元素与行内元素
块级元素列表
<address>
联系方式信息
<article>
文章内容
<aside>
伴随内容
<blockquote>
块引用
<dd>
定义列表中定义条目描述
<div>
文档分区
<dl>
定义列表
<fieldset>
表单元素分组
<figcaption>
图文信息组标题
<figure>
图文信息组
<footer>
区段尾或页尾
<form>
表单
<header>
区段头或页头
<hgroup>
标题组
<hr>
水平分割线
<ol>
有序列表
<p>
段落、行
<pre>
预格式化文本
<section>
一个页面区段
<table>
表格
<ul>
无序列表
行内元素列表
<b>
字体加粗显示
<big>
字体加大显示（已废弃）
<i>
术语文本元素，将内容以斜体显示
<small>
字体变小显示（表示边注释和附属细则，包括版权和法律文本）
<tt>
电报文本元素（已废弃）
<abbr>
缩写元素
<acronym>
缩写元素（已废弃）
<cite>
表示引用，引用标签
<code>
呈现一段计算机代码
<dfn>
定义元素，表示术语的一个定义
<em>
着重元素，将内容以斜体显示
<kbd>
键盘输入元素，表示用户输入
<strong>
强调元素，表示文本十分重要，将内容以粗体显示
<samp>
标识计算机程序输出，类似与<code>元素
<var>
表示变量的元素，将内容以斜体显示
<a>
锚元素
<bdo>
双向文本替代元素，可改变内容书写的方向
<br>
换行元素，生成一个换行（回车）符号
<img>
图像嵌入元素，将一张图像嵌入文档
<map>
定义一个图像映射 (一个可点击的链接区域),通常与 <area> 元素一起使用
<object>
嵌入对象元素，表示引入一个外部资源
<q>
引用标签，表示一个封闭的并且是短的行内引用的文本
<script>
嵌入或引用可执行脚本
<span>
空元素，没有任何特殊语义
<sub>
下标元素
<sup>
上标元素
<button>
按钮元素
<input>
输入（表单输入）元素
<label>
标签元素，表示用户界面中某个元素的说明
<select>
表示一个提供选项菜单的控件
<textarea>
文本区域元素
怪异模式和标准模式
历史背景
在很久以前的网络上，页面通常有两种版本：
- 网景（Netscape）的 Navigator 版本
- 微软（Microsoft）的 Internet Explorer（IE） 版本
后来，当 W3C 创立网络标准后，为了兼容已有的网站，浏览器不能直接弃用这些标准。因此，浏览器采用了两种模式，用以把能符合新规范的网站和老旧网站区分开。
浏览器的排版模式
目前浏览器的排版引擎使用三种模式：
- 怪异模式（Quirks mode）：排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为（为了支持在网络标准被广泛采用前，就已经建好的网站，这么做是必要的）
- 接近标准模式（Almost standards mode）：行为即由 HTML 与 CSS 的规范描述的行为
- 标准模式（Standards mode）：只有少数的怪异行为被实现
如何确定浏览器使用了哪种排版模式
既然浏览器的排版引擎所使用的排版模式有3种，那么如何确定浏览器具体使用的是哪一种排版模式呢？对 HTML 文件来说，浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>Hello World !</body>
</html>
上面代码中的 <!DOCTYPE html>，是所有可用的 DOCTYPE 之中最简单的，也是 HTML5 所推荐的。
<!DOCTYPE html> 唯一的作用是启用标准模式。请确定你把 DOCTYPE 正确地置于 HTML 文件的顶端。如果有任何其他字符位于 DOCTYPE 之前，比如注释或 XML 声明，会导致 Internet Explorer 9 或更早期的浏览器触发怪异模式。
请不要在页面中去使用其他更复杂的 DOCTYPE。如果你使用其他的 DOCTYPE，你可能会面临触发接近标准模式或者怪异模式的风险，这可能会使你的页面布局以及 CSS 的解析出现意想不到的问题。
以上数据均来自 MDN 。有关浏览器排版模式的详细内容请参考 浏览器如何选择各种模式