目錄
認(rèn)識head標(biāo)簽
了解HTML的代碼注釋
語義化，讓你的網(wǎng)頁更好的被搜索引擎理解
body>標(biāo)簽，網(wǎng)頁上顯示的內(nèi)容放在這里
開始學(xué)習(xí)<p>標(biāo)簽，添加段落
了解<hx>標(biāo)簽，為你的網(wǎng)頁添加標(biāo)題
加入強調(diào)語氣，使用<strong>和<em>標(biāo)簽
加入強調(diào)語氣，使用<strong>和<em>標(biāo)簽
使用<span>標(biāo)簽為文字設(shè)置單獨樣式
認(rèn)識head標(biāo)簽
下面我們來了解一下<head>標(biāo)簽的作用。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。
下面這些標(biāo)簽可用在 head 部分：
<head>
? ? <title>...</title>
? ? <meta>
? ? <link>
? ? <style>...</style>
? ? <script>...</script>
</head>
<title>標(biāo)簽：在和標(biāo)簽之間的文字內(nèi)容是網(wǎng)頁的標(biāo)題信息，它會出現(xiàn)在瀏覽器的標(biāo)題欄中。網(wǎng)頁的title標(biāo)簽用于告訴用戶和搜索引擎這個網(wǎng)頁的主要內(nèi)容是什么，搜索引擎可以通過網(wǎng)頁標(biāo)題，迅速的判斷出網(wǎng)頁的主題。每個網(wǎng)頁的內(nèi)容都是不同的，每個網(wǎng)頁都應(yīng)該有一個獨一無二的title。
例如：
<head>
? ? <title>hello world</title>
</head>
<title>標(biāo)簽的內(nèi)容“hello world”會在瀏覽器中的標(biāo)題欄上顯示出來，如下圖所示：
了解HTML的代碼注釋
什么是代碼注釋？代碼注釋的作用是幫助程序員標(biāo)注代碼的用途，過一段時間后再看你所編寫的代碼，就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發(fā)網(wǎng)頁代碼。
語法：
<!--注釋文字 -->
如：右邊編輯器的代碼的第 8、12 行都是，但是你會發(fā)現(xiàn)注釋代碼是不會在結(jié)果窗口中顯示出來的。
語義化，讓你的網(wǎng)頁更好的被搜索引擎理解
大家介紹，學(xué)習(xí)這一章節(jié)的時候要記住學(xué)習(xí)html標(biāo)簽過程中，主要注意兩個方面的學(xué)習(xí)：標(biāo)簽的用途、標(biāo)簽在瀏覽器中的默認(rèn)樣式。
標(biāo)簽的用途：我們學(xué)習(xí)網(wǎng)頁制作時，常常會聽到一個詞，語義化。那么什么叫做語義化呢，說的通俗點就是：明白每個標(biāo)簽的用途（在什么情況下使用此標(biāo)簽合理）比如，網(wǎng)頁上的文章的標(biāo)題就可以用標(biāo)題標(biāo)簽，網(wǎng)頁上的各個欄目的欄目名稱也可以使用標(biāo)題標(biāo)簽。文章中內(nèi)容的段落就得放在段落標(biāo)簽中，在文章中有想強調(diào)的文本，就可以使用 em 標(biāo)簽表示強調(diào)等等。
講了這么多語義化，但是語義化可以給我們帶來什么樣的好處呢？
1. 更容易被搜索引擎收錄。
2. 更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容。
在后面的章節(jié)會帶領(lǐng)大家學(xué)習(xí)了解html中每個標(biāo)簽的語義（用途）。
body>標(biāo)簽，網(wǎng)頁上顯示的內(nèi)容放在這里
還記得body標(biāo)簽嗎，在上一章節(jié)我們簡單介紹過：在網(wǎng)頁上要展示出來的頁面內(nèi)容一定要放在body標(biāo)簽中。如下圖是一個新聞文章的網(wǎng)頁。
在瀏覽器中的顯示效果：
開始學(xué)習(xí)<p>標(biāo)簽，添加段落
如果想在網(wǎng)頁上顯示文章，這時就需要<p>標(biāo)簽了，把文章的段落放到<p>標(biāo)簽中。
語法：
<p>段落文本</p>
注意一段文字一個<p>標(biāo)簽，如在一篇新聞文章中有3段文字，就要把這3個段落分別放到3個<p>標(biāo)簽中。如下圖所示。
<p>標(biāo)簽的默認(rèn)樣式，可以在上圖中看出來，段前段后都會有空白，如果不喜歡這個空白，可以用css樣式來刪除或改變它。
了解<hx>標(biāo)簽，為你的網(wǎng)頁添加標(biāo)題
文章的段落用<p>標(biāo)簽，那么文章的標(biāo)題用什么標(biāo)簽?zāi)?？在本?jié)我們將使用<hx>標(biāo)簽來制作文章的標(biāo)題。
標(biāo)題標(biāo)簽一共有6個，h1、h2、h3、h4、h5、h6分別為一級標(biāo)題、二級標(biāo)題、三級標(biāo)題、四級標(biāo)題、五級標(biāo)題、六級標(biāo)題。并且依據(jù)重要性遞減。<h1>是最高的等級。
語法：
<hx>標(biāo)題文本</hx>?(x為1-6)
文章的標(biāo)題前面已經(jīng)說過了，可以使用標(biāo)題標(biāo)簽，另外網(wǎng)頁上的各個欄目的標(biāo)題也可使用它們。
注意：因為h1標(biāo)簽在網(wǎng)頁中比較重要，所以一般h1標(biāo)簽被用在網(wǎng)站名稱上。騰訊網(wǎng)站就是這樣做的。如：<h1>騰訊網(wǎng)</h1>
h1-h6標(biāo)簽的默認(rèn)樣式：
h1標(biāo)簽字號最大，h2標(biāo)簽字號相對h1要小，以此類推h6標(biāo)簽的字號最小。
加入強調(diào)語氣，使用<strong>和<em>標(biāo)簽
???????有了段落又有了標(biāo)題，現(xiàn)在如果想在一段話中特別強調(diào)某幾個文字，這時候就可以用到<em>或<strong>標(biāo)簽。
但兩者在強調(diào)的語氣上有區(qū)別:?<em>表示強調(diào)，?<strong>表示更強烈的強調(diào)。并且在瀏覽器中 默認(rèn)用斜體表示， 用粗體表示。兩個標(biāo)簽相比，目前國內(nèi)前端程序員更喜歡使用表示強調(diào)。
語法：
<em>需要強調(diào)的文本</em>??
<strong>需要強調(diào)的文本</strong>
如，在網(wǎng)上商城中，某產(chǎn)品的打折后的價格是需要強調(diào)的。如下圖。
使用<span>標(biāo)簽為文字設(shè)置單獨樣式
這一小節(jié)講解標(biāo)簽，我們對<em>、<strong>、<span>這三個標(biāo)簽進(jìn)行一下總結(jié)：
1.?<em>和<strong>標(biāo)簽是為了強調(diào)一段話中的關(guān)鍵字時使用，它們的語義是強調(diào)。
2.?<span>標(biāo)簽是沒有語義的，它的作用就是為了設(shè)置單獨的樣式用的。
如果現(xiàn)在我們想把上一小節(jié)的第一段話“美國夢”三個字設(shè)置成blue（藍(lán)色），但注意不是為了強調(diào)“美國夢”，而只是想為它設(shè)置和其它文字不同的樣式（并不想讓屏幕閱讀器對“美國夢”這三個字加重音讀出），所以這樣情況下就可以用到標(biāo)簽了。
如下面例子：
1922年的春天，一個想要成名名叫<em>尼克?卡拉威</em>（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，<strong>股票</strong>飛漲的時代。為了追尋他的<span>美國夢</span>，他搬入紐約附近一海灣居住。
語法：
<span>文本</span>
把“美國夢”設(shè)置為藍(lán)色
1. 在右部編輯器中的第13行對“美國夢”文本加上<span>標(biāo)簽。
2. 在第8行輸入color:blue;，為<span>元素設(shè)置文本顏色為藍(lán)色。
