HTML5 介紹

時間 2019-11-17

標籤 html5 html 介紹欄目 HTML5 简体版

原文原文鏈接

　　本篇主要介紹HTML5規範的內容和頁面上的架構變更。javascript

1. HTML5介紹

1.1 介紹

HTML5，即超文本標記語言(HTML)第五次重大修改。

HTML5包含了新的元素，屬性和行爲，同時包含了一系列能夠被用來讓 Web 站點和應用更加多樣化，功能更強大的技術。

新特性並非一下就有的，而是在HTML4.01版本制定(1999年)後，這段時間內不斷變動，在最後才定稿。

HTML5的標準不破壞以前的網頁，符合HTML4.01標準的網頁在HTML5仍然有效。

標準網址：https://www.w3.org/TR/html5/

定稿時間：2014年10月28日

1.2 內容

與以前的HTML4.01相比，HTML5增長了很是多的改變：

① 新的語義元素：<article>、<aside>、<figure>、<figcaption>、<footer>、<header>、<hgroup>、<nav>和<section>等等

② 新的元素特性：增長新的元素屬性、表單元素、驗證功能等內容。

③ 多媒體：增長<audio>音頻、<video>視頻元素等內容。

④ 2D/3D 繪圖：增長<canvas>繪圖元素。

⑤ 存儲：增長在線、離線存儲功能。

⑥ 連通性：增長客戶端與服務器交互的兩個內容：Web Sockets(客戶端與服務器持久鏈接)和Server-sent events(服務器推送數據)等。

⑦ 集成：提供Web Workers、History API、requestAnimationFrame、地理位置等強大的功能。

⑧ 設備訪問：提供對攝像頭、移動設備的支持。

⑨ CSS3樣式：提供了新的背景樣式特性、動畫、邊框等樣式。

1.3 瀏覽器支持狀況

各主流瀏覽器對HTML5支持的範圍都不同。其中IE是從9版本開始支持HTML5的功能(並非支持HTML5所有功能)。

若想知道HTML5某個功能被各瀏覽器支持的狀況可登陸 http://caniuse.com/ 進行查詢。

以 <audio> 元素爲例，可查看各瀏覽器的支持狀況：

2. 建立HTML5頁面

從頁面上介紹HTML5的變更狀況。

2.1 <!DOCTYPE> 文檔類型聲明

傳統HTML頁面的第一行都必須是一個特定的文檔類型聲明，關係着瀏覽器以怎樣的格式和佈局顯示頁面。

HTML4.01 因基於 SGML(標準通用標記語言) ，因此<!DOCTYPE> 引用了 DTD。

HTML5 不基於 SGML，故不須要引用 DTD。

HTML4.01 頁面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5 頁面：

<!DOCTYPE html>

2.2 <html>標籤

2.2.1 設置命名空間

<html>標籤中的 xmlns 屬性可定義一個或多個可供選擇的命名空間。瀏覽器會將此命名空間用於該屬性所在頁面內的元素。

若省略了此屬性，默認會以"http://www.w3.org/1999/xhtml"代替。

2.2.2 設置頁面語言

<html>標籤中的 lang 屬性可指定頁面的天然語言，如：lang="en" 表示英文，lang="zh-CN"表示中文。

示例：

<html leng="zh-CN">
</html>

2.3 <meta>標籤設置字符編碼

其中 charset 屬性定義了頁面的字符編碼，可在展現時瀏覽器將頁面的文本內容轉換爲指定的編碼格式。

在網頁設計中首選"UTF-8"：

<head>
    <meta charset="utf-8" />
    <title>頁面標題</title>
</head>

2.4 引用樣式表

與以前HTML4.01相比，HTML5在引用樣式表時省略了 type="text/css" 屬性：

<head>
    <meta charset="utf-8" />
    <title>頁面標題</title>
    <link rel="stylesheet" href="/Styles/Site.css" >
</head>

2.5 引用JavaScript文件

在HTML5，引用JavaScript文件時省略了 type="text/javascript" 屬性：

<head>
    <meta charset="utf-8" />
    <title>頁面標題</title>
    <script src="/Scripts/jquery-1.7.2.js"></script>
</head>

3. 完整頁面示例

下方是一個完整的HTML5頁面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>頁面標題</title>
    <link rel="stylesheet" href="/Styles/Site.css">
    <script src="/Scripts/jquery-1.7.2.js" ></script>
</head>
<body>
    <p>body區域</p>
</body>
</html>