HTML5新增的标签和属性归纳
版权：本⽂转⾃CSDN博客
HTML5语法
⼤部分延续了html的语法
不同之处：开头的 <!DOCTYPE html>
<html lang="zh-CN">
<meta charset="utf-8">
字符编码变得简洁，
不区分⼤⼩写，
添加了布尔值，类似checked，selected
引号可以省略，但是编码规范来说，不建议，
有可以省略结束符的标签，和完全省略的标签应⽤。
增加标签：
1、结构标签
（1）section：独⽴内容区块，可以⽤h1~h6组成⼤纲，表⽰⽂档结构，也可以有章节、页眉、页脚或页眉的其他部分；
（2）article：特殊独⽴区块，表⽰这篇页眉中的核⼼内容；
（3）aside：标签内容之外与标签内容相关的辅助信息；
（4）header：某个区块的头部信息/标题；
（5）hgroup：头部信息/标题的补充内容；
（6）footer：底部信息；
（7）nav：导航条部分信息
（8）figure：独⽴的单元，例如某个有图⽚与内容的新闻块。
2、表单标签
（1）email：必须输⼊邮件；
（2）url：必须输⼊url地址；
（3）number：必须输⼊数值；
（4）range：必须输⼊⼀定范围内的数值；
（5）Date Pickers：⽇期选择器；
a.date：选取⽇、⽉、年
c.week：选取周和年
d.time：选取时间（⼩时和分钟）
e.datetime：选取时间、⽇、⽉、年（UTC时间）
f.datetime-local：选取时间、⽇、⽉、年（本地时间）
（6）search：搜索常规的⽂本域；
（7）color：颜⾊
3、媒体标签
（1）video：视频
（2）audio：⾳频
（3）embed：嵌⼊内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。
4、其他功能标签
（1）mark：标注（像荧光笔做笔记）
（2）progress：进度条；<progress max="最⼤进度条的值" value="当前进度条的值">
（3）time：数据标签，给搜索引擎使⽤；发布⽇期<time datetime="2014-12-25T09:00">9：00</time>更新⽇期<time datetime="2015- 01-23T04:00" pubdate>4:00</time>
（4）ruby和rt：对某⼀个字进⾏注释；<ruby><rt>注释内容</rt><rp>浏览器不⽀持时如何显⽰</rp></ruby>
（5）wbr：软换⾏，页⾯宽度到需要换⾏时换⾏；
（6）canvas：使⽤JS代码做内容进⾏图像绘制；
（7）command：按钮；
（8）deteils ：展开菜单；
（9）dateilst：⽂本域下拉提⽰；
（10）keygen：加密；
新增的属性：
对于js进⾏添加的属性。
<script defer src=".....js" onload="alert('a')"></script>
<script async src=".....js" onload="alert('b')"></script>
如果没有以上两个属性的话，执⾏顺序为先加载（下载）第⼀个src，然后在执⾏其onload，然后在向下依次同步执⾏defer属性在h5之前就已经有了，输⼊延迟加载（推迟执⾏），它会先加载（下载）src中⽂件内容，然后等页⾯全部加载完成后，再加载onload中js.async属性属于异步加载，它会在加载src后，⽴即执⾏onload，同时还会继续加载页⾯以上执⾏顺序，alert显⽰会先显⽰b然后再显⽰a
⽹页中标签中加⼊⼩图标的样式代码
<link rel="icon" href="" type="图⽚名称" sizes="16*16">
有序列表ol：新增start（列表起始值），reversed（是否倒置）menu菜单type属性（3个菜单类型）内嵌css样式：在标签内部来定义⼀个样式区块（scoped），只对样式标签内部才有效内嵌框架：iframe元素，新增了seamless⽆边距⽆边框，srcdoc定义了内嵌框架的内容
<iframe>新增属性：
<!--seamless定义框架⽆边框⽆边距-->
<!--srcdoc的显⽰级别⽐sandbox⾼-->
<!--sandbox⽤来规定⼀个内嵌框架的安全级别-->
<!--sandbox="allow-forms：允许提交表单"-->
<!--sandbox="allow-origin：允许是相同的源"-->
<!--sandbox="allow-scripts：允许执⾏脚本"-->
<!--sandbox="allow-top-navigation：允许使外⾯的页⾯进⾏跳转"-->
manifest属性：
定义页⾯需要⽤到的离线应⽤⽂件，⼀般放在<html>标签⾥
charset属性：
meta属性之⼀，定义页⾯的字符集
sizes属性：
<link>新增属性，当link的rel="icon"时，⽤以设置图标⼤⼩
base属性:
<base href="localhost/" target="_blank">表⽰当在新窗⼝打开⼀个页⾯时，会将href中的内容作为前缀添加到地址前
defer属性：
script标签属性，表⽰脚本加载完毕后，只有当页⾯也加载完毕才执⾏（推迟执⾏）
async属性：
script标签属性，脚本加载完毕后马上执⾏（运⾏过程中浏览器会解析下⾯的内容），即使页⾯还没有加载完毕（异步执⾏）
media属性：
<a>元素属性：表⽰对何种设备进⾏优化
hreflang属性：
<a>的属性，表⽰超链接指向的⽹址使⽤的语⾔
ref属性：
<a>的属性，定义超链接是否是外部链接
reversed属性:
<ol>的属性，定义序号是否倒叙
start属性：
<ol>的属性，定义序号的起始值
html href属性
scoped属性：
内嵌CSS样式的属性，定义该样式只局限于拥有该内嵌样式的元素，适⽤于单页开发
HTML5全局属性：对任意标签都可以使⽤的，以下6个
data-yourvalue 、hidden、Spenllecheck、tabindex、contenteditable、desginMode；
全局属性：
1.可直接在标签⾥插⼊的：data-⾃定义属性名字；
hidden（直接放上去就是隐藏）；
spellcheck="true"（语法纠错）；
tabindex="1"（Tab跳转顺序）；
contenteditable="true"(可编辑状态，单击内容，可修改)；
2.在JavaScript⾥插⼊的window.document.designMode = 'on'（JavaScript的全局属性，整个页⾯的⽂本都可以编辑了）；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。