亚洲欧洲av在线,亚洲精品在线观看网站

2.1 語義化，讓你的網(wǎng)頁更好的被搜索引擎理解

這一章節(jié)我們要開始把網(wǎng)頁中常用到的標(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)頁上的文章的標(biāo)題就可以用標(biāo)題標(biāo)簽，網(wǎng)頁上的各個(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)頁顯示內(nèi)容放在這里

在網(wǎng)頁上要展示出來的頁面內(nèi)容一定要放在body標(biāo)簽中。如下圖是一個(gè)新聞文章的網(wǎng)頁。

瀏覽器效果如下：

2.3 p標(biāo)簽，添加段落

如果想在網(wǎng)頁上顯示文章，這時(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)樣式，可以在上圖中看出來，段前段后都會有空白，如果不喜歡這個(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分別為一級標(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)頁上的各個(gè)欄目的標(biāo)題也可使用它們。如下圖為騰訊網(wǎng)站：

注意：因?yàn)閔1標(biāo)簽在網(wǎng)頁中比較重要，所以一般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>一級標(biāo)題</h1>
<h2>二級標(biāo)題</h2>
<h3>三級標(biāo)題</h3>
<h4>四級標(biāo)題</h4>
<h5>五級標(biāo)題</h5>
<h6>六級標(biāo)題</h6>
</body>

在瀏覽器中顯示樣式：

從上面的圖片可以看出標(biāo)題標(biāo)簽的樣式都會加粗，h1標(biāo)簽字號最大，h2標(biāo)簽字號相對h1要小，以此類推h6標(biā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)簽相比，目前國內(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ú)樣式

對<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é)的第一段話“美國夢”三個(gè)字設(shè)置成blue（藍(lán)色），但注意不是為了強(qiáng)調(diào)“美國夢”，而只是想為它設(shè)置和其它文字不同的樣式（并不想讓屏幕閱讀器對“美國夢”這三個(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>美國夢</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)頁的文章里想引用某個(gè)作家的一句詩，這樣會使你的文章更加出彩，那么標(biāo)簽是你所需要的。語法：

<q>引用文本</q>

注意要引用的文本不用加雙引號，瀏覽器會對q標(biāo)簽自動(dòng)添加雙引號。

注意這里用標(biāo)簽的真正關(guān)鍵點(diǎn)不是它的默認(rèn)樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。

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>

代碼中是沒有引號的，但是因?yàn)槭?code><q>標(biāo)簽，所以自動(dòng)加上引號。

2.8 blockquote標(biāo)簽，長文本引用

<blockquote>的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時(shí)需要這個(gè)標(biāo)簽。

<q>標(biāo)簽是對簡短文本的引用，比如說引用一句話就用到<q>標(biāo)簽。

語法：<blockquote>引用文本</blockquote>

瀏覽器對<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)比那些大紅大紫爭奇斗艷花值得稱道。</p>
</body>
</html>

在瀏覽器中顯示效果如下，可以看到被<blockquote>標(biāo)簽部分前后都縮進(jìn)了：

2.9 br標(biāo)簽分行顯示文本

怎么可以讓每一句詩詞后面加入一個(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 &nbsp為網(wǎng)頁中添加一些空格

已經(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>感悟夢想</h1>
來源：作文網(wǎng) 作者：為夢想而飛
</body>
</html>

2.11 hr標(biāo)簽，添加水平橫線

在信息展示時(shí)，有時(shí)會需要加一些用于分隔的橫線，這樣會使文章看起來整齊些。比如下面網(wǎng)頁

語法：

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樣式表之后，都可以對其修改。

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)頁加入地址信息

一般網(wǎng)頁中會有一些網(wǎng)站的聯(lián)系地址信息需要在網(wǎng)頁中展示出來，這些聯(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í)平臺!公司地址：<address>北京市西城區(qū)德外大街10號</address></p>
</body>
</html>

2.13 code標(biāo)簽,加入一行代碼

在介紹語言技術(shù)的網(wǎng)站中，避免不了在網(wǎng)頁中顯示一些計(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ù)情況下是需要加入大段代碼的，如下圖，怎么辦？不會是每一代碼都加入一個(gè)<code>標(biāo)簽吧，沒有這么復(fù)雜，這時(shí)候就可以使用<pre>標(biāo)簽：

<pre>標(biāo)簽的主要作用:預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。注意：<pre> 標(biāo)簽不只是為顯示計(jì)算機(jī)的源代碼時(shí)用的，在你需要在網(wǎng)頁中預(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>簽，空格需要輸入&nbsp;

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

標(biāo)簽：阜陽晉中崇左北海河池營口眉山青海

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《前端開發(fā)每天必學(xué)之認(rèn)識HTML標(biāo)簽（1）》，本文關(guān)鍵詞前端,開發(fā),每天,必,學(xué)之,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。