web前端知识体系之基础知识 - HTML元素和语言

1. 文档元信息

元信息，是指描述自身的信息，元信息类标签，就是 HTML 用于描述文档自身的一类标签，它们一般出如今 head 标签中，通常都不会在页面被显示出来（与此相对，其它标签，如语义类标签，描述的是业务）。

1.1 head

head 标签自己并不携带任何信息，它主要是做为盛放其它语义类标签的容器使用。

head 标签规定了自身必须是 html 标签中的第一个标签，它的内容必须包含一个 title，而且最多只能包含一个 base。若是文档做为 iframe，或者有其余方式指定了文档标题时，能够容许不包含 title 标签。

1.2 title

title 标签表示文档的标题。

1.3 meta

meta 标签是一组键值对，它是一种通用的元信息表示标签。

在 head 中能够出现任意多个 meta 标签。通常的 meta 标签由 name 和 content 两个属性来定义。name 表示元信息的名，content 则用于表示元信息的值。

这里的 name 是一种比较自由的约定，http 标准规定了一些 name 做为你们使用的共识，也鼓励你们发明本身的 name 来使用。

除了基本用法，meta 标签还有一些变体，主要用于简化书写方式或者声明自动化行为。

• 具备 charset 属性的 meta

从 HTML5 开始，为了简化写法，meta 标签新增了 charset 属性。添加了 charset 属性的 meta 标签无需再有 name 和 content。

<meta charset="UTF-8" />
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和须要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

• 具备 http-equiv 属性的 meta

具备 http-equiv 属性的 meta 标签，表示执行一个命令，这样的 meta 标签能够不须要 name 属性了。

例如，下面一段代码，至关于添加了 content-type 这个 http 头，而且指定了 http 编码方式。

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

除了 content-type，还有如下几种命令：

• content-language 指定内容的语言；
• default-style 指定默认样式表；
• refresh 刷新；
• set-cookie 模拟 http 头 set-cookie，设置 cookie；
• x-ua-compatible 模拟 http 头 x-ua-compatible，声明 ua 兼容性；
• content-security-policy 模拟 http 头 content-security-policy，声明内容安全策略。
• name 为 viewport 的 meta

实际上，meta 标签能够被自由定义，只要写入和读取的双方约定好 name 和 content 的格式就能够了。

name 为 viewport 的 meta，它没有在 HTML 标准中定义，倒是移动端开发的事实标准。

这类 meta 的 name 属性为 viewport，它的 content 是一个复杂结构，是用逗号分隔的键值对，键值对的格式是 key=value。

例如：

<meta name="viewport" content="width=500, initial-scale=1" />

这里只指定了两个属性，宽度和缩放，实际上 viewport 能控制的更多，它能表示的所有属性以下：

• width：页面宽度，能够取值具体的数字，也能够是 device-width，表示跟设备宽度相等。
• height：页面高度，能够取值具体的数字，也能够是 device-height，表示跟设备高度相等。
• initial-scale：初始缩放比例。
• minimum-scale：最小缩放比例。
• maximum-scale：最大缩放比例。
• user-scalable：是否容许用户缩放。

对于已经作好了移动端适配的网页，应该把用户缩放功能禁止掉，宽度设为设备宽度，一个标准的 meta 以下：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

• 其它预约义的 meta

在 HTML 标准中，还定义了一批 meta 标签的 name，能够视为一种有约定的 meta。

• application-name：若是页面是 Web application，用这个标签表示应用名称。
• author: 页面做者。
• description：页面描述，这个属性可能被用于搜索引擎或者其它场合。
• generator: 生成页面所使用的工具，主要用于可视化编辑器，若是是手写 HTML 的网页，不须要加这个 meta。
• keywords: 页面关键字，对于 SEO 场景很是关键。
• referrer: 跳转策略，是一种安全考量。
• theme-color: 页面风格颜色，实际并不会影响页面，可是浏览器可能据此调整页面以外的 UI（如窗口边框或者 tab 的颜色）。

2. 语义相关内容

2.1 语义化标签优势

