html 初學者 第一篇

此次從頭開始梳理一些自認爲比較重要的點和易忘點

文檔類型

!DOCTYPE html, 記得第一次面試的時候,人就問我知道html文檔第一行要寫什麼嗎?有什麼做用.乖乖的還好我認識這麼個英文單詞,那會纔剛開始接觸前端這些東西,我就跑去面試了.言歸正傳: !DOCTYPE html 字面意思Document type: html 5. 聲明文風當類型html 5頁面.

meta 單標籤

meta 被稱爲網頁的元數據, 經過meta向瀏覽器傳遞一些該網頁的基本數據(初學者先從基本學起,因此只敘述一些簡單的)
這裏面有些常規的數據, <meta charset="utf-8", charset 理解爲:character(字符) set(串), 通常咱們都會書寫utf-8, 這是個支持中文的"萬國碼", 支持200多個國家的語言顯示.
可能剛開始編寫的時候,你們開頭都用的是快捷鍵輸入,所以每每會漏掉keywords 和decription的書寫, 這個能夠從字面意思理解, key words 主要的詞語(搜索瀏覽器的關鍵詞).description:描述,對於該網頁的一些描述. 這個是爲了方便客戶瞭解和搜索網頁的.

list 列表

由於列表也是塊, 因此不少時候ul>li 用來取代div的塊狀佈局
這裏有3個不一樣的列表:

unorder list

無序列表用於一些內容類似,結構相仿,佈局接近的內容.好比說:淘寶上面商品的成排顯示,就是用的ul>li方便程序員寫代碼,只要設置一個ul>li格式就能夠給全部的內容用.

order list

有序列表除了和ul同樣的適用範圍,和每一個區域的內容是由前後關係的.(這裏和seo優化有關, 能夠看看另外一篇文章)
order list 裏面有 type屬性,用來更改不一樣的排序字母(羅馬字:I,i 大小寫字母A,a eg: type="A"),還有start(開始) start="3", 那麼這個有序列表就開始從3數起

definition list

通常用於網頁最下面的佈局的信息填寫等.

特殊符號的使用

記得後面加上;, 不少同窗會發現即便不加分號也能夠顯示,這是因爲瀏覽器的 fail silence, 即便錯誤瀏覽器也會去猜你要表達的意思.

掌握好每一個元素的類型也很重要

html元素分爲塊元素和行內元素(行內元素分爲可替換行內聯元素和不可替換內聯元素)
這裏具體說說塊元素和行內元素
塊元素:
div h ol ul li dl dt dd p blockquote pre
行內元素:
a b strong em i span video audio img

行內元素並列成一行,塊元素獨佔一整行.
這裏有兩個特殊的P元素(不能聽任何塊級元素)和a元素(能夠放塊元素)
那麼有些人就是試了試,說:我放了仍是顯示出來了.你會發現由於fail silence這個機制, 本來的代碼是:

<p>
    <div></div>
</p>

變成了

<p></p>
<div></div>
<p></p>

瀏覽器說不讓你作,就是不讓你作. 再怎麼花裏胡哨,瀏覽器都給你改了去.