学习笔记：MDN的HTML

时间 2019-12-10

标签学习笔记 mdn html 栏目 HTML 繁體版

原文原文链接

1、 HTML介绍：html

HTML —— 用于定义一个网页的结构的基本技术。前端

元素（Element）：开始标记，加结束标记，加内容，等于元素。java

两种重要的元素类别，块级元素和内联元素：web

块级元素在页面中以块的形式展示 —— 相对与其前面的内容它会出如今新的一行，其后的内容也会被挤到下一行展示。一个以block形式展示的块级元素不会被嵌套进内联元素中，但能够嵌套在其它块级元素中。正则表达式

内联元素一般出如今块级元素中并包裹文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会致使文本换行：它一般出如今一堆文字之间。例如超连接元素<a>或者强调元素<em>和 <strong>。算法

注：若是一个内联元素先后都是块级元素，那这个内联元素先后都会换行，由于它先后的块级元素“不要它”。数据库

元素的属性包含元素的额外信息，这些信息不会出如今实际的内容中。canvas

布尔属性：有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名同样的属性值。小程序

在目前为止，本章内容全部的属性都是由双引号来包裹。也许在一些HTML中，你之前也见过单引号。这只是风格的问题，你能够从中选择一个你喜欢的（VSC对属性的自动补全用的是双引号）。在一个HTML中已使用一种引号，你能够在此引号中嵌套另一种引号(或者用字符实体引用)。后端

<!DOCTYPE html>: 声明文档类型。最短的有效的文档声明。

代码更新后刷新浏览器便可更新页面（不过要注意外部CSS、JS的更新要打开F12才行）。

字符实体引用：在HTML中，字符<，>，”，’和&是特殊字符（&彷佛能够像普通字符同样直接包含进文本中）。它们是HTML语法自身的一部分，若是想将这些字符包含进文本中，就要使用字符实体引用——表示字符的特殊编码。每一个字符实体引用以符号&开始，以分号;结束。<，>，”，’和&分别对应lt（less than），gt（greater than），quot（quotation），apos（apostrophe）和amp（ampersand）。deg是°，times是×。

HTML的注释（comment）是用。

能够用开发者工具去查看网页的index.html。

元数据：<meta>元素。元数据就是描述数据的数据

许多<meta> 元素包含了name和content属性。这两个meta元素对于定义你的页面的做者和提供页面的内容描述是颇有用的。头文件的<title>元素是搜索结果里的主标题，name是description的<meta>元素是搜索结果里的小字描述。

你在网站上看到的许多元数据都是专有创做，旨在向某些网站（如社交网站）提供可以使用的特定信息。

为了进一步丰富你的网站设计，你能够在元数据中添加对自定义图标的引用，这些将在特定的场合中显示。

CSS还能将JS添加到页面的内容进行样式化。

你能够（并且确实应该）为你的站点设定语言，这在不少方面都颇有用。若是你的HTML文档的语言设置好了，那么你的HTML文档就会被搜索引擎更有效地搜索（例如，容许它在特定于语言的结果中正确显示），对于那些使用屏幕阅读器的视障人士也颇有用（好比，法语和英语中都有“six”这个单词，可是发音却彻底不一样）。

HTML的主要工做是编辑文本结构和文本内容。

在用h1到h6建立层次结构时，须要记住这些最佳实践：

l 优选地，您应该只对每一个页面使用一次<h1>——这是顶级标题，全部其它标题位于层次结构中的下方。

l 确保在层次结构中以正确的顺序使用标题。不要使用<h3>来表示副标题和使用<h2>表示副副标题——这是没有意义的，会致使奇怪的结果（注：试了下，彷佛不奇怪啊，和想象中的同样）。

l 在可用的六个标题级别中，您应该旨在每页使用不超过三个，除非您认为有必要使用更多。具备许多级别的文档（即，较深的标题层次结构）变得难以操做且难以导航。在这种状况下，若是可能，建议将内容分散在多个页面上。

关于语义：咱们须要确保使用了正确的元素，基于内容正确的意思、做用和外形。好比，<h1>元素，它是一个语义元素，它给出了包裹在您的页面上用来表示顶级标题的角色（或意义）的文本。通常来讲，浏览器会给它一个更大的字形来让它看上去像个标题（虽然你可使用CSS让它变成任何你想要的样式），更重要的是，它的语义值将以多种方式被使用，好比被搜索引擎和屏幕阅读器使用

CSS和JS都能写在HTML里但不建议。

不管你用了多少空白（包括空格、换行），当渲染这些代码时，HTML解释器会将连续出现的空白减小为一个空格。

在HTML中咱们用<em>元素和<strong>来标记强调的状况。这样作既可让文档读起来更有趣或有用，也能够被屏幕阅读器识别出来，并以不一样的语调发出。对于<em>，浏览器默认强调的风格为斜体，但你不该该纯粹为了得到斜体风格而使用这个标签，纯粹为了得到斜体风格，你应该使用<span>元素和一些CSS，或者是<i>元素（粗体风格是用<b>元素）。使用<b>,<i>,<u> 来传达传统意义上的粗体、斜体或下划线是合适的。

表象元素（presentational elements）：仅仅影响表象并且没有语义。

一种关于下划线的警告：人们很容易把下划线和超连接联系起来。所以，在Web上，最好只在连接上使用下划线。既可用<u>元素也可用CSS实现。

URL（Uniform Resource Locator）能够指向HTML文件、文本文件、图像、文本文档、视频和音频文件以及能够在网络上保存的任何其它内容。若是浏览器不知道如何显示或处理文件，它会询问您是否要打开文件（须要选择合适的本地应用来打开或处理文件）或下载文件（之后处理它）。

超连接能够连接到HTML文档的特定部分（被称为文档片断），而不只仅是文件的顶部。要作到这一点，你必须首先分配一个有id属性的元素到连接。而后连接到那个特定的id，你能够在URL的结尾包含它，前面是一个井号（#）。固然，能够用连接到同一份文档的另外一部分。

绝对URL：例如，若是index.html页面上传到projects这一个目录，而projects位于一个域名为http://www.example.com的Web服务站点的根目录，则这个页面能够经过http://www.example.com/projects/index.html访问（或者仅仅经过http://www.example.com/projects/来访问，由于若是没有特定的URL，大多数Web服务器经过访问index.html这样的页面来加载）。

