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:最典型并常用的行元素