亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

HTML5 代碼規(guī)范

使用正確的文檔類型

文檔類型聲明位于HTML文檔的第一行:

<!DOCTYPE?html>

如果你想跟其他標(biāo)簽一樣使用小寫(xiě),可以使用以下代碼:

<!doctype?html>


使用小寫(xiě)元素名

HTML5 元素名可以使用大寫(xiě)和小寫(xiě)字母。

推薦使用小寫(xiě)字母:

混合了大小寫(xiě)的風(fēng)格是非常糟糕的。

開(kāi)發(fā)人員通常使用小寫(xiě) (類似 XHTML)。

小寫(xiě)風(fēng)格看起來(lái)更加清爽。

小寫(xiě)字母容易編寫(xiě)。

<section>?
??<p>這是一個(gè)段落。</p>
</section>


關(guān)閉所有 HTML 元素

在 HTML5 中, 你不一定要關(guān)閉所有元素 (例如 <p> 元素),但我們建議每個(gè)元素都要添加關(guān)閉標(biāo)簽。

<section>
??<p>這是一個(gè)段落。</p>
??<p>這是一個(gè)段落。</p>
</section>


關(guān)閉空的 HTML 元素

在 HTML5 中, 空的 HTML 元素也不一定要關(guān)閉:

我們可以這么寫(xiě):

<meta?charset="utf-8">

也可以這么寫(xiě):

<meta?charset="utf-8"?/>

在 XHTML 和 XML 中斜線 (/) 是必須的。

如果你期望 XML 軟件使用你的頁(yè)面,使用這種風(fēng)格是非常好的。


使用小寫(xiě)屬性名

HTML5 屬性名允許使用大寫(xiě)和小寫(xiě)字母。

我們推薦使用小寫(xiě)字母屬性名:

同時(shí)使用大小寫(xiě)是非常不好的習(xí)慣。

開(kāi)發(fā)人員通常使用小寫(xiě) (類似 XHTML)。

小寫(xiě)風(fēng)格看起來(lái)更加清爽。

小寫(xiě)字母容易編寫(xiě)。

<div?class="menu">


屬性值

HTML5 屬性值可以不用引號(hào)。

屬性值我們推薦使用引號(hào):

如果屬性值含有空格需要使用引號(hào)。

混合風(fēng)格不推薦的,建議統(tǒng)一風(fēng)格。

屬性值使用引號(hào)易于閱讀。

<table?class="table striped">


圖片屬性

圖片通常使用?alt?屬性。 在圖片不能顯示時(shí),它能替代圖片顯示。

<img?src="html5.gif"?alt="HTML5"?style="width:128px;height:128px">

定義好圖片的尺寸,在加載時(shí)可以預(yù)留指定空間,減少閃爍。

<img?src="html5.gif"?alt="HTML5"?style="width:128px;height:128px">


空格和等號(hào)

等號(hào)前后可以使用空格。

<link?rel =?"stylesheet"?href =?"styles.css">

但我們推薦少用空格:

<link?rel="stylesheet"?href="styles.css">


避免一行代碼過(guò)長(zhǎng)

使用 HTML 編輯器,左右滾動(dòng)代碼是不方便的。

每行代碼盡量少于 80 個(gè)字符。


空行和縮進(jìn)

不要無(wú)緣無(wú)故添加空行。

為每個(gè)邏輯功能塊添加空行,這樣更易于閱讀。

縮進(jìn)使用兩個(gè)空格,不建議使用 TAB。

比較短的代碼間不要使用不必要的空行很縮進(jìn)。

<body>

<h1>php中文網(wǎng)</h1>
<h2></h2>
<p>php中文網(wǎng),學(xué)的不僅是技術(shù),更是夢(mèng)想。
php中文網(wǎng),學(xué)的不僅是技術(shù),更是夢(mèng)想。
php中文網(wǎng),學(xué)的不僅是技術(shù),更是夢(mèng)想。
php中文網(wǎng),學(xué)的不僅是技術(shù),更是夢(mèng)想。</p>
</body>

表格實(shí)例:

<table>
??<tr>
????<th>Name</th>
????<th>Description</th>
??</tr>
??<tr>
????<td>A</td>
????<td>Description of A</td>
??</tr>
??<tr>
????<td>B</td>
????<td>Description of B</td>
??</tr>
</table>