连接的措辞要清晰。搜索引擎使用连接文本为索引目标文件，因此，在连接文本中包含关键词是一个很好的主意，以有效地描述与之相关的信息；读者每每会浏览页面而不是阅读每个字，他们的眼睛会被页面的特征所吸引，好比连接。

Download Firefox是一个好的连接文本，而Click here to download Firefox是很差的。

不要重复URL做为连接文本的一部分，由于它看起来很丑。

连接一般存在下划线（这个惯例通常不该该打破，由于用户习惯了它）

保持你的连接标签尽量短

尽量使用相对连接，由于方便检查代码（相对连接短）且运行效率高（不用跑到别的域名服务器去查询域名）

连接到非HTML资源时，要留下清晰的指示。

网页能够看起来彼此不一样，但它们都倾向于使用相似的标准组件，除非页面显示全屏视频或游戏，或是某种艺术项目的一部分，或者是结构不当。

文档的基本结构（这些元素，除了<div>，全都只起语义做用，不改变样式）：页眉<header>、导航<nav>、主要内容<main>（具备表明性的内容段落主题可使用<article><section>和<div>）、侧栏<aside>（常常嵌套在<main>中）和页脚<footer>。

页眉：一般在顶部有一个大标题和（或）图标。这是一个网站的主要常见信息，一般存在于每个网页。

导航：连接到网站的主要部分，一般由菜单按钮、连接或选项卡表示。与标题同样，这些内容一般在一个网页与另外一个网页之间保持一致——在您的网站上导航不一致只会令人疑惑和恼火。

主要内容：中心的一个大区域，包含给定网页的大部分独特内容，绝对会因页面而异。

侧栏：一些次要信息、连接、引言、广告等。一般这是与主要内容中包含的内容相关（例如在新闻文章页面上，侧栏可能包含做者的我的信息或相关文章的连接），但在一些状况下，你会发现一些重复的元素，如辅助导航系统。

页脚：横跨页面底部的条纹，一般包含精美的打印、版权通知或联系信息。它是一个放置公共信息的地方，但一般该信息对网站来讲不是特别重要。经过提供用于快速访问热门内容的连接，页脚有时也用于SEO目的。

一个“典型的网站”可能会这样布局：

搜索用的表单是另外一种常见的非线性的导航方式。

文档布局的关键是编写一个完整的HTML结构，而后用CSS布局。

<header>展示了一系列的介绍性内容。若是它是<body>的子元素，它就定义了网站的全局页眉。可是若是它是<article>和<section>的子元素，它就定义了这些部分的特定的页眉（不要把这些与标题（titles and headings）混淆）。

<nav>

<main>展示了页面内容的独特性。只能够在每个页面使用一次<main>。在理想状况下，不该该把它嵌套进其它的元素中。<article>闭合一块与自身相关的内容，这块内容可以解释它自身而不是页面上其它的内容（例如一篇单独的博客）。<section>近似于<article>，但它更多的是伴随着由一个单独功能构成的页面（例如一个小型的地图，或者是一组文章的标题和摘要）。它被认为最好的实践是用标题（a heading）做为每个<section>的开头；也要注意的是你能够把不一样的<article>分到不一样的<section>中，也能够把不一样的<section>分到不一样的<article>中，这要取决于内容。

<aside>包含的内容并不与主要内容有直接的联系，但它能够提供额外的不直接有联系的信息（术语表条目，做者简介，相关连接等等）。

<footer>

有时候，你会找不到理想的语义元素来包含项目或内容，或者你可能只想仅仅用CSS或JS将一组元素做为一个单独的实体来修饰。为了应对这种状况，HTML提供了<div>和<span>元素。你最好使用class属性来使它们能容易被找到。

警告：divs用起来很是便利以致于很容易被滥用。由于它们不携带语义值，因此会让你的HTML代码变得混乱。要当心地使用它们，只有当没有更好的语义解决方案时才能使用，并且要尽量把它们的使用量降到最低，不然，当你升级和维护你的文档时会很是困难。

计划一个简单的网站：

记住，你的大多数页面会使用一些相同的元素，如导航栏和页脚。因此说，若是在你的设计中，每一个页面都有一些内容是重复的，你能够先把这些重复的内容记录下来。
接下来，你能够经过画一个草图的方式来讲明你但愿的每一个页面的结构的样子（或许你画出来的草图和咱们那个“典型的网站”比较像），在空白段落上作上标记，来讲明以后要填充在这里的内容。
如今，讨论还但愿网站上显示哪些内容（不包括重复的内容），以列表的形式写下来。
接着，尝试把这些内容进行分组，这样可让你了解哪些内容能够放在一个相同的页面上。
如今，尝试再画一个网站的草图——用气泡表明网站的一个页面，在气泡与气泡之间用连线的方式，来讲明它们之间的联系。主页面可能位于中心位置，而且连接到其它大多数页面；对于一个小型网站，大多数页面均可以从主页的导航栏中连接跳转。你可能也会记录内容将怎样显示。

注意：将你的工做成果保存好，以后你可能还会须要它们。

HTML自己不容易因语法错误出错，由于浏览器是以宽松模式来运行，这意味着即便出现语法错误浏览器依然会运行。浏览器一般都有本身的规则来解析语法错误的标记语言，因此程序仍然会运行，尽管可能不是你预期的样子。

浏览器的开发者工具中的标记语言是浏览器渲染后的，而不是源代码中的标记语言。

Markup Validation Service网站：用于检验HTML文档。

元素（Element）：

<p></p>（块级元素）：段落

<h1></h1>（块级元素）：标题，还有h二、h3……直到h6。

<em></em>（内联元素）：即emphasis。有语义的斜体（能够单独使用）

<strong></strong>（内联元素）：即strong importance。有语义的粗体（能够单独使用）

<a></a>（内联元素）：锚，使被包裹的内容成为超连接

注：几乎全部的元素都能单独使用。

<img>（空元素）：插入图片

<input>（空元素）：表单

<html></html>：包裹了整个完整的页面，是根元素。

<head></head>：是一个容器，它包含了全部你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。

<title></title>：设置浏览器标签上的标题。

<body></body>：包含了你访问页面时全部显示在页面上的内容。