• 语义类标签对开发者更为友好，使用语义类标签加强了可读性，即使是在没有 CSS 的时候，开发者也可以清晰地看出网页的结构，也更为便于团队的开发和维护。
• 除了对人类友好以外，语义类标签也十分适宜机器阅读。它的文字表现力丰富，更适合搜索引擎检索（SEO），也可让搜索引擎爬虫更好地获取到更多有效信息，有效提高网页的搜索量，而且语义类还能够支持读屏软件，根据文章能够自动生成目录等等。

2.2 经常使用语义化标签

• aside：导航性质的工具内容，例如左侧侧边栏
• article：文章主体
• hgroup,h1,h2：hgroup 标签是标题组，h1 标签是一级标题，h2 标签是二级标题
• abbr：缩写内容
• hr：横向分割线，表示故事走向的转变或者话题的转变
• p：普通段落
• strong：黑体加粗，表示这个词很重要
• blockquote,q,cite：blockquote 标签表示段落级引述内容，q 标签表示行内的引述内容，cite 标签表示引述的做品名
• time：日期内容
• figure,figcaption：figure 标签用于表示与主文章相关的图像、照片等流内容，figcaption 标签表示内容的标题
• dfn：用来包裹被定义的名词
• nav,ol,ul：nav 标签是导航、目录内容，ol 标签表示有序列表，ul 标签表示无序列表
• pre,samp,code：pre 标签表示这部份内容是预先排版过的，不须要浏览器进行排版，smap 标签用于计算机程序的示例输出展现，code 标签用来包裹计算机程序代码。

2.3 适合使用语义化的场景

• 天然语言表达能力的补充；
• 文章标题摘要；
• 适合机器阅读的总体结构。

3. 连接

连接是 HTML 中的一种机制，它是 HTML 文档和其它文档或者资源的链接关系，在 HTML 中，连接有两种类型。一种是超连接型标签，一种是外部资源连接。

连接的家族中有 a 标签、area 标签和 link 标签。

3.1 link 标签

link 标签也是元信息的一种，在不少时候，它也是不会对浏览器产生任何效果的，这也是不少人会忽略 link 标签学习的缘由。

link 标签会生成一个连接，它可能生成超连接，也可能生成外部资源连接。

一些 link 标签会生成超连接，这些超连接又不会像 a 标签那样显示在网页中。这就是超连接型的 link 标签。

这意味着多数浏览器中，这些 link 标签不产生任何做用。可是，这些 link 标签可以被搜索引擎和一些浏览器插件识别，从而产生关键性做用。

好比，到页面 RSS 的 link 标签，可以被浏览器的 RSS 订阅插件识别，提示用户当前页面是能够 RSS 订阅的。

另一些 link 标签则会把外部的资源连接到文档中，也就是说，会实际下载这些资源，而且作出一些处理，好比咱们常见的用 link 标签引入样式表。

除了元信息的用法以外，多数外部资源型的 link 标签还可以被放在 body 中使用，从而起到把外部资源连接进文档的做用。

link 标签的连接类型主要经过 rel 属性来区分，其代码相似下面：

<link rel="xx" ... />

3.1.1 超连接类 link 标签

超连接型 link 标签是一种被动型连接，在用户不操做的状况下，它们不会被主动下载。

link 标签具备特定的 rel 属性，会成为特定类型的 link 标签。产生超连接的 link 标签包括：具备 rel=“canonical” 的 link、具备 rel=“alternate”的 link、具备 rel=“prev” rel=“next”的 link 等等。

• canonical 型 link

<link rel="canonical" href="..." />

这个标签提示页面它的主 URL，在网站中经常有多个 URL 指向同一页面的状况，搜索引擎访问这类页面时会去掉重复的页面，这个 link 会提示搜索引擎保留哪个 URL。

• alternate 型 link

<link rel="alternate" href="..." />

这个标签提示页面它的变形形式，这个所谓的变形多是当前页面内容的不一样格式、不一样语言或者为不一样的设备设计的版本，这种 link 一般也是提供给搜索引擎来使用的。

alternate 型的 link 的一个典型应用场景是，页面提供 rss 订阅时，能够用这样的 link 来引入：

<link rel="alternate" type="application/rss+xml" title="RSS" href="..." />

除了搜索引擎外，不少浏览器插件都能识别这样的 link。

• prev 型 link 和 next 型 link

在互联网应用中，不少网页都属于一个序列，好比分页浏览的场景，或者图片展现的场景，每一个网页是序列中的一个项。

