HTML 元素(标签)

前言

  • HTML 文档由 HTML 元素定义。

  • “HTML 元素” 和 “HTML 标签” 通常都是描述同样的意思,但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签。

开始标签 元素内容 结束标签
<p> 这是一个段落 </p>
<a href="default.htm"> 这是一个链接 </a>
<br /> 换行

1、语法

  • HTML 元素以开始标签起始,开始标签常被称为起始标签(opening tag)。
  • HTML 元素以结束标签终止,结束标签常称为闭合标签(closing tag)。
  • 元素的内容是开始标签与结束标签之间的内容。
  • 某些 HTML 元素具有空内容(empty content)。
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)。
  • 大多数 HTML 元素可拥有属性。

1.1 结束标签

  • 不要忘记结束标签,即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML。

    1
    2
    <p>这是一个段落
    <p>这是一个段落
  • 以上实例在浏览器中也能正常显示,因为关闭标签是可选的。

  • 但不要依赖这种做法,忘记使用结束标签会产生不可预料的结果或错误。

2、解析

  • HTML 文档由嵌套的 HTML 元素构成。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!DOCTYPE html>

    <html>

    <body>
    <p>这是第一个段落。</p>
    </body>

    </html>
  • 以上实例包含了三个 HTML 元素。

2.1 < p > 元素

  • <p> 元素

    1
    <p>这是第一个段落。</p>
  • 这个 <p> 元素定义了 HTML 文档中的一个段落。

  • 这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>
  • 元素内容是: 这是第一个段落。

2.2 < body > 元素

  • <body> 元素

    1
    2
    3
    <body>
    <p>这是第一个段落。</p>
    </body>
  • <body> 元素定义了 HTML 文档的主体。

  • 这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>
  • 元素内容是另一个 HTML 元素(p 元素)。

2.3 < html > 元素

  • <html> 元素

    1
    2
    3
    4
    5
    6
    7
    <html>

    <body>
    <p>这是第一个段落。</p>
    </body>

    </html>
  • <html> 元素定义了整个 HTML 文档。

  • 这个元素拥有一个开始标签 <html> ,以及一个结束标签 </html>
  • 元素内容是另一个 HTML 元素(body 元素)。

3、空元素

  • 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

  • <br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

  • 在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

  • 在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

  • 即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

4、使用小写标签

  • HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

  • 万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

5、标签列表

5.1 按字母顺序排列

元素 描述 备注 🔗
<!--...--> 定义注释 🔗
<!DOCTYPE> 定义文档类型 🔗
<a> 定义超文本链接 🔗
<abbr> 定义缩写 🔗
<acronym> 定义只取首字母的缩写,不支持 HTML5 🔗
<address> 定义文档作者或拥有者的联系信息 🔗
<applet> HTML5 中不赞成使用。定义嵌入的 applet 🔗
<area> 定义图像映射内部的区域 🔗
<article> 定义一个文章区域 H5 新加 🔗
<aside> 定义页面的侧边栏内容 H5 新加 🔗
<audio> 定义音频内容 H5 新加 🔗
<b> 定义文本粗体 🔗
<base> 定义页面中所有链接的默认地址或默认目标 🔗
<basefont> HTML5 不支持,不赞成使用。定义页面中文本的默认字体、颜色或尺寸 🔗
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置 H5 新加 🔗
<bdo> 定义文字方向 🔗
<big> HTML5 不支持,定义大号文本 🔗
<blockquote> 定义长的引用 🔗
<body> 定义文档的主体 🔗
<br> 定义换行 🔗
<button> 定义一个点击按钮 🔗
<canvas> 定义图形,比如图表和其他图像,标签只是图形容器,您必须使用脚本来绘制图形 H5 新加 🔗
<caption> 定义表格标题 🔗
<center> HTML5 不支持,不赞成使用。定义居中文本 🔗
<cite> 定义引用 (citation) 🔗
<code> 定义计算机代码文本 🔗
<col> 定义表格中一个或多个列的属性值 🔗
<colgroup> 定义表格中供格式化的列组 🔗
<command> 定义命令按钮,比如单选按钮、复选框或按钮 H5 新加 🔗
<datalist> 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值 H5 新加 🔗
<dd> 定义定义列表中项目的描述 🔗
<del> 定义被删除文本 🔗
<details> 用于描述文档或文档某个部分的细节 H5 新加 🔗
<dfn> 定义定义项目 🔗
<dialog> 定义对话框,比如提示框 H5 新加 🔗
<dir> HTML5 不支持,不赞成使用。定义目录列表 🔗
<div> 定义文档中的节 🔗
<dl> 定义列表详情 🔗
<dt> 定义列表中的项目 🔗
<em> 定义强调文本 🔗
<embed> 定义嵌入的内容,比如插件 H5 新加 🔗
<fieldset> 定义围绕表单中元素的边框 🔗
<figcaption> 定义 <figure> 元素的标题 H5 新加 🔗
<figure> 规定独立的流内容(图像、图表、照片、代码等等) H5 新加 🔗
<font> HTML5 不支持,不赞成使用。定义文字的字体、尺寸和颜色 🔗
<footer> 定义 section 或 document 的页脚 H5 新加 🔗
<form> 定义了 HTML 文档的表单 🔗
<frame> 定义框架集的窗口或框架 🔗
<frameset> 定义框架集 🔗
<h1> to <h6> 定义 HTML 标题,<h1> 定义最大的标题。 <h6> 定义最小的标题 🔗
<head> 定义关于文档的信息 🔗
<header> 定义了文档的头部区域 H5 新加 🔗
<hr> 定义水平线 🔗
<html> 定义 HTML 文档 🔗
<i> 定义斜体字 🔗
<iframe> 定义内联框架 🔗
<img> 定义图像 🔗
<input> 定义输入控件 🔗
<ins> 定义被插入文本 🔗
<kbd> 定义键盘文本 🔗
<keygen> 规定用于表单的密钥对生成器字段 H5 新加 🔗
<label> 定义 input 元素的标注 🔗
<legend> 定义 fieldset 元素的标题 🔗
<li> 定义列表的项目 🔗
<link> 定义文档与外部资源的关系 🔗
<main> 定义文档的主体部分 🔗
<map> 定义图像映射 🔗
<mark> 定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签 H5 新加 🔗
<menu> 不赞成使用。定义菜单列表 🔗
<meta> 定义关于 HTML 文档的元信息 🔗
<meter> 定义度量衡。仅用于已知最大和最小值的度量 H5 新加 🔗
<nav> 定义导航链接的部分 H5 新加 🔗
<noframes> HTML5 不支持,定义针对不支持框架的用户的替代内容 🔗
<noscript> 定义针对不支持客户端脚本的用户的替代内容 🔗
<object> 定义内嵌对象 🔗
<ol> 定义有序列表 🔗
<optgroup> 定义选择列表中相关选项的组合 🔗
<option> 定义选择列表中的选项 🔗
<output> 定义不同类型的输出,比如脚本的输出 H5 新加 🔗
<p> 定义段落 🔗
<param> 定义对象的参数 🔗
<pre> 定义预格式文本 🔗
<progress> 定义运行中的进度(进程) H5 新加 🔗
<q> 定义短的引用 🔗
<rp> <rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容 H5 新加 🔗
<rt> <rt> 标签定义字符(中文注音或字符)的解释或发音 H5 新加 🔗
<ruby> <ruby> 标签定义 ruby 注释(中文注音或字符) H5 新加 🔗
<s> 不赞成使用。定义加删除线的文本 🔗
<samp> 定义计算机代码样本 🔗
<script> 定义客户端脚本 🔗
<section> <section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分 H5 新加 🔗
<select> 定义选择列表(下拉列表) 🔗
<small> 定义小号文本 🔗
<source> <source> 标签为媒介元素(比如 <video><audio>)定义媒介资源 H5 新加 🔗
<span> 定义文档中的节 🔗
<strike> HTML5 不支持,不赞成使用。定义加删除线文本 🔗
<strong> 定义强调文本 🔗
<style> 定义文档的样式信息 🔗
<sub> 定义下标文本 🔗
<summary> <summary> 标签包含 details 元素的标题,”details” 元素用于描述有关文档或文档片段的详细信息 H5 新加 🔗
<sup> 定义上标文本 🔗
<table> 定义表格 🔗
<tbody> 定义表格中的主体内容 🔗
<td> 定义表格中的单元 🔗
<textarea> 定义多行的文本输入控件 🔗
<tfoot> 定义表格中的表注内容(脚注) 🔗
<th> 定义表格中的表头单元格 🔗
<thead> 定义表格中的表头内容 🔗
<time> 定义日期或时间,或者两者 H5 新加 🔗
<title> 定义文档的标题 🔗
<tr> 定义表格中的行 🔗
<track> <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道 H5 新加 🔗
<tt> 定义打字机文本 🔗
<u> 不赞成使用。定义下划线文本 🔗
<ul> 定义无序列表 🔗
<var> 定义文本的变量部分 🔗
<video> <video> 标签定义视频,比如电影片段或其他视频流 H5 新加 🔗
<wbr> 规定在文本中的何处适合添加换行符 H5 新加 🔗

