HTML、XML、XHTML 有什么區(qū)別
- HTML，超文本標(biāo)記語言，是語法較為松散的、不嚴(yán)格的Web語言；
比如大小寫不注意,標(biāo)簽沒有閉合,等等,瀏覽器一定會(huì)展現(xiàn),不會(huì)出現(xiàn)報(bào)錯(cuò),無法運(yùn)行的情況.
- XML，可擴(kuò)展標(biāo)記語言，主要用于存儲(chǔ)數(shù)據(jù)和結(jié)構(gòu).(參考)；
- XHTML，可擴(kuò)展超文本標(biāo)記語言，基于XML，作用與HTML類似，但語法更嚴(yán)格.(參考)
可認(rèn)為是更嚴(yán)格的HTML
怎樣理解語義化HTML
-
<em> HTML語義化是什么？</em>
語義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化），便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí)，讓瀏覽器的爬蟲和機(jī)器很好的解析。
-
<em>為什么要語義化？</em>
- 有利于SEO，有助于爬蟲抓取更多的有效信息，爬蟲是依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
- 語義化的HTML在沒有CSS的情況下也能- 呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu)
- 方便其他設(shè)備的解析
- 便于團(tuán)隊(duì)開發(fā)和維護(hù)
- 支持更多的設(shè)備
屏幕閱讀器（如果訪客有視障）會(huì)完全根據(jù)你的標(biāo)記來“讀”你的網(wǎng)頁。 如果你使用的含語義的標(biāo)記,屏幕閱讀器會(huì)根據(jù)你的標(biāo)簽來判斷網(wǎng)頁的內(nèi)容，而不是一個(gè)字母一個(gè)字母的拼寫出來。
-
<em>怎樣語義化?</em>
- 語義化的HTML結(jié)構(gòu)首先要強(qiáng)調(diào)HTML結(jié)構(gòu)
HTML結(jié)構(gòu)是頁面的骨架，一個(gè)頁面就好像一幢房子，HTML結(jié)構(gòu)就是鋼筋混泥土的墻。CSS是裝飾材料，是原木地板，是大理石，是油漆，是用來裝飾房子的。合理的房屋結(jié)構(gòu)和賞心悅目的裝修搭配才是一個(gè)舒適的居住環(huán)境。
或者HTML結(jié)構(gòu)對(duì)我們來說本身就是某種語言代碼邏輯，CSS就是需要展現(xiàn)的數(shù)據(jù)。我們可以通過設(shè)置不同的數(shù)據(jù)（CSS樣式）來得到不同的結(jié)果輸出（表現(xiàn)）。數(shù)據(jù)是靈活多變的，但業(yè)務(wù)邏輯，代碼本身結(jié)構(gòu)卻是固定通用的。
所以，擁有一個(gè)既清晰又干凈的HTML結(jié)構(gòu)是非常重要的。- 分清語義化標(biāo)簽和默認(rèn)樣式
HTML在頁面中的作用就是結(jié)構(gòu)和含義，通俗點(diǎn)說就是劃分內(nèi)容，這里放什么，我們放的是什么。HTML本身是沒有表現(xiàn)的，我們看到例如
<h1>是粗體，字體大小2em，加粗；<strong>是加粗的， 不要誤會(huì)這是HTML的表現(xiàn)，這些其實(shí)是HTML默認(rèn)的CSS樣式在起作用?？梢员ＷC去掉或樣式丟失的時(shí)候也能讓頁面呈現(xiàn)清晰的結(jié)構(gòu)。
結(jié)構(gòu)(HTML)才是重點(diǎn)，樣式(CSS)是用來修飾結(jié)構(gòu)的。
>所以要先確定HTML標(biāo)簽，再來選用合適的CSS樣式。布局的標(biāo)簽是通過HTML內(nèi)在的上下文語境來決定當(dāng)前的語義化的結(jié)構(gòu)，而不是通過外在的樣式表現(xiàn)來決定能襯托的標(biāo)簽。那些樣式只是瀏覽器默認(rèn)的CSS樣式。它們就只是開發(fā)商默認(rèn)給新房刷的大白粉墻面一樣，不同的裝修公司設(shè)計(jì)的風(fēng)格不同的，也可能只是簡(jiǎn)單刷白，那我們剛好可以復(fù)用，也或者會(huì)再貼其它墻紙，那我們也只好覆蓋它。重點(diǎn)永遠(yuǎn)在墻體。
樣式本身是沒有意義和內(nèi)容邏輯的，維護(hù)CSS的代價(jià)要遠(yuǎn)遠(yuǎn)小于維護(hù)HTML結(jié)構(gòu)。
-
<em>一些語義化實(shí)用建議</em>
根據(jù)文檔上下文結(jié)構(gòu)合理的選用最適合表達(dá)當(dāng)前語義的標(biāo)簽；
盡可能少的使用無語義的標(biāo)簽div和span；
不要使用純樣式標(biāo)簽，如：b、font、u等，一切表現(xiàn)改用css設(shè)置；
h標(biāo)簽的使用應(yīng)該根據(jù)重要性逐級(jí)遞減，沒有斷層。并且一個(gè)頁面只能有一個(gè)h1；
提高關(guān)鍵詞密度，如圖片替換alt，鏈接說明title；
正確使用內(nèi)容容器，如段落p，列表ul, ol, li, dl, dt, dd
需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；
使用表格時(shí)，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途；
每個(gè)input標(biāo)簽對(duì)應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對(duì)應(yīng)的input關(guān)聯(lián)起來。
相關(guān)鏈接
怎樣理解內(nèi)容與樣式分離的原則
網(wǎng)頁三部分:Html——結(jié)構(gòu)，css——表現(xiàn)，javascrip——行為。內(nèi)容也就是html，樣式也就是css。所以內(nèi)容和樣式的分離，就是指在網(wǎng)頁編碼的過程中，要將html和css兩大部分分開。
寫 HTML 的時(shí)候先不管樣式, 重點(diǎn)放在HTML的結(jié)構(gòu)和語義化上，讓 HTML 能體現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容。之后再去寫樣式。
寫 JS 的時(shí)候，盡量不要用 JS 去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化
HTML 內(nèi)不允許出現(xiàn)屬性樣式，盡量不要出現(xiàn)行內(nèi)樣式
