下载文档原格式
HTML5（⼀）——新增元素和属性⾃ H5 诞⽣以来，在 html4.0 中有些元素已被 H5 废弃，但是在 H5 中添加了很多新元素以及功能，今天我们学习 H5 中新增的元素和属性都有哪些？新增语义结构标签标签描述<article>定义页⾯独⽴的内容区域。
<aside>定义页⾯的侧边栏内容。
<bdi>允许您设置⼀段⽂本，使其脱离其⽗元素的⽂本⽅向设置。
<command>定义命令按钮，⽐如单选按钮、复选框或按钮<details>⽤于描述⽂档或⽂档某个部分的细节<dialog>定义对话框，⽐如提⽰框<summary>标签包含 details 元素的标题<figure>规定独⽴的流内容（图像、图表、照⽚、代码等等）。
<figcaption>定义 <figure> 元素的标题<footer>定义 section 或 document 的页脚。
<header>定义了⽂档的头部区域<mark>定义带有记号的⽂本。
<meter>定义度量衡。
仅⽤于已知最⼤和最⼩值的度量。
<nav>定义导航链接的部分。
<progress>定义任何类型的任务的进度。
<ruby>定义 ruby 注释（中⽂注⾳或字符）。
<rt>定义字符（中⽂注⾳或字符）的解释或发⾳。
<rp>在 ruby 注释中使⽤，定义不⽀持 ruby 元素的浏览器所显⽰的内容。
<section>定义⽂档中的节（section、区段）。
<time>定义⽇期或时间。
<wbr>规定在⽂本中的何处适合添加换⾏符。
新增标签使⽤时根据描述内容，在适当的地⽅使⽤新标签，应⽤的时候和其他标签是⼀样的，H5 新增标签使得⽹页结构更清晰明了，建议⼤家使⽤新增元素。
HTML5新增元素，标签总结总是遇到h5新标签的笔试题⽬，就查阅了资料来总结⼀下：1.form相关：（1）form属性：在HTML5中表单元素可放在表单之外，通过给该元素添加form属性来指向⽬标表单（form属性值设为⽬标表单id）即可。
（2）formaction属性：HTML5给提交按钮(如button、submit、image等)增加了formaction属性，以便提交到不同的服务器地址。
<input formaction="new.html" type="submit" value="提交到new.html">（3）formmethod属性：⽤法同formaction。
（4）placeholder属性：⽤于⽂本框处于未输⼊状态时的⼀种⽂字提⽰。
（5）autofocus属性：⾃动获得焦点，⼀个页⾯只能有⼀个控件具有该属性。
该属性⽆值，直接写就好。
<input name="username" autofocus type="text" id="username">（6）list属性：⽤于单⾏⽂本框，该属性的值为某个datalist元素的id，增加该属性后的单⾏⽂本框类似选择框()，但允许⽤户⾃定义输⼊，为了避免没有⽀持该元素的浏览器出现错误，我们通常使⽤CSS设置不显⽰。
<datalist> 标签:定义可选数据的列表。
与 input 元素配合使⽤，就可以制作出输⼊值的下拉列表。
order:<input list="list" name="order" autofocus type="text" id="order"><datalist id="list" style="display:none"><option value="1">1</option><option value="2">2</option><option value="3">3</option></datalist>（7）autocomplete属性：⾃动完成允许浏览器预测对字段的输⼊，HTML5实现了⾃定义设置该属性，避免了任何⼈都可以看到所存在的安全隐患。
HTML5+CSS3 新增表单属性
在HTML5中，除了兼容以前<form> </form>标签中的属性以外，还新增了以下两个属性。
1．autocomplete 属性
该属性规定表单是否应该启用自动完成功能。
当用户在某些文本框输入过一些内容时，如果再次输入内容时，文本框会出现一个下拉框显示出以前输入过的内容。
这是浏览器默认的一个功能，利用autocomplete属性可以关闭该功能。
该属性默认值为on，即规定启用自动完成功能。
而当值为off时，则禁用自动完成功能。
示例：3-1 autocomplete.html
2．Novalidate属性
该属性规定在提交表单时不应该验证<form>标签中域对象。
示例：3-2 Novalidate.html
当在<form>标签中，添加novalidate属性时，则表单将不验证域对象中的内容。
例如，在页面中，输入错误的Email地址内容。
输入错误内容
然后，并单击【提交】按钮，则不做任何验证，将直接转至提交页面。
无验证，直接跳转页面。
HTML5details标签属性HTML5&details标签属性HTML5中新增的标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。
HTML5标签用法一般情况下，details用来对显示在页面的'内容做进一步骤解释。
其展现出来的效果和jQuery手风琴插件差不多。
其大致写法如下：Google Nexus 6商品详情：屏幕5.96” 2560x1440 QHD AMOLED display (493 ppi)电池3220 mAh相机13MP rear-facing with optical image stabilization 2MP front-facing处理器Qualcomm Snapdragon 805 processor首先是标签，里面接着是标题，这里面的内容一般简短，具有总结性，会展示在页面。
接着可以跟任意类型的HTML元素作为详情内容，这些内容需要在点击才会呈现。
上面代码呈现出来的效果会是下面这样的：最开始详情是隐藏的，当点击时都会展现。
open 属性当然，你也可以通过给标签设置open属性让它默认为展开状态。
Google Nexus 6商品详情：屏幕5.96” 2560x1440 QHD AMOLED display (493 ppi)电池3220 mAh相机13MP rear-facing with optical image stabilization 2MP front-facing处理器Qualcomm Snapdragon 805 processor此时默认会把详情展开，而点击标题后会折叠起来。
示例示例如上面那样，预览在线版本可点击此处。
浏览器兼容性由于是HTML5新标签，浏览器支持情况不是很理想。
从来自caniuse的数据来看，目前仅Chrome, Safari 8+ 和Opera 26+支持此标签。
可喜的是，如果你在caniuse开启了「显示来自UC浏览器的结果」选项的话，会发现，国产的UC浏览器也支持了此标签。
HTML5学习笔记--------》HTML5概要与新增标签！⼀、HTML5概要1.1、为什么需要HTML5HTML4陈旧不能满⾜⽇益发展的互联⽹需要，特别是移动互联⽹。
为了增强浏览器功能Flash被⼴泛使⽤，但安全与稳定堪忧，不适合在移动端使⽤（耗电、触摸、不开放）。
HTML5增强了浏览器的原⽣功能，符合HTML5规范的浏览器功能将更加强⼤，减少了Web应⽤对插件的依赖，让⽤户体验更好，让开发更加⽅便，另外W3C从推出HTML4.0到5.0之间共经历了17年，HTML的变化很⼩，这并不符合⼀个好产品的演进规则。
1.2、什么是HTML5HTML5指的是包括HTML、CSS和JavaScript在内的⼀套技术组合。
它希望能够减少⽹页浏览器对于需要插件的丰富性⽹络应⽤服务（Plug-in-Based Rich Internet Application，RIA），例如：AdobeFlash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效加强⽹络应⽤的标准集。
HTML5是HTML最新版本，2014年10⽉由万维⽹联盟（W3C）完成标准制定。
⽬标是替换1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联⽹应⽤迅速发展的时候，使⽹络标准达到匹配当代的⽹络需求。
1.3、HTML5现状及浏览器⽀持⼤部分主流浏览器已经⽀持HTML5，但是各个浏览器⽀持的⽅式以及语法有所差异性。
⽀持Html5的浏览器包括Firefox（⽕狐浏览器），IE9 及其更⾼版本，Chrome（⾕歌浏览器），Safari，Opera等现代浏览器。
⽀持得分：如果想了解更多请看本⽂的兼容性那⼀节的内容。
PC端（总分555分）：平板（总分555分）：移动（总分555分）：1.4、HTML5特性HTML5 ⼋个特性类别对应的8个Logo 语义⽹、离线&存储、设备访问、通信多媒体、图形和特效、性能和集成、呈现（CSS3）1.4.1. 语义特性（Class：Semantic）HTML5赋予⽹页更好的意义和结构。
HTML5--新增表单元素属性事件（3）前⾔： HTML5在原本已有表单元素的基础上新增了新的表单元素和属性，增强了表单元素的功能。
第⼀类.新增input(type)类型 1.type为email 作⽤：email 类型⽤于包含 email 地址的输⼊域。
特性：提供了默认电⼦邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满⾜验证，则会阻⽌当前的表单提交 email⽰例：如果内容不满⾜邮箱格式，提交表单会有错误提⽰信息。
<body><form action="#">邮箱:<input type="email"><input type="submit" value="提交"></form></body> 2.type为url 作⽤：url类型⽤于包含⽹址的输⼊域。
特性：提供了⽹址完整验证，只能输⼊合法的⽹址：必须包含http://(例:) url⽰例：如果内容不满⾜⽹址格式，提交表单会有错误提⽰信息。
<body><form action="#">⽹址:<input type="url"><input type="submit" value="提交"></form></body> 3.type为number 作⽤：number 类型⽤于包含数值的输⼊域。
特性：只能输⼊数字(包含⼩数点)，不能输⼊其它的字符 属性： max -- 限制输⼊框的最⼤值 min -- 限制输⼊框的最⼩值 value -- 输⼊框的默认值 step -- 规定数字增长间隔 number⽰例：输⼊框中只能输⼊number类型值，不能输⼊其他类型的值<form action="#">数量：<input type="number" value="60" max="100" min="0" step="3"><br><input type="submit" value="提交"></form> 4.type为search 作⽤：search 类型⽤于搜索域，⽐如站点搜索或 Google 搜索 特性：输⼊值后，输⼊框后带有关闭按钮可以清除输⼊框内容 search⽰例：<body><form action="#">请输⼊商品名称：<input type="search"> <br><input type="submit" value="提交"></form></body> 5.type为range 作⽤：range 类型⽤于包含⼀定范围内数字值的输⼊域(可以⽤作⾳量键) 特性：显⽰为滑动条 属性： max -- 允许的最⼤值 min -- 允许的最⼩值 value -- 规定的默认值 step -- 规定数字增长间隔 range⽰例：<body><form action="#">范围：<input type="range" max="100" min="0" value="50"> <br><input type="submit" value="提交"></form></body> 6.type为color 作⽤：输⼊类型⽤于规定颜⾊ 特性：该类型允许你从拾⾊器中选取颜⾊ color⽰例：<body><form action="#">颜⾊：<input type="color"> <br><input type="submit" value="提交"></form></body> 7.type为tel 作⽤：tel 输⼊类型⽤于包含电话号码的输⼊字段 特性：tel它并不是来实现验证。
HTML5的标签⼤全以及相关属性按字母顺序排列的标签列表4: 指⽰在 HTML 4.01 中定义了该元素5: 指⽰在 HTML 5 中定义了该元素标签描述45定义注释。
45定义⽂档类型。
45定义超链接。
45定义缩写。
45HTML 5 中不⽀持。
定义⾸字母缩写。
4定义地址元素。
45HTML 5 中不⽀持。
定义 applet。
4定义图像映射中的区域。
45定义 article。
5定义页⾯内容之外的内容。
5定义声⾳内容。
5定义粗体⽂本。
45定义页⾯中所有链接的基准 URL。
45HTML 5 中不⽀持。
请使⽤ CSS 代替。
4定义⽂本显⽰的⽅向。
45HTML 5 中不⽀持。
定义⼤号⽂本。
4定义长的引⽤。
45定义 body 元素。
45插⼊换⾏符。
45定义按钮。
45定义图形。
5定义表格标题。
45HTML 5 中不⽀持。
定义居中的⽂本。
4定义引⽤。
45定义计算机代码⽂本。
45定义表格列的属性。
45定义表格列的分组。
45定义命令按钮。
5定义下拉列表。
5定义定义的描述。
45定义删除⽂本。
45定义元素的细节。
5定义定义项⽬。
45HTML 5 中不⽀持。
定义⽬录列表。
4定义⽂档中的⼀个部分。
45定义定义列表。
45定义定义的项⽬。
45定义强调⽂本。
45定义外部交互内容或插件。
5定义 fieldset。
45定义 figure 元素的标题。
5定义媒介内容的分组，以及它们的标题。
5HTML 5 中不⽀持。
4定义 section 或 page 的页脚。
5定义表单。
45HTML 5 中不⽀持。
定义⼦窗⼝（框架）。
4HTML 5 中不⽀持。
定义⼦窗⼝（框架）。
4 HTML 5 中不⽀持。
定义框架的集。
4定义标题 1 到标题 6。
45定义关于⽂档的信息。
45定义 section 或 page 的页眉。
5定义有关⽂档中的 section 的信息。
5定义⽔平线。
45定义 html ⽂档。
45定义斜体⽂本。
45定义⾏内的⼦窗⼝（框架）。
45定义图像。
HTML5⾃定义属性之data-HTML5 增加了⼀项新功能是，也就是data-*⾃定义属性。
在HTML5中我们可以使⽤以data-为前缀来设置我们需要的⾃定义属性，来进⾏⼀些数据的存放。
当然⾼级浏览器下可通过脚本进⾏定义和数据存取。
在项⽬实践中⾮常有⽤。
<input type="button" value="按钮" data-index="10" data-index-color="red" >在开始之前我们先来看下之前我是如何获取⾃定义属性的。
<script>var oBtn=document.querySelector('input');console.log(oBtn.value); //按钮console.log(oBtn.index); //undefinedconsole.log(oBtn.dataIndex); //undefined</script>为什么后⾯2个出现的 undefined 其实也不⾜为奇，因为点后⾯跟的只允许时符合 W3C 规范，不符合的属性全被浏览器⼲掉了。
但就是想获取⾃定义属性还是有办法的，代码如下：<script>var oBtn=document.querySelector('input');console.log(oBtn.getAttribute('value')); //按钮console.log(oBtn.getAttribute('index')); //10console.log(oBtn.getAttribute('data-index')); //10</script>当然更改与删除分别是 ele.setAttribute(name,value) 与 ele.removeAttribute(name) ,此⽅法能在所有的现代浏览器中正常⼯作，但它不是HTML 5 的⾃定义data-*属性被使⽤⽬的，不然和我们以前使⽤的⾃定义属性就没有什么区别了,我在此也就不多说了。
HTML5+CSS3 新增页面标签在HTML5中，新增了9种常用的页面标签，详细介绍如下：1．figure标签figure标签是HTML5中新增的标签之一，表示一段独立的流内容（文本、图像）。
在使用figure标签时，标签的内容应该与主内容相关；但如果被删除时，则不应对文档流产生影响。
示例：4-1 figure.html在上述代码中，向<figure>标签中添加一段文字描述和图片，形成一个独立流单元。
figure元素2．figcaption标签figcaption标签位于figure标签内，用于定义figure标签的标题（caption）。
在默认情况下，figcaption 标签应该被置于figure 标签的第一个或最后一个子标签的位置。
示例：4-2 figcaption.html从上述代码中可以看出，在figure标签中，使用figcaption 标签为figure 标签添加了一个“少林寺”标题。
3．details 标签在HTML5中，details 标签主要用于描述文档或某个部分的细节。
它常与“summary ”标签配合使用，可以为details 标签定义标题。
在浏览器中运行时，该标题是可见的，当用户单击标题时，会显示出details 标签中的内容。
在目前，只有在浏览器Chrome 中才识别details 标签。
下面通过一个在Chrome 浏览器中运行的实例，来说明details 标签的应用。
示例：4-3 details.htmlfigure 元素显示summary标签中的标题。
Summary标题单击details标签中的标题“红旗渠”，details标签中的内容会自动显示。
单击标题4．mark标签mark标签在HTML 5中，主要用于定义带有记号的文本。
如果用户在编辑文本时，需要突出显示某文本，可以使用mark标签。
示例：4-4 mark.html为黄色。
突出文本5．progress标签在HTML5中，progress标签的作用是定义运行中的进度（进程）。
HTML5有效提升iFrame安全性新增Sandbox属性通过HTML 5中iframe的新增元素sandbox，可以防止访问父页面的DOM、执行脚本、对cookie 和本地存储的读写等。
AD：HTML 5将针对iframe元素增加sandbox属性，可以防止不信任的Web页面执行某些操作。
HTML 5规范的编辑Ian Hickson谈到了sandbox的好处，它可以防止如下操作：◆访问父页面的DOM（从技术角度来说，这是因为相对于父页面iframe已经成为不同的源了）◆执行脚本◆通过脚本嵌入自己的表单或是操纵表单◆对cookie、本地存储或本地SQL数据库的读写HTML 5的修订历史页面还提到了sandbox的其他特性：◆禁用插件◆禁止其他浏览上下文的导航◆禁止弹出窗口和模式对话框◆iFrames因安全问题而臭名昭著，这主要是因为iFrames常常被用于嵌入第三方内容，而后者则可能会执行某些恶意操作。
◆sandbox通过限制被嵌入内容所允许的操作而提升iFrames的安全性。
这种方式将沙箱内容与父页面进行了分离，因此限制了被嵌入内容的权限。
与sandbox一起出来的还有其MIME类型：texthtml-sandboxed。
Hickson说到：使用HTML5构建下一代的Web FormHTML5标准最新技术预览HTML5特性增强Adobe发布AIR2.0测试版本HTML5网页3D技术标准发布无需插件即可将HTML5 File API初探支持文件拖放上传功texthtml-sandboxed MIME类型确保用户不会访问到不可信的内容。
它包含两部分内容：首先，如果用户直接访问页面时，浏览器不可以渲染那些具有texthtml-sandboxed MIME类型的页面。
目前所有浏览器都支持这一点，这些浏览器会下载页面的标记但不会渲染页面；其次，支持sandbox属性的浏览器需要渲染具有texthtml-sandboxed MIME类型的iframes（但会受到sandbox 属性中所设定的权限限制）目前为止，还没有浏览器实现这一点，Google Chrome也是如此（它会渲染父页面，但却下载iframe内容而非在iframe中对其进行渲染）。