5.2 按功能排列

5.2.1 基础

元素 描述 属性 属性描述 备注 🔗
<!DOCTYPE> 定义文档类型 🔗
<html> 定义一个 HTML 文档 manifest

xmlns
定义一个 URL,在这个 URL 上描述了文档的缓存信息

规定 XML 的 namespace 属性
🔗
<title> 为文档定义一个标题 🔗
<body> 定义文档的主体 alink

background

bgcolor

link

text

vlink
HTML5 不支持HTML 4.01 已废弃。规定文档中活动链接的颜色

HTML5 不支持HTML 4.01 已废弃。规定文档的背景图像

HTML5 不支持HTML 4.01 已废弃。规定文档的背景颜色

HTML5 不支持HTML 4.01 已废弃。规定文档中未访问链接的颜色

HTML5 不支持HTML 4.01 已废弃。规定文档中所有文本的颜色

HTML5 不支持HTML 4.01 已废弃。规定文档中已被访问链接的颜色
🔗
<h1> to <h6> 定义 HTML 标题,<h1> 定义最大的标题。
<h6> 定义最小的标题
align HTML5 不支持HTML 4.01 已废弃。 规定标题中文本的排列 🔗
<p> 定义一个段落 align HTML5 不支持HTML 4.01 已废弃。 规定标题中文本的排列 🔗
<br> 定义简单的折行 🔗
<hr> 定义水平线 align

noshade

size

width
HTML5 不支持HTML 4.01 已废弃。 规定元素的对齐方式

HTML5 不支持HTML 4.01 已废弃。 规定元素的颜色呈现为纯色

HTML5 不支持HTML 4.01 已废弃。 规定元素的高度

HTML5 不支持HTML 4.01 已废弃。 规定元素的宽度
🔗
<!--...--> 定义一个注释 🔗

5.2.2 格式

元素 描述 属性 属性描述 备注 🔗
<acronym> HTML5 不再支持。 定义只取首字母的缩写 🔗
<abbr> 定义一个缩写 🔗
<address> 定义文档作者或拥有者的联系信息 🔗
<b> 定义粗体文本 🔗
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置 H5 新加 🔗
<bdo> 定义文本的方向 dir 必需。规定 元素内的文本方向 🔗
<big> HTML5 不再支持。 定义大号文本 🔗
<blockquote> 定义块引用 cite 规定引用的来源 🔗
<center> HTML5 不再支持HTML 4.01 已废弃。定义居中文本 🔗
<cite> 定义引用 (citation) 🔗
<code> 定义计算机代码文本 🔗
<del> 定义被删除文本 cite

datetime
规定一个解释了文本被删除的原因的文档的 URL

规定文本被删除的日期和时间
🔗
<dfn> 定义定义项目 🔗
<em> 定义强调文本 🔗
<font> HTML5 不再支持HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色 color

face

size
HTML5 不支持HTML 4.01 已废弃。 规定文本的颜色

HTML5 不支持HTML 4.01 已废弃。 规定文本的字体

HTML5 不支持HTML 4.01 已废弃。 规定文本的尺寸
🔗
<i> 定义斜体文本 🔗
<ins> 定义被插入文本 cite

datetime
规定一个文档的 URL,该文档解释了文本被插入的原因

规定文本被插入的日期和时间
🔗
<kbd> 定义键盘文本 🔗
<mark> 定义带有记号的文本 H5 新加 🔗
<meter> 定义度量衡。仅用于已知最大和最小值的度量 form

high

low

max

min

optimum

value
规定 <meter> 元素所属的一个或多个表单

规定被界定为高的值的范围

规定被界定为低的值的范围

规定范围的最大值

规定范围的最小值

规定度量的最优值

必需。规定度量的当前值
H5 新加 🔗
<pre> 定义预格式文本 width HTML5 不支持该属性HTML 4.01 已废弃该属性
定义每行的最大字符数(通常是 40、80 或 132)
🔗
<progress> 定义运行中的任务进度(进程) max

value
规定需要完成的值

规定进程的当前值
H5 新加 🔗
<q> 定义短的引用 cite 规定引用的源 URL 🔗
<rp> 定义不支持 ruby 元素的浏览器所显示的内容 H5 新加 🔗
<rt> 定义字符(中文注音或字符)的解释或发音 H5 新加 🔗
<ruby> 定义 ruby 注释(中文注音或字符) H5 新加 🔗
<s> 定义加删除线的文本 🔗
<samp> 定义计算机代码样本 🔗
<small> 定义小号文本 🔗
<strike> HTML5 不再支持HTML 4.01 已废弃。 定义加删除线的文本 🔗
<strong> 定义语气更为强烈的强调文本 🔗
<sub> 定义下标文本 🔗
<sup> 定义上标文本 🔗
<time> 定义一个日期/时间 datetime

