HTML5新特性

发表于   |  
  • 新的特殊内容元素
  • 新的表单控件
  • 音频、视频API
  • 画布(Canvas) API
  • 地理(Geolocation) API
  • 拖拽释放(Drag and drop) API
  • 网页存储(Web storage) API

新的特殊内容元素

在HTML4中的内容标签级别相同，只能用class类名来区分各个模块的语义。而HTML5中的比如 article、footer、header、nav、section等内容标签级别不同，可便于搜索引擎快速识别。

这张图就让我很快明白了这个意思。

新的表单控件

HTML5 拥有多个新的表单输入类型。主要是控制input表单的type类型里的值。

  • Input 类型-email

    当用户在表单里输入邮箱时，会自动提醒邮箱的格式是否正确，而不需要像以前那样用js或者php来进行表单验证。但这样的话，样式我目前还不到能否进行控制。

    <!DOCTYPE HTML>
<html>
<body>
<form>E-mail: <input type="email" /><br />
<input type="submit" />
</form>
</body>
</html>

    E-mail:

  • Input 类型 - url

    url是判断输入地址是否为网址。

    <!DOCTYPE HTML>
<html>
<body>
<form>
url: <input type="url" /><br />
<input type="submit" />
</form>
</body>
</html>

    url:

  • Input 类型 - number

    <!DOCTYPE HTML>
<html>
<body>
<form>
number: <input type="number"  min="-1" max="10" step="3" value="2" /><br />
<input type="submit" />
</form>
</body>
</html>

    number:

  • Input 类型 - range

    这是个我认为很神奇的东西，很简单的就实现了如音量控制，进度条的数据传输。

    <!DOCTYPE HTML>
<html>
<body>
<form>
points: <input type="range"  min="1" max="10" /><br />
<input type="submit" />
</form>
</body>
</html>

    points:

  • Input 类型 - Date Pickers（日期选择器）

    <!DOCTYPE HTML>
<html>
<body>
<form>
date: <input type="date" /><br />
time: <input type="time" /><br />
datetime-local: <input type="datetime-local" /><br />
week: <input type="week" /><br />
<input type="submit" />
</form>
</body>
</html>

    date: 
    time: 
    datetime-local: 
    week:

  • Input 类型 - search

    search 类型用于搜索域，比如站点搜索或 Google 搜索

    <!DOCTYPE HTML>
<html>
<body>
<form>
Search<input type="search" placeholder="测试搜索" autosave="aoao.org.cn" result="8">
<input type="submit" name="Search" value="Search"/>
</form>
</body>
</html>

<pre><!DOCTYPE HTML><html><body><form>Search<input type="search" placeholder="测试搜索"autosave="aoao.org.cn" result="8"><input type="submit" name="Search" value="Search"/></form></body></html></pre>

音频、视频API

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法

一般要插入一段视频，可以这样做

<!DOCTYPE HTML>
<html>
<body>
<video src="/i/movie.ogg"  width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

<audio src="/i/song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
</body>
</html>

control 属性供添加播放、暂停和音量控件，video 与 video之间插入的内容是供不支持 video 元素的浏览器显示的。audio也是一样的。其中更多的是对video和audio属性的记忆，自己以前也在更改视频播放那些控件的样式花了不少功夫。

画布(Canvas) API

canvas

canvas 元素用于在网页上绘制图形。

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

SVG

在浏览器中创建图形还可以用SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

拖拽释放(Drag and drop) API

在 HTML5 中，任何元素都能够拖放

要设置一个元素能够被拖放，需要进行五个步骤

  1. 设置元素为可拖放

    img的draggable属性设置为true

    <img draggable="true" />

  2. 设置拖动的对象 - ondragstart 和 setData()

    拖动元素数据类型是 Text，值是可拖动元素的 id。

    function drag(ev){
ev.dataTransfer.setData("Text",ev.id);
}

  3. 放到何处 - ondragover

    event.preventDefault()

  4. 进行放置 - ondrop

    function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

设置一个元素可拖动还是有点复杂，不过大致的过程很简单，详细的教程可以参照：http://blog.csdn.net/lmj623565791/article/details/31413767