这种时候，就适合使用 prev 和 next 型的 link 标签，来告诉搜索引擎或者浏览器它的前一项和后一项，这有助于页面的批量展现。

由于 next 型 link 告诉浏览器“这是极可能访问的下一个页面”，HTML 标准还建议对 next 型 link 作预处理。

• 其它超连接类的 link

其它超连接类 link 标签都表示一个跟当前文档相关联的信息，能够把这样的 link 标签视为一种带连接功能的 meta 标签。

• rel=“author” 连接到本页面的做者，通常是 mailto: 协议
• rel=“help” 连接到本页面的帮助页
• rel=“license” 连接到本页面的版权信息页
• rel=“search” 连接到本页面的搜索页面（通常是站内提供搜索时使用）

3.1.2 外部资源类 link 标签

外部资源型 link 标签会被主动下载，而且根据 rel 类型作不一样的处理。外部资源型的标签包括：具备 icon 型的 link、预处理类 link、modulepreload 型的 link、stylesheet、pingback。下面咱们来一一介绍它们。

• icon 型 link

这类连接表示页面的 icon。多数浏览器会读取 icon 型 link，而且把页面的 icon 展现出来。

icon 型 link 是惟一一个外部资源类的元信息 link，其它元信息类 link 都是超连接，这意味着，icon 型 link 中的图标地址默认会被浏览器下载和使用。

若是没有指定这样的 link，多数浏览器会使用域名根目录下的 favicon.ico，即便它并不存在，因此从性能的角度考虑，建议必定要保证页面中有 icon 型的 link。

只有 icon 型 link 有有效的 sizes 属性，HTML 标准容许一个页面出现多个 icon 型 link，而且用 sizes 指定它适合的 icon 尺寸。

• 预处理类 link

咱们都知道，导航到一个网站须要通过 dns 查询域名、创建链接、传输数据、加载进内存和渲染等一系列的步骤。

预处理类 link 标签就是容许咱们控制浏览器，提早针对一些资源去作这些操做，以提升性能（固然若是你乱用的话，性能反而更差）。

下面我来列一下这些 link 类型：

• dns-prefetch 型 link 提早对一个域名作 dns 查询，这样的 link 里面的 href 实际上只有域名有意义。
• preconnect 型 link 提早对一个服务器创建 tcp 链接。
• prefetch 型 link 提早取 href 指定的 url 的内容。
• preload 型 link 提早加载 href 指定的 url。
• prerender 型 link 提早渲染 href 指定的 url。
• modulepreload 型的 link

modulepreload 型 link 的做用是预先加载一个 JavaScript 的模块。这能够保证 JS 模块没必要等到执行时才加载。

这里的所谓加载，是指完成下载并放入内存，并不会执行对应的 JavaScript。

<link rel="modulepreload" href="app.js">
  <link rel="modulepreload" href="helpers.js">
  <link rel="modulepreload" href="irc.js">
  <link rel="modulepreload" href="fog-machine.js">
  <script type="module" src="app.js">

这个例子来自 HTML 标准，咱们假设 app.js 中有 import “irc” 和 import “fog-machine”, 而 irc.js 中有 import “helpers”。这段代码使用 moduleload 型 link 来预加载了四个 js 模块。

尽管，单独使用 script 标签引用 app.js 也能够正常工做，可是咱们经过加入对四个 JS 文件的 link 标签，使得四个 JS 文件有机会被并行地下载，这样提升了性能。

• stylesheet 型 link

样式表大概是全部人最熟悉的 link 标签用法了。它的样子是下面这样的。

<link rel="stylesheet" href="xxx.css" type="text/css" />

基本用法是从一个 CSS 文件建立一个样式表。这里 type 属性能够没有，若是有，必须是”text/css”才会生效。

rel 前能够加上 alternate，成为 rel=“alternate stylesheet”，此时必须再指定 title 属性。

这样能够为页面建立一份变体样式，一些浏览器，如 Firefox 3.0，支持从浏览器菜单中切换这些样式，固然了，大部分浏览器不支持这个功能，因此仅仅从语义的角度了解一下这种用法便可。

• pingback 型 link

这样的 link 表示本网页被引用时，应该使用的 pingback 地址，这个机制是一份独立的标准，遵照 pingback 协议的网站在引用本页面时，会向这个 pingback url 发送一个消息。

