您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 移動前端 >> 瀏覽設(shè)計教程

html5簡單示例_動力節(jié)點Java學(xué)院整頓

HTML5,即超文本標(biāo)記語言(HTML)第五次龐大修改。

HTML5包含了新的元素,屬性和舉動,同時包含了一系列可以被用來讓 Web 站點和應(yīng)用更加多樣化,功能更壯大的技術(shù)。

新特征并不是一下就有的,而是在HTML4.01版本制訂(1999年)后,這段時間內(nèi)賡續(xù)變更,在最后才定稿。

HTML5的標(biāo)準(zhǔn)不破壞之前的網(wǎng)頁,吻合HTML4.01標(biāo)準(zhǔn)的網(wǎng)頁在HTML5仍然有用。

標(biāo)準(zhǔn)網(wǎng)址:https://www.w3.org/TR/html5/

定稿時間:2014年10月28日

內(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悉數(shù)功能)。

若想知道HTML5某個功能被各欣賞器支持的情況可登錄 http://caniuse.com/ 進(jìn)行查詢。

以 <audio> 元素為例,可查看各欣賞器的支持情況:

創(chuàng)建HTML5頁面

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

<!DOCTYPE> 文檔類型聲明

傳統(tǒng)HTML頁面的第一行都必須是一個特定的文檔類型聲明,關(guān)系著欣賞器以怎樣的格式和布局表現(xià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" 透露表現(xiàn)英文,lang="zh-CN"透露表現(xiàn)中文。示例:

<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>頁面題目</title>
</head>

引用樣式表

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

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

引用javascript文件

在HTML5,引用javascript文件時省略了 type="text/javascript" 屬性:

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

完備頁面示例

下方是一個完備的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區(qū)域</p>
</body>
</html>

 

[教程作者:polk6]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd406.html
html5是什么_動力節(jié)點Java學(xué)院整頓
html5簡介_動力節(jié)點Java學(xué)院整頓
圖趣網(wǎng)微信
建議反饋
×