HTML5元素详解-优快云博客

参考地址：https://note.youdao.com/share/?id=ca45c17e98435e0a6095f05bd7e7f565
今天小编看到一篇不错的文章，整理出一部分，有兴趣的小伙伴可以自行点击链接去学习关于HTML5的知识

HTML5元素

HTML5元素背景基本知识

HTML5元素背景基本知识

1.语义与呈现分离

①HTML5中的一大主要变化是基本信念方面的：将元素的语义与元素对其内容呈现结果的影响分开。
简单理解：HTML元素负责文档内容的结构和含义，CSS样式应用于元素上来控制内容的呈现。
②HTML5中新增的大多数元素有具体的含义。
举例：
article元素可以用来表示适于联合供稿的独立成篇的内容。
figure元素表示图片。
③圆滑的定义，对应用广泛的HTML4元素保留。HTML5成了一个“双速”标准。
举例：b元素
HTML4：指示浏览器以粗体显示其开始标签和结束标签之间的内容。
HTML5：b元素表示一段文字（将这段文字从周围文字中凸现出来并不表示特别的强调或重要性），习惯上使用粗体呈现，其使用场合包括文章提要中的关键字或产品评论中的产品名称等。
（其实说白了也是粗体显现）

2.元素选用原则

由于用HTML元素来标记的内容类型过多，不同内容的相同术语的含义可能不同。
举例：section在技术规范、合同和博客文章三种情况下的含义截然不同。

3.元素说明体例

元素摘要表。

4.元素速览

1.文档和元数据元素
创建HTML文档的上层建筑，向浏览器说明文档的情况，定义脚本程序和CSS样式，提供浏览器禁用脚本时要显示的内容。

元素	说明	类型	新增或有无变化
base	设置相对URL的基础	元数据	无变化
body	表示HTML文档的内容	无	有变化
DOCTYPE	表示HTML文档的开始	无	有变化
head	包含文档的元数据	无	无变化
html	表示文档中HTML部分的开始	无	有变化
link	定义与外部资源(通常是样式表或网站图标)的关系	元数据	有变化
meta	提供关于文档的信息	元数据	有变化
noscript	包括浏览器禁用脚本或不支持脚本时显示的内容	元数据、短语	无变化
script	定义脚本程序，可以是文档内嵌的也可以是外部文件中的	元数据、短语	有变化
style	定义CSS样式	元数据	有变化
title	设置文档标题	元数据	无变化

2.文本元素
用来为内容提供基本的结构和含义。

元素	说明	类型	新增或有无变化
a	生成超链接	短语、流	有变化
abbr	缩略词	短语	无变化
b	不带强调或着重意味地标记一段文字	短语	有变化
br	表示换行	短语	无变化
cite	表示其他作品的标题	短语	有变化
code	表示计算机代码片段	短语	无变化
del	表示从文档中删除的文字	短语、流	新增
dfn	表示术语定义	短语	无变化
em	表示着重强调的一段文字	短语	无变化
i	表示与周边内容秉性不同的一段文字，例如来自另一种语言的词语	短语	有变化
ins	表示加入文档的文字	短语、流	无变化
kbd	表示用户输入内容	短语	无变化
mark	表示一段因为与上下文中另一词语相关而被突出显示的内容	短语	新增
q	表示引自他处的内容	短语	无变化
rp	与ruby元素结合使用，标记括号	短语	新增
rt	与ruby元素结合使用，标记注音符号	短语	新增
ruby	表示位于表意文字上方或右方的注音符号	短语	新增
s	表示文字已不再准确	短语	有变化
samp	表示计算机程序的输出内容	短语	无变化
small	表示小号字体内容	短语	有变化
span	一个没有自己的语义的通用元素。可以用在希望应用一些全局属性却又不想引入额外语义的情况	短语	无变化
strong	表示重要内容	短语	无变化
sub	表示下标文字	短语	无变化
sup	表示上标文字	短语	无变化
time	表示时间或日期	短语	新增
u	不带强调或着重意味地标记一段文字	短语	有变化
var	表示程序或计算机系统中的变量	短语	无变化
wbr	表示可安全换行的地方	短语	新增

