基础HTML5网页知识

Once-Day

已于 2022-02-11 18:58:52 修改

阅读量337

点赞数

分类专栏： # 网页开发 FullStack开发文章标签： html5 html

于 2022-02-11 18:55:55 首次发布

本文链接：https://blog.csdn.net/Once_day/article/details/122886760

版权

FullStack开发同时被 2 个专栏收录

36 篇文章 1 订阅

订阅专栏

网页开发

9 篇文章 0 订阅

订阅专栏

简单的HTML网页

author: Once Day date:2022年2月3日

文章目录

- - 简单的HTML网页

1.文档类型声明<!DOCTYPE>

该标签指明了HTML所使用的规范，是一个网页文档的起始点，对于HTML5是必须拥有的元素。

HTML5的<!DOCTYPE>声明非常简单：

<!DOCTYPE html>

但是HTML4.01以及Xhtml则比较复杂，分几种情况，详情可看下面链接：

类型声明可以让浏览器正确解析文档，而且也确定了可以使用的html标签。

2.文档根元素声明html

该标签给出了html元素的容器，让浏览器知道这是一个html文档，除了<!DOCTYPE>以外，其他元素应都在里面。

虽然该标签可以略写，但是出于严格自律的要求，应在初学时规范书写每一行代码！

该标签支持HTML5全局标准属性和HTML5全局事件属性。

该标签具有两个属性：

manifest 定义一个url，其中描述了文档的缓存信息。
xmlns 定义 XML namespace 属性，值可为"http://www.w3.org/1999/xhtml"。

该元素中最常使用html全局标准属性中的lang属性，可指定网页所用的语言。

对于中国大陆，正常使用**lang=“zh-CN”**即可：

<html lang="zh-CN">

网页头部的声明应该是用 lang=“zh” 还是 lang=“zh-cn”？ - 知乎 (zhihu.com)

3.文档头部信息数据

3.1 标签< head >

包含了网页的标题(显示在标签页)，以及脚本和样式表的链接，该标签支持HTML5全局标准属性。

3.2 标签< title >

定义了文档的标题，是必须的标签，且每个文档只能有一个该元素。它提供了浏览器工具栏、收藏夹、搜索引擎等处的标题。该标签支持HTML5全局标准属性。

3.3 标签< base >

定义了页面上所有链接的相对地址默认 URL 或默认目标，该元素只有两个私有属性，使用时至少指定一个。例如下面：

<base href="//www.onceday.work/file/...." target="_blank">

这样，后面所有链接的的默认相对地址即为上面定义的地址，默认目标则为打开新界面(***_blank***)。

target属性有以下值：

_blank 在新窗口打开链接。
_self 在同一个框架（默认）中打开链接。
_parent 在父框架中打开链接。
_top 在窗口文档中打开链接。
framename 在一个指定的框架中打开链接。

该标签< base >支持HTML5全局标准属性。

3.4 标签< link >

定义了文档与外部资源之间的关系，通常用于链接到样式表:

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

常用方法如上所示，其他链接情况可以浏览以下链接：HTML5 link_w3cschool。该标签支持HTML5全局标准属性和HTML5全局事件属性。

3.5 标签< style >

用于表示文档所使用的样式，可包含多个，但是在< head >标签区域外的该标签，必须使用scoped属性，即样式仅仅应用到 style 元素的父元素及其子元素。如，

<style type="text/css" scoped="scoped"></style>

type属性在html5可以省略，因为css是默认的样式表。除此之外，还有属性***media***，为样式表规定不同的媒体类型。详情：HTML style media 属性_w3cschool。

3.6 标签< script>,< noscript >

< script > 标签可用于链接外部 JavaScript 文件中的资源，但是处于性能优化考虑，最好放在文档底部再引入，后续再介绍。

< noscript > 元素用来定义在脚本未被执行时的替代内容（文本）。此标签可被用于可识别 < noscript > 标签但无法支持其中的脚本的浏览器。该标签支持HTML5全局事件属性。

3.7 标签< meta>

该标签比较重要，用于描述HTML文档的基本信息，如网页的描述，关键词，作者等。该标签支持HTML5全局事件属性。

