您當(dāng)前位置：圖趣網(wǎng)（Tuquu） >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

html5簡(jiǎn)單示例_動(dòng)力節(jié)點(diǎn)Java學(xué)院整頓

2017/10/10 15:35:31來(lái)源：互聯(lián)網(wǎng)

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

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

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

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

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

定稿時(shí)間：2014年10月28日

內(nèi)容

與之前的HTML4.01相比，HTML5增長(zhǎng)了特別很是多的改變：

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

② 新的元素特征：增長(zhǎng)新的元素屬性、表單元素、驗(yàn)證功能等內(nèi)容。

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

④ 2D/3D 繪圖：增長(zhǎng)<canvas>繪圖元素。

⑤ 存儲(chǔ)：增長(zhǎng)在線、離線存儲(chǔ)功能。

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

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

⑧ 設(shè)備訪問(wèn)：提供對(duì)攝像頭、移動(dòng)設(shè)備的支持。

⑨ CSS3樣式：提供了新的背景樣式特征、動(dòng)畫(huà)、邊框等樣式。

欣賞器支持情況

各主流欣賞器對(duì)HTML5支持的范圍都不一樣。其中IE是從9版本開(kāi)始支持HTML5的功能(并不是支持HTML5悉數(shù)功能)。

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

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

創(chuàng)建HTML5頁(yè)面

從頁(yè)面上介紹HTML5的變動(dòng)情況。

<!DOCTYPE> 文檔類(lèi)型聲明

傳統(tǒng)HTML頁(yè)面的第一行都必須是一個(gè)特定的文檔類(lèi)型聲明，關(guān)系著欣賞器以怎樣的格式和布局表現(xiàn)頁(yè)面。

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

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

HTML4.01 頁(yè)面：

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

HTML5 頁(yè)面： 

<!DOCTYPE html>

<html>標(biāo)簽

設(shè)置命名空間

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

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

設(shè)置頁(yè)面語(yǔ)言

<html>標(biāo)簽中的 lang 屬性可指定頁(yè)面的天然語(yǔ)言，如：lang="en" 透露表現(xiàn)英文，lang="zh-CN"透露表現(xiàn)中文。示例：

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

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

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

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

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

<head>
    <meta charset="utf-8" />
    <title>頁(yè)面題目</title>
</head>

引用樣式表

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

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

引用javascript文件

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

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

完備頁(yè)面示例

下方是一個(gè)完備的HTML5頁(yè)面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>頁(yè)面題目</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]
關(guān)鍵詞：簡(jiǎn)單 示例 動(dòng)力 節(jié)點(diǎn) 學(xué)院 整理
免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請(qǐng)注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途！
本文地址：http://www.likemindfilms.com/tutorial/wd406.html
html5是什么_動(dòng)力節(jié)點(diǎn)Java學(xué)院整頓
html5簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整頓
圖趣網(wǎng)微信
建議反饋
×