2.1 語義化,讓你的網(wǎng)頁(yè)更好的被搜索引擎理解
這一章節(jié)我們要開始把網(wǎng)頁(yè)中常用到的標(biāo)簽一 一向大家介紹,學(xué)習(xí)這一章節(jié)的時(shí)候要記住學(xué)習(xí)html標(biāo)簽過程中,主要注意兩個(gè)方面的學(xué)習(xí):標(biāo)簽的用途、標(biāo)簽在瀏覽器中的默認(rèn)樣式。
什么叫做語義化呢,說的通俗點(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)等等。
2.2 body標(biāo)簽,網(wǎng)頁(yè)顯示內(nèi)容放在這里
在網(wǎng)頁(yè)上要展示出來的頁(yè)面內(nèi)容一定要放在body標(biāo)簽中。如下圖是一個(gè)新聞文章的網(wǎng)頁(yè)。
瀏覽器效果如下:
2.3 p標(biāo)簽,添加段落
如果想在網(wǎng)頁(yè)上顯示文章,這時(shí)就需要<p>
標(biāo)簽了,把文章的段落放到<p>
標(biāo)簽中。
語法:<p>段落文本</p>
注意一段文字一個(gè)標(biāo)簽,如在一篇新聞文章中有3段文字,就要把這3個(gè)段落分別放到3個(gè)<p>
標(biāo)簽中。如下圖所示:
瀏覽器顯示效果如下:
<p>標(biāo)簽的默認(rèn)樣式,可以在上圖中看出來,段前段后都會(huì)有空白,如果不喜歡這個(gè)空白,可以用css樣式來刪除或改變它。段落驗(yàn)證代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title> p標(biāo)簽</title>
- </head>
- <body>
- <h2>段落驗(yàn)證</h2>
- <p>我的第一個(gè)段落。</p>
- <p>我的第二個(gè)段落。</p>
- </body>
- </html>
2.4 hx標(biāo)簽,添加標(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í)。
語法:<hx>標(biāo)題文本</hx> (x為1-6)
文章的標(biāo)題前面已經(jīng)說過了,可以使用標(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)樣式:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <body>
- <h1>一級(jí)標(biāo)題</h1>
- <h2>二級(jí)標(biāo)題</h2>
- <h3>三級(jí)標(biāo)題</h3>
- <h4>四級(jí)標(biāo)題</h4>
- <h5>五級(jí)標(biāo)題</h5>
- <h6>六級(jí)標(biāo)題</h6>
- </body>
在瀏覽器中顯示樣式:
從上面的圖片可以看出標(biāo)題標(biāo)簽的樣式都會(huì)加粗,h1標(biāo)簽字號(hào)最大,h2標(biāo)簽字號(hào)相對(duì)h1要小,以此類推h6標(biāo)簽的字號(hào)最小。
2.5 strong/em加入強(qiáng)調(diào)語氣
有了段落又有了標(biāo)題,現(xiàn)在如果想在一段話中特別強(qiáng)調(diào)某幾個(gè)文字,這時(shí)候就可以用到<em>或<strong>
標(biāo)簽。
兩者在強(qiáng)調(diào)的語氣上有區(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)。
語法:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <em>需要強(qiáng)調(diào)的文本</em>
- <strong>需要強(qiáng)調(diào)的文本</strong>
舉例說明em和strong標(biāo)簽:
在瀏覽器中顯示為:
<em>
的內(nèi)容在瀏覽中顯示為斜體,<strong>
顯示為加粗。如果不喜歡這種樣式,沒有關(guān)系,以后可以使用css樣式去改變它。
2.6 style/span標(biāo)簽,為文字設(shè)置單獨(dú)樣式
對(duì)<em>、<strong>、<span>
這三個(gè)標(biāo)簽進(jìn)行一下總結(jié):
<em>
和<strong>
標(biāo)簽是為了強(qiáng)調(diào)一段話中的關(guān)鍵字時(shí)使用,它們的語義是強(qiáng)調(diào)。
<span>
標(biāo)簽是沒有語義的,它的作用就是為了設(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)簽了。
語法:
<span>文本</span>
舉例:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>了不起的蓋茨比</title>
- <style>
- span{
- color:blue;
- }
- </style>
- </head>
- <body>
- <p><span>美國(guó)夢(mèng)</span>。</p>
- <p><strong>菲茨杰拉德</strong></p>
- <p><em>愛麗絲</em></p>
- </body>
- </html>
在瀏覽器顯示為:
使用span的變成了藍(lán)色,使用strong標(biāo)簽的變化為粗體,使用em標(biāo)簽的變成斜體。
2.7 q標(biāo)簽,短文引用
想在你的html中加一段引用嗎?比如在你的網(wǎng)頁(yè)的文章里想引用某個(gè)作家的一句詩(shī),這樣會(huì)使你的文章更加出彩,那么標(biāo)簽是你所需要的。
語法:
<q>引用文本</q>
注意要引用的文本不用加雙引號(hào),瀏覽器會(huì)對(duì)q標(biāo)簽自動(dòng)添加雙引號(hào)。
注意這里用標(biāo)簽的真正關(guān)鍵點(diǎn)不是它的默認(rèn)樣式雙引號(hào)(如果這樣我們不如自己在鍵盤上輸入雙引號(hào)就行了),而是它的語義:引用別人的話。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>q標(biāo)簽</title>
- </head>
- <body>
- <p>周瑜,確實(shí)也配的上那句<q>聰明秀出為之英,膽略過人為之雄。</q></p>
- </body>
- </html>
-
代碼中是沒有引號(hào)的,但是因?yàn)槭?code><q>標(biāo)簽,所以自動(dòng)加上引號(hào)。
2.8 blockquote標(biāo)簽,長(zhǎng)文本引用
<blockquote>
的作用也是引用別人的文本。但它是對(duì)長(zhǎng)文本的引用,如在文章中引入大段某知名作家的文字,這時(shí)需要這個(gè)標(biāo)簽。
<q>
標(biāo)簽是對(duì)簡(jiǎn)短文本的引用,比如說引用一句話就用到<q>
標(biāo)簽。
語法:<blockquote>引用文本</blockquote>
瀏覽器對(duì)<blockquote>
標(biāo)簽的解析是縮進(jìn)樣式。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>blockquote標(biāo)簽的使用</title>
- </head>
- <body>
- <h2>心似桂花開</h2>
- <p>大家都在忙于自認(rèn)為最重要的事情,卻沒能享受到人生的樂趣,反而要吞下苦果?</p>
- <blockquote>暗淡輕黃體性柔,情疏跡遠(yuǎn)只香留。</blockquote>
- <blockquote>何須淺碧深紅色,自是花中第一流。</blockquote>
- <p>這是李清照《詠桂》中的詞句,在李清照看來,桂花暗淡青黃,性情溫柔,淡泊自適,遠(yuǎn)比那些大紅大紫爭(zhēng)奇斗艷花值得稱道。</p>
- </body>
- </html>
在瀏覽器中顯示效果如下,可以看到被<blockquote>
標(biāo)簽部分前后都縮進(jìn)了:
2.9 br標(biāo)簽分行顯示文本
怎么可以讓每一句詩(shī)詞后面加入一個(gè)折行呢?那就可以用到<br />
標(biāo)簽了,在需要加回車換行的地方加入<br />,<br />
標(biāo)簽作用相當(dāng)于word文檔中的回車。
語法:
xhtml1.0寫法:<br />
html4.01寫法:<br>
與以前我們學(xué)過的標(biāo)簽不一樣,<br />
標(biāo)簽是一個(gè)空標(biāo)簽,沒有HTML內(nèi)容的標(biāo)簽就是空標(biāo)簽,空標(biāo)簽只需要寫一個(gè)開始標(biāo)簽,這樣的標(biāo)簽有<br />、<hr />和<img />
。
總結(jié):在 html 代碼中輸入回車、空格都是沒有作用的。在html文本中想輸入回車換行,就必須輸入<br />
。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>br標(biāo)簽的使用</title>
- </head>
- <body>
- <h2>《詠桂》</h2>
- <p>
- 暗淡輕黃體性柔,<br>
- 情疏跡遠(yuǎn)只香留。<br>
- 何須淺碧深紅色,<br>
- 自是花中第一流。
- </p>
- </body>
- </html>
瀏覽器效果:
2.10  為網(wǎng)頁(yè)中添加一些空格
已經(jīng)講解過在html代碼中輸入空格、回車都是沒有作用的。要想輸入空格,必須寫入
語法:
如下插入兩個(gè)空格:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>空格講解</title>
- </head>
- <body>
- <h1>感悟夢(mèng)想</h1>
- 來源:作文網(wǎng) 作者:為夢(mèng)想而飛
- </body>
- </html>
-
2.11 hr標(biāo)簽,添加水平橫線
在信息展示時(shí),有時(shí)會(huì)需要加一些用于分隔的橫線,這樣會(huì)使文章看起來整齊些。比如下面網(wǎng)頁(yè)
語法:
html4.01版本 <hr>
xhtml1.0版本<hr />
<
hr />
標(biāo)簽和<br />
標(biāo)簽一樣也是一個(gè)空標(biāo)簽,所以只有一個(gè)開始標(biāo)簽,沒有結(jié)束標(biāo)簽。
<hr />
標(biāo)簽的在瀏覽器中的默認(rèn)樣式線條比較粗,顏色為灰色,可能有些人覺得這種樣式不美觀,沒有關(guān)系,這些外在樣式在我們以后學(xué)習(xí)了css樣式表之后,都可以對(duì)其修改。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>hr標(biāo)簽使用</title>
- </head>
- <body>
- <p>火車飛馳過暗夜里的村莊,月光,總是太容易讓思念寂寞,太容易讓人覺得孤獨(dú)。</p>
- <hr>
- <p>每一枚被風(fēng)吹起的蒲公英,都載滿了一雙眼睛的深情告別與一個(gè)目光的依依不舍。</p>
- </body>
- </html>
瀏覽器中效果:
2.12 address標(biāo)簽,為網(wǎng)頁(yè)加入地址信息
一般網(wǎng)頁(yè)中會(huì)有一些網(wǎng)站的聯(lián)系地址信息需要在網(wǎng)頁(yè)中展示出來,這些聯(lián)系地址信息如公司的地址就可以標(biāo)簽。也可以定義一個(gè)地址(比如電子郵件地址)、簽名或者文檔的作者身份。
語法:
<address>聯(lián)系地址信息</address>
<address> 本文的作者:<a href="mailto:lilian@imooc.com">lilian</a> </address>
在瀏覽器上顯示的樣式為斜體,如果不喜歡斜體,當(dāng)然可以,可以在后面的課程中使用 css 樣式來修改它<address>
標(biāo)簽的默認(rèn)樣式。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>address標(biāo)簽介紹</title>
- </head>
- <body>
- <h2>慕課網(wǎng)</h2>
- <p>超酷的互聯(lián)網(wǎng)、IT技術(shù)免費(fèi)學(xué)習(xí)平臺(tái)!公司地址:<address>北京市西城區(qū)德外大街10號(hào)</address></p>
- </body>
- </html>
2.13 code標(biāo)簽,加入一行代碼
在介紹語言技術(shù)的網(wǎng)站中,避免不了在網(wǎng)頁(yè)中顯示一些計(jì)算機(jī)專業(yè)的編程代碼,當(dāng)代碼為一行代碼時(shí),你就可以使用<code>
標(biāo)簽了,注意:在文章中一般如果要插入多行代碼時(shí)不能使用<code>
標(biāo)簽了。如下面例子:
<code>var i=i+300;</code>
注:如果是多行代碼,可以使用<pre>
標(biāo)簽。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>code標(biāo)簽介紹</title>
- </head>
- <body>
- <p>我們可能知道水平漸變的實(shí)現(xiàn),類似這樣:<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code></p>
- </body>
- </html>
瀏覽器效果:
2.14 pre標(biāo)簽,加入大段代碼
在上節(jié)中介紹加入一行代碼的標(biāo)簽為<code>
,但是在大多數(shù)情況下是需要加入大段代碼的,如下圖,怎么辦?不會(huì)是每一代碼都加入一個(gè)<code>
標(biāo)簽吧,沒有這么復(fù)雜,這時(shí)候就可以使用<pre>
標(biāo)簽:
<pre>
標(biāo)簽的主要作用:預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。注意:<pre>
標(biāo)簽不只是為顯示計(jì)算機(jī)的源代碼時(shí)用的,在你需要在網(wǎng)頁(yè)中預(yù)顯示格式時(shí)都可以使用它,只是<pre>
標(biāo)簽的一個(gè)常見應(yīng)用就是用來展示計(jì)算機(jī)的源代碼。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>pre標(biāo)簽的使用</title>
- </head>
- <body>
- <pre>var message="歡迎";for(var i=1;i<=10;i++){ alert(message);}
- </pre>
- </body>
- </html>
瀏覽器效果:
在上面的例子中可以看到代碼中的空格,換行符都保留下來。如果用以前的方法,回車需要輸入<br>
簽,空格需要輸入 
;
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。