在HTML5中，最常见的就是设定文档的字符编码。

<meta charset="UTF-8">

此外，http-equiv可以模拟一个 HTTP 响应头。属性值content-type可用于规定文档的字符编码。

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

属性值default-style规定要使用的预定义样式表。

<meta http-equiv="default-style" content="style title">

属性值refresh定义文档自动刷新的时间间隔。

<meta http-equiv="refresh" content="300">

另一个属性name可以提供一个名称用于后续的内容。

application-name 规定页面所代表的 Web 应用程序的名称。
author 规定文档的作者的名字。
description 规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。
generator 规定用于生成文档的一个软件包
keywords 规定一个逗号分隔的关键词列表

例如：

<meta name="keywords" content="name,family,people">

详情可看HTML meta_w3cschool。

4.文档主体部分

以下标签都支持HTML5全局标准属性和HTML5全局事件属性。

4.1 标签< body >

表示 HTML 网页的主体部分，用户可以看到该标签内的内容。一个HTML文件只能存在一个< body >标签。

4.2 标签< h1 >…< h6>

可定义不同大小的标题。

<h1>最大的标题</h1>

4.3 标签< div >

定义 HTML 文档中的一个分隔区块或者一个区域部分，可通过 CSS 来对这些元素进行格式化。

该标签是响应式界面设计的主要框架元素，详情可看：响应式 Web 设计。

4.4 标签< span>

标签内的内容独立于文档，这意味着可以使用样式表单独对其进行格式化。如，

<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>

如果不对其应用样式，那么元素中的文本与其他文本不会任何视觉上的差异。

4.5 标签< p >和< hr >、< br >、< wbr >

< p >定义了一个段落，< hr >是一条水平线，< br > 对文档中的文本进行换行。

< wbr > 标签可以用来定义HTML文档中需要进行换行的位置，与< br >标签不同，如果浏览器窗口的宽度足够，则不换行；反之，则在添加了 < wbr > 标签的位置进行换行，

这些都可以分割不同文字主题。

4.6 标签< aside >

用来表示跟当前页面的内容没有很相关的部分，通常用于显示侧边栏或者补充的内容，例如：目录、索引等。例如，

<aside> 
<h4>csdn</h4> 
<p>一个自由的分享社区</p>
</aside>

4.7 标签< nav >

用于表示HTML页面中的导航，可以是页与页之间导航，也可以是页内的段与段之间导航。Html5的新标签，可能不支持低版本浏览器。例如，

<nav> 
<a href=".../主页/">HTML</a> | 
<a href=".../内容/">CSS</a> | 
<a href=".../分享/">JavaScript</a> | 
<a href=".../关于/">jQuery</a>
</nav>

4.8 标签< article >

定义独立的内容，如来自论坛、博客、故事、新闻等。例如，

<article>
 <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (缩写为 IE9)在2011年3月14日21:00发布。</p>
</article>

4.9 标签 < footer >

用于定义文档的页脚部分。典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。可以定义多个 < footer > 元素。

使用 < footer > 元素来插入联系信息，应该在 < footer > 元素内使用 < address > 标签。

4.10 标签< header >

用来表示介绍性的内容，即定义了文档中的页眉，应该作为介绍内容或者导航链接栏的容器。可以定义多个 < header > 元素。例如，

<article>
    <header>
        <h1>Internet Explorer 9</h1>
        <p><time pubdate datetime="2011-03-15"></time></p>
    </header>
    <p> Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
</article>

4.11 标签< section>

定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。例如，

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>

5.多媒体内容

以下标签都支持HTML5全局标准属性和HTML5全局事件属性。

5.1 标签< audio >

定义音乐或其他音频流，支持的3种文件格式：MP3、Wav、Ogg。详情参考:HTML5 audio_w3cschool。

受限于不同的浏览器支持，使用mp3格式比较好。在 < audio > 和 < /audio > 之间放置文本内容，这些文本信息可被显示在那些不支持 < audio > 标签的浏览器中。

该标签含有以下属性值：