<span></span>（内联元素）：是短语内容的通用内联容器，并无任何特殊语义。可使用它来编组元素以达到某种样式意图（经过使用类或者id属性），或者这些元素有着共同的属性，好比lang。应该在没有其它合适的语义元素时才使用它。<span>和<div>很类似，但后者是一个块级元素而前者则是内联元素。

<ul></ul>（块级元素）：即unordered list。

<ol></ol>（块级元素）：即ordered list。

<li></li>（块级元素）：即list item。

<i></i>：即italic，斜体。

<b></b>：即bold，粗体。

<u></u>：即underline，下划线。

<dl></dl>，<dt></dt>，<dd></dd>：分别即description list，description term，description description，三者共同构成描述列表。一个术语<dt>能够同时有多个描述<dd>。浏览器的默认样式会在术语和描述之间产生缩进（要改变它的缩进量用margin）。

<blockquote></blockquote>和<q></q>：即块级引用和内联引用，除此以外，前者会增长缩进以做为引用的指示符，后者则加入双引号。

<cite></cite>（有同名的属性）：表示引用，斜体。

<code></code>，<pre></pre>，<var></var>，<kbd></kbd>，<samp></samp>：即分别是code，preformatted，variable，keyboard和sample都是用于标记计算机代码。分别用于标记计算机通用代码，固定宽度的文本块、其中保留空格（一般是代码块），具体变量名（又是斜体），键盘等的输入和计算机程序的输出。

<abbr></abbr>：即abbreviation。一般还用title属性提供缩写的解释。

<address></address>：只能用来标记联系地址。也是斜体。

<sup></sup> 和<sub></sub>：分别即Superscript和subscript，上标和下标。

<time></time>：经过datetime属性将时间和日期标记为可供机器识别的格式。

<br>和<hr>（空元素）：分别即break和horizontal rule

属性（Attribute）：

class：赋予元素一个用来识别的名字，这个名字此后能够被用来识别此元素的样式信息和其它信息。同一个名字可用于多个class。

herf（hypertext reference）（<a>元素专用）：声明超连接的web地址。

title（<a>元素可用）：鼠标悬停超连接时的提示信息。

target（<a>元素可用）：决定将用于显示连接的浏览上下文。例如，target='_blank'将在新标签页中显示连接。若是你但愿在目前标签页显示连接，只需忽略这个属性。

disabled（布尔属性）：标记表单输入使之变为不可用。

name（<meta>元素可用）：指定meta元素的类型，说明该元素包含了什么类型的信息。

content（<meta>元素用）：指定实际的元数据内容。

rel：即relationship。<link>元素的属性。

src：即source。可做为<script></script>的属性。

lang：即language。设定语言。

alt（<img>元素用）：即alternative。图显示失败时显示这个文本。

download：设置点击下载连接后的文件保存用的名字

cite（有同名的元素）：引用元素的属性，用来指向引用的资源。cite属性的内容听起来颇有用，但不幸的是，浏览器、屏幕阅读器等等不会真的关心它，若是不使用JavaScript或CSS，浏览器不会显示cite的内容。

2、 多媒体与嵌入：

注意：搜索引擎也把图片的文件名计入SEO，所以你应该给你的图片取一个描述性的文件名：dinosaur.jpg 比 img835.png 要好。

警告：大多数图片是有版权的。不要在你的网页上使用一张图片，除非：

l 你是图片版权全部者

l 你有图片版权全部者明确的、书面上的使用受权

l 你有充分的证据证实这张图片是公共的

侵犯版权是违法且不道德的。在获得受权以前永远不要把你的src属性指向其余人网站上的图片，这被称为“盗链（hotlinking）”。一样，盗取其余人的带宽也是违法的。并且这会下降你的页面的加载速度，并且图片可能会在不受你控制的状况下被移走或用别的使人尴尬的东西替换掉。

注意：像<img>和<video>这样的元素有时被称之为替换元素，由于这样的元素的内容和尺寸由外部资源（像是一个图片或视频文件）所定义，而不是元素自身。

咱们须要备选文本（alt）是由于它常常能派上用场。

你到底应该在 alt 里写点什么呢？这首先取决于这张图片为何会在这儿，换句话说，若是在这张图片没显示出来，会少了什么：

l 装饰：若是图片只是用于装饰，而不是内容的一部分，能够写一个空的alt=””。实际上，装饰性图片就不该该放在HTML文件里，CSS background images才应该用于插入装饰图片，但若是这种状况没法避免， alt=""会是最佳处理方案。

l 内容：若是你的图片提供了重要的信息，就要在alt文本中提供相同的信息。但若是在主要文本中已经对图片作了充分的说明，写alt=""就好。

l 连接：若是你把图片嵌套在<a>标签里，来把图片变成连接，那你还必须提供无障碍的连接的文本。在这种状况下，你能够写在同一个<a>元素里，或者写在图片的alt属性里，随你喜欢。

l 文本：你不该该把文本放到图片里。例如，若是你的主标题须要有阴影，你能够用CSS来达到这个目的，而不是把文本放到图片里。若是真的必须这么作，那就把文本也放到alt里。

本质上，关键在于图片没法被看见时也提供一个能够用的体验，这确保了全部人都不会错失一部份内容。

用width属性和height属性来指定你的图片的（本来的）宽度和高度是一件好事情。在正常的状况下，这不会对显示产生很大的影响，可是若是图片没有显示（例如用户刚刚开始浏览网页，可是图片尚未加载完成），你会注意到浏览器会为要显示的图片留下必定的空间——这使得页面加载的更快速更流畅。

注意：若是你须要改变图片的尺寸，你应该使用CSS而不是HTML。（？二者对图片尺寸的影响彷佛是同样的）

说明文字（<figcaption>）和alt的内容不该该同样，由于当图片没法显示时，它们会同时出现。

若是图片对你的内容有意义，就应该使用HTML图片；若是图片纯粹是装饰，就应该使用CSS背景图片。

<video> 标签内的段落：这个叫作后备内容——当浏览器不支持 <video> 标签的时候，它将会显示出来，它使咱们可以对旧的浏览器作一些兼容处理。你能够添加任何后备内容，好比提供一个指向这个视频文件的连接，从而使用户能够至少访问到这个文件，而不会局限于浏览器的支持。

你的视频应当包括 WebM 和 MP4 两种格式，这两种在目前已经足够支持大多数平台和浏览器。