3.2 a 标签

a 标签其实同时充当了连接和目标点的角色，当 a 标签有 href 属性时，它是连接，当它有 name 时，它是连接的目标。

具备 href 的 a 标签跟一些 link 同样，会产生超连接，也就是在用户不操做的状况下，它们不会被主动下载的被动型连接。

重点的内容是，a 标签也能够有 rel 属性，咱们来简单了解一下，首先是跟 link 相同的一些 rel，包括下面的几种。

• alternate
• author
• help
• license
• next
• prev
• search

这些跟 link 语义彻底一致，不一样的是，a 标签产生的连接是会实际显示在网页中的，而 link 标签仅仅是元信息。

除了这些以外，a 标签独有的 rel 类型：

• tag 表示本网页所属的标签；
• bookmark 到上级章节的连接。

a 标签还有一些辅助的 rel 类型，用于提示浏览器或者搜索引擎作一些处理：

• nofollow 此连接不会被搜索引擎索引；
• noopener 此连接打开的网页没法使用 opener 来得到当前页面的窗口；
• noreferrer 此连接打开的网页没法使用 referrer 来得到当前页面的 url；
• opener 打开的网页可使用 window.opener 来访问当前页面的 window 对象，这是 a 标签的默认行为。

a 标签基本解决了在页面中插入文字型和整张图片超连接的须要，可是若是咱们想要在图片的某个区域产生超连接，那么就要用到另外一种标签了——area 标签。

3.3 area 标签

area 标签与 a 标签很是类似，不一样的是，它不是文本型的连接，而是区域型的连接。

area 标签支持的 rel 与 a 彻底同样，这里就很少说了。

area 是整个 html 规则中惟一支持非矩形热区的标签，它的 shape 属性支持三种类型。

• 圆形：circle 或者 circ，coords 支持三个值，分别表示中心点的 x,y 坐标和圆形半径 r。
• 矩形：rect 或者 rectangle，coords 支持两个值，分别表示两个对角顶点 x1，y1 和 x2，y2。
• 多边形：poly 或者 polygon，coords 至少包括 6 个值，表示多边形的各个顶点。

由于 area 设计的时间较早，因此不支持含有各类曲线的路径，可是它也是惟一一个支持了非矩形触发区域的元素，因此，对于一些效果而言，area 是必不可少的。

area 必须跟 img 和 map 标签配合使用。使用示例以下（例子来自 html 标准）。

<p>
 Please select a shape:
 <img src="shapes.png" usemap="#shapes"
      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
 <map name="shapes">
  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
        href="yellow.html" alt="Yellow star.">
 </map>
</p>

这个例子展现了在一张图片上画热区而且产生连接，分别使用了矩形、圆形和多边形三种 area。

4. 替换型元素

替换型元素是把文件的内容引入，替换掉自身位置的一类标签。

凡是替换型元素，都是使用 src 属性来引用文件的，连接型元素是使用 href 标签的。

script、img、picture、audio、video、iframe 几个标签均能产生替换型元素。

4.1 script

咱们之因此选择先讲解 script 标签，是由于 script 标签是为数很少的既能够做为替换型标签，又能够不做为替换型标签的元素。

咱们先来看看 script 标签的两种用法：

<script type="text/javascript">
  console.log('Hello world!');
</script>

<script type="text/javascript" src="my.js"></script>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和须要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

这个例子中，咱们展现了两种 script 标签的写法，一种是直接把脚本代码写在 script 标签之间，另外一种是把代码放到独立的 js 文件中，用 src 属性引入。

这两种写法是等效的。我想这种等效性能够帮助你理解替换型元素的“替换”是怎么一回事。

4.2 img

img 标签的做用是引入一张图片。这个标签是没有办法像 script 标签那样做为非替换型标签来使用的，它必须有 src 属性才有意义。

若是必定不想要引入独立文件，可使用 data uri，咱们来看个实际的例子：

<img src='data:image/svg+xml;charset=utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></svg>' />

这个例子中咱们使用了 data uri 做为图片的 src，这样，并无产生独立的文件，客观上作到了和内联相同的结果，这是一个经常使用的技巧。