autoplay 音频在就绪后马上播放。
controls 向用户显示音频控件，比如播放/暂停按钮。
loop 当音频结束时重新开始播放。
muted 音频输出为静音。
preload 规定网页加载时音频加载的方式，默认为auto自动加载。
src 规定音频文件的 URL。

详情参考:HTML audio_w3cschool。

5.2 标签< canvas >

定义了一个图形容器，可用脚本来绘制图形。< canvas > 元素中的任何文本将会被显示在不支持的浏览器中。在HTML5有两个新属性：

height 规定画布的高度
width 规定画布的宽度

例如：

<canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>

5.3 标签< video>

该标签定义了一个视频流，提供了播放、暂停和音量控件来控制视频。可以提前设定视频的尺寸，以保留页面空间。在标签中间插入内容可提供给不支持video元素的浏览器来显示。可以链接不同的视频文件。浏览器将使用第一个可识别的格式。< video > 元素支持三种视频格式： MP4, WebM, 和 Ogg。

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

例如，

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

其私有属性和 < audio >元素 一样，并可以使用javaScript进行控制。

< track > 可控制媒体播放器的文本轨迹，如字幕文件等，详情可见：HTML_track w3cschool。

5.4 标签< source >

用于为媒体元素定义媒体资源，可以提供多个媒体源以供选择。其有三个属性:

media 规定媒体资源的类型，供浏览器决定是否下载
src 规定媒体文件的 URL
type 规定媒体资源的 MIME 类型

5.5 标签< embed >

定义了一个容器，用来嵌入外部应用或者互动程序（插件）。如flash动画片。含有以下属性：

height 规定嵌入内容的高度。
width 规定嵌入内容的宽度。
src 规定被嵌入内容的 URL。
type 规定嵌入内容的 MIME 类型。

受限于目前浏览器插件支持，不推荐使用。

5.6 标签< img >,< figure >,< figcaption >

< img >标签用于向网页中添加相关图片。HTML5支持以下属性：

alt 规定图像的替代文本。
height 规定图像的高度。
width 规定图像的宽度。
ismap 将图像规定为服务器端图像映射。
src 规定显示图像的 URL。
usemap 将图像定义为客户器端图像映射。

< img > 标签有两个必需的属性：src 和 alt。

< figure > 规定独立的流内容（图像、图表、照片、代码等等），内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

< figcaption >标签用来表示< figure >标签的标题，应该被置于 < figure > 元素的第一个或最后一个子元素的位置。

5.7 标签< map > , < area >

< map > 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。属性 name 指定其名称。

< area >定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）,始终嵌套在 < map > 标签内部。HTML5支持以下属性：

alt 规定区域的替代文本。如果使用 href 属性，则该属性是必需的。
coords 规定区域的坐标。
href 规定区域的目标 URL。
hreflang 规定目标 URL 的语言。
media 规定目标 URL 是为何种媒介/设备优化的。默认：all。
rel 规定当前文档与目标 URL 之间的关系。
shape 规定区域的形状。
target 规定在何处打开目标 URL。
type 规定目标 URL 的 MIME 类型。

详情参考：HTML5 area_w3cschool。例如，

<img src="planets.gif"width="145" height="126"alt="Planets"usemap="#planetmap">
<map name="planetmap">
 <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
 <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
 <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

6.链接

6.1 标签< a >

主要作用是用于超链接，可以链接到其他页面也可以链接到本地的其他文件，还可以作为本页面的书签。

默认外观有三种：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

默认是在浏览器本页面打开链接，可设置为其他地方打开。以下是HTML5支持的属性：

href 规定链接的目标URL
hreflang 规定目标 URL 的基准语言
media 规定目标 URL 的媒介类型，默认值：all
download 指定下载链接
rel 规定当前文档与目标 URL 之间的关系
target 规定在何处打开目标 URL
type 规定目标 URL 的 MIME 类型

例如：

<a id="tips">提示部分</a> 
<a href="#tips">跳到提示部分</a>

详情可看：HTML5 a_w3cschool。

7.列表

以下标签都支持HTML5全局标准属性和HTML5全局事件属性。

7.1 标签< ul >

定义无序列表，例如：

<ul>
   <li>Coffee</li>
   <li>Tea</li>
