溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

html5頁面的示例分析

發(fā)布時間：2021-08-02 11:26:32 來源：億速云 閱讀：174 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)html5頁面的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

內(nèi)容

與之前的HTML4.01相比，HTML5增加了非常多的改變：

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

② 新的元素特性：增加新的元素屬性、表單元素、驗證功能等內(nèi)容。

③ 多媒體：增加<audio>音頻、<video>視頻元素等內(nèi)容。

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

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

⑥ 連通性：增加客戶端與服務(wù)器交互的兩個內(nèi)容：Web Sockets(客戶端與服務(wù)器持久連接)和Server-sent events(服務(wù)器推送數(shù)據(jù))等。

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

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

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

瀏覽器支持情況

各主流瀏覽器對HTML5支持的范圍都不一樣。其中IE是從9版本開始支持HTML5的功能(并不是支持HTML5全部功能)。

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

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

html5頁面的示例分析

創(chuàng)建HTML5頁面

從頁面上介紹HTML5的變動情況。

<!DOCTYPE> 文檔類型聲明

傳統(tǒng)HTML頁面的第一行都必須是一個特定的文檔類型聲明，關(guān)系著瀏覽器以怎樣的格式和布局顯示頁面。

HTML4.01 因基于 SGML(標(biāo)準(zhǔn)通用標(biāo)記語言) ，所以<!DOCTYPE> 引用了 DTD。

HTML5 不基于 SGML，故不需要引用 DTD。

HTML4.01 頁面：

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

HTML5 頁面： 

<!DOCTYPE html>

<html>標(biāo)簽

設(shè)置命名空間

<html>標(biāo)簽中的 xmlns 屬性可定義一個或多個可供選擇的命名空間。瀏覽器會將此命名空間用于該屬性所在頁面內(nèi)的元素。

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

設(shè)置頁面語言

<html>標(biāo)簽中的 lang 屬性可指定頁面的自然語言，如：lang="en" 表示英文，lang="zh-CN"表示中文。示例：

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

<meta>標(biāo)簽 設(shè)置字符編碼

<meta> 可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎的關(guān)鍵詞。

其中 charset 屬性定義了頁面的字符編碼，可在展示時瀏覽器將頁面的文本內(nèi)容轉(zhuǎn)換為指定的編碼格式。

在網(wǎng)頁設(shè)計中首選"UTF-8"：

<head>
    <meta charset="utf-8" />
    <title>頁面標(biāo)題</title>
</head>

引用樣式表

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

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

引用JavaScript文件

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

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

完整頁面示例

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

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

關(guān)于“html5頁面的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手