HTML5與CSS3課堂
導(dǎo)語
從今日起計(jì)劃推出系列課程《HTML5和CSS課程》。內(nèi)容來源于《HTML5與CSS3基礎(chǔ)教程（第8版）》。如果你喜歡看書，請(qǐng)購買正版書籍。以下內(nèi)容均來源于對(duì)該本書的解讀。
基本的 HTML
每個(gè)網(wǎng)頁都由如下代碼構(gòu)成的。所有的不管簡單還是復(fù)雜的頁面都離不開如下的及部分。
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>我是頁面標(biāo)題</title>
</head>
<body>
????我是頁面內(nèi)容
</body>
</html>
每個(gè)網(wǎng)頁都包含 DOCTYPE、 html、 head 和body 元素，它們是網(wǎng)頁的基礎(chǔ)。在這個(gè)頁面中，可以定制的內(nèi)容包括兩項(xiàng)，一是賦予 lang 屬性的語言代碼，二是 <title> 和 </title> 之間的文字，三是body之間的內(nèi)容（包含文字和代碼）。
HTML 使用 < 和 > 包圍 HTML 標(biāo)簽。開始標(biāo)簽（如 <head>）用于標(biāo)記元素的開始，結(jié)束標(biāo)簽（如 </head>）用于標(biāo)記元素的結(jié)束。有的元素沒有結(jié)束標(biāo)簽，如 meta。在html中沒有結(jié)束標(biāo)簽的元素少之又少，后面會(huì)一一介紹。
01
網(wǎng)頁的頂部和頭部
前面提到，頁面內(nèi)容位于主體部分，那么其他的代碼有什么作用呢？實(shí)際上， <body>開始標(biāo)簽以上的內(nèi)容都是為瀏覽器和搜索引 擎 準(zhǔn) 備 的。 <!DOCTYPE html> 部 分（ 稱 為DOCTYPE）告訴瀏覽器這是一個(gè) HTML5 頁面。 DOCTYPE 應(yīng)該始終位于頁面的第一行。接下來是 html 元素，它包著頁面的其余部 分， 即 <html> 和 </html> 結(jié) 束標(biāo)簽（表示頁面的結(jié)尾）之間的內(nèi)容。在這里可以為網(wǎng)頁指定其他語言，比如css，js或者其他語言。再接下來是文檔的頭部，即 <head> 和</head> 之間的區(qū)域。 <meta charset="utf-8"/> 。 主 體 前 面 的 代 碼中，有一部分是用戶可見的，即 <title> 和</title> 之間的文本。這些文本會(huì)出現(xiàn)在瀏覽器標(biāo)簽頁中，對(duì)于某些瀏覽器，這些文本還會(huì)出現(xiàn)在瀏覽器窗口的頂部，作為網(wǎng)頁的標(biāo)題。此外，這些文本通常還是瀏覽器書簽的默認(rèn)名稱，它們對(duì)搜索引擎來說也是非常重要的信息。
02
網(wǎng)頁的主體內(nèi)容
接下來為頁面添加一些內(nèi)容。
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>我是頁面標(biāo)題</title>
</head>
<body>
????<h1>我是h1標(biāo)簽</h1>
????<img?src="logo.jpg"?alt="我是圖片"?/>
????<p>
????????前端全棧開發(fā)，面向前端愛好者提供前端最新信息，React，Antd，小程序等一列教程，同時(shí)也提供Java開發(fā)，交流經(jīng)驗(yàn)?；セ莼ダ?，共同學(xué)習(xí)進(jìn)步。
????</p>
</body>
</html>
下圖是展示效果：
上面的代碼中包含了本章開頭提到的三種成分：文本內(nèi)容、對(duì)其他文件的引用（圖像的 src 值和鏈接的 href 值）及標(biāo)記。使用瀏覽器查看網(wǎng)頁時(shí)，不會(huì)顯示包圍文本內(nèi)容的標(biāo)記。不過這些標(biāo)記是非常有用的，我們就是使用它們來描述內(nèi)容的。例如， <p> 標(biāo)記用于表示段落的開始。
代碼的縮進(jìn)與內(nèi)容在瀏覽器中的顯示效果沒有任何關(guān)系（但是pre 元素是一個(gè)例外）。不過，對(duì)嵌套在父元素中的代碼進(jìn)行縮進(jìn)是一種慣例，這樣我們?cè)诰帉懞烷喿x代碼時(shí)就會(huì)更容易看出元素之間的層級(jí)關(guān)系。
HTML 提供了很多這樣的元素。上面的例子演示了幾種最為常見的元素： h1、 img 和 p。每個(gè)元素都有各自的含義，例如， h1 是標(biāo)題， img是圖像。在這里不會(huì)對(duì)示例代碼做過多的講解。
好了，今天的課程就到這里。
