HTML5常用特性总结

HTML5：万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

现在总结了27个常用特性。

##### 1、新的 DOCTYPE
尽管使用 `<!DOCTYPE html>`，即使浏览器不懂这句话也会按照标准模式去渲染。

##### 2、figure 元素
用 `<figure>` 和 `<figcaption>` 来语义化地表示带标题的图片
```html
<figure>
    <img src=”path/to/image” alt=”About image” />
    <figcaption>
        <p>This is an image of something interesting. </p>
    </figcaption>
</figure>
```

##### 3、重新定义的 small
`<small>` 已经被重新定义了，现在被用来表示小的排版，如网站底部的版权声明。

##### 4、去掉 link 和 script 标签里面的 type 属性

##### 5、可以不加引号或者闭合标签
HTML5 没有严格的要求属性必须加引号，闭合不闭合，但是建议加上引号和闭合标签

##### 6、让你的内容可编辑，只需要加一个 contenteditable 属性

##### 7、Email Inputs
如果我们给 `input` 的 `type` 设置为 `email`，浏览器就会验证这个输入是否是 email 类型，当然不能只依赖前端的校验，后端也得有相应的校验。

##### 8、Placeholders
这个 `input` 属性的意义就是不必通过 JavaScript 来做 `placeholder` 的效果了。

##### 9、Local Storage
使用 Local Storage 可以永久存储大的数据片段在客户端（除非主动删除），目前大部分浏览器已经支持，在使用之前可以检测一下window.localStorage是否存在。

##### 10、语义化的 header 和 footer

##### 11、更多的 HTML5 表单特性

##### 12、IE 和 HTML5
默认的，HTML5 新元素被以 `inline` 的方式渲染，不过可以通过下面这种方式让其以 `block` 方式渲染：
```css
header, footer, article, section, nav, menu, hgroup { 
    display: block;
}
```
不幸的是IE会忽略这些样式，可以像下面这样fix:
```javascript
document.createElement(”article”);
document.createElement(”footer”);
document.createElement(”header”);
document.createElement(”hgroup”);
document.createElement(”nav”);
document.createElement(”menu”);
```
##### 13、hgroup
一般在 `header` 里面用来将一组标题组合在一起，如：
```html
<header>
    <hgroup>
        <h1> Recall Fan Page </h1>
        <h2> Only for people who want the memory of a lifetime. </h2>
    </hgroup>
</header>
```

##### 14、Required 属性
`required` 属性定义了一个 `input` 是否是必须的，你可以像下面这样声明：
```html
<input type=”text” name=”someInput” required>
```
或者：
```html
<input type=”text” name=”someInput” required=”required”>
```

##### 15、Autofocus
正如它的词义，就是聚焦到输入框里面：
```html
<input type=”text” name=”someInput” placeholder=”Douglas Quaid”  required autofocus>
```

##### 16、Audio 支持
HTML5 提供了 `<audio>` 标签，你不需要再按照第三方插件来渲染音频，大多数现代浏览器提供了对于 HTML5 Audio 的支持，不过目前仍旧需要提供一些兼容处理，如：
```html
<audio autoplay="autoplay" controls="controls">
    <source src="file.ogg" />
    <source src="file.mp3" />
    <a href="file.mp3">Download this file.</a>
</audio>
```

##### 17、Video 支持
和Audio很像，`<video>` 标签提供了对于video的支持，由于 HTML5 文档并没有给 `video` 指定一个特定的编码，所以浏览器去决定要支持哪些编码，导致了很多不一致。Safari 和 IE 支持 H.264 编码的格式，Firefox 和 Opera 支持 Theora 和 Vorbis 编码的格式，当使用 HTML5 video 的时候，你必须都提供：
```html
<video controls preload> 
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs=´vorbis, theora´" />
    <source src="cohagenPhoneCall.mp4" type="video/mp4; ´codecs=´avc1.42E01E, mp4a.40.2´" />
    <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>
```

##### 18、预加载视频
`preload` 属性就像它的字面意思那么简单，你需要决定是否需要在页面加载的时候去预加载视频：
```html
<video preload>
```

##### 19、显示视频控制
```html
<video preload controls>
```

##### 20、正则表达式
由于 `pattern` 属性，我们可以在你的 `markup` 里面直接使用正则表达式了：
```html
<form action="" method="post">
    <label for="username">Create a Username: </label>
    <input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required>
    <button type="submit">Go </button>
</form>
```

##### 21、检测属性支持
除了 Modernizr 之外我们还可以通过 JavaScript 简单地检测一些属性是否支持，如：
```html
<script>
    if (!´pattern´ in document.createElement(´input´) ) {
        // do client/server side validation
    }
</script>
```

##### 22、Mark 元素
把 `<mark>` 元素看做是高亮的作用，当我选择一段文字的时候，JavaScript 对于 HTML 的 `markup` 效果应该是这样的：
```html
<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </p>
```

##### 23、什么时候用 div
HTML5 已经引入了这么多元素，那么 `div` 我们还要用吗？`div` 你可以在没有更好的元素的时候去用。

##### 24、哪些不是 HTML5
> 1、SVG
> 2、CSS3
> 3、Geolocation
> 4、Client Storage
> 5、Web Sockets

##### 25、Data 属性
```html
<div id=”myDiv” data-custom-attr=”My Value”> Bla Bla </div>
```
CSS中使用：
```html
<style>
    h1:hover:after {
        content: attr(data-hover-response);
        color: black;
        position: absolute;
        left: 0; 
    }
</style>
<h1 data-hover-response=”I Said Don’t Touch Me!”> Don’t Touch Me </h1>
```

##### 26、Output 元素
`<output>` 元素用来显示计算结果，也有一个和 `label` 一样的 `for` 属性

##### 27、用 Range Input 来创建滑块
HTML5 引用的 range 类型可以创建滑块，它接受 `min`，`max`，`step` 和 `value` 属性。
可以使用 css 的 `:before` 和 `:after` 来显示 `min` 和 `max` 的值：
```html
<input type="range" name="range" min="0" max="10" step="1" value="">
input[type=range]:before { content: attr(min); padding-right: 5px;}
input[type=range]:after { content: attr(max); padding-left: 5px;}
```

HTML5常用特性总结

相关文章

热门标签

热门文章