本文为winter发布在极客时间的《重学前端》的学习笔记。

大家支持正版喔：time.geekbang.org/column/arti…

导语

HTML主要由标签构成，根据功能不同，可以进行以下分类：

文档元信息：通常是出现在head标签中的元素，包含了描述文档自身的一些信息；
语义相关：扩展了纯文本，表达文章结构、不同语言要素的标签；
链接：提供到文档内和文档外的链接；
替换型标签：引入声音、图片、视频等外部元素替换自身的一类标签；
表单：用于填写和提交信息的一类标签；
表格：表头、表尾、单元格等表格的结构。

下面，会具体描述前四种类别，表单和表格较少用到，而且基本以查阅型知识为主。

语义化便签

支持在界面中，全部使用div和span；

语义的优点：

对开发者优好，有可读性
适宜机器阅读，适宜SEO

要注意的是，用对 > 不用 > 用错。

语义便签的使用场景

作为自然语言和纯文本的补充，用来表达一定的结构(比如ruby、rt、rp等)或者消除歧义(比如em等)。
作为标题摘要(比如h1-h6、hgroup、section等)
作为整体结构，适合机器阅读(比如body、header、article、footer、aside、nav、article等)

部分标签说明：

article，表示文档、页面、应用或网站中的独立结构。
aside，表示一个和其余页面内容几乎无关的部分
hgroup，代表一个段的标题
nav，表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接
section，表示一个包含在HTML文档中的独立部分

MDN标签说明地址：developer.mozilla.org/zh-CN/docs/…

文档元信息标签

head标签

主要作为盛放其它语义类标签的容器使用。

自身必须是html标签中的第一个标签
内容必须包含一个title，并且最多只能包含一个base。
当作为iframe，或者有其他方式指定了文档标题时，可以允许不包含title标签

title标签

表示文档的标题

base标签

base标签实际上是个历史遗留标签。它的作用是给页面上所有的URL相对地址提供一个基础。

注：使用有风险，尽量不使用，而是通过JavaScript来实现相关逻辑。

meta标签

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

一般的meta标签由name和content两个属性来定义。name表示元信息的名，content则用于表示元信息的值。

  <meta name=application-name content="lsForums">

具有charset属性的meta

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

 <meta charset="UTF-8" >

charset描述了HTML文档自身的编码形式。

一般情况下，HTTP服务端会通过http头来指定正确的编码方式，但是有些特殊的情况如使用file协议打开一个HTML文件，则没有http头，这种时候，charset meta就非常重要了。

具有http-equiv属性的meta

具有http-equiv属性的meta标签，表示执行一个命令,提供的信息与类似命名的HTTP头部相同。

这样的meta标签可以不需要name属性了。

http-equiv有以下的命令：

content-type

其值必须是"text/html; charset=utf-8"，相当于添加了content-type这个http头，并且指定了http编码方式。

注：该属性只能用于 MIME type 为 text/html 的文档，不能用于MIME类型为XML的文档。

content-language

用来说明访问者希望采用的语言或语言组合，比如zh-CN。

default-style

设置默认 CSS 样式表组的名称。

注：content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。

这个有什么意义？？？优先加载还是权值更高？

refresh

用于页面刷新，具体规则可以参考这里。

set-cookie

模拟http头set-cookie，设置cookie

x-ua-compatible

模拟http头x-ua-compatible，声明ua兼容性。如果指定，则 content 属性必须具有值 "IE=edge"。

具体逻辑可以参考这篇文章。

content-security-policy

模拟http头content-security-policy，声明内容安全策略。

可以参考这篇文章学习CPS安全协议。

name为viewport的meta

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

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

content内的全属性如下：

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

其它预定义的meta

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

其他标签

在元信息中，还可以包含<script>、<link>、<style>等标签。

链接标签

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

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

link 标签

link标签会生成一个链接，可以是超链接，也可以是外部资源链接。

link标签生成的链接类型主要通过rel属性的值来区分，写法如下。

<link rel="xx" >

超链接

