网页结构 盒模型
HTML是個(gè)什么鬼？
前端開(kāi)發(fā)人員要想和瀏覽器溝通，就要用到瀏覽器才能夠識(shí)別的語(yǔ)言（HTML超文本標(biāo)記語(yǔ)言），所以他是一門瀏覽器能夠識(shí)別的語(yǔ)言。是一種由標(biāo)簽組成的超文本標(biāo)記語(yǔ)言，而非編程語(yǔ)言。一個(gè)html文檔就是一個(gè)網(wǎng)頁(yè)。
什么是html標(biāo)簽?zāi)?#xff1f;
?HTML標(biāo)記標(biāo)簽通常被稱為HEML標(biāo)簽，他是由尖括號(hào)組成的關(guān)鍵詞如<html>。一般情況下標(biāo)簽是成對(duì)出現(xiàn)的，第一個(gè)開(kāi)始，第二個(gè)結(jié)束，比如<html></html>。標(biāo)簽必須閉合，單標(biāo)簽加“/”閉合；
Html文檔 = 網(wǎng)頁(yè)？
答案是肯定的，html文檔用來(lái)描述網(wǎng)頁(yè)，文檔中包含html標(biāo)簽。但是在瀏覽器中是不會(huì)顯示html標(biāo)簽的，而是用標(biāo)簽來(lái)解釋頁(yè)面的內(nèi)容。
網(wǎng)頁(yè)主題的解讀
<!doctype html> <!--定義文檔的類型為html--><html> <!--定義html文檔--><head><title></title> <!--定義文檔的標(biāo)題--></head><body> <--!定義文檔的主題--> </body></html>什么是CSS樣式？
Cascading style sheets:層疊樣式表，其語(yǔ)法由兩部分組成，選擇器 一條及多條聲明。
例如?
div { width:100px; height:200px; background-color:green;}??? div就是選擇器 width:100px就是聲明 width是屬性 100px是值
行內(nèi)樣式與內(nèi)部樣式
<div style="width:100px;height:100px;background:red;">這是行內(nèi)樣式</div>#寫在單個(gè)標(biāo)簽里 !doctype html> <html> <head><meta charset="UTF-8"><title></title> </head> <body> <style type="text/css"> div{width:100px;height:100px;background:red;} #內(nèi)部樣式，他是寫在style標(biāo)簽里面的，可以寫多條。 </style> <div></div> </body> </html>
盒模型
盒模型也叫css框模型。其中元素框中心的是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。
內(nèi)邊距呈現(xiàn)了元素的背景。
內(nèi)邊距的邊緣是邊框。
邊框以外是外邊距，外邊距默認(rèn)是透明的因此不會(huì)遮擋其后面的任何元素。
總結(jié)
- 上一篇： Web前端体系的脉络结构
- 下一篇： box-sizing -- 盒模型