pubdate
规定日期/时间。另一种方式,则是由元素的内容给定日期/时间

指示
H5 新加

 
🔗
<tt> HTML5 不再支持。 定义打字机文本 🔗
<u> 定义下划线文本 🔗
<var> 定义文本的变量部分 🔗
<wbr> 规定在文本中的何处适合添加换行符 H5 新加 🔗

5.2.3 表单

元素 描述 属性 属性描述 备注 🔗
<form> 定义一个 HTML 表单,用于用户输入 accept

accept-charset

action

autocomplete

enctype

method

name

novalidate

target
HTML5 不支持。规定服务器接收到的文件的类型

规定服务器可处理的表单数据字符集

规定当提交表单时向何处发送表单数据

规定是否启用表单的自动完成功能

规定在向服务器发送表单数据之前如何对其进行编码

规定用于发送表单数据的 HTTP 方法

规定表单的名称

如果使用该属性,则提交表单时不进行验证

规定在何处打开 action URL
 

 

 

H5 新加

 

 

 

H5 新加

 
🔗
<input> 定义一个输入控件 accept

align

alt

autocomplete

autofocus

checked

disabled

form

formaction

formenctype

formmethod

formnovalidate

formtarget

height

list

max

maxlength

min

multiple

name

pattern

placeholder

readonly

required

size

src

step

type

value

width
规定通过文件上传来提交的文件的类型 (只针对type=”file”)

HTML5 已废弃,不赞成使用。规定图像输入的对齐方式。(只针对type=”image”)

定义图像输入的替代文本。 (只针对type=”image”)

规定 <input> 元素输入字段是否应该启用自动完成功能

规定当页面加载时 <input> 元素应该自动获得焦点

规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type=”checkbox” 或者 type=”radio”)

规定应该禁用的 <input> 元素

规定 <input> 元素所属的一个或多个表单

规定当表单提交时处理输入控件的文件的 URL。(只针对 type=”submit” 和 type=”image”)

规定当表单数据提交到服务器时如何编码 (只适合 type=”submit” 和 type=”image”)

定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=”submit” 和 type=”image”)

覆盖 <form> 元素的 novalidate 属性

规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=”submit” 和 type=”image”)

规定 <input> 元素的高度。(只针对 type=”image”)

引用 <datalist> 元素,其中包含 <input> 元素的预定义选项

规定 <input> 元素的最大值

规定 <input> 元素中允许的最大字符数

规定 <input> 元素的最小值

规定允许用户输入到 <input> 元素的多个值

规定 <input> 元素的名称

规定用于验证 <input> 元素的值的正则表达式

规定可描述输入 <input> 字段预期值的简短的提示信息

规定输入字段是只读的

规定必需在提交表单之前填写输入字段

size 属性规定以字符数计的 <input> 元素的可见宽度

规定显示为提交按钮的图像的 URL。(只针对 type=”image”)

step 属性规定 <input> 元素的合法数字间隔

type 属性规定要显示的 <input> 元素的类型

指定 <input> 元素 value 的值

width 属性规定 <input> 元素的宽度。(只针对 type=”image”)
 

 

 

H5 新加

H5 新加

 

 

H5 新加

H5 新加

H5 新加

H5 新加

H5 新加

H5 新加

H5 新加

H5 新加

H5 新加

 

H5 新加

H5 新加

 

H5 新加

H5 新加

 

H5 新加

 

 

H5 新加

 

 

H5 新加
🔗
<textarea> 定义多行的文本输入控件 autofocus

cols

disabled

form

maxlength

name

placeholder

readonly

required

rows

wrap
规定当页面加载时,文本区域自动获得焦点

规定文本区域内可见的宽度

规定禁用文本区域

定义文本区域所属的一个或多个表单

规定文本区域允许的最大字符数

规定文本区域的名称

规定一个简短的提示,描述文本区域期望的输入值

规定文本区域为只读

规定文本区域是必需的/必填的

规定文本区域内可见的行数

规定当提交表单时,文本区域中的文本应该怎样换行
H5 新加

 

 

H5 新加

H5 新加

 

H5 新加

 

H5 新加

 

H5 新加
🔗
<button> 定义按钮 autofocus

disabled

form

formaction

formenctype

formmethod

formnovalidate

formtarget

name

type

value
按钮应当自动地获得焦点

规定应该禁用该按钮

规定按钮属于一个或多个表单

规定当提交表单时向何处发送表单数据。覆盖 action。与 type=”submit” 配合

规定在向服务器发送表单数据之前如何对其进行编码。覆盖 enctype。与 type=”submit” 配合

规定用于发送表单数据的 HTTP 方法。覆盖 method。与 type=”submit” 配合

使用,提交表单时不进行验证。覆盖 novalidate。与 type=”submit” 配合

在何处打开 action URL。覆盖 target。与 type=”submit” 配合

规定按钮的名称

规定按钮的类型

规定按钮的初始值。可由脚本进行修改
H5 新加

 

H5 新加

H5 新加

H5 新加

H5 新加

H5 新加

H5 新加

 

 

 
🔗
<select> 定义选择列表(下拉列表) autofocusNew

disabled

form

multiple

name

required

size
规定在页面加载时下拉列表自动获得焦点

当该属性为 true 时,会禁用下拉列表

定义 select 字段所属的一个或多个表单

当该属性为 true 时,可选择多个选项

定义下拉列表的名称

规定用户在提交表单前必须选择一个下拉列表中的选项

规定下拉列表中可见选项的数目
H5 新加

 

H5 新加

 

 

H5 新加

 
🔗
<optgroup> 定义选择列表中相关选项的组合 disabled

label
规定禁用该选项组

为选项组规定描述
🔗
<option> 定义选择列表中的选项 disabled

label

selected

value
规定此选项应在首次加载时被禁用

定义当使用 <optgroup> 时所使用的标注

规定选项(在首次显示在列表中时)表现为选中状态

定义送往服务器的选项值
🔗
<label> 定义 input 元素的标注 for

form
规定 label 与哪个表单元素绑定

规定 label 字段所属的一个或多个表单
 

H5 新加
🔗
<fieldset> 定义围绕表单中元素的边框 disabled

form

name
规定该组中的相关表单元素应该被禁用

规定 fieldset 所属的一个或多个表单

规定 fieldset 的名称
H5 新加

H5 新加

H5 新加
🔗
<legend> 定义 fieldset 元素的标题 align HTML5 不支持HTML 4.01 已废弃。不建议使用。用样式代替。为 fieldset 标题定义对齐方式 🔗
<datalist> 规定了 input 元素可能的选项列表 H5 新加 🔗
<keygen> 规定用于表单的密钥对生成器字段 autofocus

challenge

disabled

form

keytype

name
使 <keygen> 字段在页面加载时获得焦点

如果使用,则将 keygen 的值设置为在提交时询问

禁用 <keygen> 元素字段

定义该 <keygen> 字段所属的一个或多个表单

