|
前言 還記得招聘JD上web語義化嗎？ HTML5介紹和對比 緊接上篇，我們聊一聊我們今天的主角HTML5。我們知道在HTML1.0--HTML4.0版本HTML都是SGML的一個應(yīng)用，所以都有DTD。而HTML5再也不是SGML的一個應(yīng)用了，所以HTML5也沒有DTD了。而且XHTML5的名稱也變成了"以XML序列化的HTML5", 還記得我們上篇寫的HTML4.0的文檔聲明嗎？HTML4.0的聲明如下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www./TR/html4/strict.dtd"> HTML5的聲明就簡單多了，只需如下聲明就行 <!DOCTYPE html> 那么具體HTML5與HTML4.0有啥不同呢？有以下幾個方面 文檔類型聲明，html5只有一型即<!DOCTYPE html> 新的解析順序：不再基于SGML 新的元素：section, video,nav,aside等 input元素的新類型：data, email, url等 新的屬性：ping(用于a和area), charset(用于meta), async(用于script) 全局屬性: id, tabindex, repeat 新的全局屬性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。 移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt HTML5文檔結(jié)構(gòu) html5的文檔結(jié)構(gòu)，我們可以先打開任何一個網(wǎng)站，再打開瀏覽器的開發(fā)者工具查看Elements選項卡，就可以看到我們的文檔結(jié)構(gòu)了。如下所示： <!DOCTYPE html> <html> <head> <title>hello</title> </head> <body> </body> </html> 看完這個文檔結(jié)構(gòu)我們再來看看html5的語法, 大家可以參考whatwg里面的HTML語法： 元素: <tagname>...</tagname> 開始標簽 <tagname> 結(jié)束標簽</tagname> 自閉合標簽<tagname/> 文本： text：普通文本節(jié)點，有兩種字符必須被轉(zhuǎn)義<和&。比如<p>text</p> <![CDATA[text]]>: 不用考慮大多數(shù)的轉(zhuǎn)義情況，只用考慮]]>的轉(zhuǎn)義。這個在html5中只能用于svg和MathML了 注釋：<!--comments--> 文檔類型<!DOCTYPE HTML> 以上就是HMTL的部分語法，有些不建議使用，比如可以省略掉一些標簽，這個一旦這么用了我覺得可能會有人說你不講碼德，這樣做會造成整個文檔的可讀性變差。 看完語法我們再來看一下HTML的元素： 圖片 點擊圖片查看大圖 一般我們的html標簽都是寫在body里，那么你知道head里面能寫哪些標簽嗎？首先head元素是規(guī)定文檔相關(guān)的配置信息(元數(shù)據(jù))，也就是一個存放配置信息的一個容器。head標簽里能寫以下幾種標簽 title標簽，表示文檔的標題，一般顯示在瀏覽器的選項卡上。 base標簽，頁面基準的URL meta標簽：元信息通用標簽 charset屬性的meta：例如<meta charset="UTF-8"> http-equiv屬性的meta: 例如<meta http-equiv="content-type" content="text/html, charset="utf-8"> viewport屬性的meta, 這個在移動端上用的比較多。例如<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> 其他的預定義標簽 style標簽 script標簽 link標簽 HTML5語義化 回到我們開頭說的問題，為啥要做語義化呢？div+span不是也行嗎？這里我先說一下div+span這種結(jié)構(gòu)，div和span屬于語義中立的標簽，這種搭配不存在語義的問題，如果沒有語義化的要求這種方案是不錯的方案，寧愿不用也不能濫用。再說一下語義化，語義類標簽對開發(fā)者更友好，增強了可讀性，能夠更清晰的看出網(wǎng)頁的結(jié)構(gòu)方便開發(fā)和維護。同時也方便機器的閱讀，搜索引擎可以評估HTML文檔中的文本片段的重要性，方便讀屏軟件自動生成目錄等等。 根據(jù)圖片上的HMTL標簽的含義，我來語義化的舉個例子，先看代碼 <code> <pre> <ol> 世界人口最多的國家排名 <li>中國</li> <li>印度</li> </ol> </pre> </code> <!-- 輸出內(nèi)容 --> <samp> <pre> 世界人口最多的國家排名 1. 中國 2. 印度 </pre> </samp> 以上代碼我沒有加文檔結(jié)構(gòu)，當用瀏覽器打開html文件的時候，瀏覽器會自動給加上。我們來看一下這個例子代碼所代表的含義。 我們先來看code標簽里的內(nèi)容，代碼是有格式的，所以我們使用pre標簽保留代碼格式，而它又是HTML代碼，所以我們使用code標簽表示它是一段代碼，然后我們使用的轉(zhuǎn)義字符<將<轉(zhuǎn)義了，防止瀏覽器解析。 我們再看一下samp標簽里的內(nèi)容，這個是上面一段代碼產(chǎn)生的結(jié)果，所以我們使用samp標簽，而上面一段代碼輸出的內(nèi)容是有格式的，我們應(yīng)該保留其內(nèi)容格式，所以使用pre標簽。 大家可以用以下代碼驗證上面的結(jié)果： <ol> 世界人口最多的國家排名 <li>中國</li> <li>印度</li> </ol> 總結(jié) 在使用語義化時， 需要大家使用的時候?qū)φ請D片中的標簽含義進行斟酌，還是那句寧愿不用也不要濫用。 文章編輯:標梵互動(https://www./) |
|
|