</ul>

7.2 标签< ol >

定义文档中的有序列表，属性 reversed 可以指定列表倒序。例如：

<ol start="50">
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ol>

7.3 标签< li >

用于表示文档中列表的项目。

7.4 标签< dl >、< dd >、< dt >

这些标签用来创建一个描述性列表，如：

<dl>
 <dt>咖啡</dt>
   <dd>黑色的热饮</dd>
 <dt>牛奶</dt>
   <dd>白色的冷饮</dd>
</dl>

< dt > 是项目的名称，< dd >是项目的具体描述，上面的这种格式是固定的。在 < dd > 标签内，能放置段落、换行、图片、链接、列表等等。一个< dt >后面可接多个描述性< dd >。

8.表格

以下标签都支持HTML5全局标准属性和HTML5全局事件属性。

8.1 标签< table >

用于定义文档中的表格，在 HTML5 中，仅支持 “border” 属性，并且只允许使用值 “1” 或 “”。例如，

<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

详情参考：HTML5 table_w3cschool。

8.2 标签< th>

用于表示一个表格的表头，< th > 元素中的文本通常呈现为粗体并且居中。HTML5支持以下属性：

colspan 规定表头单元格可横跨的列数
rowspan 规定表头单元格可横跨的行数
headers 规定与表头单元格相关联的一个或多个表头单元格
scope 规定表头单元格是否是行、列、行组或列组的头部

详情参考：HTML5 th_w3cschool

8.3 标签< tr >

用于表示一个表格中的行，可包含多个其他表格元素。

8.4 标签< td >

用于表示一个表格中的单元格，< td > 元素中的文本通常是普通的左对齐文本。HTML5支持以下属性：

colspan 规定表头单元格可横跨的列数
rowspan 规定表头单元格可横跨的行数
headers 规定与表头单元格相关联的一个或多个表头单元格

8.5 标签< caption >

用来为表格定义一个标题，只能对每个表格定义一个标题。如：

<table border="1"> 
<caption>Monthly savings</caption> 
<tr> <th>Month</th> <th>Savings</th> </tr> 
<tr> <td>January</td> <td>$100</td> </tr>
</table>

8.6 标签< col >

用于控制表格中的列，更加方便的为表格中的列应用样式。HTML只支持一个属性，即 span，规定 < col > 元素应该横跨的列数。

8.7 标签< colgroup >

可以组合< col >标签，以便对其进行格式化，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。只能在 < table > 元素之内，在任何一个 < caption > 元素之后，以及其他元素之前使用 < colgroup > 标签。HTML5支持属性 span，其规定列组应该横跨的列数。例如，

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

8.8 标签< caption >

用来为表格定义一个标题，必须直接放置到 < table > 标签之后。通常这个标题会被居中于表格之上。

8.9 标签< thead >、< tbody >、< tfoot >

< thead >用于将表格中的表头组合起来，< tbody >用于组合表格中的主体内容，< tfoot >标签用于表示一个表格中的页脚。这几个元素内部必须包含一个或者多个 < tr > 标签。

< tfoot > 标签必须被用在以下情境中：作为 < table > 元素的子元素，出现在 < caption >、< colgroup > 和 < thead > 元素之后，< tbody > 和 < tr > 元素之前。

通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

例如，

<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

9.文本格式化

以下标签都支持HTML5全局标准属性和HTML5全局事件属性。

详情参考：HTML 格式化_w3cschool。

9.1 标签< b >,< em >,< i >,< pre >,< small >,< strong >,< mark >

< b >标签对某些文本实现加粗的效果。

< em >呈现为被强调的文本。

< strong >定义重要的文本。

< i >定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。

< mark >定义带有记号的文本，表现为高亮。

被强调的文本应该用 < em > 标签表示，重要的文本应该用 < strong > 标签表示，被标记的或者高亮显示的文本应该用 < mark > 标签表示。

< pre >可以对文档中的文本进行预格式化，被包围在 < pre > 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

< small > 标签制作更小字号的文本，HTML5中不再支持< small >标签，

9.2 标签< code >,< kbd >,< cite >,< blockquote >,< dfn >,< samp >,< var >,< q >

