html5新特性

html5新特性

1. 语义化标签：首先让页面有良好的结构；其次标签具有语义，被搜索引擎解析，利于 SEO。
2. 增强型表单：
   新的表单中添加了很多input输入型控件，比如：number、url、email、range、color、date等，通过input的type属性使用,这些新特性提供了更好的输入控制和验证。
   还添加了placeholder、required、pattern、min、max、(height、width 只针对type=“image”)等表单属性
3. dom扩展：使用getElementByClassName()

//取得类中包含"username"和"current"的元素
var allCurrentUsernames = document.getElementByClassName("username current")

//取得id为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected")
1
2
3
4
5

4. 原生拖拽：默认情况下，图像、链接和文本是可以拖动的，HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动。
5. 媒体元素：

<video width="520" height="340" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>
1
2
3
4
5

7. web storage存储
8. Web Sockets的目标是在一个单独的持久连接上提供全双工、双向通信。使用标准的HTTP服务器无法实现Web Sockets，只有支持这种协议的专门服务器才能正常工作。
9. 地理定位(geolocation)，使用navigator.geolocation对象的getCurrentPosition()获取当前地理位置。
10. canvas绘图使用js来绘制2d图形
11. svg绘图，使用xml来描述2d图形。
12. web worker