1.語(yǔ)義化，讓你的網(wǎng)頁(yè)更好的被搜索引擎理解
在這一章節(jié)我們要開(kāi)始把網(wǎng)頁(yè)中常用到的標(biāo)簽一 一向大家介紹，學(xué)習(xí)這一章節(jié)的時(shí)候要記住學(xué)習(xí)html標(biāo)簽過(guò)程中，主要注意兩個(gè)方面的學(xué)習(xí)：標(biāo)簽的用途、標(biāo)簽在瀏覽器中的默認(rèn)樣式崖技。
標(biāo)簽的用途：我們學(xué)習(xí)網(wǎng)頁(yè)制作時(shí)逻住，常常會(huì)聽(tīng)到一個(gè)詞，語(yǔ)義化迎献。那么什么叫做語(yǔ)義化呢瞎访，說(shuō)的通俗點(diǎn)就是：明白每個(gè)標(biāo)簽的用途（在什么情況下使用此標(biāo)簽合理）比如，網(wǎng)頁(yè)上的文章的標(biāo)題就可以用標(biāo)題標(biāo)簽吁恍，網(wǎng)頁(yè)上的各個(gè)欄目的欄目名稱也可以使用標(biāo)題標(biāo)簽扒秸。文章中內(nèi)容的段落就得放在段落標(biāo)簽中，在文章中有想強(qiáng)調(diào)的文本冀瓦，就可以使用 em 標(biāo)簽表示強(qiáng)調(diào)等等伴奥。
講了這么多語(yǔ)義化，但是語(yǔ)義化可以給我們帶來(lái)什么樣的好處呢翼闽？
- 更容易被搜索引擎收錄拾徙。
- 更容易讓屏幕閱讀器讀出網(wǎng)頁(yè)內(nèi)容。
在后面的章節(jié)會(huì)帶領(lǐng)大家學(xué)習(xí)了解html中每個(gè)標(biāo)簽的語(yǔ)義（用途）感局。
單擊提交按鈕進(jìn)行下一小節(jié)的學(xué)習(xí)尼啡！
2.<body>標(biāo)簽，網(wǎng)頁(yè)上顯示的內(nèi)容放在這里
還記得body標(biāo)簽嗎询微，在上一章節(jié)我們簡(jiǎn)單介紹過(guò)：在網(wǎng)頁(yè)上要展示出來(lái)的頁(yè)面內(nèi)容一定要放在body標(biāo)簽中崖瞭。如下圖是一個(gè)新聞文章的網(wǎng)頁(yè)。
3.開(kāi)始學(xué)習(xí)< p >標(biāo)簽撑毛，添加段落
如果想在網(wǎng)頁(yè)上顯示文章书聚，這時(shí)就需要< p >標(biāo)簽了，把文章的段落放到< p>標(biāo)簽中藻雌。
語(yǔ)法：
<p>段落文本</p>
注意一段文字一個(gè)<p>
標(biāo)簽寺惫，如在一篇新聞文章中有3段文字，就要把這3個(gè)段落分別放到3個(gè)<p>標(biāo)簽中蹦疑。如下圖所示。
在瀏覽器中顯示的效果：
<p>
標(biāo)簽的默認(rèn)樣式萨驶，可以在上圖中看出來(lái)歉摧，段前段后都會(huì)有空白，如果不喜歡這個(gè)空白腔呜，可以用css樣式來(lái)刪除或改變它叁温。
任務(wù)
我來(lái)試試，親自感受一下段落標(biāo)簽的使用
1核畴、在右部編輯器中的第8行輸入<p>我的第一個(gè)段落膝但。</p>。
2谤草、在右部編輯器中的第9行輸入<p>我的第二個(gè)段落跟束。</p>
<h1>4.了解<hx>標(biāo)簽莺奸，為你的網(wǎng)頁(yè)添加標(biāo)題</h1>
文章的段落用< p>標(biāo)簽，那么文章的標(biāo)題用什么標(biāo)簽?zāi)兀?br>
在本節(jié)我們將使用<hx>標(biāo)簽來(lái)制作文章的標(biāo)題冀宴。標(biāo)題標(biāo)簽一共有6個(gè)灭贷，h1、h2略贮、h3甚疟、h4、h5逃延、h6
分別為一級(jí)標(biāo)題览妖、二級(jí)標(biāo)題、三級(jí)標(biāo)題揽祥、四級(jí)標(biāo)題讽膏、五級(jí)標(biāo)題、六級(jí)標(biāo)題盔然。并且依據(jù)重要性遞減桅打。< h1>
是最高的等級(jí)。
語(yǔ)法：<hx>標(biāo)題文本</hx>
(x為1-6)文章的標(biāo)題前面已經(jīng)說(shuō)過(guò)了愈案，可以使用標(biāo)題標(biāo)簽挺尾，另外網(wǎng)頁(yè)上的各個(gè)欄目的標(biāo)題也可使用它們。如下圖為騰訊網(wǎng)站站绪。
注意：因?yàn)閔1
標(biāo)簽在網(wǎng)頁(yè)中比較重要遭铺，所以一般h1
標(biāo)簽被用在網(wǎng)站名稱上。騰訊網(wǎng)站就是這樣做的恢准。如：< h1>騰訊網(wǎng)< /h1>
h1-h6****標(biāo)簽的默認(rèn)樣式：
標(biāo)簽代碼：
在瀏覽器中顯示的樣式：
從上面的圖片可以看出標(biāo)題標(biāo)簽的樣式都會(huì)加粗魂挂，h1
標(biāo)簽字號(hào)最大，h2
標(biāo)簽字號(hào)相對(duì)h1要小馁筐，以此類(lèi)推h6
標(biāo)簽的字號(hào)最小涂召。
<h1>5.加入強(qiáng)調(diào)語(yǔ)氣，使用< strong>和< em>標(biāo)簽</h1>
有了段落又有了標(biāo)題敏沉，現(xiàn)在如果想在一段話中特別強(qiáng)調(diào)某幾個(gè)文字果正，這時(shí)候就可以用到< em>或< strong>標(biāo)簽。
但兩者在強(qiáng)調(diào)的語(yǔ)氣上有區(qū)別:< em> 表示強(qiáng)調(diào)盟迟，< strong> 表示更強(qiáng)烈的強(qiáng)調(diào)秋泳。并且在瀏覽器中< em> 默認(rèn)用斜體表示，< strong> 用粗體表示攒菠。兩個(gè)標(biāo)簽相比迫皱，目前國(guó)內(nèi)前端程序員更喜歡使用< strong>表示強(qiáng)調(diào)。
語(yǔ)法：
<em>需要強(qiáng)調(diào)的文本</em>
<strong>需要強(qiáng)調(diào)的文本</strong>
如辖众，在網(wǎng)上商城中卓起，某產(chǎn)品的打折后的價(jià)格是需要強(qiáng)調(diào)的和敬。如下圖。
代碼實(shí)現(xiàn)：
在瀏覽器中默認(rèn)樣式是有區(qū)別的：
原代碼既绩，如下圖概龄。
瀏覽器中的樣子，如下圖饲握。
< em>的內(nèi)容在瀏覽中顯示為斜體私杜，< strong>顯示為加粗。如果不喜歡這種樣式救欧，沒(méi)有關(guān)系衰粹，以后可以使用css樣式去改變它。
<h1>6.使用<span>標(biāo)簽為文字設(shè)置單獨(dú)樣式</h1>
這一小節(jié)講解<span>標(biāo)簽笆怠，我們對(duì)< em>铝耻、< strong>、<span>
這三個(gè)標(biāo)簽進(jìn)行一下總結(jié)：
1.< em> 和< strong>標(biāo)簽
![Uploading 屏幕快照 2016-11-01 下午5.41.11_288377.png . . .]
是為了強(qiáng)調(diào)一段話中的關(guān)鍵字時(shí)使用蹬刷，它們的語(yǔ)義是強(qiáng)調(diào)瓢捉。
2.<span>標(biāo)簽
是沒(méi)有語(yǔ)義的，它的作用就是為了設(shè)置單獨(dú)的樣式用的办成。
如果現(xiàn)在我們想把上一小節(jié)的第一段話“美國(guó)夢(mèng)”三個(gè)字設(shè)置成blue（藍(lán)色）泡态，但注意不是為了強(qiáng)調(diào)“美國(guó)夢(mèng)”，而只是想為它設(shè)置和其它文字不同的樣式（并不想讓屏幕閱讀器對(duì)“美國(guó)夢(mèng)”這三個(gè)字加重音讀出）迂卢，所以這樣情況下就可以用到<span>標(biāo)簽了某弦。
如下面例子：
<p>1922年的春天，一個(gè)想要成名名叫<em>尼克?卡拉威</em>（托比?馬奎爾Tobey Maguire 飾）的作家而克，離開(kāi)了美國(guó)中西部靶壮，來(lái)到了紐約。那是一個(gè)道德感漸失员萍，爵士樂(lè)流行腾降，走私為王，<strong>股票</strong>飛漲的時(shí)代碎绎。為了追尋他的<span>美國(guó)夢(mèng)</span>蜂莉，他搬入紐約附近一海灣居住。</p>
語(yǔ)法：
<span>文本</span>
任務(wù)
我來(lái)試試:把“美國(guó)夢(mèng)”設(shè)置為藍(lán)色
- 在右部編輯器中的第13行對(duì)“美國(guó)夢(mèng)”文本加上<span>標(biāo)簽混卵。
- 在第8行輸入color:blue;
，為<span>元素設(shè)置文本顏色為藍(lán)色窖张。
<h1>7.< q>標(biāo)簽幕随，短文本引用</h1>
想在你的html中加一段引用嗎？比如在你的網(wǎng)頁(yè)的文章里想引用某個(gè)作家的一句詩(shī)宿接，這樣會(huì)使你的文章更加出彩赘淮，那么<q>
標(biāo)簽是你所需要的辕录。
語(yǔ)法：
<q>引用文本</q>
如下面例子：
< p>最初知道莊子，是從一首詩(shī)<q>莊生曉夢(mèng)迷蝴蝶梢卸。望帝春心托杜鵑走诞。</q>開(kāi)始的。雖然當(dāng)時(shí)不知道是什么意思蛤高，只是覺(jué)得詩(shī)句挺特別蚣旱。后來(lái)才明白這個(gè)典故出自是莊子的《逍遙游》，《逍遙游》代表了莊子思想的最高境界戴陡，是對(duì)世俗社會(huì)的功名利祿及自己的舍棄塞绿。< /p>
講解：
- 在上面的例子中，“莊生曉夢(mèng)迷蝴蝶恤批。望帝春心托杜鵑异吻。” 這是一句詩(shī)歌，出自晚唐詩(shī)人李商隱的《錦瑟》 喜庞。因?yàn)椴皇亲髡咦约旱奈淖志骼耍孕枰褂?lt; q>< /q>
實(shí)現(xiàn)引用。 - 注意要引用的文本不用加雙引號(hào)延都，瀏覽器會(huì)對(duì)q標(biāo)簽自動(dòng)添加雙引號(hào)雷猪。
下圖是代碼顯示結(jié)果：
注意這里用<q>標(biāo)簽的真正關(guān)鍵點(diǎn)不是它的默認(rèn)樣式雙引號(hào)（如果這樣我們不如自己在鍵盤(pán)上輸入雙引號(hào)就行了），而是它的語(yǔ)義：引用別人的話窄潭。
任務(wù)
我來(lái)試試:用<q>標(biāo)簽引用別人的語(yǔ)句
- 在右部編輯器中的第8行對(duì)“聰明秀出為之英春宣，膽略過(guò)人為之雄〖的悖”文本加上q標(biāo)簽月帝。