< blockquote >标签用来引用大段的内容块，处于该标签内的文本会独自分离出来，并且自动缩进。属性 cite 可以规定引用的来源。

< code > 定义计算机代码文本。

< samp >定义样本文本。

< kbd >定义键盘文本。它表示文本是从键盘上键入的。

< var >定义变量。可以与 < pre > 及 < code > 标签配合使用。

< cite >定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

< q > 标签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。属性 cite 规定引用的源 URL。

详情参考：HTML5 短语元素_w3cschool。

9.3 标签< abbr >,< address >

< abbr > 标签用来表示一个缩写词或者首字母缩略词，如"WWW"或者"NATO"。这样可以给浏览器及搜索引擎提供足够的信息。例如,

The<abbr title="World Health Organization ">WHO</abbr> was founded in 1948.

< address >标签提供某个文档中所属作者或者所有者的相关的联系信息。详情参考：HTML5 address_w3cschool。

9.4 标签< del >,< ins >,< sub >,< sup >

< del >表示一段带有已删除部分和新插入部分的文本，有两个属性：

cite 规定一个解释了文本被删除的原因的文档的 URL。
datetime 规定文本被删除的日期和时间。

< ins >定义已经被插入文档中的文本。也有如上两个属性。

< del > 和 < ins > 一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。例如，

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

< sub >和< sup >标签分别为文档中的内容定义下标和上标。例如，

<p>这个文本包含 <sub>下标</sub>文本。</p>

9.5 标签< bdo >，< bdi >

< bdi >将某段文字从周围的文本方向设置中隔离出来，用于控制评论等无法确定大小的文字。

< bdo > 标签覆盖默认的文本方向，属性 dir 有两个值， ltr 表示从左到右，以及 rtl。例如，

<p><bdo dir="rtl">该段落文字从右到左显示</bdo></p>

10.表单、按钮和输入输出

以下标签都支持HTML5全局标准属性和HTML5全局事件属性。

10.1 标签< form >

用于创建供用户输入的 HTML 表单。< form > 元素包含一个或多个如下的表单元素：

< input >,< textarea >,< button >,< select >,< option >,< optgroup >,< fieldset >,< label >。

HTML5支持以下属性:

accept-charset 规定服务器可处理的表单数据字符集。
action 规定当提交表单时向何处发送表单数据。
autocomplete 规定是否启用表单的自动完成功能。
enctype 规定在向服务器发送表单数据之前如何对其进行编码，适用于 method=“post” 的情况。
method 规定用于发送表单数据的 HTTP 方法。
name 规定表单的名称。
novalidate 如果使用该属性，则提交表单时不进行验证。
target 规定在何处打开 action URL。

详情参考：HTML5 form_w3cschool。

10.2 标签< textarea >

用于创建一个可以输入多行的文本框。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。HTML5支持以下属性，

autofocus 规定当页面加载时，文本区域自动获得焦点。
cols 规定文本区域内可见的列数。
disabled 规定禁用文本区域。
form 定义文本区域所属的一个或多个表单。
maxlength 规定文本区域允许的最大字符数。
name 规定文本区域的名称。
placeholder 规定一个简短的提示，描述文本区域期望的输入值。
readonly 规定文本区域为只读。
required 规定文本区域是必需的/必填的。
rows 规定文本区域内可见的行数。
wrap 规定当提交表单时，文本区域中的文本应该怎样换行。

例如，

<textarea rows="10" cols="30">
我是一个文本框。 
</textarea>

10.3 标签< input >

规定了用户可以在其中输入数据的输入字段。输入字段可通过多种方式改变，取决于 type 属性。

可以使用 < label > 元素来定义 < input > 元素的标注。

HTML5支持以下属性：