Note: 文本轨道会使你的网站更容易被搜索引擎抓取到（SEO），因为搜索引擎的文本抓取能力很是强大，使用文本轨道甚至可让搜索引擎经过视频的内容直接连接。

一个好的关于网络安全的经验法则："You can never be too cautious. If you made it, double-check it anyway. If someone else made it, assume it's dangerous until proven otherwise."

注意：插件是一种对浏览器原生没法读取的内容提供访问权限的软件。

不须要插件了：若是您须要交互性，HTML和JavaScript能够轻松地为您完成工做，而不须要Java小程序或过期的ActiveX / BHO技术。您可使用HTML5的<video>等来知足媒体需求，矢量图形SVG，以及复杂图像和动画画布。对于工做，Adobe Flash极少是正确的工具，除了专门的游戏和商业应用。

SVG（Scalable Vector Graphics）在不少状况下很是有用 — 它们拥有较小的文件尺寸（由于它们仅需储存少许的算法，而不是逐个储存每一个像素的信息），却高度可缩放，因此它们不会在镜头拉近或者放大图像时像素化。矢量图使用算法来定义，而位图（当它被放大时，每一个像素就被放大以填满屏幕上更多的像素）使用像素网格来定义，流行的位图格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)。位图适合像照片那样复杂精密的图像。

响应式图片——一种能够在不一样的屏幕尺寸和分辨率的设备上都能良好工做以及有其它特性的图片。响应式图片仅仅只是响应式web设计的一部分（奠基了响应式web设计的良好基础），咱们会在将来的CSS topic模块中学到更多关于这一主题的知识。经过让浏览器提供多个图像文件来解决设备屏幕大小不一样的问题，好比使用相同显示效果的图片但包含多个不一样的分辨率（分辨率切换），或者使用不一样的图片以适应不一样的空间分配（艺术方向）。CSS是比HTML更好的响应式设计的工具。

elva-fairy-320w.jpg 320w的w意思是width（以px为单位）

元素（Element）：

<figure> </figure>和<figcaption> </figcaption>（HTML5）：后者包含在前者中。<figcaption>元素告诉浏览器和其它辅助的技术工具：这段说明文字描述了 <figure> 元素的内容。<figure>里不必定要是一张图片，只要是一个这样的独立内容单元：它用紧凑、易于掌握的方式表达你的意图；它能够放在页面线性流中的几个地方；它为主要内容提供关键信息。<figure>能够是几张图片、一段代码、音视频、方程、表格或别的。

<video></video>（HTML5）：也可用width和height（但长宽比保持不变）。

<audio></audio>（HTML5）

<source>（空元素）：可用于在<video>中使用几个不一样格式的文件来兼容不一样的浏览器。每一个 <source> 含有一个 type 属性，这个属性是可选的，可是建议你添加上这个属性——它包含了视频文件的 MIME types（叫"media type"更合适），同时浏览器也会经过检查这个属性来迅速的跳过那些不支持的格式。若是你没有添加 type 属性，浏览器会尝试加载每个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。

<audio> 标签与 <video> 标签的使用方式几乎彻底相同，除了<audio> 标签不支持 width/height 属性 — 因为其并无视觉部件，也就没有能够设置 width/height 的内容。一样的缘由，也不支持poster属性。

<track>（空元素）：放在<audio> 或 <video> 标中、<source> 后，加字幕用的，要有WebVTT文件才行。用 kind 属性来指明是哪种类型，如 subtitles（字幕）、 captions 、 descriptions。用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。

<canvas>：用于用JavaScript生成2D和3D图形

<picture> </picture>：若是是艺术方向，就不直接用srcset和sizes而用带media 和srcset的<source>。在任何状况下，你都必须在 </picture>中同时提供一个<img>元素以及它的src和alt属性。

属性（Attribute）：

width和height：指定图片的（本来的）宽度和高度，指定视频的宽度和高度。

controls（布尔属性）：控件，使用户可以控制视频和音频的回放功能。

autoplay（布尔属性）：顾名思义，能使音频和视频当即播放，即便页面的其它部分尚未加载彻底。建议不要应用这个属性在你的网站上，由于用户比较反感自动播放的媒体文件。

loop（布尔属性）：顾名思义，使媒体循环播放。一样不建议使用，除非有必要。

muted（布尔属性）：静音的。使媒体播放时，默认关闭声音。

poster：指向一个图片的URL，这个图片会在视频播放前显示。一般用于粗略的预览或者广告。

preload：用来缓冲较大的文件，有3个值可选："none" 不缓冲，"auto" 页面加载后缓存媒体文件，"metadata" 仅缓冲文件的元数据。

srcset和sizes——使小屏幕用小体积的图片、大屏幕用大致积的图片。当浏览器成功匹配第一个媒体条件的时候，剩下全部的东西都会被忽略，因此要注意媒体条件的顺序。

srcset定义了咱们容许浏览器选择的图像集，以及每一个图像的大小。在每一个逗号以前，咱们写：一个文件名、一个空格和图片的固有宽度（使用w单位，这是图像的真实大小）。

sizes定义了一组媒体条件（例如屏幕宽度）而且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。在每一个逗号以前，咱们写：

一个媒体条件（如(max-width:480px)）——你会在 CSS topic中学到更多的。可是如今咱们仅仅讨论的是媒体条件描述了屏幕可能处于的状态。在这里，咱们说“当视窗的宽度是480像素或更少”；

一个空格；

当媒体条件为真时，图像将填充的槽的宽度（如440px）。

若是但愿每一个人在屏幕上看到的图片的实际尺寸是相同的，用srcset和x。

media：仅仅当在艺术方向场景下使用。格式为media="(max-width: 799px)"。

3、 HTML tables（表格）：

表格：HTML让在web上显示表格数据变的很容易，只须要一点儿的CSS来设定风格。

使用表格布局而不使用 CSS layout techniques 是很糟糕的。

元素：

<table></table>：一个表格的内容都包含在这里面。

<td> </td>：即table data，表格的最小内容容器。

<tr> </tr>：即table row，换行用。

<th></th> ：即table header，用法和<td>同样，只不过它是标题（不是表格上方那个）。

<col> 和 <colgroup></colgroup>：按列样式化。

<caption> </caption>：表格的标题，放在<table>中。

