10个html5增加的重要新特性和内容
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了10个html5增加的重要新特性和内容相关的知识，希望对你有一定的参考价值。
文章开篇之前我们先了解一下什么是html5，百度上是这样定义html5的：万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。
其实说白了html5也就是人为定义的一些规则和新的api的集合。下面我就介绍一些开发常用的html5新特性：
一：canvas标签
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas">your browser does not support the canvas tag </canvas> <script type="text/javascript"> var canvas=document.getElementById(‘myCanvas‘); var ctx=canvas.getContext(‘2d‘); ctx.fillStyle=‘#FF0000‘; ctx.fillRect(0,0,80,100); </script> </body> </html>
渲染结果：
通过这个元素你可以绘制你想要的图案，这是w3school的canvas文档：http://www.w3school.com.cn/tags/html_ref_canvas.asp
二：video标签
<video> 标签可以定义视频，比如电影片段或其他视频流。
<video src="视频地址" controls="controls" autoplay="autoplay" > your browser does not support the video tag //可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。 </video>
video标签具有以下属性：
1.autoplay:如果出现该属性，则视频在就绪之后马上播放
2.controls:如果出现该属性，则向用户显示控件，比如播放按钮
3.height：设置视频播放器高度
4.loop：如果出现该属性，则会重复播放
5.preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用“autoplay”，则忽略该属性。
6.src：视频地址
7.width：设置视频播放器宽度
三：localStorage和sessionStorage
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
1.localStorage: 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
2.sessionStorage: 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
sessionStorage.setItem("name", "三十亿少女的梦");
console.log(sessionStorage.getItem("name")); //三十亿少女的梦
四：语义化标签
在HTML5出来之前，我们用div构建页面，但是这些div都没有实际意义。我们只能通过id等属性认为赋予它一些身份。为了便于开发者观察和seo（搜索引擎优化），html5推出了这些语义化标签。
header：代表“网页”或“section”的页眉。
footer：代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
hgroup：代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合
nav：元素代表页面的导航链接区域。用于定义页面的主要导航部分。
aside：被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。
section：代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。
article：最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）
五：新表单控件
html5中添加了date(日期选择)、time(时间选择)、email(邮箱地址)、url（链接）等表单控件，我个人非常喜欢这些添加。比如email控件，以前我们没有这个控件的时候要判断用户输入的是不是email格式只能通过js正则表达式来判断，但h5之后只用在input的type属性写上email就可以了，但这只是基本的判断不能保证百分百过滤，为了安全，后台还是要进行email格式判断的。
<input type="email" />
六：去掉script和link标签里的type属性
html5之后你的script和link不用再加type属性，一样可以工作正常，但是为了不出差错，最好还是加上。
七：contenteditable属性
你的任何dom节点只要加上contenteditable="true"就可以变得可编辑，也是一个很棒的属性添加,用这个你可以模拟textarea。
八：input添加了placeholder，required,autofocus,pattern等属性
<input type="text" placeholder="请输入姓名" /> <!--当这个输入框为空时框内显示：请输入姓名 --> <input type="text" required /> <!--输入框为必填，否则不能提交表单 --> <input type="text" autofocus /> <!--进入页面，自动聚焦到这个input --> <input type="text" name="country_code" pattern="[A-z]{3}"> <!--输入值必须与正则匹配-->
九：mark标签
使用mark标签可以使你的内容有醒目的标记，从mark这个单词相信你就能猜出这个标签大概用途
十：pageInput创建滑块
HTML5引用的range类型可以创建滑块，它接受min, max, step和value属性，可以使用css的:before和:after来显示min和max的值 ，但是显示的不是很友善。。。
<style> input[type=range]:before { content: attr(min); padding-right: 5px; } input[type=range]:after { content: attr(max); padding-left: 5px;} } </style> <input type=”range” name=”range” min=”0″ max=”10″ step=”1″ />
以上是关于10个html5增加的重要新特性和内容的主要内容，如果未能解决你的问题，请参考以下文章