html5入门

600 查看

HTML5的概念

It is a new version of the language HTML, with new elements, attributes, and behaviors.
HTML5是html语言的新的版本,新在于新的元素标签,新的属性,新的行为。

html5有以下几个方面的变革:

  • SEMANTICS 语义化的标签
    header、footer、aside、article等更有语义化的标签代替原有的div.class的形式

  • CONNECTIVITY 链接
    浏览器客户端与后台服务器交互形式的多样化。Web Sockets、Server-sent events代替原来的http轮询的方式,使得交互更加实时。

  • OFFLINE & STORAGE 离线和存储
    IndexedDB、localStorage、SessionStorage、离线应用等新的存储形式

  • MULTIMEDIA 多媒体
    Audio、Video媒体标签代替原来的flash

  • 3D GRAPHICS AND EFFECTS 3D绘图、图形处理
    Canvas、WebGL、SVG...

  • PERFORMANCE AND INTEGRATION 性能和整合
    Web Workers、XHR2....

  • DEVICE ACCESS 移动设备
    touch事件、地图、方向等API的提供

  • STYLING css3新的特性
    新的选取元素的方式、动画、过渡....

我对html5的理解: html5 = html + css3 + js
html5的出现不仅提高浏览器渲染的速度、还挺高程序员开发的效率、降低用户的使用成本。

从标签的角度来学习html5

  1. doctype的变化,更加简洁

    <!doctype html>
  2. 布尔值

    <input type="checkbox" cheched>// 代替以往的checked="checked"
  3. 对语法的要求更加人性化

一些比较好用的全局属性

  1. data 可以随意的向元素上绑定数据

  2. hidden 可以使任何添加该属性的元素隐藏

  3. tabindex

  4. contenteditable可以使元素的内容可编辑
    (如果使用Angular的双向数据绑定则非常方便)

对于script标签更加支持defer、async的属性

当浏览器解析正常的script标签时,浏览器先去下载相应的js文件,再将内容解析。该过程是同步的,会阻塞页面的渲染。defer属性下载完文件后推迟js代码的执行,async属性则是异步执行的,不会阻塞浏览器的渲染。