autocomplete 输入字段是否应该启用自动完成功能。
autofocus 是否应该自动获得焦点。
disabled 是否禁用输入元素
form 规定输入元素所属的表单，可以是多个。
formnovalidate 可以覆盖< form >元素的 novalidate属性。
list 引用 < datalist > 元素，其中包含 < input > 元素的预定义选项。
max 规定输入元素的最大值。
maxlength 规定输入元素允许的最大字符数。
min 规定元素的最小值。
multiple 是否允许用户输入多个值。
name 固定输入元素的名称
pattern 规定验证输入元素的正则表达式。
placeholder 规定输入提示信息。
readonly 规定输入字段是只读的。
required 提交之前是否必须填写字段。
size 规定字符宽度。
step 规定输入元素的合法数字间隔。
type 固定输入元素的类型。
value 指定输入元素的值。

当输入类型为 type=”image“ 时，以下属性可设置：

alt 定义图像输入的替代文本。
formaction 属性规定当表单提交时处理输入控件的文件的 URL。
formenctype 属性规定当表单数据提交到服务器时如何编码。
formmethod 定义发送表单数据到 action URL 的 HTTP 方法。
formtarget 规定表示提交表单后在哪里显示接收到响应的名称或关键词。
height 规定高度
src 规定显示为提交按钮的图像的 URL。
width 规定 < input > 元素的宽度。

当输入类型为 type=”submit" 时，以下属性可设置：

formaction 属性规定当表单提交时处理输入控件的文件的 URL。
formenctype 属性规定当表单数据提交到服务器时如何编码。
formmethod 定义发送表单数据到 action URL 的 HTTP 方法。
formtarget 规定表示提交表单后在哪里显示接收到响应的名称或关键词。

当输入类型为 type=”checkbox/radio" 时，以下属性可设置：

checked 规定被预先选中的元素。

当输入类型为 type=”file" 时，以下属性可设置：

accept 通过文件上传来提交的文件的类型。

详情参考:HTML5 input_w3cschool。

10.4 标签< button >

定义一个按钮。在 < button > 元素内部，可以放置内容，比如文本或图像。这是该元素与使用 < input > 元素创建的按钮之间的不同之处。始终为 < button > 元素规定 type 属性。不同的浏览器对 < button > 元素的 type 属性使用不同的默认值。

HTML5支持以下属性：

autofocus 是否应该自动获得焦点。
disabled 是否禁用输入元素
form 规定输入元素所属的表单，可以是多个。
name 固定输入元素的名称
type 固定输入元素的类型。
value 指定输入元素的值。

当输入类型为 type=”submit" 时，以下属性可配合使用：

formaction 属性规定当表单提交时处理输入控件的文件的 URL。
formenctype 属性规定当表单数据提交到服务器时如何编码，覆盖< form >元素的对应属性。
formmethod 定义发送表单数据到 action URL 的 HTTP 方法。
formnovalidate 可以覆盖< form >元素的 novalidate属性。
formtarget 规定表示提交表单后在哪里显示接收到响应的名称或关键词。

详情参考: HTML5 button_w3cschool。

10.5 标签< select >，< option >，< optgroup >

< select >用来创建下拉列表，含有以下属性:

autofocus 是否应该自动获得焦点。
disabled 是否禁用输入元素
form 规定输入元素所属的表单，可以是多个。
multiple 当该属性为 true 时，可选择多个选项。
name 定义列表的名称
required 提交之前是否必须选择一个选项。
size 规定下拉列表中可见选项的数目。

详情参考：HTML5 select_w3cschool。

< option >定义下拉列表中的一个选项，能够在不带任何属性的情况下使用，但是通常需要 value 属性，该属性定义了发送到服务器的数据。支持以下属性：

disabled 是否禁用输入元素
label 定义当使用 < optgroup > 时所使用的标注。
selected 规定选项（在首次显示在列表中时）表现为选中状态。
value 定义送往服务器的选项值。

< optgroup >用来定义一个选项组，即，可以将文档中的选项进行组合。支持以下属性：

disabled 是否禁用输入元素
label 为选项组规定描述。

例如，

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

10.6 标签< fieldset >,< legend >

< fieldset >标签用于对表单中的相关元素进行分组，会在相关表单元素周围绘制边框。支持以下属性：

disabled 是否禁用输入元素
form 规定输入元素所属的表单，可以是多个。
name 定义列表的名称

< legend >元素是< fieldset >元素的第一个子元素，定义了< fieldset >元素的标题。例如，

