Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
法
用兩個(gè)空格來代替制表符(tab) -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。
嵌套元素應(yīng)當(dāng)縮進(jìn)一次(即兩個(gè)空格)。
對于屬性的定義,確保全部使用雙引號(hào),絕不要使用單引號(hào)。
不要在自閉合(self-closing)元素的尾部添加斜線 -- HTML5 規(guī)范中明確說明這是可選的。
不要省略可選的結(jié)束標(biāo)簽(closing tag)(例如,</li>
或 </body>
)。
實(shí)例:
<!DOCTYPE html><html>
HTML5 doctype
為每個(gè) HTML 頁面的第一行添加標(biāo)準(zhǔn)模式(standard mode)的聲明,這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。
實(shí)例:
<!DOCTYPE html><html>
語言屬性
根據(jù) HTML5 規(guī)范:
強(qiáng)烈建議為 html 根元素指定 lang 屬性,從而為文檔設(shè)置正確的語言。這將有助于語音合成工具確定其所應(yīng)該采用的發(fā)音,有助于翻譯工具確定其翻譯時(shí)所應(yīng)遵守的規(guī)則等等。
lang
屬性的知識(shí)可以從 此規(guī)范 中了解。
這里列出了語言代碼表。
<html lang="zh-CN">
IE 兼容模式
IE 支持通過特定的 <meta>
標(biāo)簽來確定繪制當(dāng)前頁面所應(yīng)該采用的 IE 版本。除非有強(qiáng)烈的特殊需求,否則最好是設(shè)置為 edge mode,從而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
字符編碼
通過明確聲明字符編碼,能夠確保瀏覽器快速并容易的判斷頁面內(nèi)容的渲染方式。這樣做的好處是,可以避免在 HTML 中使用字符實(shí)體標(biāo)記(character entity),從而全部與文檔編碼一致(一般采用 UTF-8 編碼)。
<head>
引入 CSS 和 JavaScript 文件
根據(jù) HTML5 規(guī)范,在引入 CSS 和 JavaScript 文件時(shí)一般不需要指定 type
屬性,因?yàn)?text/css
和 text/javascript
分別是它們的默認(rèn)值。
HTML5 spec links
Using link
Using style
Using script
<!-- External CSS --><link rel="stylesheet" href="code-guide.css"><!-- In-document CSS --><style>
實(shí)用為王
盡量遵循 HTML 標(biāo)準(zhǔn)和語義,但是不要以犧牲實(shí)用性為代價(jià)。任何時(shí)候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度。
屬性順序
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)慎使用(例如,頁面內(nèi)的書簽),因此排在第二位。
<a class="..." id="..." data-modal="toggle" href="#">
布爾(boolean)型屬性
布爾型屬性可以在聲明時(shí)不賦值。XHTML 規(guī)范要求為其賦值,但是 HTML5 規(guī)范不需要。
更多信息請參考 WhatWG section on boolean attributes:
元素的布爾型屬性如果有值,就是 true,如果沒有值,就是 false。
如果一定要為其賦值的話,請參考 WhatWG 規(guī)范:
如果屬性存在,其值必須是空字符串或 [...] 屬性的規(guī)范名稱,并且不要在首尾添加空白符。
簡單來說,就是不用賦值。
<input type="text" disabled><input type="checkbox" value="1" checked><select>
減少標(biāo)簽的數(shù)量
編寫 HTML 代碼時(shí),盡量避免多余的父元素。很多時(shí)候,這需要迭代和重構(gòu)來實(shí)現(xiàn)。請看下面的案例:
<!-- Not so great --><span class="avatar">
JavaScript 生成的標(biāo)簽
通過 JavaScript 生成的標(biāo)簽讓內(nèi)容變得不易查找、編輯,并且降低性能。能避免時(shí)盡量避免。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
1. HTML的代碼文件
(1)打開Hbuilder開發(fā)工具,新建項(xiàng)目,點(diǎn)擊右鍵新建一個(gè)HTML文檔。
(2)在文檔中寫HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>產(chǎn)品列表</title>
</head>
<body>
這是產(chǎn)品頁面
<b>好好學(xué)習(xí),天天向上</b>
<h1>好好學(xué)習(xí),天天向上</h1>
</body>
</html>
溫馨提示:
常用的快捷鍵:
Ctrl+s:保存
ctrl+c:復(fù)制
ctrl+x:剪切
ctrl+v:粘貼
2. HTML的基本結(jié)構(gòu)
對于HTML文件的后綴名一般為“html”或“htm”
2.1HTML的標(biāo)簽格式
(1)什么是HTML標(biāo)簽?
HTML標(biāo)簽是有開始標(biāo)簽和結(jié)束標(biāo)簽組成
開始標(biāo)簽:是被尖括號(hào)包圍的元素名。
結(jié)束標(biāo)簽:是被尖括號(hào)包圍的斜杠和元素名
<元素>內(nèi)容 </元素>
例如:<b>好好學(xué)習(xí)天天向上</b>
注意:有些HTML標(biāo)簽是沒有結(jié)束標(biāo)簽的, <hr/>
(2)單標(biāo)簽和雙標(biāo)簽
雙標(biāo)簽:例如:<b></b>
單標(biāo)簽:<hr/> <br/>
(3) 標(biāo)簽的屬性
<font size="1">好好學(xué)習(xí)</font>
<font size="7">好好學(xué)習(xí)</font>
<h1 title="h1" style="color: red;">
我是一個(gè)標(biāo)題標(biāo)簽
</h1>
3. HTML基本結(jié)構(gòu)的認(rèn)識(shí)
<!--<!DOCTYPE html>:文檔聲明,告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范,讓瀏覽器通過正確的方式解析我們的網(wǎng)頁,讓網(wǎng)頁能夠正確的顯示。-->
<!DOCTYPE html>
<!-- <html>標(biāo)簽:是網(wǎng)頁的跟標(biāo)簽-->
<html>
<!--head是網(wǎng)頁頭,一般表示網(wǎng)頁中描述信息-->
<head>
<!--
meta:提供網(wǎng)頁的相關(guān)信息,有利于搜索引擎收錄
charset="UTF-8": 設(shè)置網(wǎng)頁編碼方式為utf-8
name="Keywords" :設(shè)置網(wǎng)頁關(guān)鍵字
name="viewport": 設(shè)置網(wǎng)頁視窗大小
-->
<meta name="Keywords" content="HTML5前端開發(fā)工程師入門到精通課程"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- <title></title>:表示網(wǎng)頁的標(biāo)題 -->
<title></title>
</head>
<body>
<!--
<body></body>:網(wǎng)頁的主體內(nèi)容,用戶呈現(xiàn)的內(nèi)容,比如文字,圖片,鏈接,視頻……
-->
</body>
</html>
4. HTML的注釋
<!--這里是注釋的內(nèi)容-->
5. HTML的編碼問題
常見編碼個(gè)格式:
UTF-8:國際通用的編碼格式
GBK/GB2312:中文編碼字符
HTML的編碼:<meta charset="UTF-8">
6. HTML規(guī)范
(1)html標(biāo)簽都是有尖括號(hào)包圍的標(biāo)簽,比如<b>
(2)標(biāo)簽通常是成對存在,<b></b>,<h1></h1>
(3)HTML不區(qū)分大小寫,我們建議小寫。
(4)HTML可以嵌套,但是允許交叉嵌套
正確寫法:<b> <h1>我很粗</h1> </b>
錯(cuò)誤寫法:
<b> <h1>我很粗 </b></h1>
TML 字符集
如需正確地顯示 HTML 頁面,瀏覽器必須知道使用何種字符集。
萬維網(wǎng)早期使用的字符集是 ASCII。ASCII 支持 0-9 的數(shù)字,大寫和小寫英文字母表,以及一些特殊字符。
由于很多國家使用的字符并不屬于 ASCII,現(xiàn)代瀏覽器的默認(rèn)字符集是 ISO-8859-1。
如果網(wǎng)頁使用不同于 ISO-8859-1 的字符集,就應(yīng)該在 <meta> 標(biāo)簽進(jìn)行指定。
ISO 字符集
ISO 字符集是國際標(biāo)準(zhǔn)組織 (ISO) 針對不同的字母表/語言定義的標(biāo)準(zhǔn)字符集。
下面列出了世界各地使用的不同字符集:
字符集 | 描述 | 使用范圍 |
---|---|---|
ISO-8859-1 | Latin alphabet part 1 | 北美、西歐、拉丁美洲、加勒比海、加拿大、非洲 |
ISO-8859-2 | Latin alphabet part 2 | 東歐 |
ISO-8859-3 | Latin alphabet part 3 | SE Europe、世界語、其他雜項(xiàng) |
ISO-8859-4 | Latin alphabet part 4 | 斯堪的納維亞/波羅的海(以及其他沒有包括在 ISO-8859-1 中的部分) |
ISO-8859-5 | Latin/Cyrillic part 5 | 使用古代斯拉夫語字母表的語言,比如保加利亞語、白俄羅斯文、俄羅斯語、馬其頓語 |
ISO-8859-6 | Latin/Arabic part 6 | 使用阿拉伯字母的語言 |
ISO-8859-7 | Latin/Greek part 7 | 現(xiàn)代希臘語,以及由希臘語衍生的數(shù)學(xué)符號(hào) |
ISO-8859-8 | Latin/Hebrew part 8 | 使用希伯來語的語言 |
ISO-8859-9 | Latin 5 part 9 | 土耳其語。除了土耳其字符取代了冰島文字,其它與 ISO-8859-1 相同。 |
ISO-8859-10 | Latin 6 | 拉普蘭語、日耳曼語、愛斯基摩北歐語 |
ISO-8859-15 | Latin 9 (aka Latin 0) | 與 ISO 8859-1 類似,歐元符號(hào)和其他一些字符取代了一些較少使用的符號(hào) |
ISO-2022-JP | Latin/Japanese part 1 | 日本語 |
ISO-2022-JP-2 | Latin/Japanese part 2 | 日本語 |
ISO-2022-KR | Latin/Korean part 1 | 韓語 |
Unicode 標(biāo)準(zhǔn)
由于上面列出的字符集都有容量限制,而且不兼容多語言環(huán)境,Unicode 聯(lián)盟開發(fā)了 Unicode 標(biāo)準(zhǔn)。
Unicode 標(biāo)準(zhǔn)涵蓋了世界上的所有字符、標(biāo)點(diǎn)和符號(hào)。
不論是何種平臺(tái)、程序或語言,Unicode 都能夠進(jìn)行文本數(shù)據(jù)的處理、存儲(chǔ)和交換。
Unicode 聯(lián)盟
Unicode 聯(lián)盟開發(fā)了 Unicode 標(biāo)準(zhǔn)。他們的目標(biāo)是用標(biāo)準(zhǔn)的 Unicode 轉(zhuǎn)換格式 (UTF) 來取代現(xiàn)有的字符集。
Unicode 標(biāo)準(zhǔn)已經(jīng)獲得了成功,在 XML、Java、ECMAScript (JavaScript)、LDAP、CORBA 3.0、WML 中,Unicode 已經(jīng)得到了實(shí)現(xiàn)。在許多操作系統(tǒng)以及所有的現(xiàn)代瀏覽器中,Unicode 同樣得到了支持。
Unicode 聯(lián)盟與領(lǐng)導(dǎo)性的標(biāo)準(zhǔn)發(fā)展組織進(jìn)行合作,比如 ISO、W3C 以及 ECMA。
Unicode 可以被不同的字符集兼容。最常用的編碼方式是 UTF-8 和 UTF-16:
字符集 | 描述 |
---|---|
UTF-8 | UTF8 中的字符可以是 1-4 個(gè)字節(jié)長。UTF-8 可以表示 Unicode 標(biāo)準(zhǔn)中的任意字符。UTF-8 向后兼容 ASCII。UTF-8 是網(wǎng)頁和電子郵件的首選編碼。 |
UTF-16 | 16 比特的 Unicode 轉(zhuǎn)換格式是一種 Unicode 可變字符編碼,能夠?qū)θ?Unicode 指令表進(jìn)行編碼。UTF-16 主要被用于操作系統(tǒng)和環(huán)境中,比如微軟的 Windows 2000/XP/2003/Vista/CE 以及 Java 和 .NET 字節(jié)代碼環(huán)境。 |
提示: 最前面的 256 個(gè) Unicode 字符集字符對應(yīng)于 256 個(gè) ISO-8859-1 字符。
提示: 所有 HTML 4 處理器均已支持 UTF-8,而所有 XHTML 和 XML 處理器支持 UTF-8 和 UTF-16!
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。