<thead></thead>, <tfoot> </tfoot>, 和 <tbody></tbody>：即表头、页脚、正文。这些元素不会使表格更易于屏幕阅读器用户访问，也不会形成任何视觉上的改变（胡说，明明强制把页脚放到表格的底部了）。然而，它们在应用样式和布局上会起到做用，能够更好地让 CSS 应用到表格上。注意：<tbody> 老是包含在每一个表中，若是你没有在代码中指定它，那就是隐式的。注：<th>会改变样式，而<thead>不会。

属性：

colspan和rowspan：即column span和row span（span为跨度）。这两个属性接受一个没有单位的数字。

span：应用之一——使一个<col>元素的样式应用到多列。

scope：即范围。添加在<th> 元素中，可选的值有col、row、colgroup和rowgroup，用来帮助屏幕阅读设备更好地理解那些标题单元格是列标题仍是行标题。若是要替代 scope 属性，可使用 id 和 headers 属性来创造标题与单元格之间的联系，可是注意: 这种方式为标题单元格和数据单元格之间创造了很是精确的联系。可是这个方法使用了大量的标记，因此容错率比较低。使用 scope 的方法对于大多数表格来讲，也够用了。

其它：

 ：即Non-Breaking Space，不换行空格，可用于生成空的表格单元。注：直接空着，即<td> </td>，彷佛也行，还更方便。可累加。

4、 HTML forms（表单）：

HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们容许用户将数据发送到web站点。HTML表单和常规HTML文档的主要区别在于，大多数状况下，表单收集的数据被发送到web服务器。

大多数状况下，表单小部件与描述其目的的标签配对——正确实现的标签可以清楚地指示视力正常的用户和盲人用户输入表单要求输入的内容。

从用户体验(UX/UE)的角度来看，表单越大，失去用户的风险就越大。

大部分表单小部件都有一些它们本身的属性。不过，全部表单小部件都有一组相同属性，它们能够对这些小部件进行控制：autofocus（顾名思义）、disabled（顾名思义）、name和value。

若是你不给<input>提供type属性，text就会是默认值；若是你指定的type属性的值在浏览器中是未知的（好比你指定 type="date"，可是浏览器不支持原生日期选择器），属性值text就是是备用值。

可选中项小部件（如单选按钮和复选框）与其余表单小部件不同。对于大多数表单部件，一旦表单提交，全部具备name属性的小部件都会被发送，即便没有任何值被填。对于可选中项，只有在勾选时才发送它们的值。若是他们没有被勾选，就不会发送任何东西，甚至连他们的名字也没有。

若是几个单选按钮的name属性共享相同的值，那么它们将被认为属于同一组的按钮。

元素：

<form>：全部HTML表单都以一个<form>元素开始，甚至相关的标题和段落都放里面。至少要设置action属性和method属性，这被认为是最佳实践。

<label></label>：在全部<label>元素上使用for属性。最明显的一个好处是容许用户单击标签以激活相应的小部件。还有一个好处是，对于单选按钮和复选框特别有用——这种控件的可点击区域可能很是小，设置标签来可以使它们的可点击区域变大。一个小部件上放置多个标签不是一个好主意。

<input>（空元素）：能够被size (框的物理尺寸) 和 maxlength (能够输入的最大字符数)限制。注意： <input>元素是如此特别是由于它几乎能够是任何东西。经过简单设置 type 属性，它能够完全改变，它用于建立大多数类型的表单小部件，包括单行文本字段、没有文本输入的控件、时间和日期控件和按钮。然而，也有一些例外，好比用来多行输入的 <textarea>。

<textarea></textarea>：textarea和常规的单行文本的主要区别是，容许用户输入包含硬换行符(即按回车)的文本。它本身的属性有cols（文本控件的可见宽度）、rows和wrap（表示控件是如何包装文本的），这三者应该都有默认值。

<button></button>：让用户在填写完表单后发送他们的数据。

<fieldset></fieldset>和<legend></legend>：主要用于一组单选按钮或复选框。<fieldset>元素是一种方便的用于建立具备相同目的的小部件组的方式，出于样式和语义目的（会给这一组小部件加个框）。你能够在<fieldset>开口标签后加上一个 <legend>元素来给<fieldset> 标上标签。 <legend>的文本内容正式地描述<fieldset>的用途。它是包含在<fieldset>里的。

<select></select>和<option></option>：下拉菜单和下拉菜单的“菜”。经过将multiple属性添加到<select>元素，您能够容许用户经过操做系统提供的默认机制来选择几个值(如，按下Ctrl 的同时点击多个值)。<option>元素能够嵌套在<optgroup>元素中，以建立视觉相关的组值，用label属性设置组名。可使用selected属性在所需的<option>元素上设置下拉菜单的默认值。

<datalist> </datalist>：为表单小部件提供建议的、自动完成的值。使用一些<option>子元素来指定要显示的值。使用list属性将数据列表绑定到一个文本域(一般是一个 <input> 元素)。list 属性和<datalist>元素能够用于任何须要用户输入的小部件。可是，除了文本(例如颜色或日期)，它应该如何工做还不清楚，不一样的浏览器在不一样的状况下会有不一样的表现。正由于如此，除了文本字段之外，要当心使用这个特性。

<progress></progress>：进度条。表示一个值，它会随着时间的变化而变化到最大的值，这个值由max属性指定。

<meter></meter>：仪表。必要的属性有min、max、low、high和optimum

属性：

action：定义表单收集到的数据被送去的地方。

method：定义发送数据的HTTP方法(它能够是“get”或“post”)。

for：将标签连接到表单小部件的一种正式方式。