img 标签可使用 width 和 height 指定宽度和高度。也能够只指定其中之一。当咱们只指定宽度，图片会被等比例缩放了。这个特性很是重要，适用于那种咱们既要限制图片尺寸，又要保持图片比例的场景。若是从性能的角度考虑，建议你同时给出图片的宽高，由于替换型元素加载完文件后，若是尺寸发生变换，会触发重排版。

此处要重点提到一个属性，alt 属性，这个属性很难被普通用户感知，对于视障用户很是重要，能够绝不夸张地讲，给 img 加上 alt 属性，已经作完了可访问性的一半。

img 标签还有一组重要的属性，那就是 srcset 和 sizes，它们是 src 属性的升级版（因此咱们前面讲 img 标签必须有 src 属性，这是不严谨的说法）。

这两个属性的做用是在不一样的屏幕大小和特性下，使用不一样的图片源。下面一个例子也来自 MDN，它展现了 srcset 和 sizes 的用法

<img
  srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy"
/>

srcset 提供了根据屏幕条件选取图片的能力，可是其实更好的作法，是使用 picture 元素。

4.3 picture

picture 元素能够根据屏幕的条件为其中的 img 元素提供不一样的源，它的基本用法以下：

<picture>
  <source srcset="image-wide.png" media="(min-width: 600px)" />
  <img src="image-narrow.png" />
</picture>

picture 元素的设计跟 audio 和 video 保持了一致（稍后我会为你讲解这两个元素），它跟 img 搭配 srcset 和 sizes 不一样，它使用 source 元素来指定图片源，而且支持多个。

这里的 media 属性是 media query，跟 CSS 的 @media 规则一致。

4.4 video

在 HTML5 早期的设计中，video 标签跟 img 标签相似，也是使用 src 属性来引入源文件的，不过，我想应该是考虑到了各家浏览器支持的视频格式不一样，如今的 video 标签跟 picture 元素同样，也是提倡使用 source 的。

下面例子是一个古典的 video 用法：

<video controls="controls" src="movie.ogg"></video>

这个例子中的代码用 src 来指定视频的源文件。可是由于一些历史缘由，浏览器对视频的编码格式兼容问题分红了几个派系，这样，对于一些兼容性要求高的网站，咱们使用单一的视频格式是不合适的。

如今的 video 标签可使用 source 标签来指定接入多个视频源。

<video controls="controls">
  <source src="movie.webm" type="video/webm" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
  You browser does not support video.
</video>

从这个例子中，咱们能够看到，source 标签除了支持 media 以外，还可使用 type 来区分源文件的使用场景。

video 标签的内容默认会被当作不支持 video 的浏览器显示的内容吗，所以，若是要支持更古老的浏览器，还能够在其中加入 object 或者 embed 标签，这里就不详细展开了。

4.5 audio

接下来咱们来说讲 audio，跟 picture 和 video 两种标签同样，audio 也可使用 source 元素来指定源文件。咱们看一下例子：

<audio controls>
  <source src="song.mp3" type="audio/mpeg" />
  <source src="song.ogg" type="audio/ogg" />
  <p>You browser does not support audio.</p>
</audio>

但比起 video，audio 元素的历史问题并不严重，因此使用 src 也是没有问题的。

4.6 iframe

最后咱们来说一下 iframe，这个标签可以嵌入一个完整的网页。

<iframe src="http://time.geekbang.org"></iframe>

这个例子展现了古典的 iframe 用法。

在新标准中，为 iframe 加入了 sandbox 模式和 srcdoc 属性，这样，给 iframe 带来了必定的新场景。咱们来看看例子：

<iframe sandbox srcdoc="<p>Yeah, you can see it <a href="/gallery?mode=cover&amp;amp;page=1">in my gallery</a>."></iframe>

这样，这个 iframe 就不涉及任何跨域问题了。

不过，在移动端，iframe 受到了至关多的限制，它没法指定大小，里面的内容会被彻底平铺到父级页面上。

同时不少网页也会经过 http 协议头禁止本身被放入 iframe 中。

iframe 标签也是各类安全问题的重灾区。opener、window.name、甚至 css 的 opacity 都是黑客能够利用的漏洞。

所以，在 2019 年，当下这个时间点，任何状况下我都不推荐在实际开发中用之前的 iframe。

5. 表单

5.1 HTML 表单