定义密钥的安全算法

定义 <keygen> 元素的唯一名称。name 属性用于在提交表单时搜集字段的值
H5 新加 🔗
<output> 定义一个计算的结果 for

form

name
描述计算中使用的元素与计算结果之间的关系

定义输入字段所属的一个或多个表单

定义对象的唯一名称(表单提交时使用)
H5 新加 🔗

5.2.4 框架

元素 描述 属性 属性描述 备注 🔗
<frame> HTML5 不再支持。 定义框架集的窗口或框架 frameborder

longdesc

marginheight

marginwidth

name

noresize

scrolling

src
HTML5 不支持。规定是否显示框架周围的边框

HTML5 不支持。规定一个包含有关框架内容的长描述的页面

HTML5 不支持。规定框架的上方和下方的边距

HTML5 不支持。规定框架的左侧和右侧的边距

HTML5 不支持。规定框架的名称

HTML5 不支持。规定无法调整框架的大小

HTML5 不支持。规定是否在框架中显示滚动条

HTML5 不支持。规定在框架中显示的文档的 URL
🔗
<frameset> HTML5 不再支持。定义框架集 cols

rows
HTML5 不支持。规定框架集中列的数目和尺寸

HTML5 不支持。规定框架集中行的数目和尺寸
🔗
<noframes> HTML5 不再支持。 定义针对不支持框架的用户的替代内容 🔗
<iframe> 定义内联框架 align

frameborder

height

longdesc

marginheight

marginwidth

name

sandbox

scrolling

seamless

src

srcdoc

width
HTML5 不支持HTML 4.01 已废弃。规定如何根据周围的元素来对齐 <iframe>

HTML5 不支持。规定是否显示 <iframe> 周围的边框

规定 <iframe> 的高度

HTML5 不支持。规定一个页面,该页面包含了有关 <iframe> 的较长描述

HTML5 不支持。规定 <iframe> 的顶部和底部的边距

HTML5 不支持。规定 <iframe> 的左侧和右侧的边距

规定 <iframe> 的名称

<iframe> 的内容定义一系列额外的限制

HTML5 不支持。规定是否在 <iframe> 中显示滚动条

规定 <iframe> 看起来像是父文档中的一部分

规定在 <iframe> 中显示的文档的 URL

规定页面中的 HTML 内容显示在 <iframe>

规定 <iframe> 的宽度
🔗

5.2.5 图像

元素 描述 属性 属性描述 备注 🔗
<img> 定义图像 align

loading

alt

border

crossorigin

height

hspace

ismap

longdesc

src

usemap

vspace

width
HTML5 不支持HTML 4.01 已废弃。规定如何根据周围的文本来排列图像

指定浏览器是应立即加载图像还是延迟加载图像

规定图像的替代文本

HTML5 不支持HTML 4.01 已废弃。规定图像周围的边框

设置图像的跨域属性

规定图像的高度

HTML5 不支持HTML 4.01 已废弃。规定图像左侧和右侧的空白

将图像规定为服务器端图像映射

HTML5 不支持HTML 4.01 已废弃。指向包含长的图像描述文档的 URL

规定显示图像的 URL

将图像定义为客户器端图像映射

HTML5 不支持HTML 4.01 已废弃。规定图像顶部和底部的空白

规定图像的宽度
 

 

 

 

H5 新加

 

 

 

 

 

 

 

 
🔗
<map> 定义图像映射 name 必需。为 image-map 规定的名称 🔗
<area> 定义图像地图内部的区域 alt

coords

href

hreflang

media

nohref

rel

shape

target

type
规定区域的替代文本。如果使用 href 属性,则该属性是必需的

规定区域的坐标

规定区域的目标 URL

规定目标 URL 的语言

规定目标 URL 是为何种媒介/设备优化的。默认:all

HTML5 不支持。规定没有相关链接的区域

规定当前文档与目标 URL 之间的关系

规定区域的形状

规定在何处打开目标 URL

规定目标 URL 的 MIME 类型
 

 

 

H5 新加

H5 新加

 

H5 新加

 

 

H5 新加
🔗
<canvas> 通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像) height

width
规定画布的高度

规定画布的宽度
H5 新加 🔗
<figcaption> 定义一个 caption for a <figure> element H5 新加 🔗
<figure> figure 标签用于对元素进行组合 H5 新加 🔗

5.2.6 媒体

元素 描述 属性 属性描述 备注 🔗
<audio> 定义声音,比如音乐或其他音频流 autoplay

controls

loop

muted

preload

src
如果出现该属性,则音频在就绪后马上播放

如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)

如果出现该属性,则每当音频结束时重新开始播放

如果出现该属性,则音频输出为静音

规定当网页加载时,音频是否默认被加载以及如何被加载

规定音频文件的 URL
H5 新加 🔗
<source> 定义media元素 (<video><audio>)的媒体资源。media media

src

type
规定媒体资源的类型,供浏览器决定是否下载

规定媒体文件的 URL

规定媒体资源的 MIME 类型
H5 新加 🔗
<track> 为媒体(<video><audio>)元素定义外部文本轨道 default

kind

label

src

srclang
规定该轨道是默认的。如果用户没有选择任何轨道,则使用默认轨道

规定文本轨道的文本类型

规定文本轨道的标签和标题

必需的。规定轨道文件的 URL

规定轨道文本数据的语言。如果 kind 属性值是 “subtitles”,则该属性是必需的
H5 新加 🔗
<video> 定义一个音频或者视频 autoplay

controls

height

loop

muted

poster

preload

src

width
如果出现该属性,则视频在就绪后马上播放

如果出现该属性,则向用户显示控件,比如播放按钮

设置视频播放器的高度

如果出现该属性,则当媒介文件完成播放后再次开始播放

如果出现该属性,视频的音频输出为静音

规定视频正在下载时显示的图像,直到用户点击播放按钮

如果出现该属性视频在页面加载时进行加载,并预备播放。如果使用 “autoplay” 则忽略

要播放的视频的 URL

设置视频播放器的宽度
H5 新加 🔗

5.2.7 链接

元素 描述 属性 属性描述 备注 🔗
<a> 定义一个链接 charset

coords

download

href

hreflang

media

name

rel

rev

shape

target

type
HTML5 不支持。规定目标 URL 的字符编码

HTML5 不支持。规定链接的坐标

指定下载链接

规定链接的目标 URL

规定目标 URL 的基准语言。仅在 href 属性存在时使用

规定目标 URL 的媒介类型。默认值:all。仅在 href 属性存在时使用

HTML5 不支持。规定锚的名称

规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用

HTML5 不支持。规定目标 URL 与当前文档之间的关系

HTML5 不支持。规定链接的形状

规定在何处打开目标 URL。仅在 href 属性存在时使用

规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用
 

 

H5 新加

 

 

 

 

 

 

 

 

H5 新加
🔗
<link> 定义文档与外部资源的关系 charset

href

hreflang

media

rel

rev

sizes

target