type：可用于定义<input>的行为方式，有text、radio（单选按钮。老式收音机频道切换就是这种按钮，一个按下去，其它的弹出来）、checkbox（复选框）、date（除此以外，还有datetime-local、month、time和week）、email（经过包括multiple属性，它还可让用户将多个电子邮件地址输入相同的input(以逗号分隔)）、password（保护数据安全要靠https）、search（它们的值能够自动保存到同一站点上的多个页面上自动完成）、tel（telephone。在一些设备上(特别是在移动设备上)，可能会所以出现一个不一样的虚拟键盘，更适合输入电话号码）、url、number（可用min、max和setp约束该值）、range（滑块，也有min、max和step属性；滑块的一个问题是，它们不提供任何形式的视觉反馈以了解当前的值是什么，您须要使用JavaScript来添加这一点）、color、file（被接受的文件类型可使用accept属性来约束。此外，若是您想让用户选择多个文件，那么能够经过添加multiple属性来实现）、hidden（有时候，因为技术缘由，有些数据是用表单发送的，但不显示给用户，这有时是很方便的）、image（支持与<img>元素相同的属性，加上其余表单按钮支持的全部属性）；有特殊约束和错误的域能够防止表单被发送。也可用于<button>，接受三个值中的一个:submit（默认值）, reset（从用户体验的角度来看，这被认为是一种糟糕的作法）或者 button（不会发生任何事！这听起来很傻，可是用JavaScript构建定制按钮很是有用）。

value：可设置<input>的默认值，即默认的用来发送的数据；而单选按钮、复选框和下拉菜单就是发送被选中的项的value值（若是有设置；没设置就发送选项的内容）。

name：给每一个表单小部件收集到的数据片命名。

readonly：即只读，用户不能修改输入值，但发送时仍发送该数据；而disabled 是输入值永远不会与表单数据的其他部分一块儿发送。

placeholder：文本输入框中出现的文本，用来简略描述输入框的目的。

checked（布尔属性）：使单选按钮或复选框在页面加载时自动被选中。

发送表单数据

<form>元素定义了如何发送数据。它的全部属性都是为了让您配置当用户点击提交按钮时发送的请求。两个最重要的属性是action和method。

action属性定义了发送数据的位置。它的值必须是一个有效的URL。若是没有提供此属性，则数据将被发送到包含表单的页面的URL。

注意：能够指定使用HTTPS(安全HTTP)协议的URL。当您这样作时，数据将与请求的其他部分一块儿加密，即便表单自己是托管在使用HTTP访问的不安全页面上。另外一方面，若是表单是在安全页面上托管的，可是您指定了一个不安全的HTTP URL，它带有action属性，全部的浏览器都会在每次尝试发送数据时向用户显示一个安全警告，由于数据不会被加密。

method属性定义了如何发送数据。HTTP协议提供了几种执行请求的方法；HTML表单数据能够经过许多不一样的数据传输，其中最多见的是GET方法和POST方法。

使用GET请求用户将在他们的URL栏中看到数据，可是使用POST请求用户将不会看到。这一点很重要，有两个缘由：

若是您须要发送一个密码(或其余敏感数据)，永远不要使用GET方法不然数据会在URL栏中显示，这将很是不安全。
若是您须要发送大量的数据，那么POST方法是首选的，由于一些浏览器限制了URL的大小。此外，许多服务器限制它们接受的URL的长度。

用HTML表单发送文件是一个特殊的例子。文件是二进制数据——或者被认为是这样的——而全部其余数据都是文本数据。因为HTTP是一种文本协议，因此处理二进制数据有特殊的要求。enctype （encoded type）属性容许您指定在提交表单时所生成的请求中的Content-Type的HTTP数据头的值。这个数据头很是重要，由于它告诉服务器正在发送什么样的数据。默认状况下，它的值是application/x-www-form-urlencoded。它的意思是：“这是已编码为URL参数的表单数据。”若是你想要发送文件，你须要额外的三个步骤：

将method属性设置为POST，由于文件内容不能放入URL参数中。
将enctype的值设置为multipart/form-data，由于数据将被分红多个部分，每一个文件分别对应一个文件以及表单正文中包含的文本数据(若是文本也输入到表单中)。
包含一个或多个File picker小部件，容许用户选择将要上传的文件。

警告：为了防止滥用，许多服务器配置了文件和HTTP请求的大小限制。在发送文件以前，先检查服务器管理员的权限是很重要的。

每次向服务器发送数据时，都须要考虑安全性。到目前为止，HTML表单是最多见的攻击媒介(可能发生攻击的地方)。这些问题历来都不是来自HTML表单自己，它们来自于服务器如何处理数据。

一些很是有名的安全问题：XSS 和 CSRF、SQL注入、HTTP数据头注入和电子邮件注入。

执行客户端数据验证是可能的，可是服务器不能信任这种验证，由于它没法真正知道客户端到底发生了什么。

Form data validation

form validation —— 当你向 Web 应用提交数据时，应用会校验你输入的数据是不是正确的。若是验证经过，则这些数据可能会被保存至数据库中（一般都是这样的）或者执行下一步操做，若是校验未经过，则 Web 应用会提示你有错误的数据，而且通常都会明确地告诉你错误发生在哪里。

在 Web 中，你可能会碰见各类不一样的表单验证：

客户端验证发生在浏览器端，表单数据被提交以前，这种方式相较于服务器端校验来讲，用户体验更好，它能实时的反馈用户的输入校验结果，这种类型的校验能够经过下面这些方式实现：

JavaScript 校验，这是能够彻底自定义的实现方式；
HTML5 内置的校验，这不须要 JavaScript ，并且性能更好，可是不能自定义校验过程。

服务器端校验则是发生在浏览器提交数据并被服务器端程序接收以后 —— 一般服务器端校验都是发生在将数据写入数据库以前。

HTML5 一个特别有用的新功能就是，能够在不写一行脚本代码的状况下，即对用户的输入进行数据校验，这都是经过表单元素的校验属性实现的，这些属性可让你定义一些规则，用于限定用户的输入，好比某个输入框是否必须输入，或者某个输入框的字符串有最大长度限制，或者某个输入框必须输入一个数字、邮箱地址等，若是表单中输入的数据都符合这些限定规则，那么表示这个表单校验经过，不然则认为校验未经过。

当一个元素校验经过时：

该元素将能够经过 CSS 伪类 :valid 进行特殊的样式化；
若是用户尝试提交表单，若是没有其它的控制来阻止该操做（好比JavaScript便可阻止提交），那么该表单的数据会被提交。

若是一个元素未校验经过：

该元素将能够经过 CSS 伪类 :invalid 进行列表的样式化；
若是用户尝试提交表单，浏览器会展现出错误消息，并中止表单的提交。

required 属性（布尔属性，设置在<input>上）：最简单的HTML5验证功能是 required属性 — 若是要使输入成为必需的，则可使用此属性标记元素。

