HTML的一些基礎(chǔ)知識

1.HTML VS XML VS XHTML
HTML譯為超文本標(biāo)記語言府蔗,語法比較松散矾兜,是一種不嚴(yán)格的web語言檩帐。
XHTML是可擴(kuò)展超文本標(biāo)記語言,基于XML元咙,作用與HTML類似梯影,但語法更嚴(yán)格參考。
XML是擴(kuò)展標(biāo)記語言庶香,用于存儲數(shù)據(jù)和結(jié)構(gòu)參考甲棍。

2.HTML語義化是什么意思?
(1)指的是機(jī)器在需要更少的人類干預(yù)的情況下能夠研究和收集信息赶掖,讓網(wǎng)頁能夠被機(jī)器理解感猛,最終讓人類受益。
(2)主要目的就是讓大家直觀的認(rèn)識標(biāo)簽(markup)和屬性(attribute)的用途和作用
(3)根據(jù)內(nèi)容的結(jié)構(gòu)化(內(nèi)容[語義化]選擇合適的標(biāo)簽(代碼語義化)便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機(jī)器很好地解析奢赂。

3.內(nèi)容與樣式的分離
現(xiàn)在的網(wǎng)頁一般分為三部分:HTML——結(jié)構(gòu)唱遭,CSS——渲染,javascript——行為呈驶。
內(nèi)容也就是html拷泽,樣式也就是css。所以內(nèi)容和樣式的分離袖瞻,就是指在網(wǎng)頁編碼的過程中司致,要將html和css兩大部分分開。
實(shí)現(xiàn)方法:寫HTML的時候先不管樣式聋迎,重點(diǎn)放在HTML的結(jié)構(gòu)和語義化上脂矫,讓HTML能夠體現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容,然后進(jìn)行 css 樣式設(shè)置和渲染霉晕,寫JS的時候庭再,盡量不要用JS去直接操作樣式,而是通過給元素添加刪除class來控制樣式變化(即行為分離)牺堰。
好處:
瀏覽器加載網(wǎng)頁頁面速度變快拄轻。分離原則下,大部分頁面代碼寫在了CSS當(dāng)中伟葫,頁面體積容量變得更小恨搓。
網(wǎng)頁修改設(shè)計時,效率、省時斧抱。根據(jù)html標(biāo)簽內(nèi)ID或class的標(biāo)記常拓,到CSS里找到相應(yīng)的ID或class,可以快速替換指定位置的樣式辉浦,不會破壞頁面架構(gòu)和其他部分的樣式弄抬。
典型的應(yīng)用就是網(wǎng)頁換膚,使用相同的 html 結(jié)構(gòu)宪郊,不同的 css 樣式掂恕。
更好地被搜索引擎收錄seo更好》媳欤基于內(nèi)容與樣式分離的原則,html的語義化就是首要考慮的,網(wǎng)頁中語義化的標(biāo)簽代碼就會更加適合搜索引擎慕蔚。
css樣式的分離丐黄,它可以根據(jù)不同的瀏覽器,達(dá)到顯示效果的統(tǒng)一孔飒。保證網(wǎng)頁架構(gòu)不變形的前提下灌闺,放心在不同瀏覽器渲染顯示樣式。

4.常見的meta標(biāo)簽
(1)定義和用法
<meta> 元素可提供有關(guān)頁面的元信息(meta-information)坏瞄,比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞桂对。
<meta> 標(biāo)簽位于文檔的頭部,不包含任何內(nèi)容鸠匀。<meta> 標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對蕉斜。
(2)一些常見的meta標(biāo)簽

<meta http-equiv="keywords" content="關(guān)鍵字1,關(guān)鍵字2,...">

<meta http-equiv="description" content="網(wǎng)頁描述">

<meta name="renderer" content="webkit|ie-comp|ie-stand">

<meta name="renderer" content="webkit">

<meta name="renderer" content="ie-comp">

<meta name="renderer" content="ie-stand">

<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://">

<meta http-equiv="pragram" content="no-cache">

<meta http-equiv="cache-control" content="no-cache, must-revalidate">

<meta http-equiv="expires" content="0">

<meta name="format-detection" content="telphone=no, email=no"/>

<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" />

<meta content="yes" name="apple-mobile-web-app-capable" />

<meta content="black" name="apple-mobile-web-app-status-bar-style" />

5.文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?
<!doctype>標(biāo)簽用來聲明文檔對象模型缀棍,用來告訴瀏覽器應(yīng)該使用哪種方式來解析渲染頁面宅此。嚴(yán)格模式就是使用<!doctype>標(biāo)簽來顯式聲明該用哪種方式來渲染頁面,混雜模式即不加<!doctype>標(biāo)簽爬范,允許瀏覽器使用自己的方式來渲染頁面父腕。
<!doctype html>即就是聲明使用HTML5來解析渲染頁面。

6.瀏覽器亂碼的原因是什么青瀑?如何解決
(1)亂碼產(chǎn)生的根本原因是你保存的編碼格式和瀏覽器解析時的解碼格式不匹配導(dǎo)致的璧亮。
(2)亂碼一般是英文以外的字符才會出現(xiàn)。
解決辦法:首頁斥难,在文件保存的時候你自己要清楚是用哪種編碼方式保存的枝嘶。如果你的文件是保存為utf-8格式,那么一定要在html 的 <head>里添加<meta charset="utf-8">哑诊,這句話的意思是告訴瀏覽器在打開這個頁面的時候不要去猜了躬络,直接用utf-8去解碼。 同理搭儒,如果你的文件保存為gbk格式穷当,一定在文件里添加<meta charset="gbk">提茁。

7.常見的瀏覽器有哪些,什么內(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等。

(2)Gecko內(nèi)核代表作品Mozilla FirefoxGecko是一套開放源代碼的朗伶、以C++編寫的網(wǎng)頁排版引擎弦撩。Gecko是最流行的排版引擎之一,僅次于Trident论皆。使用它的最著名瀏覽器有Firefox益楼、Netscape6至9。

(3)WebKit內(nèi)核代表作品Safari点晴、Chromewebkit 是一個開源項目偏形,包含了來自KDE項目和蘋果公司的一些組件,主要用于Mac OS系統(tǒng)觉鼻,它的特點(diǎn)在于源碼結(jié)構(gòu)清晰俊扭、渲染速度極快。缺點(diǎn)是對網(wǎng)頁代碼的兼容性不高坠陈,導(dǎo)致一些編寫不標(biāo)準(zhǔn)的網(wǎng)頁無法正常顯示萨惑。主要代表作品有Safari和Google的瀏覽器Chrome。

(4)Presto內(nèi)核代表作品OperaPresto是由Opera Software開發(fā)的瀏覽器排版引擎仇矾,供Opera 7.0及以上使用庸蔼。它取代了舊版Opera 4至6版本使用的Elektra排版引擎,包括加入動態(tài)功能贮匕,例如網(wǎng)頁或其部分可隨著DOM及Script語法的事件而重新排版姐仅。

8。列出常見的標(biāo)簽,并簡單介紹這些標(biāo)簽用在什么場景
html:我們頁面的總包商
head:頭部定義一些總體內(nèi)容,比如瀏覽器標(biāo)題,編碼格式,樣式文件引用
title:定義瀏覽器標(biāo)題
meta:定義關(guān)于 HTML 文檔的元信息,諸如例子中的編碼格式,IE渲染模式(可以解決大部分IE兼容問題)
link:鏈接外部資源,如上圖中鏈接瀏覽器標(biāo)題旁的小圖標(biāo),也經(jīng)常用來鏈接css樣式文件
style:在標(biāo)簽內(nèi)定義css樣式
body:我們?nèi)庋劭吹降膬?nèi)容顯示區(qū)域
script:在標(biāo)簽內(nèi)定義js代碼
br:換行符
h1~h6:不同字體大小的標(biāo)題標(biāo)簽(塊元素,什么是塊元素?下篇文章詳細(xì)介紹)
p:段落標(biāo)簽(塊元素)
hr:水平分割線(塊元素)
b:字體加粗(行元素,什么是行元素?下篇文章詳細(xì)介紹)
strong:字體加粗,同b標(biāo)簽(行元素)
blockquote:引用標(biāo)簽,如果你的頁面中需要引用一些文章內(nèi)容時,使用該標(biāo)簽(塊元素,細(xì)心的同學(xué)已經(jīng)發(fā)現(xiàn)了塊元素與行元素的一點(diǎn)區(qū)別了)
del:刪除標(biāo)簽,標(biāo)記廢除的內(nèi)容,通常用來標(biāo)記原價,而優(yōu)惠價則正常顯示(行元素)
ins:下劃線填寫標(biāo)簽,標(biāo)記可變的內(nèi)容,或需要輸入的內(nèi)容(行元素)
em:斜體標(biāo)簽,用來強(qiáng)調(diào)(行元素)
i:斜體標(biāo)簽,同em(行元素)
form:表單包裹標(biāo)簽,里面的內(nèi)容一般都是表單元素,通常結(jié)合table一并使用(塊元素)
table:表格標(biāo)簽(table比較特殊,單獨(dú)屬于table元素,效果與塊元素差不多)
thead:表格頭部
tbody:表格主體內(nèi)容部分
tr:表格行
th:表格單元格,一般用于顯示標(biāo)題,默認(rèn)加粗樣式
td:表格單元格,一般用于存放信息或輸入框
input:各類表單輸入元素,如上圖中的輸入框,單選框,復(fù)選框,隱藏的輸入框以及按鈕(行元素)
select:下拉框,比如用于選擇省市區(qū),民族等(行元素)
textarea:多行輸入框,一般提供給用戶輸入簡介,理由,多行文本等(行元素)
label:表單的提示信息,一般還用于包裹單選框,復(fù)選框使用,讓用戶點(diǎn)擊文字也能實(shí)現(xiàn)勾選
img:圖片標(biāo)簽,這個很簡單,就是引用一個圖片資源進(jìn)行展示
ul:無序列表標(biāo)簽,內(nèi)部只能是li標(biāo)簽(塊元素)
li:列表項內(nèi)容標(biāo)簽,包裹在ul中
dl:全稱definition list,定義列表,即有一個標(biāo)題,有一些解釋信息的標(biāo)簽,如上圖中的北京是標(biāo)題,下面兩行是解釋(塊元素)
dt:結(jié)合dl標(biāo)簽,一般用于顯示標(biāo)題
dd:結(jié)合dl標(biāo)簽,一般位于dt下面,用于解釋dt包裹的標(biāo)題內(nèi)容
div:最典型并常用的塊元素
span:最典型并常用的行元素

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末掏膏,一起剝皮案震驚了整個濱河市劳翰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌馒疹,老刑警劉巖佳簸,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異颖变,居然都是意外死亡生均,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進(jìn)店門腥刹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來马胧,“玉大人,你說我怎么就攤上這事衔峰∨寮梗” “怎么了?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵朽色,是天一觀的道長邻吞。 經(jīng)常有香客問我组题,道長葫男,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任崔列,我火速辦了婚禮梢褐,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘赵讯。我一直安慰自己盈咳,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布边翼。 她就那樣靜靜地躺著鱼响,像睡著了一般。 火紅的嫁衣襯著肌膚如雪组底。 梳的紋絲不亂的頭發(fā)上丈积,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天,我揣著相機(jī)與錄音债鸡,去河邊找鬼江滨。 笑死,一個胖子當(dāng)著我的面吹牛厌均,可吹牛的內(nèi)容都是我干的唬滑。 我是一名探鬼主播,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼晶密!你這毒婦竟也來了擒悬?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤惹挟,失蹤者是張志新(化名)和其女友劉穎茄螃,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體连锯,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡归苍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了运怖。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拼弃。...
    茶點(diǎn)故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖摇展,靈堂內(nèi)的尸體忽然破棺而出吻氧,到底是詐尸還是另有隱情,我是刑警寧澤咏连,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布盯孙,位于F島的核電站,受9級特大地震影響祟滴,放射性物質(zhì)發(fā)生泄漏振惰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一垄懂、第九天 我趴在偏房一處隱蔽的房頂上張望骑晶。 院中可真熱鬧,春花似錦草慧、人聲如沸桶蛔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽仔雷。三九已至,卻和暖如春舔示,著一層夾襖步出監(jiān)牢的瞬間碟婆,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工斩郎, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留脑融,地道東北人。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓缩宜,卻偏偏與公主長得像肘迎,于是被迫代替她去往敵國和親甥温。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評論 2 345

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