type
HTML5 不支持。定义被链接文档的字符编码方式

定义被链接文档的位置

定义被链接文档中文本的语言

规定被链接文档将显示在什么设备上

必需。定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写

HTML5 不支持。定义被链接文档与当前文档之间的关系

定义了链接属性大小,只对属性 rel=”icon” 起作用

HTML5 不支持。定义在何处加载被链接文档

规定被链接文档的 MIME 类型
 

 

 

 

 

 

H5 新加

 

 
🔗
<main> 定义文档的主体部分 🔗
<nav> 定义导航链接 H5 新加 🔗

5.2.8 列表

元素 描述 属性 属性描述 备注 🔗
<ul> 定义一个无序列表 compact

type
HTML5 不支持HTML 4.01 已废弃。规定列表呈现的效果比正常情况更小巧

HTML5 不支持HTML 4.01 已废弃。 规定列表的项目符号的类型
🔗
<ol> 定义一个有序列表 compact

reversed

start

type
HTML5 不支持,不赞成使用。使用样式取代它。规定列表呈现的效果比正常情况更小巧

指定列表倒序 (9,8,7…)

整数值属性,指定列表编号起始值。在 HTML4 中弃用,但是在 HTML5 中被重新引入

规定列表的类型。不赞成使用。请使用样式代替
 

H5 新加

 

 
🔗
<li> 定义一个列表项 type

value
HTML5 不支持HTML 4.01 已废弃。不赞成使用。用样式取代它。规定用哪种项目符号

不赞成使用。请使用样式取代它。 规定列表项目的数字
🔗
<dir> HTML5 不再支持HTML 4.01 已废弃。定义目录列表 compact HTML5 不支持HTML 4.01 已废弃。规定列表必须比常规状态小一号呈现 🔗
<dl> 定义一个定义列表 🔗
<dt> 定义一个定义列表中的项目 🔗
<dd> 定义定义列表中项目的描述 🔗
<menu> 定义菜单列表 label

type
描述菜单项的标记

描述显示菜单类型. 默认为 “list”
H5 新加

H5 新加
🔗
<command> 定义用户可能调用的命令,
比如单选按钮、复选框或按钮
checked

disabled

icon

label

radiogroup

type
规定当页面加载时,command 是否被选中。仅用于 radio 或 checkbox 类型

规定 command 是否可用

规定作为 command 来显示的图像的 URL

必需。规定 command 的名字,对用户可见

规定可进行切换且将被切换的 command 所属的组名。仅在类型为 radio 时使用

定义 command 的类型。默认是 “command”
H5 新加 🔗

5.2.9 表格

元素 描述 属性 属性描述 备注 🔗
<table> 定义一个表格 align

bgcolor

border

cellpadding

cellspacing

frame

rules

summary

width
HTML5 不支持HTML 4.01 已废弃。规定表格相对周围元素的对齐方式

HTML5 不支持HTML 4.01 已废弃。规定表格的背景颜色

规定表格单元是否拥有边框

HTML5 不支持。规定单元边沿与其内容之间的空白

HTML5 不支持。规定单元格之间的空白

HTML5 不支持。规定外侧边框的哪个部分是可见的

HTML5 不支持。规定内侧边框的哪个部分是可见的

HTML5 不支持。规定表格的摘要

HTML5 不支持。规定表格的宽度
🔗
<caption> 定义表格标题 align HTML5 不支持HTML 4.01 已废弃。定义标题的对齐方式 🔗
<th> 定义表格中的表头单元格 abbr

align

axis

bgcolor

char

charoff

colspan

headers

height

nowrap

rowspan

scope

valign

width
HTML5 不支持。规定表头单元格中内容的缩写版本

HTML5 不支持。规定表头单元格内容的水平对齐方式

HTML5 不支持。对表头单元格进行分类

HTML5 不支持HTML 4.01 已废弃。 规定表头单元格的背景颜色

HTML5 不支持。规定根据哪个字符来进行内容的对齐

HTML5 不支持。规定对齐字符的偏移量

规定表头单元格可横跨的列数

规定与表头单元格相关联的一个或多个表头单元格

HTML5 不支持HTML 4.01 已废弃。规定表头单元格的高度

HTML5 不支持HTML 4.01 已废弃。规定表头单元格中的内容是否折行

规定表头单元格可横跨的行数

规定表头单元格是否是行、列、行组或列组的头部

HTML5 不支持。规定表头单元格内容的垂直排列方式

HTML5 不支持HTML 4.01 已废弃。规定表头单元格的宽度
🔗
<tr> 定义表格中的行 align

bgcolor

char

charoff

valign
HTML5 不支持。定义表格行的内容对齐方式

HTML5 不支持HTML 4.01 已废弃。规定表格行的背景颜色

HTML5 不支持。规定根据哪个字符来进行文本对齐

HTML5 不支持。规定第一个对齐字符的偏移量

HTML5 不支持。规定表格行中内容的垂直对齐方式
🔗
<td> 定义表格中的单元 abbr

align

axis

bgcolor

char

charoff

colspan

headers

height

nowrap

rowspan

scope

valign

width
HTML5 不支持。规定单元格中内容的缩写版本

HTML5 不支持。规定单元格内容的水平对齐方式

HTML5 不支持。对单元格进行分类

HTML5 不支持HTML 4.01 已废弃。规定单元格的背景颜色

HTML5 不支持。规定根据哪个字符来进行内容的对齐

HTML5 不支持。规定对齐字符的偏移量

规定单元格可横跨的列数

规定与单元格相关联的一个或多个表头单元格

HTML5 不支持HTML 4.01 已废弃。设置单元格的高度

HTML5 不支持HTML 4.01 已废弃。规定单元格中的内容是否折行

设置单元格可纵跨的行数

HTML5 不支持。定义将表头单元格与数据单元格相关联的方法

HTML5 不支持。规定单元格内容的垂直排列方式

HTML5 不支持HTML 4.01 已废弃。规定单元格的宽度
🔗
<thead> 定义表格中的表头内容 align

char

charoff

valign
HTML5 不支持。定义 <thead> 元素中内容的对齐方式

HTML5 不支持。规定 <thead> 元素中内容根据哪个字符来对进行文本对齐

HTML5 不支持。规定 <thead> 元素中内容的第一个对齐字符的偏移量

HTML5 不支持。规定 <thead> 元素中内容的垂直对齐方式
🔗
<tbody> 定义表格中的主体内容 align

char

charoff

valign
HTML5 不支持。定义 <tbody> 元素中内容的对齐方式

HTML5 不支持。规定 <tbody> 元素中内容根据哪个字符来对进行文本对齐

HTML5 不支持。规定 <tbody> 元素中内容的第一个对齐字符的偏移量

HTML5 不支持。规定 <tbody> 元素中内容的垂直对齐方式
🔗
<tfoot> 定义表格中的表注内容(脚注) align

char

charoff

valign
HTML5 不支持。定义 <tfoot> 元素中内容的对齐方式