pattern 属性（设置在<input>上，而<textarea> 元素不支持）, 以 Regular Expression 做为 value 值. 正则表达式 (regex) 是一个能够用于匹配以字符组成的文本字符串的模式，因此它们是理想的表单验证器 (以及 JavaScript 中其它许多的用途)。

注意: 一些 <input> 元素类型不须要pattern 属性进行验证.，好比指定特定 email 类型就会使用匹配电子邮件格式的正则表达式来校验。

全部文本框 (<input> 或 <textarea>) 能够强制使用minlength 和 maxlength 属性. 若是值小于该字段 minlength 的值或大于 maxlength 值则无效，而且不能输入超过maxlength的长度。在数字条目中 (i.e. <input type="number">), min 和 max 属性也能强制验证数字的大小。

每次咱们输入无效的表单数据时, 浏览器总会显示错误的信息. 可是显示的信息取决于你所使用的浏览器。自定义这些信息的外观和文本, 你必须使用 JavaScript; 不能使用 HTML 和 CSS 来改变。使用 setCustomValidity() 方法，例子以下：

var email = document.getElementById("mail");

email.addEventListener("input", function (event) {

if (email.validity.typeMismatch) {

email.setCustomValidity("I expect an e-mail, darling!");

} else {

email.setCustomValidity("");

}

});

If you want to take control over the look and feel of native error messages, or if you want to deal with browsers that do not support HTML's built-in form validation, you must use JavaScript. More and more browsers now support the constraint validation API, and it's becoming reliable. This API consists of a set of methods and properties available on each form element. 约束验证 API 为您提供了一个强大的工具来处理表单验证，让您能够对用户界面进行极大的控制，而不只仅是仅使用 HTML 和 CSS。

有时，例如使用旧版浏览器或自定义小部件，您将没法（或不但愿）使用约束验证API。在这种状况下，您仍然可使用 JavaScript 来验证您的表单。创建本身的验证系统并不难。困难的部分是使其足够通用。

有许多库可用于执行表单验证; 你不该该犹豫使用它们。

远程校验：在某些状况下，执行一些远程验证可能颇有用。当用户输入的数据与存储在应用程序服务器端的附加数据绑定时，这种验证是必要的。一个用例就是注册表单，在这里你须要一个用户名。为了不重复，执行一个 AJAX 请求来检查用户名的可用性，而不是要求用户发送数据，而后发送带有错误的表单。

表单验证不须要复杂的 JavaScript，但它确实须要仔细考虑用户。必定要记住帮助您的用户更正他提供的数据。为此，请务必：

显示明确的错误消息。
放宽输入格式。
指出错误发生的位置（特别是在大型表单中）。

经过 JavaScript 发送表单

标准的HTML表单提交加载URL，这个URL是数据要发送的位置，这意味着浏览器窗口以整页加载进行导航。避免整页加载能够经过隐藏闪烁和网络滞后来提供更平滑的体验。

许多现代用户界面只使用HTML表单来收集用户的输入。当用户尝试发送数据时，应用程序将在后台异步地控制和传输数据，只更新UI中须要更改的部分。

异步地发送任何数据被称为AJAX, 表明"Asynchronous JavaScript And XML"。AJAX uses the XMLHttpRequest (XHR) DOM object. It can build HTTP requests, send them, and retrieve their results. 建立之初, XMLHttpRequest 被提出是打算将 XML 作为传输数据的格式。不过，JSON已经取代了XML，并且今天已经很是广泛了。But neither XML nor JSON fit into form data request encoding. 表单数据(application/x-www-form-urlencoded)由URL编码的键/值对列表组成。为了传输二进制数据，HTTP请求被从新整合成multipart/form-data。若是您控制前端（在浏览器中执行的代码）和后端（在服务器上执行的代码），则能够发送JSON / XML并根据须要处理它们。可是，若是你想使用第三方服务，这并不容易。有些服务只接受表单数据。也有使用表单数据更简单的状况。若是数据是键/值对或原始二进制数据，现有的后端工具能够处理它，而不须要额外的代码。

过期浏览器的 HTML 表单

HTML表单和旧式浏览器最大的问题是CSS的兼容性。

优雅地降级(Graceful degradation)是web开发者最好的朋友。

HTML5引入的新input类型十分酷，由于他们的降级(degrade)是高度可预测的。若是一个浏览器不能理解 <input>元素的 type 属性, 它将会后退到text同样的行为。

CSS属性选择器在 HTML Forms 中十分有用，然而旧式浏览器不支持. 在那种情形下，通常会习惯性使用等价的class。

input[type=number], input.number {

/* 在某些浏览器中，这可能会失败，由于若是他们不理解其中任何一个选择器，则跳过整个规则 */

}

有两种定义HTML表单按钮的方式:

<input> 元素使用type 属性并设置其值为button, submit, reset or image
<button> 元素

<button> 元素有两个问题使人困扰，其中一个是一些旧浏览器不使用submit 做为 type 属性的默认值, 因此建议老是在<button> 元素上设置 type 属性。

即便仍然能够对HTML表单小部件的文本元素（如大小、字体颜色等）进行一些调整，但那样作会有反作用。最好的办法仍是不要美化HTML表单小部件。但你仍然能够将样式应用到HTML表单小部件周围的项目上。

JavaScript在旧式浏览器中可能存在不少的问题。

API的兼容性是最大的问题。因为这个缘由，与"不引人注意的（unobtrusive）" JavaScript一块儿工做被认为是最佳实践（意思是没有JS或JS出了问题，网页也能工做）。这个开发模式定义了两个需求：

结构和行为之间的严格隔离
若是代码出错，内容和基本功能必须保持可访问和可用状态

有不少情形，好的"polyfill"能经过提供缺乏的API以提供帮助。A polyfill is a bit of JavaScript that "fills in the holes" in the functionality of legacy（遗产） browsers. The best way to polyfill missing API is by using the Modernizr library and its spin-off project: YepNope.

注意性能：旧式浏览器有处理速度很是慢的JavaScript引擎，让polyfills的执行对于用户来讲变得很痛苦。性能自己就是一个主题，但旧式浏览器对它很是敏感：基本上，它们速度慢，须要的poliyfill就越多，结果它们须要处理的JavaScript就越多。与现代浏览器相比，它们承受双重负担。有时，在旧式浏览器中放弃某些功能会带来更好的用户体验，而不是在全部浏览器中具备彻底相同的功能。做为最后提醒，老是优先考虑用户。

