HTML5的入門與深入理解

bbg1 2019-02-24

展開全文

HTML5是對HTML的第5次重大的修改，雖然HTML5 標準還在制定中，但不能阻礙其勢不可擋的腳步，不用HTML5你就OUT了。HTML5與我們常用的HTML4有什么區(qū)別呢？

首先要說的是不是所有的瀏覽器都支持HTML5,Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。

下面是在把我個人將網(wǎng)頁換成html5標準時所做的改變：
1、換一個W3C標準聲明<!doctype html>，少了不少代碼，頁面干凈，爽
2、對于HTML5的標簽，IE9之前的版本無法提供支持,為了兼容老版本的瀏覽器，必須做些額外的工作，十分不爽，要在<head>里引入一個html5.js幫助舊版本的IE瀏覽器創(chuàng)建HTML5元素節(jié)點,麻煩。

<!--[if lt IE 9]>  
<script src="js/html5.js"></script>  
<![endif]-->

為了正確顯示，CSS中增加如下設置：

header, section, footer, aside, nav, main, article, figure {

display: block;

}

3、使用一些更語義化的標簽，如<header><footer><section><article><menu><figure> 用法：<div class="header"></div>,改為<header></header>，少定義不少 class，HTML干凈，有利于SEO,爽。
4、刪除了我常用的<b> 和 <font>，好吧，刪就刪，無感。刪除 <frame>, <center>, <big> 標簽，多年沒用過了，無感。
難道只是這些標簽的小改動，就能讓HTML5的概念風卷殘云嗎？我想肯定不是，那么，HTML5的精髓在哪呢？
這個問題我回答不了，查一下資料總結(jié)一下：

一、代碼更清晰，語義更明確，這幾乎是很多人使用它的全部
二、HTML5是最移動化的開發(fā)工具。現(xiàn)在越來越多的用戶選擇使用移動設備訪問網(wǎng)站或者web應用。
三、游戲開發(fā)
可以使用HTML5的<canvas>開發(fā)游戲。HTML5提供了一個非常偉大的，移動友好的方式去開發(fā)有趣互動的游戲。如果你開發(fā)Flash游戲，你就會喜歡上HTML5的游戲開發(fā)。canvas只是一個畫布，HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。
四、本地存儲

HTML5中最酷的特性就是本地存儲。有一點像比較老的技術(shù)cookie和客戶端數(shù)據(jù)庫的融合。它比cooke更好用因為支持多個windows存儲，它擁有更好的安全和性能，即使瀏覽器關(guān)閉后也可以保存。

因為它是個客戶端的數(shù)據(jù)庫，你不用擔心用戶刪除任何cookie，并且所有主流瀏覽器都支持。

本地存儲對于很多情況來說都不錯， HTML5工具中一個不需要第三方插件實現(xiàn)的。能夠保存數(shù)據(jù)到用戶的瀏覽器中意味你可以簡單的創(chuàng)建一些應用特性例如：保存用戶信息，緩存數(shù)據(jù)，加載用戶上一次的應用狀態(tài)。
五、視頻和音頻支持
視頻和音頻通過HTML5標簽<video>和<audio>來訪問資源，不再需要Flash和第三方插件。正確播放媒體一直都是一個非?？膳碌?事情，你需要使用<embed>和<object>標簽，并且為了它們能正確播放必須賦予一大堆的參數(shù)。你的媒體標簽將會非常復雜，大堆得令人迷惑的代碼。而且HTML5視頻和音頻標簽基本將他們視為圖片：<video src=”"/>。但是其它參數(shù)例如寬度和高度或者自動播放呢？不必擔心，只需要像其它HTML標簽一樣定義：<video src=”url” width=”640px” height=”380px” autoplay/>。

實際上這個過程非常簡單，然而我們的老瀏覽器可能并不喜歡我們的HTML5，你需要添加更多代碼來讓他們正確工作。但是這個代碼還是比<embed>和<object>來的簡單的多。