HTML5 不支持。规定 <tfoot> 元素中内容根据哪个字符来对进行文本对齐

HTML5 不支持。规定 <tfoot> 元素中内容的第一个对齐字符的偏移量

HTML5 不支持。规定 <tfoot> 元素中内容的垂直对齐方式
🔗
<col> 定义表格中一个或多个列的属性值 align

char

charoff

span

valign

width
HTML5 不支持。规定与 <col> 元素相关的内容的水平对齐方式

HTML5 不支持。规定根据哪个字符来对齐与 <col> 元素相关的内容

HTML5 不支持。规定第一个对齐字符的偏移量

规定 <col> 元素应该横跨的列数

HTML5 不支持。规定与 <col> 元素相关的内容的垂直对齐方式

HTML5 不支持。Specifies the width of a <col> element
🔗
<colgroup> 定义表格中供格式化的列组 align

char

charoff

span

valign

width
HTML5 不支持。规定在列组合中内容的水平对齐方式

HTML5 不支持。规定根据哪个字符来对齐列组中的内容

HTML5 不支持。规定第一个对齐字符的偏移量

规定列组应该横跨的列数

HTML5 不支持。定义在列组合中内容的垂直对齐方式

HTML5 不支持。规定列组合的宽度
🔗

5.2.10 样式

元素 描述 属性 属性描述 备注 🔗
<style> 定义文档的样式信息 media

scoped

type
为样式表规定不同的媒体类型

如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素

规定样式表的 MIME 类型
 

H5 新加

 
🔗

5.2.11 节

元素 描述 属性 属性描述 备注 🔗
<div> 定义文档中的节 align HTML5 不支持HTML 4.01 已废弃。规定 <div> 元素中的内容的对齐方式 🔗
<span> 定义文档中的节 🔗
<header> 定义一个文档头部部分 H5 新加 🔗
<footer> 定义一个文档底部 H5 新加 🔗
<section> 定义了文档的某个区域 H5 新加 🔗
<article> 定义一个文章内容 H5 新加 🔗
<aside> 定义其所处内容之外的内容 H5 新加 🔗
<details> 定义了用户可见的或者隐藏的需求的补充细节 open 规定 details 是否可见 H5 新加 🔗
<dialog> 定义一个对话框或者窗口 open 规定 dialog 元素是有效的,用户可以与它进行交互 H5 新加 🔗
<summary> 定义一个可见的标题。 当用户点击标题时会显示出详细信息 H5 新加 🔗

5.2.12 元信息

元素 描述 属性 属性描述 备注 🔗
<head> 定义关于文档的信息 profile HTML5 不支持。规定文档 URL 的一系列规则。这些规则能被浏览器识别
并且准确读取 <meta> 标签的内容属性中的信息
🔗
<meta> 定义关于 HTML 文档的元信息 charset

content

http-equiv

name

scheme
定义文档的字符编码

定义与 http-equiv 或 name 属性相关的元信息

把 content 属性关联到 HTTP 头部

把 content 属性关联到一个名称

HTML5 不支持。定义用于翻译 content 属性值的格式
H5 新加

 

 

 

 
🔗
<base> 定义页面中所有链接的默认地址或默认目标,
规定页面中所有的超链接和表单在何处打开
href

target
规定页面中所有相对链接的基准 URL

该属性会被每个链接中的 target 属性覆盖
🔗
<basefont> HTML5 不再支持HTML 4.01 已废弃
定义页面中文本的默认字体、颜色或尺寸
color

face

size
HTML5 不支持HTML 4.01 已废弃。规定文档中文本的默认颜色

HTML5 不支持HTML 4.01 已废弃。规定文档中文本的默认字体

HTML5 不支持HTML 4.01 已废弃。规定文档中文本的默认大小
🔗

5.2.13 程序

元素 描述 属性 属性描述 备注 🔗
<script> 定义客户端脚本 async

charset

defer

src

type

xml:space
规定异步执行脚本(仅适用于外部脚本)

规定在脚本中使用的字符编码(仅适用于外部脚本)

规定当页面已完成解析后,执行脚本(仅适用于外部脚本)

规定外部脚本的 URL

规定脚本的 MIME 类型

HTML5 不支持。规定是否保留代码中的空白
H5 新加

 

 

 

 

 
🔗
<noscript> 定义针对不支持客户端脚本的用户的替代内容 🔗
<applet> HTML5 不再支持HTML 4.01 已废弃。 定义嵌入的 applet code

object

align

alt

archive

codebase

height

hspace

name

vspace

width
规定 Java applet 的文件名

规定了包含该 applet 的一系列版本的资源名称

规定 applet 相对于周围元素的对齐方式

规定 applet 的替换文本

规定档案文件的位置

规定 code 属性中指定的 applet 的基准 URL

规定 applet 的高度

定义围绕 applet 的水平间隔

定义 applet 的名称(用在脚本中的)

定义围绕 applet 的垂直间隔

规定 applet 的宽度
🔗
<embed> 定义了一个容器,用来嵌入外部应用或者互动程序(插件) height

src

type

width
规定嵌入内容的高度

规定被嵌入内容的 URL

规定嵌入内容的 MIME 类型。注:MIME = Multipurpose Internet Mail Extensions

规定嵌入内容的宽度
H5 新加 🔗
<object> 定义嵌入的对象 align

archive

border

classid

codebase

codetype

data

declare

form

height

hspace

name

standby

type

usemap

vspace

width
HTML5 不再支持HTML 4.01 已废弃。规定 <object> 元素相对于周围元素的对齐方式

HTML5 不再支持。由空格分隔的指向档案文件的 URL 列表。这些档案文件包含了与对象相关的资源

HTML5 不再支持HTML 4.01 已废弃。规定 <object> 周围的边框宽度

HTML5 不再支持。定义嵌入 Windows Registry 中或某个 URL 中的类的 ID 值,通常是一个 Java 类

HTML5 不再支持。定义在何处可找到对象所需的代码,提供一个基准 URL

HTML5 不再支持。通过 classid 属性所引用的代码的 MIME 类型

规定对象使用的资源的 URL

HTML5 不再支持。定义该对象仅可被声明,但不能被创建或例示,直到该对象得到应用为止

规定对象所属的一个或多个表单

规定对象的高度

HTML5 不再支持HTML 4.01 已废弃。规定对象左侧和右侧的空白

为对象规定名称

HTML5 不再支持。定义当对象正在加载时所显示的文本

规定 data 属性中规定的数据的 MIME 类型

规定与对象一同使用的客户端图像映射的名称

HTML5 不再支持HTML 4.01 已废弃。规定对象的顶部和底部的空白

规定对象的宽度
 

 

 

 

 

 

 

 

H5 新加

 

 

 

 

 

 

 

 
🔗
<param> 定义对象的参数 name

type

value

valuetype
定义参数的名称(用在脚本中)

HTML5 不再支持。定义 MIME 类型参数

描述参数值

HTML5 不再支持。描述值的类型
🔗

6、标签简写及全称