<form>
 <fieldset>
   <legend>Personalia:</legend>
   Name: <input type="text"><br>
   Email: <input type="text"><br>
   Date of birth: <input type="text">
 </fieldset>
</form>

10.7 标签< label >

为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。< label > 标签的 for 属性应当与相关元素的 id 属性相同。支持以下属性：

for 规定 label 与哪个表单元素绑定。
form 规定 label 字段所属的一个或多个表单。

例如，

<form action="demo_form.asp">
 <label for="male">Male</label>
 <input type="radio" name="sex" id="male" value="male"><br>
 <label for="female">Female</label>
 <input type="radio" name="sex" id="female" value="female"><br>
 <input type="submit" value="提交">
</form>

10.8 标签< output >

作为计算结果输出显示(比如执行脚本的输出)。支持以下属性：

for 描述计算中使用的元素与计算结果之间的关系。
form 定义输入字段所属的一个或多个表单。
name 定义对象的唯一名称（表单提交时使用）。

例如，

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>

详情参考：HTML5 output_w3cschool。

11.度量衡、进度条、时间日期、拼音注释

以下标签都支持HTML5全局标准属性和HTML5全局事件属性。

11.1 标签< meter >

< meter > 标签定义度量衡。仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。支持以下属性：

form 规定所属的一个或多个表单。
high 规定被界定为高的值的范围。
low 规定被界定为低的值的范围。
max 规定范围的最大值。
min 规定范围的最小值。
optimum 规定度量的最优值。
value 必需。规定度量的当前值。

例如，

<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

详情参考：HTML5 meter_w3cschool。

11.2 标签< progress >

用于定义文档中的进度条。可与JavaScript的一起使用来显示任务的进度。支持以下属性：

max 规定需要完成的值。
value 规定进程的当前值。

例如，

<progress value="22" max="100"></progress>

详情参考：HTML5 progress_w3cschool。

11.3 标签< time >

用于标注日期、时间或日期与时间的组合（日期格式是YYYY-MM-DD）。

属性 datetime 规定日期/时间。例如，

<p>我们在每天早上 <time>9:00</time> 开始营业。</p> 
<p>我在 <time datetime="2017-02-14">情人节</time> 有个约会。</p>

11.4 标签< ruby >,< rt >,< rp >

< ruby > 标签定义 ruby 注释（中文注音或字符）。< rt > 标签定义字符（中文注音或字符）的解释或发音。< rp > 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

例如，

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

详情参考：HTML5 ruby_w3cschool。

12.嵌入对象

以下标签都支持HTML5全局标准属性和HTML5全局事件属性。

12.1 标签< object >,< param >

< object >标签定义一个嵌入的对象。使用此元素可以添加多媒体。在 HTML5 中，objects 可以在form表单中提交。在 HTML5 中，objects 不再出现在 < head > 元素区域内。支持以下属性：

data 定义引用对象数据的 URL。
height 定义对象的高度。
type 定义被规定在 data 属性中指定的文件中出现的数据的 MIME 类型。
usemap 规定与对象一同使用的客户端图像映射的 URL。
width 定义对象的宽度。

详情参考：HTML5 object_w3cschool。

< param >标签为< object >标签提供嵌入内容的运行时参数的name与value对。例如，

<object data="horse.wav">
  <param name="autoplay" value="true">
</object>

12.2 标签< iframe >

规定一个内联框架，一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。支持以下属性：

height 固定高度
name 给定名称
sandbox 给定对内容的一系列额外限制。
seamless 规定看起来像是父文档中的一部分。
src 规定在 < iframe > 中显示的文档的 URL。
srcdoc 规定页面中的 HTML 内容显示在 < iframe > 中。
width 规定 < iframe > 的宽度。

详情参考：HTML5 iframe_w3cschool。

12.3 标签< details >,< summary >

< details > 标签规定了用户可见的或者隐藏的需求的补充细节。

< details > 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 < details > 标签里边。

< details > 元素的内容对用户是不可见的，除非设置了 open 属性。与 < summary > 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

< summary > 标签为 < details > 元素定义一个可见的标题，是 < details > 元素的第一个子元素。

例如，

<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p></details>