3.对内容分组
用于分组的元素

元素	说明	类型	新增或有无变化
blockquote	表示引自他处的大段内容	流	无变化
dd	用在dl元素之中，表示定义	无	无变化
div	一个没有任何既定语义的通用元素，是span元素在流元素中的对应物	流	无变化
dl	表示包含一系列术语和定义的说明列表	流	无变化
dt	用在dl元素之中，表示术语	无	无变化
figcaption	表示figure元素的标题	无	新增
figure	表示图片	流	新增
hr	表示段落级别的主题转换	流	有变化
li	用在ul、ol和menu元素中，表示列表项	无	有变化
ol	表示有序列表	流	有变化
p	表示段落	流	有变化
pre	表示其格式应被保留的内容	流	无变化
ul	表示无序列表	流	有变化

4.划分内容
让每个概念、观点或主题彼此分隔开。
用于划分内容的元素

元素	说明	类型	新增或有无变化
address	表示文档或article的联系信息	流	新增
article	表示一段独立的内容	流	新增
aside	表示与周边内容稍有牵涉的内容	流	新增
details	生成一个区域，用户将其展开可以获得更多细节	知识流	新增
footer	表示尾部	流	新增
h1~h6	表示标题	流	无变化
header	表示首部	流	新增
hgroup	将一组标题组织在一起，以便文档大纲只显示其中第一个标题	流	新增
nav	表示有意集中在一起的导航元素·	流	新增
section	表示一个重要的概念或主题	流	新增
summary	用在details元素中，表示该元素内容的标题或说明	无	新增

5.制表
表格在HTML5中的主要变化是不能再用来控制页面布局，这项工作交给了CSS布局特性。
表格元素

元素	说明	类型	新增或有无变化
caption	表示表格标题	无	有变化
col	表示一列	无	有变化
colgroup	表示一组列	无	有变化
table	表示表格	流	有变化
tbody	表示表格主体	无	有变化
td	表示单元格	无	有变化
tfoot	表示表脚	无	有变化
th	表示标题行单元格	无	有变化
thead	表示标题行	无	有变化
tr	表示一行单元格	无	有变化

6.创建表单
获取用户的输入数据。HTML5中对这方面新增许多元素和特性（包括在用户提交表单时在客户端验证输入数据的功能）。
表单元素

元素	说明	类型	新增或有无变化
button	表示可用来提交或重置表单的按钮（或一般按钮）	短语	有变化
datalist	定义一组提供给用户的建议值	流	有变化
fieldset	表示一组表单元素	流	有变化
form	表示HTML表单	流	有变化
input	表示用来收集用户输入数据的控件	短语	有变化
keygen	生成一对公钥和私钥	短语	新增
label	表示表单元素的说明标签	短语	有变化
legend	表示fieldset元素的说明性标签	无	无变化
optgroup	表示一组相关的option元素	无	无变化
option	表示供用户选择的一个选项	无	无变化
output	表示计算结果	短语	新增
select	给用户提供一组固定的选项	短语	有变化
textarea	用户可以用它输入多行文字	短语	有变化

7.嵌入内容
嵌入元素

元素	说明	类型	新增或有无变化
area	表示一个用于客户端分区响应图的区域	短语	有变化
audio	表示一个音频资源	无	新增
canvas	生成一个动态的图形画布	短语、流	新增
embed	用插件在HTML文档中嵌入内容	短语	新增
iframe	通过创建一个浏览上下文在文档中嵌入另一个文档	短语	有变化
img	嵌入图像	短语	有变化
map	定义客户端分区响应图	短语、流	有变化
meter	嵌入数值在许可值范围背景中的图形表示	短语	新增
object	在HTML文档中嵌入内容。也可用于生成浏览上下文和生成客户端分区响应图	短语、流	有变化
param	表示将通过object元素传递给插件的参数	无	无变化
progress	嵌入目标进展或任务完成情况的图形表示	短语	新增
source	表示媒体资源	无	新增
svg	表示结构化矢量内容	无	新增
track	表示媒体的附加轨道（例如字幕）	无	新增
video	表示视频资源	无	新增