html5新增标签
html5与html4的区别
- 更简单
- 标签的语义化
- 语法更宽松
- 多设备跨平台
自适应网页设计
html5标准化写法:
主体结构标签
- header
表示页面中一个内容区块或者整个页面的标题 - section
描绘的是一个文档或者程序里的普通的section节(强调分块) - footer
表示整个页面或者页面中的一个内容区块的脚注 - nav
nav元素是一个可以用作页面导航的链接组
一般用于几个场合:
1.传统导航条 2.侧边导航条 3. 页内导航 4.翻页操作 - aside
表示当前页面或文章的附属信息,可以包括当前页面或者主要内容相关的引用、侧边栏、广告、nav组等。 - article
代表一个文档内容的独立片段,例如:博客条目或者报纸文章(强调独立完整的内容) - figure & figcaption
表示一段独立的流内容,表示文档字体流内容中的一个独立单元(一般用于视频等)。figcaption为figure元素添加标题 - hgroup
页面上的一个标题组合,多个标题可用hgroup包含起来,如:
<hgroup>
<h1>1607</h1>
<h2>广州html5 1607班</h2>
</hgroup>
- main
规定文档的主要内容。
元素中的内容对于文档来说应当是唯一的。
非主体结构标签
menu
1) 标签定义命令的列表或菜单。
2) 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。
address
标签定义文档作者或拥有者的联系信息- datalist
datalist提供一个事先定义好的列表,通过id与input的list属性关联,当在input内输入时就会有自动完成(autocomplete)的功能,用户将会看见一个下拉列表供其选择。
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
//提示:option 元素永远都要设置 value 属性
- progress
定义进度条
<progress max="100" value="76">
<span>76</span>%
</progress>
- output
- 表示不同类型的输出,比如脚本的输出
`注:必须从属于某个表单。 - mark
高亮显示文字,一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。 - time
标签定义日期或时间,如果标签内容不是时间或日期,则必须指定datetime属性为指定日期,如:
<time datatime="2017-3-7">女神节</time>