重学前端:HTML版本问题及HTML5新增元素

自从2010年HTML5正式推出以来,HTML5就陆陆续续的被各大浏览器厂商支持,飞速发展。HTML5为了确保web浏览器的兼容性,围绕着先前的web标准,重新制定了一套在现有html语法上修改而来的语法。因此HTML5与之前版本既有相同之处也有不同之处,本文详细描述HTML5与之前版本的区别,主要包括语法的变更和新增的元素。

首先一张表看HTML5与之前版本在语法上的不同:

HTML4 XHTML HTML5
标签不允许结束 标签必须结束 标签允许不结束
属性不用带引号 属性必须带引号 属性不用带引号
标签属性可大写 标签属性必须小写 标签属性可大写
Boolean属性可省略值 Boolean属性必须写值 Boolean属性可省略值

HTML5新增的元素

在HTML 5中,为了使文档的结构更加清晰明确,追加了几个与页眉、页脚、内容区块等文档结构相关联的结构元素,还增加了一些辅助阅读元素和富媒体相关元素,这些都是语义化标签。

元素 作用
section 表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。可以与h1、h2、h3、h4、h5、h6元素结合使用,标示文档结构。
article 表示页面中的一块与上下文不相关的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报章杂志中的文章、一篇论坛帖子、一段用户评论或一个独立的插件,或者其他任何独立的内容。除了内容部分,一个article元素通常有它自己的标题,一般放在一个header元素里面,有时还有自己的脚注。
aside 表示article元素的内容之外的、与article元素的内容相关的辅助信息。
header 表示页面中一个内容区块或整个页面的标题。
footer 表示整个页面或页面中一个内容区块的脚注。一般来说,它会包含创作者的姓名、创作日期以及创作者联系信息。
nav 表示页面中导航链接的部分。
figure 表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。
main 表示网页中的主要内容。主内容区域意指与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容。
video 用于定义视频,比如电影片段或其他视频流。
audio 用于定义音频,比如音乐或其他音频流。
embed 用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等。
mark 主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
progress 表示运行中的进程,可以使用progress元素来显示JavaScript中耗费时间的函数的进程。
meter 表示度量衡,仅用于已知最大值和最小值的度量。必须定义度量的范围,既可以在元素的文本中,也可以在min/max属性中定义。
time 用于表示日期或时间,也可以同时表示两者。
ruby 表示ruby注释(中文注音或字符)。
rt 表示字符(中文注音或字符)的解释或发音。
rp 在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容。
wbr 表示软换行。wbr元素与br元素的区别是:br元素是此处必须换行,而wbr元素意思就是浏览器窗口或父级元素的宽度足够宽时(没必要换行时),不进行换行,而当宽度不够时,主动在此处进行换行。wbr元素好像对字符型的语言用处比较大,但是对于中文,貌似没多大用处。
canvas 表示图形,比如图表和其他图像。这个元素本身没有行为,仅提供一块画布,但把一个绘图API展现给客户端JavaScript,以使脚本能够把想绘制的东西绘制到这块画布上。
details 表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的,用户点击标题时,会显示细节信息。summary元素应该是details元素的第一个子元素。
detalist 表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表。
datagrid 表示可选数据的列表,它以树形列表的形式显示。
output 表示不同类型的输出,比如脚本的输出。
source 媒介元素比如video和audio,定义媒介资源。
dialog 表示对话框。

新增的input元素的类型

  • email:email类型表示必须输入e-mail地址的文本输入框。
  • url:url类型表示必须输入URL地址的文本输入框。
  • number:number类型表示必须输入数值的文本输入框。
  • range:range类型表示必须输入一定范围内数字值的文本输入框。
  • Date Pickers:HTML 5拥有多个可供选取日期和时间的新型输入文本框。
  • date:选取日、月、年。
  • month:选取月、年。
  • week:选取周和年。
  • time:选取时间(小时和分钟)。
  • datetime:选取时间、日、月、年(UTC时间)。
  • datetime-local:选取时间、日、月、年(本地时间)。

本文整理自我的学习笔记。

© 版权声明
THE END
请我喝怡宝
点赞0
分享
评论 抢沙发