新标签主要分成三个部分:语义化标签、功能性标签及新的输入控件类型
语义化标签
、、
这些新的语义化标签目前得到了大部分主流浏览器的支持,建议直接使用;如果是在IE 8及以下版本,无法识别这些标签,可通过一些技术手段和第三方js库支持。
功能性标签
、、、 等
这些标签的使用代替了原来需要使用第三方插件才能实现的效果,目前,这些功能性标签或多或少存在一些浏览器兼容问题或是性能问题,在使用过程中需要谨慎,尽量在多个浏览器中多做功能和性能测试。
表单输入类型
tel、search、url、date、email、number、range、color 等
在不支持的浏览器中,这些新表单输入控件会平稳降级为普通的ext类型输入控件。推荐在项目中直接使用这些新的输入控件类型。
新标签解释
标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
水果
苹果
桔子
中国人物
三国、两晋、南北朝
三国
猛将猛将猛将猛将
两晋
猛将猛将猛将猛将
用于页面内容的独立分块,往往是文章的一段
通常由内容和标题组成,没有标题的内容不推荐使用 section
一个容器需要被定义样式或者脚本定义行为时,推荐用div而非section,不要将section用作设置样式的容器
标签标记定义一篇文章 (article可以看成是一种特殊种类的section元素,它比section更强调独立性)从语义化上看为文档、页面
是我标签
我是段落
通常是一篇文章、一个页面、一个独立完整的内容模块
一般会带个标题,并放在 header 标签中
article 元素可以互相嵌套
标签定义 section 或 document 的页眉
网站标题
网站副标题
通常包含 h1-h6 元素 或 hgroup
作为整个页面或者一个内容块的标题;也可以包裹一节的目录部分,一个搜索框,一个nav,或者任何相关logo
整个页面没有限制,header元素的个数,可以拥有多个,可以为每个内容块增加一个header元素
如果 hgroup 或 h1-h6 自己就能工作的很好,那就不要用header
标签用于对网页或区段(section)的标题进行组合,当元素有多个层级时,该元素可以将h1-h6元素放在其内,譬如文章的主标题和副标题的组合
这个标签在最新的 HTML5.1 版中被废除?
主标题
副标题
如果只需要一个h1-h6标签就不用hgroup
如果有连续多个h1-h6标签就用hgroup
如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup包住,和其他文章元数据一起放入header标签
The People's Republic of China was born in 1949...
[站外图片上传中……(1)]
figure元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响
figure用来代替原来li标签,figcaption用来替代p标签
figcaption 元素应该被置于 figure 元素的第一个或最后一个子元素的位置
标签代表页面的导航链接区域,用于定义页面的主要导航部分
- HTML5
- CSS3
- JavaScript
应用位置譬如:侧边栏上目录,面包屑导航,搜索样式,或者下一篇上一篇文章,但是事实上规范上nav只能用在页面主要导航部分上
页脚区域中的链接列表,虽然指向不同网站的不同区域,譬如服务条款,版权页等,这些footer元素就能够用了
标签被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有 关的相关资料、标签、名词解释等
内容
在article元素之外使用作为页面或站点全局的附属信息部分
最典型的是侧边栏,其中的内容可以是日志串连,其他组的导航,甚至广告,这些内容相关的页面
标签定义 section 或 document 的页脚
© 2016
通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料
如果footer元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息
可以是 "网页" 或任意 "section" 的底部部分
没有个数限制,除了包裹的内容不一样,其他跟header类似
语义化结构
以前的div写法
html5 推荐写法
HTML5中新增的标签属性
标签中的 target 属性
和 中的 placeholder、required 及 autofocus 属性
输入控件上的这几个属性是非常有用的,增强了用户体验
标签上的自定义属性 data-*
# 对应的读取和设置数据的方式如下:
var data = document.getElementById('data');
//获取数据
data.dataset['msg'];
//设置数据
data.dataset['msg'] = 'World';
# 另外一种情况
//这类读写属性方式采用 Pascal写法:首字母小写,以-后的大写开头
data.dataset['lastValue'] = '88';
# 此API已经得到了大部分主流浏览器的支持,但 IE7 及以下浏览器并不支持,可使用jquery的data('value')