样式化 HTML 表单

使用HTML表单和CSS以使页面更加美观。使人惊讶的是，这可能有点棘手。因为历史和技术的缘由，表单部件不能很好地与CSS配合工做。因为这些困难，许多开发人员选择构建本身的HTML小部件以得到更好的控制和视觉观感。然而，在现代浏览器中，web设计者愈来愈多地控制表单元素的设计。

涉及到CSS，并不是全部表单小部件都是平等的

为了让form表单的外观和其余内容保持一致，你能够在你的样式表中增长如下内容:

button, input, select, textarea {

font-family : inherit;

font-size : 100%;

}

若是你想保持组件的原生观感，又想给它们一致的大小，你会面临一些困难。这是由于每一个小部件都有本身的边框，填充和边距的规则。因此若是你想给几个不一样的小部件相同的大小，你必须使用box-sizing 属性。

The <legend> element is okay to style, except for positioning. In every browser, the <legend> element is positioned on top of the top border of its <fieldset> parent. There is absolutely no way to change it to be positioned within the HTML flow, away from the top border. You can, however, position it absolutely or relatively, using the position property. But otherwise it is part of the fieldset border.

可访问性是让你的网站尽量多的人能使用的作法——咱们传统上认为这是关于残疾人的，但实际上它也涵盖了其余群体，好比使用移动设备的人群，或者那些网络链接缓慢的人群。

可访问性和它所须要的最佳实践可使每一个人受益：

语义HTML(提升可访问性)也提升了搜索引擎优化，使你的网站更容易得到。
关心可访问性展现良好的伦理道德,它提升了你的公众形象。
其余一些改善可访问性的好的作法也会让你的网站更容易被其余群体使用，好比移动电话用户，低网速等等。事实上，每一个人均可以从不少这样的改进中受益。
咱们有没有提到在某些地方法律也是如此?

Because the <legend> element is very important for accessibility reasons, it will be spoken by assistive technologies as part of the label of each form element inside the fieldset, it's quite often paired with a title, and then hidden in an accessible way. For example:

HTML：

<h1>Hello</h1>

</fieldset>

CSS：

legend {

width: 1px;

height: 1px;

overflow: hidden;

}

默认状况下，全部浏览器都认为<textarea> 元素是inline block，与文本底线对齐。

background: none;

font : .9em/1.5em表示字体大小为0.9em、行高为1.5em。

CSS 的属性 vertical-align（用在子元素上）用来指定内联元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。The text-align（用在父元素上） CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements, only their inline content.

由于咱们的设计是一个固定大小的设计，因此咱们会把CSS的resize 属性设为none来防止用户调整咱们的多行文本域的大小。The resize CSS property sets whether an element is resizable, and if so, in which direction(s). In many browsers, <textarea> elements are resizable by default. You may override this behavior with the resize property.

CSS的overflow 属性是用来让域在不一样的浏览器上渲染得更一致。一些浏览器默认值为 auto，而一些将默认值设为 scroll。

若咱们想构建只包含文本域和按钮的表单，用 CSS 美化它们很是容易。

HTML表单的高级样式

浏览器厂家在CSS表现力在表单方面的扩展作了一些尝试（即-webkit-、-moz-和-ms-之类的），在某些状况下，知道什么可用也挺不错的。警告：尽管这些尝试颇有趣，但它们是非标准的，也就是不可靠的。.若是你使用它们(也许你并不经常使用)，你要本身承担风险，使用非标准的属性对于Web并非好事。

The road to nicer forms: useful libraries and polyfills: Remember that binding CSS and JavaScript can have side effects. So if you choose to use one of those libraries, you should always have fallback style sheets in case the script fails.

表单小部件的属性兼容表

HTML 和可访问性

你可能在想，为何语义化（semantics）对于一个网页来讲如此重要。总的来讲，正确的语义化可以使Css和javaScript更为便利地操做网页的样式和行为。例如，一个用来操做视频播放的按钮能够写成这样一种形式:

<div>Play video</div>

接下来你将看到一种更好的写法，它使用了正确的HTML标签，看上去更加合理:

<button>Play video</button>

<button>标签不只提供了按钮的样式（虽然有时会从新编写样式），还提供了键盘的可访问性，如：使用tab键更换按钮，使用回车键点击按钮。

若是你在项目的一开始就使用HTML语义化，不只不会花更多的时间，并且又有如下的可访问性优势：

更便于开发 — 如上所述，你可使HTML更易于理解，而且能够绝不费力的得到一些功能。
更适配移动端 — 语义化的HTML文件比非语义化的HTML文件更加轻便，而且更易于响应式开发。
更便于SEO优化 —search engines give more importance to keywords inside headings, links, etc., than keywords included in non-semantic <div>s, etc.，使用语义化可以使网页更容易被用户搜索到。

上面咱们讨论了语义化的重要性以及为何咱们要使用正确的HTML标签来表达正确的意图。语义化（semantics）是咱们不可忽视的一部分，由于它每每决定了网页的可访问性（accessibility）。

repeating content units适合用 <article>

By UI controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls. One key aspect to the accessibility of UI controls is that by default, browsers allow them to be manipulated by the keyboard.

tabindex = '0'：使元素能被聚焦（包括经过Tab键）。Basically, the tabindex attribute is primarily intended to allow tabbable elements to have a custom tab order (specified in positive numerical order), instead of just being tabbed through in their default source order. This is nearly always a bad idea, as it can cause major confusion. Use it only if you really need to, for example if the layout shows things in a very different visual order to the source code, and you want to make things work more logically. 虽然tabindex =“0”容许咱们用 tab 选择按钮，但它不容许咱们经过 Enter / Return 键来激活它们。要作到这一点，咱们必须添加JS 小绝招（JavaScript trickery）。

表单标签也很重要，可让您了解您须要输入每一个表单输入的内容：

用

<div>

</div>

而不是

Fill in your name: <input type="text" id="name" name="name">

你不该该在图像中包含文本内容 - 屏幕阅读器根本没法访问它。还有其余的缺点 - 你不能选择它并复制/粘贴它。不要这样作！

<figure> and <figcaption> — which are supposed to associate a figure of some kind (it could be anything, not necessarily an image) with a figure caption.