關(guān)于HTML
百度百科里是這么說的：超文本標(biāo)記語言，即HTML（Hypertext Markup Language），是用于描述網(wǎng)頁文檔的一種標(biāo)記語言。
為什么叫用于“描述”網(wǎng)頁文檔的“標(biāo)記”語言呢？
簡單地說，它不像Java，C++等程式語言，而是通過標(biāo)記（也稱標(biāo)簽）來表示一個(gè)網(wǎng)頁的結(jié)構(gòu)與內(nèi)容，它的語法非常簡單，只是由各種不同的標(biāo)記組合而成，因此這類語言的學(xué)習(xí)方式主要靠積累，而非程式語言般靠理解來學(xué)習(xí)。
HTML的構(gòu)成
HTML文件的結(jié)構(gòu)通常由以下幾個(gè)部分構(gòu)成：
文檔類型聲明（doctype）
網(wǎng)頁頭部信息（head）
網(wǎng)頁主體內(nèi)容（body）
一個(gè)最簡單的網(wǎng)頁文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
網(wǎng)頁內(nèi)容
</body>
</html>
文檔類型
如果你了解過HTML，你可能會(huì)發(fā)現(xiàn)很多網(wǎng)頁的頭部會(huì)有這么一段又臭又長的東西：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">這到底是什么呢？這就是文檔類型的聲明了。XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional以及 Frameset，為了兼容性與開發(fā)方便，我們一般使用Transitional。
但如果你比較細(xì)心，你會(huì)發(fā)現(xiàn)上面最簡單的網(wǎng)頁文件代碼只使用了這么一小段代碼：
<!DOCTYPE html>
這段代碼是HTML5文檔類型的聲明方式，而且是向后兼容的。
元素
塊元素（block）
div , p , h1~h6 , ul , li , dt , dd , dl , form, section , article , nav , aside...
特點(diǎn)：在文檔流中默認(rèn)占據(jù)整行的位置。
內(nèi)聯(lián)元素（inline）
span , em , strong , label , a , img , input , button , select , var , del ...
特點(diǎn)： 在文檔流中默認(rèn)一行可以展示多個(gè)內(nèi)聯(lián)元素。
嵌套規(guī)則
塊元素可以嵌套所有內(nèi)聯(lián)元素，內(nèi)聯(lián)元素不能嵌套塊元素。
錯(cuò)誤的寫法：
<span><div>內(nèi)容</div></span>
盒子模型（Box Model）
無論是塊元素，還是內(nèi)斂元素，在HTML中都是一個(gè)“盒子”，這個(gè)盒子包含了以下屬性：
外邊距（Margin）
邊框（Border）
內(nèi)邊距（Padding）
內(nèi)容（Content）
加載中...
可以看出，在W3C標(biāo)準(zhǔn)模式下的CSS盒子模型中，盒子的內(nèi)容是不包含邊框跟內(nèi)邊距的，但在IE的Quirks（怪異）模式下，盒子的內(nèi)容包含了邊框與內(nèi)邊距，因此相同的代碼在不同的瀏覽器中查看，看到的布局可能的是完全不同的，這也是造成網(wǎng)頁瀏覽器差異的一個(gè)重要原因。
一種很簡單卻實(shí)用的解決方式是，CSS中的padding及border屬性不要同width及height屬性出現(xiàn)在同一個(gè)盒子上，而是將其分解在父子兩個(gè)元素上，便可以避免實(shí)用CSS Hack而解決瀏覽器之間的差異問題。
免費(fèi)學(xué)習(xí)課堂
- 免費(fèi)推廣知識(shí)
- 競價(jià)推廣知識(shí)
- 新媒體營銷知識(shí)
- 網(wǎng)站運(yùn)營知識(shí)
- 網(wǎng)站設(shè)計(jì)知識(shí)
- 網(wǎng)站建設(shè)知識(shí)
- Web前端知識(shí)
- 軟文營銷知識(shí)
- 網(wǎng)站策劃知識(shí)
- 整合營銷
推薦文章
- 織夢(mèng)dedecms漏洞修復(fù)大全含任意文件
- 整頓微信公眾號(hào)過度營銷 對(duì)嚴(yán)重違
- SEO優(yōu)化過程要避免什么？
- 網(wǎng)站空間被掛馬的原因原因及解決
- 2016企業(yè)該如何運(yùn)用互聯(lián)網(wǎng)進(jìn)行營銷
- WEB前端項(xiàng)目開發(fā)中需注意的細(xì)節(jié)
- 低價(jià)網(wǎng)站建設(shè)的危害有哪些？
- 如何詳細(xì)的分析你網(wǎng)站的競爭對(duì)手
- 網(wǎng)站設(shè)計(jì)中四個(gè)常犯的錯(cuò)誤
- 如何搭配網(wǎng)站設(shè)計(jì)中的色彩？
Web前端——HTML文檔與盒子模型
來源：北京匯仁智杰科技有限公司 時(shí)間：2016-11-08 點(diǎn)擊： 次
推薦文章
- 織夢(mèng)dedecms漏洞修復(fù)大全含任意文件2016-09-05
- 整頓微信公眾號(hào)過度營銷 對(duì)嚴(yán)重違2016-01-26
- SEO優(yōu)化過程要避免什么？2016-01-26
- 網(wǎng)站空間被掛馬的原因原因及解決2016-01-26
- 2016企業(yè)該如何運(yùn)用互聯(lián)網(wǎng)進(jìn)行營銷2016-01-26
- WEB前端項(xiàng)目開發(fā)中需注意的細(xì)節(jié)2016-01-26
- 低價(jià)網(wǎng)站建設(shè)的危害有哪些？2016-01-15
- 如何詳細(xì)的分析你網(wǎng)站的競爭對(duì)手2015-06-10
- 網(wǎng)站設(shè)計(jì)中四個(gè)常犯的錯(cuò)誤2015-01-22
- 如何搭配網(wǎng)站設(shè)計(jì)中的色彩？2015-01-22
