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