列表實(shí)例:

<ol>
??<li>London</li>
??<li>Paris</li>
??<li>Tokyo</li>
</ol>


省略 <html> 和 <body>?

在標(biāo)準(zhǔn) HTML5 中, <html> 和 <body> 標(biāo)簽是可以省略的。

以下 HTML5 文檔是正確的:

<!DOCTYPE?html>

<head>

?<title>頁(yè)面標(biāo)題</title>
</head>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>

不推薦省略 <html> 和 <body> 標(biāo)簽。



省略 <head>?

在標(biāo)準(zhǔn) HTML5 中, <head>標(biāo)簽是可以省略的。

默認(rèn)情況下,瀏覽器會(huì)將 <body> 之前的內(nèi)容添加到一個(gè)默認(rèn)的 <head> 元素上。

省略 head 標(biāo)簽還不推薦使用。



元數(shù)據(jù)

HTML5 中 <title> 元素是必須的,標(biāo)題名描述了頁(yè)面的主題:

<title>php中文網(wǎng)</title>

標(biāo)題和語(yǔ)言可以讓搜索引擎很快了解你頁(yè)面的主題:

<!DOCTYPE?html>
<html?lang="zh">
<head>
??<meta?charset="UTF-8">
??<title>php中文網(wǎng)</title>
</head>


HTML 注釋

注釋可以寫(xiě)在 <!-- 和 --> 中:

<!-- 這是注釋 -->

比較長(zhǎng)的評(píng)論可以在 <!-- 和 --> 中分行寫(xiě):

<!--?
? 這是一個(gè)較長(zhǎng)評(píng)論。 這是 一個(gè)較長(zhǎng)評(píng)論。這是一個(gè)較長(zhǎng)評(píng)論。
? 這是 一個(gè)較長(zhǎng)評(píng)論 這是一個(gè)較長(zhǎng)評(píng)論。 這是 一個(gè)較長(zhǎng)評(píng)論。
-->

長(zhǎng)評(píng)論第一個(gè)字符縮進(jìn)兩個(gè)空格,更易于閱讀。


樣式表

樣式表使用簡(jiǎn)潔的語(yǔ)法格式 ( type 屬性不是必須的):

<link?rel="stylesheet"?href="styles.css">

短的規(guī)則可以寫(xiě)成一行:

p.into?{font-family:?Verdana;?font-size:?16em;}

長(zhǎng)的規(guī)則可以寫(xiě)成多行:

body?{
??background-color:?lightgrey;
??font-family:?"Arial Black", Helvetica, sans-serif;
??font-size:?16em;
??color:?black;
}

將左花括號(hào)與選擇器放在同一行。

左花括號(hào)與選擇器間添加以空格。

使用兩個(gè)空格來(lái)縮進(jìn)。

冒號(hào)與屬性值之間添加已空格。

逗號(hào)和符號(hào)之后使用一個(gè)空格。

每個(gè)屬性與值結(jié)尾都要使用符號(hào)。

只有屬性值包含空格時(shí)才使用引號(hào)。

右花括號(hào)放在新的一行。

每行最多 80 個(gè)字符。



在逗號(hào)和分號(hào)后添加空格是常用的一個(gè)規(guī)則。 ? ?



在 HTML 中載入 JavaScript

使用簡(jiǎn)潔的語(yǔ)法來(lái)載入外部的腳本文件 ( type 屬性不是必須的 ):

<script?src="myscript.js">


使用 JavaScript 訪問(wèn) HTML 元素

一個(gè)糟糕的 HTML 格式可能會(huì)導(dǎo)致 JavaScript 執(zhí)行錯(cuò)誤。

以下兩個(gè) JavaScript 語(yǔ)句會(huì)輸出不同結(jié)果:

實(shí)例

var?obj = getElementById("Demo")

var?obj = getElementById("demo")


嘗試一下 ?

HTML 中 JavaScript 盡量使用相同的命名規(guī)則。


使用小寫(xiě)文件名

大多 Web 服務(wù)器 (Apache, Unix) 對(duì)大小寫(xiě)敏感: london.jpg 不能通過(guò) London.jpg 訪問(wèn)。

