前端開發(fā)基礎知識

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)“語義化”呢而晒,下面會詳細談到蝇狼。

語義化的意義:
  1. 讓計算機(如爬蟲)讀懂網(wǎng)頁的內(nèi)容
  2. 更優(yōu)秀的用戶體驗
  3. 開發(fā)效率
  4. 行業(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)頁愉粤。

瀏覽器亂碼的原因

  1. 比如網(wǎng)頁源代碼是gbk的編碼,而內(nèi)容中的中文字是utf-8編碼的拿撩,這樣瀏覽器打開即會出現(xiàn)html亂碼衣厘。反之網(wǎng)頁是編碼utf-8,內(nèi)容是gbk也會出現(xiàn)亂碼压恒。
  2. html網(wǎng)頁編碼是gbk影暴,而程序從數(shù)據(jù)庫中調(diào)出呈現(xiàn)是utf-8編碼的內(nèi)容也會造成編碼亂碼。
  3. 瀏覽器不能自動檢測網(wǎng)頁編碼探赫,造成網(wǎng)頁亂碼型宙。

常見瀏覽器與內(nèi)核

  1. Trident內(nèi)核

代表產(chǎn)品Internet Explorer,又稱其為IE內(nèi)核伦吠。Trident(又稱為MSHTML)妆兑,是微軟開發(fā)的一種排版引擎。使用Trident渲染引擎的瀏覽器包括:IE毛仪、傲游搁嗓、世界之窗瀏覽器、Avant潭千、騰訊TT谱姓、Netscape 8、NetCaptor刨晴、Sleipnir屉来、GOSURF、GreenBrowser和KKman等狈癞。

  1. Gecko內(nèi)核

代表作品Mozilla FirefoxGecko是一套開放源代碼的茄靠、以C++編寫的網(wǎng)頁排版引擎。Gecko是最流行的排版引擎之一蝶桶,僅次于Trident慨绳。使用它的最著名瀏覽器有Firefox、Netscape6至9真竖。

  1. WebKit內(nèi)核

代表作品Safari脐雪、Chromewebkit 是一個開源項目,包含了來自KDE項目和蘋果公司的一些組件恢共,主要用于Mac OS系統(tǒng)战秋,它的特點在于源碼結構清晰、渲染速度極快讨韭。缺點是對網(wǎng)頁代碼的兼容性不高脂信,導致一些編寫不標準的網(wǎng)頁無法正常顯示癣蟋。主要代表作品有Safari和Google的瀏覽器Chrome。

  1. 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 定義短引用
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末歧胁,一起剝皮案震驚了整個濱河市滋饲,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌喊巍,老刑警劉巖屠缭,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異崭参,居然都是意外死亡呵曹,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進店門何暮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來奄喂,“玉大人,你說我怎么就攤上這事海洼】缧拢” “怎么了?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵坏逢,是天一觀的道長域帐。 經(jīng)常有香客問我,道長是整,這世上最難降的妖魔是什么肖揣? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮浮入,結果婚禮上龙优,老公的妹妹穿的比我還像新娘。我一直安慰自己舵盈,他們只是感情好陋率,可當我...
    茶點故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著秽晚,像睡著了一般瓦糟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上赴蝇,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天菩浙,我揣著相機與錄音,去河邊找鬼句伶。 笑死劲蜻,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的考余。 我是一名探鬼主播先嬉,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼楚堤!你這毒婦竟也來了疫蔓?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤身冬,失蹤者是張志新(化名)和其女友劉穎衅胀,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體酥筝,經(jīng)...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡滚躯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了嘿歌。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片掸掏。...
    茶點故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖搅幅,靈堂內(nèi)的尸體忽然破棺而出阅束,到底是詐尸還是另有隱情,我是刑警寧澤茄唐,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布息裸,位于F島的核電站,受9級特大地震影響沪编,放射性物質(zhì)發(fā)生泄漏呼盆。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一蚁廓、第九天 我趴在偏房一處隱蔽的房頂上張望访圃。 院中可真熱鬧,春花似錦相嵌、人聲如沸腿时。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽批糟。三九已至格了,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間徽鼎,已是汗流浹背盛末。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留否淤,地道東北人悄但。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像石抡,于是被迫代替她去往敵國和親檐嚣。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,860評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 1.HTML啰扛、XML净嘀、XHTML的區(qū)別 HTML:超文本標記語言(Hyper Text Markup Langua...
    IT男的成長記錄閱讀 290評論 0 1
  • 前言 轉自博客園 原文 一、簡單介紹一下什么是瀏覽器內(nèi)核侠讯。瀏覽器最重要或者說核心的部分是“Rendering En...
    吳晗君閱讀 3,643評論 1 30
  • 什么是HTML挖藏? HTML指的是超文本標記語言 HTML不是一種編程語言,而是一種標記語言 標記語言是一套標記標簽...
    Echolate閱讀 448評論 0 1
  • 1厢漩、HTML膜眠、XML、XHTML 有什么區(qū)別HTML是超文本標記語言(Hyper Text Markup Lang...
    feihang閱讀 317評論 0 0
  • 早晨六點多的時候還是醒過來溜嗜,原定八點的鬧鐘像是多余宵膨。又要一天的停電施工,總感覺心里面沒底炸宵,八點再次起來洗漱完畢辟躏,我...
    南京江寧鏟屎官閱讀 149評論 0 0