HTML采桃、XML懒熙、XHTML 有什么區(qū)別
HTML,超文本標記語言普办,是語法較為松散的工扎、不嚴格的Web語言;
XML泌豆,可擴展標記語言定庵,主要用于存儲數(shù)據(jù)和結構,可擴展踪危;
XHTML蔬浙,可擴展超文本標記語言,基于XML贞远,作用與HTML類似畴博,但語法更嚴格。
HTML 語義化
什么是語義化:
“語義化”指的是機器在需要更少的人類干預的情況下能夠研究和收集信息蓝仲,讓網(wǎng)頁能夠被機器理解俱病,最終讓人類受益。具體而言袱结,借用BI論壇網(wǎng)友通俗的解釋亮隙,“語義化意思就是不要把你女朋友當做一般的朋友看待”,下面是粗淺的XML形式實例:
然而垢夹,通過CSS控制溢吻,我們很容易就能將“女朋友”展示地跟“朋友”一樣,只關注表現(xiàn)層的話果元,標簽視乎只是一個“鉤子(hook)”促王,提供給CSS和JS做處理,那為什么我們還要強調(diào)“語義化”呢而晒,下面會詳細談到蝇狼。
語義化的意義:
- 讓計算機(如爬蟲)讀懂網(wǎng)頁的內(nèi)容
- 更優(yōu)秀的用戶體驗
- 開發(fā)效率
- 行業(yè)標準
內(nèi)容與樣式分離原則
一個符合標準的網(wǎng)頁,標簽中的標簽名應該全部都是小寫的倡怎,屬性要加上引號迅耘,樣式和行為不再夾雜在標簽中贱枣,而應該分別單獨存放在樣式文件和腳本文件中。理想狀態(tài)下豹障,網(wǎng)頁源代碼由三部分組成:.html文件冯事、.css文件和.js文件。HTML標簽只用負責承載內(nèi)容血公,而樣式交給了CSS昵仅,行為交給了JavaScript。
常見的meta標簽
<!-- 關鍵字累魔,搜所引擎 SEO -->
<meta http-equiv="keywords" content="關鍵字1,關鍵字2,...">
<!-- 頁面描述 -->
<meta http-equiv="description" content="網(wǎng)頁描述">
<!-- content的取值為webkit,ie-comp,ie-stand之一摔笤,區(qū)分大小寫,分別代表用webkit內(nèi)核垦写,IE兼容內(nèi)核吕世,IE標準內(nèi)核。 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!-- 若頁面需默認用極速核梯投,增加標簽: -->
<meta name="renderer" content="webkit">
<!-- 若頁面需默認用ie兼容內(nèi)核命辖,增加標簽: -->
<meta name="renderer" content="ie-comp">
<!-- 若頁面需默認用ie標準內(nèi)核,增加標簽: -->
<meta name="renderer" content="ie-stand">
<!-- 如果安裝了GCF分蓖,則使用GCF來渲染頁面尔艇,如果沒有安裝GCF,則使用最高版本的IE內(nèi)核進行渲染么鹤。
X-UA-Compatible:這是個是IE8的專用標記,用來指定IE8瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式(比如人見人煩的IE6)终娃,以此來解決部分兼容問題。 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<!-- 強制頁面在當前窗口以獨立頁面顯示蒸甜。 -->
<meta http-equiv="Window-target" content="_top">
<!-- 自動刷新棠耕,并指向新的頁面 -->
<meta http-equiv="Refresh" content="2;URL=http://">
<!-- 禁止瀏覽器緩存 -->
<!-- 是用于設定禁止瀏覽器從本地機的緩存中調(diào)閱頁面內(nèi)容柠新,設定后一旦離開網(wǎng)頁就無法從Cache中再調(diào)出
用法: -->
<meta http-equiv="pragram" content="no-cache">
<!-- 清除緩存(再訪問這個網(wǎng)站要重新下載G嫌) -->
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
<!-- 設定網(wǎng)頁的到期時間 -->
<meta http-equiv="expires" content="0">
<!-- 手機端 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略頁面中的數(shù)字識別為電話,忽略email識別 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 設置蘋果工具欄顏色 -->
<!-- 不讓百度轉碼 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 不緩存 -->
<meta http-equiv="cache-control" content="no-cache" />
<!-- 初始化設備 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 網(wǎng)站開啟對iphone私有 web app 程序的支持 -->
<meta content="yes" name="apple-mobile-web-app-capable" />
<!-- 改變頂部狀態(tài)條的顏色 iphone私有的屬性-->
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
嚴格模式和混雜模式
放在網(wǎng)頁頂部的doctype聲明是讓瀏覽器進入正確呈現(xiàn)模式的關鍵恨憎。瀏覽器自動切換到恰當?shù)某尸F(xiàn)模式蕊退,以便正確顯示由doctype聲明所指定的文檔種類。
理論上框咙,這應該是一個非常直觀的切換。假如doctype指出當前網(wǎng)頁是一個遵循標準(也就是HTML 4+或XHTML 1+)的文檔痢甘,瀏覽器就會切換到Standards模式喇嘱。假如沒有指定doctype,或者指定HTML 3.2以及更老的版本塞栅,瀏覽器就切換到Quirks模式者铜。這樣一來,瀏覽器既能正確顯示遵循標準的文檔,又不至于完全舍棄老式的作烟、與標準不符的網(wǎng)頁愉粤。
瀏覽器亂碼的原因
- 比如網(wǎng)頁源代碼是gbk的編碼,而內(nèi)容中的中文字是utf-8編碼的拿撩,這樣瀏覽器打開即會出現(xiàn)html亂碼衣厘。反之網(wǎng)頁是編碼utf-8,內(nèi)容是gbk也會出現(xiàn)亂碼压恒。
- html網(wǎng)頁編碼是gbk影暴,而程序從數(shù)據(jù)庫中調(diào)出呈現(xiàn)是utf-8編碼的內(nèi)容也會造成編碼亂碼。
- 瀏覽器不能自動檢測網(wǎng)頁編碼探赫,造成網(wǎng)頁亂碼型宙。
常見瀏覽器與內(nèi)核
- Trident內(nèi)核
代表產(chǎn)品Internet Explorer,又稱其為IE內(nèi)核伦吠。Trident(又稱為MSHTML)妆兑,是微軟開發(fā)的一種排版引擎。使用Trident渲染引擎的瀏覽器包括:IE毛仪、傲游搁嗓、世界之窗瀏覽器、Avant潭千、騰訊TT谱姓、Netscape 8、NetCaptor刨晴、Sleipnir屉来、GOSURF、GreenBrowser和KKman等狈癞。
- Gecko內(nèi)核
代表作品Mozilla FirefoxGecko是一套開放源代碼的茄靠、以C++編寫的網(wǎng)頁排版引擎。Gecko是最流行的排版引擎之一蝶桶,僅次于Trident慨绳。使用它的最著名瀏覽器有Firefox、Netscape6至9真竖。
- WebKit內(nèi)核
代表作品Safari脐雪、Chromewebkit 是一個開源項目,包含了來自KDE項目和蘋果公司的一些組件恢共,主要用于Mac OS系統(tǒng)战秋,它的特點在于源碼結構清晰、渲染速度極快讨韭。缺點是對網(wǎng)頁代碼的兼容性不高脂信,導致一些編寫不標準的網(wǎng)頁無法正常顯示癣蟋。主要代表作品有Safari和Google的瀏覽器Chrome。
- Presto內(nèi)核
代表作品OperaPresto是由Opera Software開發(fā)的瀏覽器排版引擎狰闪,供Opera 7.0及以上使用疯搅。它取代了舊版Opera 4至6版本使用的Elektra排版引擎,包括加入動態(tài)功能埋泵,例如網(wǎng)頁或其部分可隨著DOM及Script語法的事件而重新排版幔欧。
常見的html標簽
標簽名 | 作用 |
---|---|
html | 將所有HTML內(nèi)容都包含在這個標簽內(nèi) |
head | 用于定義文檔的頭部,它是所有頭部元素的容器秋泄。 |
title | 文檔的標題 |
meta | 提供有關頁面的元信息 |
body | 文檔的內(nèi)容 |
h1 | 一級標題琐馆,h1h6分別對應六級標題,從16標題一次減小 |
p | 整段文字 |
a | 定義錨恒序,即在頁面插入鏈接 |
img | 圖片 |
ul | 無序列表 |
ol | 有序列表 |
li | 列表項 |
br | 換行 |
div | 定義文檔中的節(jié)瘦麸,默認表現(xiàn)為塊元素 |
span | 定義定義文檔中的節(jié),默認表現(xiàn)為行內(nèi)元素 |
em | 定義強調(diào)文本 |
i | 定義斜體字 |
strong | 定義強調(diào)文本 |
q | 定義短引用 |