HTML 表单用于收集用户输入。<form>元素定义 HTML 表单：

<form>
  . form elements .
</form>

5.2 HTML 表单元素

HTML 表单包含表单元素，表单元素指的是不一样类型的 input 元素、复选框、单选按钮、提交按钮等等。

• <input> 元素有不少形态，根据不一样的 type 属性。

  • <input type="text">定义用于文本输入的单行输入字段；
  • <input type="checkbox">定义复选框；
  • <input type="radio">定义单选按钮；
  • <input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮；
  • ……
• <select> 元素定义下拉列表

<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>

• <textarea> 元素定义多行输入字段（文本域）

<textarea name="message" rows="10" cols="30">
      The cat was playing in the garden.
  </textarea>

• <button> 元素定义可点击的按钮

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML5 增长了以下表单元素：

• <datalist> 表明提供给其余控件的一组预约义选项；
• <keygen> 表明一个密钥对生成器控件；
• <output> 表明计算值；
• <progress> 表明进度条；
• <meter> 表明滑动条。

6. 表格

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成，tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元，更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

<table>
  <thead>
    <tr>
      <th colspan="2">The table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The table body</td>
      <td>with two columns</td>
    </tr>
  </tbody>
</table>

• <table> 定义多维数据；
• <caption> 表明表格的标题；
• <colgroup> 表明表格中一组单列或多列；
• <col> 表明表格中的列 ；
• <tbody> 表明表格中一块具体数据 （表格主体）；
• <thead> 表明表格中一块列标签 （表头）；
• <tfoot> 表明表格中一块列摘要 （表尾）;
• <tr> 表明表格中的行 ;
• <td> 表明表格中的单元格;
• <th> 表明表格中的头部单元格 。

7. 总集

咱们已经提到了大部分的 HTML 标签，可是为了突出重点，咱们会忽略一些标签类型，以及弱化讲解一些标签类型，好比表单类和表格类这类目前使用场景较少的标签。

剩下的标签能够经过查阅 HTML 标准得到，全部标准化的 HTML5 标签可查阅HTML5 标签列表。

8. 语言

HTML（HyperText Markup Language，超文本标记语言） 是用来定义网页结构的一种描述语言。

8.1 基本语法

HTML 语法源自 SGML，包含了五种节点：标签（元素）、文本、注释、文档类型定义（DTD）和处理信息（ProcessingInstruction）。

8.1.1 标签语法

标签语法产生元素，咱们从语法的角度讲，就用“标签”这个术语，咱们从运行时的角度讲，就用“元素”这个术语。

HTML 中，用于描述一个元素的标签分为开始标签、结束标签和自闭合标签。开始标签和自闭合标签中，又能够有属性。

• 开始标签：<tagname>

  • 带属性的开始标签： <tagname attributename="attributevalue">
• 结束标签：</tagname>
• 自闭合标签：<tagname />

这里须要重点讲一讲属性语法，属性可使用单引号、双引号或者彻底不用引号，这三种状况下，须要转义的部分都不太同样。

属性中可使用文本实体来作转义，属性中，必定须要转义的有：

• 无引号属性：<tab> <LF> <FF> <SPACE> &五种字符
• 单引号属性：' &两种字符
• 双引号属性：" &两种字符

通常来讲，灵活运用属性的形式，是不太用到文本实体转义的。

8.1.2 文本语法

在 HTML 中，规定了两种文本语法，一种是普通的文本节点，另外一种是 CDATA 文本节点。

文本节点看似是普通的文本，可是，其中有两种字符是必须作转义的：<和&。

若是咱们从某处拷贝了一段文本，里面包含了大量的 <和&，那么咱们就有麻烦了，这时候，就轮到咱们的 CDATA 节点出场了。

CDATA 也是一种文本，它存在的意义是语法上的意义：在 CDATA 节点内，不须要考虑多数的转义状况。

8.1.3 注释语法

HTML 注释语法以<!--开头，以-->结尾，注释的内容很是自由，除了-->都没有问题。

若是注释的内容必定要出现 -->，咱们能够拆成多个注释节点。

8.1.4 DTD 语法（文档类型定义）

SGML 的 DTD 语法十分复杂，可是对 HTML 来讲，其实 DTD 的选项是有限的，浏览器在解析 DTD 时，把它当作几种字符串之一，关于 DTD，在下面会详细讲解。