标签 英文全称 中文说明
<a> Anchor
<abbr> Abbreviation 缩写词
<acronym> Acronym 取首字母的缩写词
<address> Address 地址
<alt> alter 替用(一般是图片显示不出的提示)
<b> Bold 粗体(文本)
<bdo> Direction of Text Display 文本显示方向
<big> Big 变大(文本)
<blockquote> Block Quotation 区块引用语
<br> Break 换行
<cell> cell
<cellpadding> cellpadding 巢补白
<cellspacing> cellspacing 巢空间
<center> Centered 居中(文本)
<cite> Citation 引用
<code> Code 源代码(文本)
<dd> Definition Description 定义描述
<del> Deleted 删除(的文本)
<dfn> Defines a Definition Term 定义定义条目
<div> Division 分隔
<dl> Definition List 定义列表
<dt> Definition Term 定义术语
<em> Emphasized 加重(文本)
<font> Font 字体
<h1>~<h6> Header 1 to Header 6 标题1到标题6
<hr> Horizontal Rule 水平尺
<href> hypertext reference 超文本引用
<i > Italic 斜体(文本)
<iframe> Inline frame 定义内联框架
<ins> Inserted 插入(的文本)
<kbd> Keyboard 键盘(文本)
<li> List Item 列表项目
<nl> navigation lists 导航列表
<ol> Ordered List 排序列表
<optgroup> Option group 定义选项组
<p> Paragraph 段落
<pre> Preformatted 预定义格式(文本 )
<q> Quotation 引用语
<rel> Reload 加载
<s/ strike> Strikethrough 删除线
<samp> Sample 示例(文本
<small> Small 变小(文本)
<span> Span 范围
<src> Source 源文件链接
<strong> Strong 加重(文本)
<sub> Subscripted 下标(文本)
<sup> Superscripted 上标(文本)
<td> table data cell 表格中的一个单元格
<th> table header cell 表格中的表头
<tr> table row 表格中的一行
<tt> Teletype 打印机(文本)
<u> Underlined 下划线(文本)
<ul> Unordered List 不排序列表
<var> Variable 变量(文本)

7、元素和有效 DOCTYPES

  • 下面的表格列出了所有的 HTML5/HTML 4.01/XHTML 元素,以及它们会出现在什么文档类型 (!DOCTYPE) 中。
Tag HTML5 Transitional
(HTML 4.01 / XHTML 1.0)
Strict
(HTML 4.01 / XHTML 1.0)
Frameset
(HTML 4.01 / XHTML 1.0)
XHTML 1.1
<a> Yes Yes Yes Yes Yes
<abbr> Yes Yes Yes Yes Yes
<acronym> No Yes Yes Yes Yes
<address> Yes Yes Yes Yes Yes
<applet> No Yes No Yes No
<area> Yes Yes Yes Yes No
<article> Yes No No No No
<aside> Yes No No No No
<audio> Yes No No No No
<b> Yes Yes Yes Yes Yes
<base> Yes Yes Yes Yes Yes
<basefont> No Yes No Yes No
<bdi> Yes No No No No
<bdo> Yes Yes Yes Yes No
<big> No Yes Yes Yes Yes
<blockquote> Yes Yes Yes Yes Yes
<body> Yes Yes Yes Yes Yes
<br> Yes Yes Yes Yes Yes
<button> Yes Yes Yes Yes Yes
<canvas> Yes No No No No
<caption> Yes Yes Yes Yes Yes
<center> No Yes No Yes No
<cite> Yes Yes Yes Yes Yes
<code> Yes Yes Yes Yes Yes
<col> Yes Yes Yes Yes No
<colgroup> Yes Yes Yes Yes No
<command> Yes No No No No
<datalist> Yes No No No No
<dd> Yes Yes Yes Yes Yes
<del> Yes Yes Yes Yes No
<details> Yes No No No No
<dfn> Yes Yes Yes Yes Yes
<dir> No Yes No Yes No
<div> Yes Yes Yes Yes Yes
<dl> Yes Yes Yes Yes Yes
<dt> Yes Yes Yes Yes Yes
<em> Yes Yes Yes Yes Yes
<embed> Yes No No No No
<fieldset> Yes Yes Yes Yes Yes
<figcaption> Yes No No No No
<figure> Yes No No No No
<font> No Yes No Yes No
<footer> Yes No No No No
<form> Yes Yes Yes Yes Yes
<frame> No No No Yes No
<frameset> No No No Yes No
<h1> to <h6> Yes Yes Yes Yes Yes
<head> Yes Yes Yes Yes Yes
<header> Yes No No No No
<hgroup> Yes No No No No
<hr> Yes Yes Yes Yes Yes
<html> Yes Yes Yes Yes Yes
<i> Yes Yes Yes Yes Yes
<iframe> Yes Yes No Yes No
<img> Yes Yes Yes Yes Yes
<input> Yes Yes Yes Yes Yes
<ins> Yes Yes Yes Yes No
<kbd> Yes Yes Yes Yes Yes
<keygen> Yes No No No No
<label> Yes Yes Yes Yes Yes
<legend> Yes Yes Yes Yes Yes
<li> Yes Yes Yes Yes Yes
<link> Yes Yes Yes Yes Yes
<map> Yes Yes Yes Yes No
<mark> Yes No No No No
<menu> Yes Yes No Yes No
<meta> Yes Yes Yes Yes Yes
<meter> Yes No No No No
<nav> Yes No No No No
<noframes> No Yes No Yes No
<noscript> Yes Yes Yes Yes Yes
<object> Yes Yes Yes Yes Yes
<ol> Yes Yes Yes Yes Yes
<optgroup> Yes Yes Yes Yes Yes
<option> Yes Yes Yes Yes Yes
<output> Yes No No No No
<p> Yes Yes Yes Yes Yes
<param> Yes Yes Yes Yes Yes
<pre> Yes Yes Yes Yes Yes
<progress> Yes No No No No
<q> Yes Yes Yes Yes Yes
<rp> Yes No No No No
<rt> Yes No No No No
<ruby> Yes No No No No
<s> Yes Yes No Yes No
<samp> Yes Yes Yes Yes Yes
<script> Yes Yes Yes Yes Yes
<section> Yes No No No No
<select> Yes Yes Yes Yes Yes
<small> Yes Yes Yes Yes Yes
<source> Yes No No No No
<span> Yes Yes Yes Yes Yes
<strike> No Yes No Yes No
<strong> Yes Yes Yes Yes Yes
<style> Yes Yes Yes Yes Yes
<sub> Yes Yes Yes Yes Yes
<summary> Yes No No No No
<sup> Yes Yes Yes Yes Yes
<table> Yes Yes Yes Yes Yes
<tbody> Yes Yes Yes Yes No
<td> Yes Yes Yes Yes Yes
<textarea> Yes Yes Yes Yes Yes
<tfoot> Yes Yes Yes Yes No
<th> Yes Yes Yes Yes Yes
<thead> Yes Yes Yes Yes No
<time> Yes No No No No
<title> Yes Yes Yes Yes Yes
<tr> Yes Yes Yes Yes Yes
<track> Yes No No No No
<tt> No Yes Yes Yes Yes
<u> No Yes No Yes No
<ul> Yes Yes Yes Yes Yes
<var> Yes Yes Yes Yes Yes
<video> Yes No No No No
<wbr> Yes No No No No

8、语义元素

  • 一个语义元素能够清楚的描述其意义给浏览器和开发者。

    • 语义 = 意义
    • 语义元素 = 有意义的元素
  • 无语义元素实例: <div><span> - 无需考虑内容。

  • 语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容。

8.1 HTML5 中新的语义元素

  • HTML5 提供了新的语义元素来明确一个 Web 页面的不同部分:
标签 描述 备注 🔗
<article> </article> 定义页面独立的内容区域,定义外部的内容 H5 新加 🔗
<aside> </aside> 定义页面的侧边栏内容 H5 新加 🔗
<bdi> </bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置 H5 新加 🔗
<command> </command> 定义命令按钮,比如单选按钮、复选框或按钮 H5 新加 🔗
<details> </details> 用于描述文档或文档某个部分的细节 H5 新加 🔗
<dialog> </dialog> 定义对话框,比如提示框 H5 新加 🔗
<summary> </summary> 标签包含 details 元素的标题 H5 新加 🔗
<figure> </figure> 规定独立的流内容(图像、图表、照片、代码等等) H5 新加 🔗
<figcaption> </figcaption> 定义 <figure> 元素的标题 H5 新加 🔗
<footer> </footer> 定义 section 或 document 的页脚 H5 新加 🔗
<header> </header> 定义了文档的头部区域 H5 新加 🔗
<mark> </mark> 定义带有记号的文本 H5 新加 🔗
<meter> </meter> 定义度量衡。仅用于已知最大和最小值的度量 H5 新加 🔗
<nav> </nav> 定义导航链接的部分 H5 新加 🔗
<progress> </progress> 定义任何类型的任务的进度 H5 新加 🔗
<ruby> </ruby> 定义 ruby 注释(中文注音或字符) H5 新加 🔗
<rt> </rt> 定义字符(中文注音或字符)的解释或发音 H5 新加 🔗
<rp> </rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容 H5 新加 🔗
<section> </section> 定义文档中的节(section、区段) H5 新加 🔗
<time> </time> 定义日期或时间 H5 新加 🔗
<wbr /> 规定在文本中的何处适合添加换行符 H5 新加 🔗

8.2 < header > 元素

  • <header> 元素描述了文档的头部区域。

  • <header> 元素主要用于定义内容的介绍展示区域。

  • 在页面中你可以使用多个 <header> 元素。

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    <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>
  • 效果

  • <footer> 元素描述了文档的底部区域。

  • <footer> 元素应该包含它的包含元素。

  • 一个页脚通常包含文档的作者,著作权信息,链接的使用条款,联系信息等。

  • 文档中你可以使用多个 <footer> 元素。

  • 示例

    1
    2
    3
    4
    <footer>
    <p>Posted by: Qian Chia</p>
    <p><time pubdate datetime="2012-03-01"></time></p>
    </footer>
  • 效果

8.4 < nav > 元素

  • <nav> 标签定义导航链接的部分。

  • <nav> 元素用于定义页面的导航链接部分区域,但是,不是所有的链接都需要包含在 <nav> 元素中。

  • 示例

    1
    2
    3
    4
    5
    6
    <nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
    </nav>
  • 效果

8.5 < article > 元素

  • <article> 标签定义独立的内容,定义外部的内容。

  • <article> 元素使用实例:

    • Forum post
    • Blog post
    • News story
    • Comment
  • 示例

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

8.6 < section > 元素

  • <section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

  • 根据 W3C HTML5 文档: section 包含了一组内容及其标题。

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <section>
    <h1>WWF</h1>
    <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the
    conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was
    founded in 1961.</p>
    </section>

    <section>
    <h1>WWF's Panda symbol</h1>
    <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi
    Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of
    WWF.</p>
    </section>
  • 效果

8.7 < aside > 元素

  • <aside> 标签定义页面主区域内容之外的内容(比如侧边栏)。

  • <aside> 标签的内容应与主区域的内容相关。

  • 示例

    1
    2
    3
    4
    5
    6
    <p>My family and I visited The Epcot center this summer.</p>

    <aside>
    <h4>Epcot Center</h4>
    <p>The Epcot Center is a theme park in Disney World, Florida.</p>
    </aside>
  • 效果

8.8 < figure > 和 < figcaption > 元素

  • <figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。

  • <figure> 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

  • <figcaption> 标签定义 <figure> 元素的标题。

  • <figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in
    Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and
    almost flat, and is a famous tourist attraction in Norway.</p>

    <figure>
    <img src="https://demo.qianchia.com/media/image/demo/demo1.png" alt="The Pulpit Rock" width="128" height="128" />
    <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
    </figure>
  • 效果

8.9 浏览器支持

元素
新语义元素 支持 9.0 支持 支持 支持
  • 表格中的数字表示支持该元素的第一个浏览器版本号。
文章目录
  1. 1. 前言
  2. 2. 1、语法
    1. 2.1. 1.1 结束标签
  3. 3. 2、解析
    1. 3.1. 2.1 < p > 元素
    2. 3.2. 2.2 < body > 元素
    3. 3.3. 2.3 < html > 元素
  4. 4. 3、空元素
  5. 5. 4、使用小写标签
  6. 6. 5、标签列表
    1. 6.1. 5.1 按字母顺序排列
    2. 6.2. 5.2 按功能排列
      1. 6.2.1. 5.2.1 基础
      2. 6.2.2. 5.2.2 格式
      3. 6.2.3. 5.2.3 表单
      4. 6.2.4. 5.2.4 框架
      5. 6.2.5. 5.2.5 图像
      6. 6.2.6. 5.2.6 媒体
      7. 6.2.7. 5.2.7 链接
      8. 6.2.8. 5.2.8 列表
      9. 6.2.9. 5.2.9 表格
      10. 6.2.10. 5.2.10 样式
      11. 6.2.11. 5.2.11 节
      12. 6.2.12. 5.2.12 元信息
      13. 6.2.13. 5.2.13 程序
  7. 7. 6、标签简写及全称
  8. 8. 7、元素和有效 DOCTYPES
  9. 9. 8、语义元素
    1. 9.1. 8.1 HTML5 中新的语义元素
    2. 9.2. 8.2 < header > 元素
    3. 9.3. 8.3 < footer > 元素
    4. 9.4. 8.4 < nav > 元素
    5. 9.5. 8.5 < article > 元素
    6. 9.6. 8.6 < section > 元素
    7. 9.7. 8.7 < aside > 元素
    8. 9.8. 8.8 < figure > 和 < figcaption > 元素
    9. 9.9. 8.9 浏览器支持
隐藏目录