什么是HTML?
說起前端開發(fā)自然要從HTML說起了，正是一個一個的HTML頁面搭建起了如今的網(wǎng)頁世界，HTML本身并不是一種真正編程語言，而是定義內(nèi)容結(jié)構(gòu)的標(biāo)記語言，并沒有傳統(tǒng)C語言和Java所具有的變量、循環(huán)等等這些。HTML文件就是以.html結(jié)尾的文件，它可以運(yùn)行在瀏覽器上，由瀏覽器來解析。
你可以在桌面右鍵新建一個txt文件，復(fù)制粘貼如下代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>我的第一個web頁面</title>
</head>
<body>
<p>這是一個段落</p>
<img src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" alt="簡書LOGO">
</body>
</html>
之后將文件擴(kuò)展名改為html，通過瀏覽器打開就能看到以下結(jié)果了。
HTML元素
HTML由各種各樣的元素組成，如下就是HTML元素:
<p>這是一個段落</p>
<img src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" alt="簡書LOGO">
上面兩個元素都是HTML元素：
- 第一個被稱為閉合元素,閉合元素有著開始標(biāo)簽
<p>、閉合標(biāo)簽</p>以及內(nèi)容這是一個段落，他們被統(tǒng)稱為一個閉合元素； - 第二個被稱空元素，它沒有
</img>閉合標(biāo)簽，也沒有內(nèi)部內(nèi)容。因為img元素不包含內(nèi)容是有效果的，它的作用是向其所在的位置嵌入一個圖像。
HTML元素中的屬性
這里我們看在上一小節(jié)中的第二行代碼：
<img src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" alt="簡書LOGO">
通過閱讀上面我們已經(jīng)知道了img是空元素，那么img標(biāo)簽中的src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" 和alt="簡書LOGO"是什么呢？這些就是HTMl元素中的屬性，舉例來說，當(dāng)img標(biāo)簽中含有src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png"這段代碼時，就會在瀏覽器中顯示簡書的LOGO圖，src就是設(shè)置img標(biāo)簽的顯示內(nèi)容，alt則是當(dāng)瀏覽器加載不出圖片時，代替圖片顯示的文字。
另外，每個不同的標(biāo)簽都會有不同的屬性，需要我們不斷地練習(xí)和熟悉。
使用HTML的正確姿勢
接下來我們回到最開始的那一段代碼，并逐行解析：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>我的第一個web頁面</title>
</head>
<body>
<p>這是一個段落</p>
<img src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" alt="簡書LOGO">
</body>
</html>
-
<!DOCTYPE html>和英文doctype的含義一樣，這一行代表了該文檔的類型為html，并且這行代碼應(yīng)該始終位于文檔的最上面。 -
<html lang="zh"></html>——html元素包含了整個頁面的內(nèi)容，有時也被稱作根元素。該元素屬性lang代表頁面語言，當(dāng)你設(shè)置這個屬性時，瀏覽器就會默認(rèn)該頁面為你設(shè)置的語言，此時瀏覽器就可以做很多事情，比如當(dāng)你的地區(qū)使用語言和你設(shè)置的語言不同時，就可以提醒你需不需要翻譯。 -
<head> </head>——head元素包含了你想要添加的內(nèi)容，但并不會被用戶看到，這里面包括像想被搜索引擎搜索到的關(guān)鍵字和頁面描述，CSS樣式表和字符編碼聲明等等。 -
<meta charset="utf-8">——當(dāng)前的這個meta元素定義了頁面使用的字符集為UTF-8；meta元素也可提供有關(guān)頁面的元信息，比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞；meta標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容；meta標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對。關(guān)于meta的具體使用，請關(guān)注本博客的后續(xù)內(nèi)容。 -
<title></title>——title元素設(shè)置了頁面的標(biāo)題，標(biāo)題顯示在瀏覽器標(biāo)簽頁上，而且在你將網(wǎng)頁添加到收藏夾或喜愛中時將作為默認(rèn)名稱。 -
<body></body>—body元素，這個元素作為你的畫布和寫作空間，不管是文本，圖像，視頻，游戲，可播放的音軌或是其他內(nèi)容，都可以顯示在網(wǎng)頁上。
常用標(biāo)簽
在這里將會對一些常用的標(biāo)簽進(jìn)行詳細(xì)的講解。
關(guān)于文本
標(biāo)題
標(biāo)題就像一本書，它有它的書名，每本書會有章節(jié)，其中書名的標(biāo)題就像<h1>一級標(biāo)題</h1>，章節(jié)就像<h2>二級標(biāo)題</h2>。HTML有6種級別的標(biāo)題<h1>-<h6>，就像下面一樣：
<h1>一級標(biāo)題</h1>
<h2>二級標(biāo)題</h2>
<h3>三級標(biāo)題</h3>
<h4>四級標(biāo)題</h4>
<h5>五級標(biāo)題</h5>
<h6>六級標(biāo)題</h6>
段落
<p>標(biāo)簽代表著一個段落，就像上面的代碼一樣：
<p>這是一個段落</p>
列表
在web中，許多內(nèi)容都是由列表來呈現(xiàn)，列表又分為無序列表( unordered lists)和有序列表
(ordered lists):
有序列表:
<ol>
<li>文章一</li>
<li>文章二</li>
<li>文章三</li>
</ol>
無序列表:
<ul>
<li>簡·愛</li>
<li>鋼鐵是怎樣煉成的</li>
<li>紅樓夢</li>
</ul>
關(guān)于鏈接
鏈接可以進(jìn)行頁面跳轉(zhuǎn)，首先創(chuàng)建一個a標(biāo)簽，將顯示內(nèi)容放入a標(biāo)簽中：
<a>簡書官網(wǎng)</a>
之后向a標(biāo)簽添加href屬性，并將href屬性的值設(shè)置為http://www.itdecent.cn/：
<a href="http://www.itdecent.cn/">簡書官網(wǎng)</a>
這樣通過點擊<a>標(biāo)簽就可以跳轉(zhuǎn)頁面，進(jìn)入簡書官網(wǎng)了。
結(jié)束
通過上面的學(xué)習(xí)，可以搭建一個簡單的頁面，像這樣：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>簡書</title>
</head>
<body>
<h1>簡書</h1>
<img src="http://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" alt="簡書LOGO">
<ul>
<li>
<a href="http://www.itdecent.cn/">發(fā)現(xiàn)</a>
</li>
<li>
<a href="http://www.itdecent.cn/subscriptions#/timeline">關(guān)注</a>
</li>
<li>
<a href="http://www.itdecent.cn/notifications#/comments">消息</a>
</li>
</ul>
<ol>
<li>從HTML開始</li>
<li>HTML表格</li>
<li>HTML表單</li>
<ol>
</body>
</html>
繼續(xù)學(xué)習(xí)
想繼續(xù)學(xué)習(xí)有關(guān)HTML的知識，可以通過下面的網(wǎng)站進(jìn)行學(xué)習(xí)：