其他 Web 服務(wù)器 (Microsoft, IIS) 對(duì)大小寫(xiě)不敏感: london.jpg 可以通過(guò) London.jpg 或 london.jpg 訪問(wèn)。

你必須保持統(tǒng)一的風(fēng)格,我們建議統(tǒng)一使用小寫(xiě)的文件名。



文件擴(kuò)展名

HTML 文件后綴可以是?.html?(或r?.htm)。

CSS 文件后綴是?.css?。

JavaScript 文件后綴是?.js?。


.htm 和 .html 的區(qū)別

.htm 和 .html 的擴(kuò)展名文件本質(zhì)上是沒(méi)有區(qū)別的。瀏覽器和 Web 服務(wù)器都會(huì)把它們當(dāng)作 HTML 文件來(lái)處理。

區(qū)別在于:

.htm 應(yīng)用在早期 DOS 系統(tǒng),系統(tǒng)現(xiàn)在或者只能有三個(gè)字符。

在 Unix 系統(tǒng)中后綴沒(méi)有特別限制,一般用 .html。

技術(shù)上區(qū)別

如果一個(gè) URL 沒(méi)有指定文件名 (如 http://ipnx.cn/css/), 服務(wù)器會(huì)返回默認(rèn)的文件名。通常默認(rèn)文件名為 index.html, index.htm, default.html, 和 default.htm。

如果服務(wù)器只配置了 "index.html" 作為默認(rèn)文件,你必須將文件命名為 "index.html", 而不是 "index.htm"。

但是,通常服務(wù)器可以設(shè)置多個(gè)默認(rèn)文件,你可以根據(jù)需要設(shè)置默認(rèn)文件嗎。

不管怎樣,HTML 完整的后綴是 ".html"。



繼續(xù)學(xué)習(xí)
||
<!DOCTYPE html> <!-- HTML5 doctype 標(biāo)準(zhǔn)模式(standard mode)的聲明,這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)--> <html lang="zh-CN"> <!-- 語(yǔ)言屬性 有助于語(yǔ)音合成工具確定其所應(yīng)該采用的發(fā)音,有助于翻譯工具確定其翻譯時(shí)所應(yīng)遵守的規(guī)則等等 --> <head> <!-- 字符編碼 通過(guò)明確聲明字符編碼,能夠確保瀏覽器快速并容易的判斷頁(yè)面內(nèi)容的渲染方式 --> <meta charset="UTF-8"> <!-- IE 支持通過(guò)特定的 <meta> 標(biāo)簽來(lái)確定繪制當(dāng)前頁(yè)面所應(yīng)該采用的 IE 版本。 除非有強(qiáng)烈的特殊需求,否則最好是設(shè)置為 edge mode,從而通知 IE 采用其所支持的最新的模式 --> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>Page title</title> <!-- External CSS 根據(jù) HTML5 規(guī)范,在引入 CSS 文件時(shí)一般不需要指定 type 屬性,因?yàn)?text/css 是它的默認(rèn)值 --> <link rel="stylesheet" href="code-guide.css"> <!-- In-document CSS --> <style> /* ... */ </style> <!-- JavaScript 根據(jù) HTML5 規(guī)范,在引入 JavaScript 文件時(shí)一般不需要指定 type 屬性,因?yàn)?text/javascript 是它的默認(rèn)值 --> <script src="code-guide.js"></script> </head> <body> <!-- 屬性順序 HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列,確保代碼的易讀性。 class id, name data-* src, for, type, href title, alt aria-*, role class 用于標(biāo)識(shí)高度可復(fù)用組件,因此應(yīng)該排在首位。id 用于標(biāo)識(shí)具體組件,應(yīng)當(dāng)謹(jǐn)慎使用(例如,頁(yè)面內(nèi)的書(shū)簽),因此排在第二位 --> <a class="..." id="..." data-modal="toggle" href="#"> Example link </a> <br><br> <input class="form-control" type="text"> <br><br> <img src="..." alt="..."> <br><br> <!-- 布爾(boolean)型屬性 不用賦值 元素的布爾型屬性如果有值,就是 true,如果沒(méi)有值,就是 false --> <select> <option value="1" selected>1</option> </select> <br><br> <!-- JavaScript 放在 body 底部加載可增快頁(yè)面渲染速度 --> <script src="code-guide.js"></script> </body> </html>
提交重置代碼