这些超链接不像a链接那样显示在页面中，在多少浏览器中，这些link标签不产生任何作用。但是，这些link标签能够被搜索引擎和一些浏览器插件识别，从而产生关键性作用。

通常超链接的rel值为canonical、alternate、prev、next等。

canonical

当多个页面内容相同时，canonical提示搜索引擎保留哪个页面(权威地址)，多用于SEO中。详细内容可以参考这里。

alternate

alternate标签提供页面的变形形式，这些变形可能是为不同样式、不同设备型号、不同语言设计的。

stylesheet可以和alternate一起使用，可以使用换肤功能，具体见下文的stylesheet。

当我们的网址存在多个语言版本时，可以使用rel="alternate" hreflang="x"的形式，对不同地区显示不同版本，也避免了SEO中对每个版本的权重积累。可以参考这篇文章。

<link rel="alternate" hreflang="en" href="http://www.example.com/page.html" />
<link rel="alternate" hreflang="en-gb" href="http://en-gb.example.com/page.html" />
<link rel="alternate" hreflang="en-us" href="http://en-us.example.com/page.html" />

当你拥有单独的移动和桌面网站时，我们使用rel="canonical"确定权威网址。但是，可以通过设置rel="alternate"，让搜索引擎显示在不同设备显示不同的页面。

<!-- 移动端 -->
<link rel="canonical" href="http://wwww.pc.com" >

<!-- PC端 -->
<link rel="alternate" media="only screen and (max-width:640px)" href="http://m.mobile.com" >

这里我们在PC端添加了媒体属性，当页面宽度小于640px时，搜索引擎显示会显示移动网址。详细可以参考这里。

还有，我们可以使用rel="alternate"定义link为syndication feed，用于SSR。

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

prev和next

很多网页属于一个序列，比如网文网站等，这里就适合使用prev和next型的link标签，来告诉搜索引擎或者浏览器它的前一项和后一项，这有助于页面的批量展示。

后面，我们还可以对next型link对预处理，实现快速显示下一页。

其他超链接

除了上面的那些类型，还有其它超链接类的link，比如author、help、license、search，可以点击这里查看。

外部资源链接

外部资源型link标签会被主动下载，并且根据rel类型做不同的处理。比如常见的引入css样式。

icon型link

这类链接表示页面的icon。当没有指定该link时，项目会读取根目录下的favicon.ico。

media,type和sizes属性允许浏览器选择其上下文中最合适的图标。如果多种资源符合条件，浏览器会选择最后一个。

注：苹果iOS不支持此链接类型,也不支持sizes属性,分别可使用不是标准方法的apple-touch-icon和apple-touch-startup-image替代。

stylesheet型link

stylesheet型link表示样式表。

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

这里type属性可以没有，如果有，必须是"text/css"才会生效。

stylesheet可以和alternate一起使用，该link对应的内容默认不会渲染，但可以优先下载，那么我们可以通过对link元素的DOM对象使用disabled，从而实现快速换肤：

<link href="default.css" rel="stylesheet" type="text/css" title="默认">
<link href="red.css" rel="alternate stylesheet" type="text/css" title="红色">
<link href="green.css" rel="alternate stylesheet" type="text/css" title="绿色">

这里需要注意的是，link中title不能为空。

预处理类link

dns-prefetch型link。提前对某个域名进行dns查询，当打开使用该域名的链接时，减少dns查询时间。可以参考这篇文章。
preconnect型link。是浏览器预建立一个连接，等真正需要加载资源时就可以直接加载，避免TCP的三次握手和TLS协商(如果是https)。
prefetch型link。预加载下一个页面可能用的一些资源(比如html、js、css、图片)，在使用这些资源时，响应的更快。

注：资源虽然预加载了，但是并不会进行解析或者执行。

preload型link。预加载当前页面需要的资源到内存。
prerender型link。预加载资源，也可以预解析页面，在需要时再打开。

modulepreload型的link

modulepreload型link的作用是预先加载一个JavaScript的模块。这可以保证JS模块不必等到执行时才加载。

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

