html5标签变化

前言

HTML中的一大主要变化是基本信念方面的:将元素的语义与元素对其内容呈现结构的影响分开。HTML元素负责文档内容的结构和含义,内容的呈现则由应用与元素上的CSS样式控制。HTML文档的用户未必都需要显示它们,不掺合呈现方面的事有助于简化HTML的处理以及从中自动提炼含义。

元素速览

接下来让我们一起走马观灯地认识一下所有的HTML5元素吧

文档和元数据元素

创建HTML文档的上层建筑,想浏览器说明文档的情况,定义脚本程序和CSS样式,提供浏览器禁用脚本时要显示的内容

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

文本元素

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

元素 说明 类型 有无变化
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 表示可安全换行的地方 短语 新增

对内容分组

用来将相关内容分组

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

划分内容

用于划分内容、让每个概念、观点或主题彼此分隔开。它们中有许多是新增的。这些元素为分离元素的含义和外观做了大量基础性工作

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

制表

用于制作显示数据的表格。表格在HTML5中的主要变化是不能再用来控制页面布局。

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

创建表单

HTML5对这方面关注的比较多,并且新增了不少元素和特性(包括在用户提交表单时在客户端验证输入数据的功能)

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

嵌入内容

在HTML5文档中嵌入内容

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

未实现的元素

有两个元素目前还没有浏览器实现,而且在HTML5规范中也仅有含糊不清的说明,这两个元素时command和menu。它们的设计用途是让菜单和用户界面元素处理起来更简单一些。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,728评论 1 92
  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 4,045评论 1 25
  • 格式后期处理。 Jeremy Keith在 Fronteers 2010 上的主题演讲 今天我想跟大家谈一谈HTM...
    LordZhou阅读 1,120评论 0 17
  • 1. 浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层分别是:HTML、CSS、Ja...
    程序猿人王小贱阅读 1,866评论 1 11
  • 一直以来都不喜欢写游记。因为总觉得知道的人多了之后,本来美好的景点就会被商业化,丧失了其迷人的地方。但矛盾的是,当...
    JasonHuang阅读 862评论 0 2