網(wǎng)頁由html,css,js構(gòu)成.
html是結(jié)構(gòu)層,css是表現(xiàn)層,js是行為層.
- 打個比方:形容一個人,人的身體就是html,不管人的外表或內(nèi)在怎么樣,都是掛載在這個人上的,人沒了就什么都沒了,對于網(wǎng)頁來說,沒有html就什么都沒有了.
- css表示著這個人的外貌,衣著等等.網(wǎng)頁好不好看取決于css.
- js表示這個人的內(nèi)在美或者這個人的學(xué)識,技巧等等. 網(wǎng)頁里的各種功能都是js決定的.
html經(jīng)歷過許多版本,目前基本已經(jīng)普及了html5就是我們說的h5頁面.
html4或者之前的版本基本的開頭都是如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
而在我開始學(xué)習(xí)的時候已經(jīng)是h5了,所以我們只需要在開頭寫下
<!doctype html>
這樣就表示這個頁面是html5頁面了,方便了許多
網(wǎng)頁里的標(biāo)簽除了上面這個聲明,都是層層嵌套的,head里寫各種網(wǎng)頁的設(shè)置,引入的樣式,插件等等(這個之后css,js里會講)
標(biāo)簽必須閉合
<html></html> <body></body>
會有單標(biāo)簽 比如
<input type="text" /> <br />
這樣的標(biāo)簽 只要在后面加一個/即可,這個不是強(qiáng)制性的,但是最好加上,養(yǎng)成好習(xí)慣.
標(biāo)簽分為行內(nèi)標(biāo)簽,塊標(biāo)簽
舉個例子: div是塊標(biāo)簽,span是行內(nèi)標(biāo)簽
寫在頁面里div會獨(dú)占一行,span會在一行排下去
塊標(biāo)簽對應(yīng)css樣式里的 display:block;
行內(nèi)標(biāo)簽對應(yīng) display:inline;
css里可以覆蓋這個設(shè)置
雖然我們可以修改這個,但是盡量如果沒有特殊需求,還是盡量用適合的標(biāo)簽
html5帶來了許多新的標(biāo)簽,主要目的是使標(biāo)簽用的盡量語義化
比如之前任何一個塊標(biāo)簽我們都可以用div,新增的 header,footer,section可以使頁面更加語義化,
把header,footer改成div標(biāo)簽也不會錯,只是這樣寫會更好,這樣會便于搜索引擎的抓取(我也是聽說的,具體真不知道什么原理),這里涉及一個seo這個名詞,我是不懂的...
講一下盒子模型,這個是前端面試基本都會考的,理解一下就好了
padding和margin都屬于這個div但是padding的顏色是div的背景顏色,margin是一個透明的東西,代表這個div與其他標(biāo)簽的距離
(后面css會將一個box-sizing屬性,會修改這個標(biāo)簽的所屬地盤,到時候具體講吧,這么講講不通)
盒子模型再舉一個例子吧: 你淘寶買東西收到快遞,基本上都是一個盒子,紙殼箱子就是border,你買的東西就是這個內(nèi)容,為了防止東西碎掉會填充一些泡沫什么的,泡沫所填充的空間就是padding,你把快遞盒子放到房間角落,但是快遞盒子不想家里的小孩碰,距離小孩的距離就是margin.
常用塊標(biāo)簽有:div,p,h1,h2...h6,li
常用內(nèi)聯(lián)標(biāo)簽有:span,input,strong
h5標(biāo)簽列表
一時只能想起來這么多了...內(nèi)聯(lián)標(biāo)簽沒有高度,內(nèi)容有多少,它就占多少,padding會讓它占更多位置,就是它的內(nèi)增高.有一個例外就是img標(biāo)簽,他雖然是內(nèi)聯(lián)標(biāo)簽但是他有高度,他就是行內(nèi)塊標(biāo)簽,display:inline-block;行內(nèi)塊標(biāo)簽雖然會在一行排下去,但是他有高度
==================================
如何創(chuàng)建一個html,很簡單 新建一個文本文檔,把后綴改為html,這個文件就是html,