pingback型link

这样的link表示本网页被引用时，应该使用的pingback地址。具体可以参考这篇文章。

a 标签

a标签是“anchor”的缩写，即锚点，可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

a标签也具有rel属性，首先是和link相同的属性：

alternate
author
help
license
next
prev
search

这些属性和link中的语义一样，不过和link不同在于a标签会显示在网页中。

a标签独有的rel类型：

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

还有一些辅助rel类型：

nofollow 不被搜索引擎搜索到
noopener 当打开新的链接时，不允许它们通过Window.opener属性来篡改原始文档
opener 打开的网页可以使用window.opener来访问当前页面的window对象，这是a标签的默认行为。
noreferrer 此链接打开的网页无法使用referrer来获得当前页面的url；

当然，a标签还有一些其他属性，比如下载资源download等。具体可以参考这里。

area 标签

area标签和a标签类似，rel类型也一样，不同的是area标签是区域性链接(详细可以参考这里)。

area标签有两个重要属性：shape和coords。shape设置了热区的类型，coords根据shape不同设置对应的坐标

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

area标签需要放在<map>标签内和<img>标签配合使用，类似下面的例子：

<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>

替换型元素

替换型元素是有别于链接的文件引入方式，是将文件的内容引入，替换掉自身位置的一类标签。

并且，凡是替换型元素，都是使用src属性来引用文件的。

script

script标签即可以做替换型元素，又可以不做替换型元素。

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


<script type="text/javascript" src="my.js"></script>

在上面的例子中，一种是直接把脚本代码写在script标签之间，另一种是把代码放到独立的js文件中，用src属性引入。

img

img标签是用于引入一个图片资源，如果我们不想使用独立的文件，可以使用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>'/>

img标签可以设置width和height指定宽度和高度，也可以指定一个，图片会等比例缩放。

注：出于浏览器渲染性能考虑，可以提前设置图片的宽高，减少浏览器的重绘。

img标签的alt属性包含一条对图像的文本描述，可以用于屏幕阅读器将这些描述读给需要使用阅读器的使用者听。

img标签还有一组重要的属性srcset和sizes，用于在不同的屏幕大小和特性下，使用不同的图片源(这里也可以使用下面的picture元素)。

<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">

img标签的所有属性可以参考这里。

picture

picture元素可以根据屏幕的条件为其中的img元素提供不同的源，它的基本用法如下：

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

picture标签和video/audio元素一样，使用了<source>标签指定图片的来源。

video

video标签使用src来设置引入的视频资源，也可以使用<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>

这里引入了多种视频格式的资源，浏览器会加载当前能支持格式的资源。

video中还支持一种播放时序相关的标签：track标签，最常见的用途就是字幕。track标签中，必须使用srclang来指定语言，此外，track具有kind属性，共有五种。

subtitles：就是字幕了，不一定是翻译，也可能是补充性说明。
captions：报幕内容，可能包含演职员表等元信息，适合听障人士或者没有打开声音的人了解音频内容。
descriptions：视频描述信息，适合视障人士或者没有视频播放功能的终端打开视频时了解视频内容。
chapters：用于浏览器视频内容。
metadata：给代码提供的元信息，对普通用户不可见。

字幕使用可以在<track>标签和 WebVTT 格式的基础上使用JavaScript 来实现。详情请见这里。

video标签的其他属性可以参考这里。

audio

audio用于引入音频资源，和video一样，也可以用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>

iframe

iframe能用于嵌入一个页面。

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

不过，在移动端iframe受到了相当多的限制，它无法指定大小，里面的内容会被完全平铺到父级页面上。

同时很多网页也会通过http协议头禁止自己被放入iframe中。

还有一些安全性问题，不推荐在实际开发中用以前的iframe。

在新标准中，为iframe加入了sandbox模式和srcdoc属性。使用srcdoc属性创建了一个新的文档，嵌入在iframe中展示，并且使用了sandbox来隔离。

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

iframe标签的详细属性说明可以参考这里。

《重学前端》笔记--html标签分类

导语