8.1.5 ProcessingInstruction 语法（处理信息）：

ProcessingInstruction 多数状况下，是给机器看的。HTML 中规定了能够有 ProcessingInstruction，可是并无规定它的具体内容，因此能够把它视为一种保留的扩展机制。对浏览器而言，ProcessingInstruction 的做用相似于注释。

ProcessingInstruction 包含两个部分，紧挨着第一个问号后，空格前的部分被称为“目标”，这个目标通常表示处理 ProcessingInstruction 的程序名。例如：

<?a 1?>

剩余部分是它的文本信息，没有任何格式上的约定，彻底由文档编写者和处理程序的编写者约定。

8.2 DTD

DTD 的全称是 Document Type Defination，也就是文档类型定义。SGML 用 DTD 来定义每一种文档类型，HTML 属于 SGML，在 HTML5 出现以前，HTML 都是使用符合 SGML 规定的 DTD。

HTML4.01 有三种 DTD。分别是严格模式、过渡模式和 frameset 模式。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

严格模式的 DTD 规定了 HTML4.01 中须要的标签。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

过渡模式的 DTD 除了 html4.01，还包含了一些被贬斥的标签，这些标签已经再也不推荐使用了，可是过渡模式中仍保留了它们。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

frameset 结构的网页现在已经不多见到了，它使用 frameset 标签把几个网页组合到一块儿。

众所周知，HTML 中容许一些标签不闭合的用法，实际上这些都是符合 SGML 规定的，而且在 DTD 中规定好了的。可是，一些程序员喜欢严格遵照 XML 语法，保证标签闭合性，因此，HTML4.01 又规定了 XHTML 语法，一样有三个版本。

版本一

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

版本二

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

版本三

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

其实你看看就知道，这些复杂的 DTD 写法并无什么实际做用（浏览器根本不会用 SGML 引擎解析它们），所以，到了 HTML5，干脆放弃了 SGML 子集这项坚持，规定了一个简单的，你们都能记住的 DTD：

<!DOCTYPE html>

可是，HTML5 仍然保留了 HTML 语法和 XHTML 语法。

8.3 文本实体

不知道你注意到没有，HTML4.01 的 DTD 里包含了一个长得很像是 URL 的东西，其实它是真的能够访问的——可是 W3C 警告说，禁止任何浏览器在解析网页的时候访问这个 URL，否则 W3C 的服务器会被压垮。我相信不少好奇的前端工程师都把它下载下来打开过。

这是符合 SGML 规范的 DTD，咱们前面讲过，SGML 的规范十分复杂，因此这里我并不打算讲 SGML（其实我也不会），可是这不妨碍咱们了解一下 DTD 的内容。这个 DTD 规定了 HTML 包含了哪些标签、属性和文本实体。其中文本实体分布在三个文件中：HTMLsymbol.ent HTMLspecial.ent 和 HTMLlat1.ent。

所谓文本实体定义就是相似如下的代码：

<   > &

每个文本实体由 & 开头，由 ; 结束，这属于基本语法的规定，文本实体能够用#后跟一个十进制数字，表示字符 Unicode 值。除此以外这两个符号之间的内容，则由 DTD 决定。

8.4 命名空间

xmlns 属性能够在文档中定义一个或多个可供选择的命名空间。该属性能够放置在文档内任何元素的开始标签中。该属性的值相似于 URL，它定义了一个命名空间，浏览器会将此命名空间用于该属性所在元素内的全部内容。

例如，若是须要使用符合 XML 规范的 XHTML 文档，则应该在文档中的<html> 标签中至少使用一个 xmlns 属性，以指定整个文档所使用的主要命名空间：

<html xmlns="http://www.w3.org/1999/xhtml"></html>

若是须要在一个 div 元素中显示一串数学公式，则能够为该 div 元素定义一个数学命名空间。好比这样：

<div xmlns="http://www.w3.org/1999/Math/MathMl">x3/x</div>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和须要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

虽然在大多数状况下，绝大多数 XHTML 做者都不须要定义多个命名空间，可是您仍然有必要理解存在着多个命名空间，以便在须要选择将基于某个 DTD 的内容嵌入其余 DTD 定义的内容中时，能够管理多个命名空间。