整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
1.用兩個(gè)空格來(lái)代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。
2.嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即兩個(gè)空格）。
3.對(duì)于屬性的定義，確保全部使用雙引號(hào)，絕不要使用單引號(hào)。
4.不要在自閉合（self-closing）元素的尾部添加斜線
5.不要省略可選的結(jié)束標(biāo)簽（closing tag）（例如，</li> 或</body>）。
6.為每個(gè) HTML 頁(yè)面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明，這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。<!DOCTYPE html>
7.語(yǔ)言屬性
根據(jù) HTML5 規(guī)范：
強(qiáng)烈建議為 html 根元素指定 lang 屬性，從而為文檔設(shè)置正確的語(yǔ)言。這將有助于語(yǔ)音合成工具確定其所應(yīng)該采用的發(fā)音，有助于翻譯工具確定其翻譯時(shí)所應(yīng)遵守的規(guī)則等等.
<html>
<!-- ... -->
</html>
8.IE 兼容模式
IE 支持通過特定的 <meta> 標(biāo)簽來(lái)確定繪制當(dāng)前頁(yè)面所應(yīng)該采用的 IE 版本。除非有強(qiáng)烈的特殊需求，否則最好是設(shè)置為 edge mode，從而通知 IE 采用其所支持的最新的模式。
<metahttp-equiv="X-UA-Compatible"content="IE=Edge">
9.字符編碼
通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁(yè)面內(nèi)容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實(shí)體標(biāo)記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。
<head>
<meta charset="UTF-8">
</head>
10.引入 CSS 和 JavaScript 文件
根據(jù) HTML5 規(guī)范，在引入 CSS 和 JavaScript 文件時(shí)一般不需要指定 type 屬性，因?yàn)?text/css 和 text/javascript 分別是它們的默認(rèn)值。
<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>
11.
布爾（boolean）型屬性
布爾型屬性可以在聲明時(shí)不賦值。XHTML 規(guī)范要求為其賦值，但是 HTML5 規(guī)范不需要。
<input type="checkbox" value="1" checked>
12.
減少標(biāo)簽的數(shù)量
編寫 HTML 代碼時(shí)，盡量避免多余的父元素。很多時(shí)候，這需要迭代和重構(gòu)來(lái)實(shí)現(xiàn)。請(qǐng)看下面的案例：
<!-- Not so great -->
<span>
<img src="...">
</span>
<!-- Better -->
<img src="...">
13.
不要使用 @import
與 <link> 標(biāo)簽相比，@import 指令要慢很多，不光增加了額外的請(qǐng)求次數(shù)，還會(huì)導(dǎo)致不可預(yù)料的問題。替代辦法有以下幾種：
使用多個(gè) <link> 元素
通過 Sass 或 Less 類似的 CSS 預(yù)處理器將多個(gè) CSS 文件編譯為一個(gè)文件
通過 Rails、Jekyll 或其他系統(tǒng)中提供過 CSS 文件合并功能
14.
class 命名
class 名稱中只能出現(xiàn)小寫字符和破折號(hào)（dashe）（不是下劃線，也不是駝峰命名法）。破折號(hào)應(yīng)當(dāng)用于相關(guān) class 的命名（類似于命名空間）（例如，.btn 和 .btn-danger）。
避免過度任意的簡(jiǎn)寫。.btn 代表 button，但是 .s 不能表達(dá)任何意思。
class 名稱應(yīng)當(dāng)盡可能短，并且意義明確。
使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現(xiàn)形式（presentational）的名稱。
基于最近的父 class 或基本（base） class 作為新 class 的前綴。
使用 .js-* class 來(lái)標(biāo)識(shí)行為（與樣式相對(duì)），并且不要將這些 class 包含到 CSS 文件中。
.t { ... }
.red { ... }
.header { ... }
/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }
在 HTML 中，某些字符是預(yù)留的。
在 HTML 中不能使用小于號(hào)（<）和大于號(hào)（>），這是因?yàn)闉g覽器會(huì)誤認(rèn)為它們是標(biāo)簽。
如果希望正確地顯示預(yù)留字符，我們必須在 HTML 源代碼中使用字符實(shí)體（character entities）。
字符實(shí)體類似這樣：
&entity_name; 或者 entity_number;
如需顯示小于號(hào)，我們必須這樣寫：< 或 <
提示：使用實(shí)體名而不是數(shù)字的好處是，名稱易于記憶。不過壞處是，瀏覽器也許并不支持所有實(shí)體名稱（對(duì)實(shí)體數(shù)字的支持卻很好）。
HTML基礎(chǔ)教程： 瀏覽器中符號(hào)是怎么顯示出來(lái)的
不間斷空格（non-breaking space）
HTML 中的常用字符實(shí)體是不間斷空格( )。
瀏覽器總是會(huì)截短 HTML 頁(yè)面中的空格。如果您在文本中寫 10 個(gè)空格，在顯示該頁(yè)面之前，瀏覽器會(huì)刪除它們中的 9 個(gè)。如需在頁(yè)面中增加空格的數(shù)量，您需要使用 字符實(shí)體。
實(shí)例
<html> <body> <h2>字符實(shí)體</h2> <p>&x;</p> <p>用實(shí)體數(shù)字（比如"divide"）或者實(shí)體名稱（比如 "#247"）替代 "X"，然后查看結(jié)果。</p> </body> </html>
HTML基礎(chǔ)教程： 瀏覽器中符號(hào)是怎么顯示出來(lái)的
希望以上可以解決你們心中的一些疑惑，其中可能會(huì)有不對(duì)的地方或是需要改進(jìn)的地方，歡迎留言糾正。感覺還不錯(cuò)歡迎關(guān)注收藏轉(zhuǎn)載哦
html概述
HTML是 HyperText Mark-up Language 的首字母簡(jiǎn)寫，意思是超文本標(biāo)記語(yǔ)言，超文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來(lái)制作網(wǎng)頁(yè)的語(yǔ)言，這種語(yǔ)言由一個(gè)個(gè)的標(biāo)簽組成，用這種語(yǔ)言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm，一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁(yè)，顯示的網(wǎng)頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)。
html基本結(jié)構(gòu)
一個(gè)html的基本結(jié)構(gòu)如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>網(wǎng)頁(yè)標(biāo)題</title> </head> <body> 網(wǎng)頁(yè)顯示內(nèi)容 </body> </html>
第一行是文檔聲明，第二行“”標(biāo)簽和最后一行“”定義html文檔的整體，“”標(biāo)簽中的‘lang=“en”’定義網(wǎng)頁(yè)的語(yǔ)言為英文，定義成中文是’lang=“zh-CN”’,不定義也沒什么影響，它一般作為分析統(tǒng)計(jì)用。 “”標(biāo)簽和“”標(biāo)簽是它的第一層子元素，“”標(biāo)簽里面負(fù)責(zé)對(duì)網(wǎng)頁(yè)進(jìn)行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁(yè)的編碼格式，外鏈css樣式文件和javascript文件等，設(shè)置的內(nèi)容不會(huì)顯示在網(wǎng)頁(yè)上，標(biāo)題的內(nèi)容會(huì)顯示在標(biāo)題欄，“”內(nèi)編寫網(wǎng)頁(yè)上顯示的內(nèi)容。
HTML文檔類型
目前常用的兩種文檔類型是xhtml 1.0和html5
xhtml 1.0
xhtml 1.0 是html5之前的一個(gè)常用的版本，目前許多網(wǎng)站仍然使用此版本。
此版本文檔用sublime text創(chuàng)建方法： html:xt + tab
文檔示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title> xhtml 1.0 文檔類型 </title> </head> <body> </body> </html>
html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
此版本文檔用sublime text創(chuàng)建方法： html:5 + tab 或者 ! + tab
文檔示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> html5文檔類型 </title> </head> <body> </body> </html>
兩種文檔的區(qū)別
1、文檔聲明和編碼聲明
2、html5新增了標(biāo)簽元素以及元素屬性
html注釋：
html文檔代碼中可以插入注釋，注釋是對(duì)代碼的說(shuō)明和解釋，注釋的內(nèi)容不會(huì)顯示在頁(yè)面上，html代碼中插入注釋的方法是：
<!-- 這是一段注釋 -->
通過
、
、
、
、
,標(biāo)簽可以在網(wǎng)頁(yè)上定義6種級(jí)別的標(biāo)題。6種級(jí)別的標(biāo)題表示文檔的6級(jí)目錄層級(jí)關(guān)系，比如說(shuō)：
，再其次是
，以此類推。搜索引擎會(huì)使用標(biāo)題將網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容編制索引，所以網(wǎng)頁(yè)上使用標(biāo)題是很重要的。
<h1>這是一級(jí)標(biāo)題</h1> <h2>這是二級(jí)標(biāo)題</h2> <h3>這是三級(jí)標(biāo)題</h3>
html段落標(biāo)簽
標(biāo)簽定義一個(gè)文本段落，一個(gè)段落含有默認(rèn)的上下間距，段落之間會(huì)用這種默認(rèn)間距隔開，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落</title> </head> <body> <p>HTML是 HyperText Mark-up Language 的首字母簡(jiǎn)寫，意思是超文本標(biāo)記語(yǔ)言，超 文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來(lái)制作網(wǎng)頁(yè)的語(yǔ)言，這種語(yǔ)言由一個(gè)個(gè)的 標(biāo)簽組成，用這種語(yǔ)言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm。 </p> <p>一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開顯示的是文本，可以用文本的方 式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁(yè)，顯示的網(wǎng) 頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)。</p> </body> </html>
html換行標(biāo)簽
代碼中成段的文字，直接在代碼中回車換行，在渲染成網(wǎng)頁(yè)時(shí)候不認(rèn)這種換行，如果真想換行，可以在代碼的段落中插入
來(lái)強(qiáng)制換行，代碼如下：
<p> 一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件<br /> 渲染成網(wǎng)頁(yè)，顯示的網(wǎng)頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)。 </p>
html字符實(shí)體
代碼中成段的文字，如果文字間想空多個(gè)空格，在代碼中空多個(gè)空格，在渲染成網(wǎng)頁(yè)時(shí)只會(huì)顯示一個(gè)空格，如果想顯示多個(gè)空格，可以使用空格的字符實(shí)體,代碼如下：
<!-- 在段落前想縮進(jìn)兩個(gè)文字的空格，使用空格的字符實(shí)體： --> <p> 一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件<br /> 渲染成網(wǎng)頁(yè)，顯示的網(wǎng)頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)。</p>
在網(wǎng)頁(yè)上顯示 “<” 和 “>” 會(huì)誤認(rèn)為是標(biāo)簽，想在網(wǎng)頁(yè)上顯示“<”和“>”可以使用它們的字符實(shí)體，比如：
<!-- “<” 和 “>” 的字符實(shí)體為 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>
html塊標(biāo)簽
1、
標(biāo)簽 塊元素，表示一塊內(nèi)容，沒有具體的語(yǔ)義。
2、 標(biāo)簽 行內(nèi)元素，表示一行中的一小段內(nèi)容，沒有具體的語(yǔ)義。
含樣式和語(yǔ)義的標(biāo)簽
1、 標(biāo)簽 行內(nèi)元素，表示語(yǔ)氣中的強(qiáng)調(diào)詞
2、 標(biāo)簽 行內(nèi)元素，表示專業(yè)詞匯
3、 標(biāo)簽 行內(nèi)元素，表示文檔中的關(guān)鍵字或者產(chǎn)品名
4、 標(biāo)簽 行內(nèi)元素，表示非常重要的內(nèi)容
語(yǔ)義化的標(biāo)簽
語(yǔ)義化的標(biāo)簽，就是在布局的時(shí)候多使用有語(yǔ)義的標(biāo)簽，搜索引擎在爬網(wǎng)的時(shí)候能認(rèn)識(shí)這些標(biāo)簽，理解文檔的結(jié)構(gòu)，方便網(wǎng)站的收錄。比如：h1標(biāo)簽是表示標(biāo)題，p標(biāo)簽是表示段落，ul、li標(biāo)簽是表示列表，a標(biāo)簽表示鏈接，dl、dt、dd表示定義列表等，語(yǔ)義化的標(biāo)簽不多。
html圖像標(biāo)簽
標(biāo)簽可以在網(wǎng)頁(yè)上插入一張圖片，它是獨(dú)立使用的標(biāo)簽，它的常用屬性有：
src屬性 定義圖片的引用地址
alt屬性 定義圖片加載失敗時(shí)顯示的文字，搜索引擎會(huì)使用這個(gè)文字收錄圖片、盲人讀屏軟件會(huì)讀取這個(gè)文字讓盲人識(shí)別圖片，所以此屬性非常重要。
<img src="images/pic.jpg" alt="產(chǎn)品圖片" />
絕對(duì)路徑和相對(duì)路徑
像網(wǎng)頁(yè)上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對(duì)地址和相對(duì)地址。
絕對(duì)地址：相對(duì)于磁盤的位置去定位文件的地址
相對(duì)地址：相對(duì)于引用文件本身去定位被引用的文件地址
絕對(duì)地址在整體文件遷移時(shí)會(huì)因?yàn)榇疟P和頂層目錄的改變而找不到文件，相對(duì)路徑就沒有這個(gè)問題。相對(duì)路徑的定義技巧：
“ ./ ” 表示當(dāng)前文件所在目錄下，比如：“./pic.jpg” 表示當(dāng)前目錄下的pic.jpg的圖片，這個(gè)使用時(shí)可以省略。
“ …/ ” 表示當(dāng)前文件所在目錄下的上一級(jí)目錄，比如：“…/images/pic.jpg” 表示當(dāng)前目錄下的上一級(jí)目錄下的images文件夾中的pic.jpg的圖片。
標(biāo)簽可以在網(wǎng)頁(yè)上定義一個(gè)鏈接地址，它的常用屬性有：
href屬性 定義跳轉(zhuǎn)的地址
title屬性 定義鼠標(biāo)懸停時(shí)彈出的提示文字框
target屬性 定義鏈接窗口打開的位置
target="_self" 缺省值，新頁(yè)面替換原來(lái)的頁(yè)面，在原來(lái)位置打開
target="_blank" 新頁(yè)面會(huì)在新開的一個(gè)瀏覽器窗口打開
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
