HTML之認識標籤(一)

2-1. 語義化, 讓你的網頁更好的被搜索引擎理解


標籤的用途我們學習網頁製作時, 常常會聽到一個詞,語義化。那麼什麼叫做語義化呢,說的通俗點就是: 明白每個標籤的用途(在什麼情況下使用此標籤合理) 比如, 網頁上的文字的標題就可以用標題標籤,網頁上的各個欄目名稱也可以使用標籤標題。文章中內容的段落就得放在段落標籤中, 在文章中有想強調的文本,就可以使用 em標籤標示強調等等。

優點:1.更容易被搜索引擎收錄。2.更容易讓屏幕閱讀器讀出網頁內容。


2-2. <body>標籤,網頁上顯示的內容放在這裏

在網頁上要展示出來的內容一定要放在body標籤中。


2-3. <p>標籤,添加段落


2-4. <hx>標籤, 爲網頁添加標題 


2-5. 加入強調語氣, 使用<strong>和<em>標籤


2-6. <span>標籤

<span>標籤是沒有語義的,它的作用就是爲了設置單獨的樣式用的


2-7. <q>標籤, 短文本引用 

作用: 在html中加一段引用,不如引用某個作家的一句詩,使文章更加出彩。

<q>引用文本</q>    

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>q標籤</title>
</head>
<body>
<p>周瑜,不可否認,他是歷史上一個了不起的英雄人物!確實也配的上那句<q>聰明秀出爲之英,膽略過人爲之雄。</q></p>
</body>
</html>


2-8. <blockquote>標籤,長文本引用

<blockquote>的作用也是引用別人的文本。但是它對長文本的引用, 如在文章中引入大段某知名作家的文字, 這是需要這個標籤。

<q>標籤是對短文本的引用, 如引用一句話就用到<q>標籤

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>blockquote標籤的使用</title>
</head>
<body>
<h2>心似桂花開</h2>
<p>大家都在忙於自認爲最重要的事情,卻沒能享受到人生的樂趣,反而要吞下苦果?</p>
<blockquote>暗淡輕黃體性柔,情疏跡遠只香留。何須淺碧深紅色,自是花中第一流。</blockquote>
<p>這是李清照《詠桂》中的詞句,在李清照看來,桂花暗淡青黃,性情溫柔,淡泊自適,遠比那些大紅大紫爭奇鬥豔花值得稱道。</p>
</body>
</html>

2-9. 使用<br>標籤分行顯示文本

對於2-8的例子,我們想讓那首詩顯示得更美觀些,如顯示下面的效果  

怎麼可以讓每一句詩詞後面加入一個折行呢?那就可以用到 <br />標籤了,在需要加回車的換行的地方加入<br />, <br />標籤的作用相當於word文檔中的回車。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>br標籤的使用</title>
</head>
<body>
<h2>《詠桂》</h2>
<p>暗淡輕黃體性柔,<br/>情疏跡遠只香留。<br/>何須淺碧深紅色,<br/>自是花中第一流。</p>
</body>
</html>


2-10. &nbsp;爲你的網頁中添加一些空格

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>空格講解</title>
</head>
<body>
<h1>感悟夢想</h1>
<p>來源:作文網  作者:爲夢想而飛</p>
</body>
</html>


2-11. 認識 <hr>標籤, 添加水平橫線

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>hr標籤使用</title>
</head>
<body>
<p>火車飛馳過暗夜裏的村莊,月光,總是太容易讓思念寂寞,太容易讓人覺得孤獨。</p>
<hr />
<p>每一枚被風吹起的蒲公英,都載滿了一雙眼睛的深情告別與一個目光的依依不捨。那天,我拿着行李,帶上一個背影的祝福與惆悵,揮手告別了這片土地。我不知道,我何時會回來。</p>
</body>
</html>


2-12.  <address> 標籤, 爲網頁加入地址信息

一般網頁中會有一些網站的聯繫地址信息需要在網頁中展示出來,這些聯繫地址信息如公司的地址就可以<address>標籤。也可以定義一個地址(比如電子郵件地址),簽名或者文檔的作者的身份。

語法:

        <address>聯繫地址信息</address> 

如:

        <address>文檔編寫:lilian 北京市西城區德外大街10</address>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>address標籤介紹</title>
</head>
<body>
<h2>慕課網</h2>
<p>超酷的互聯網、IT技術免費學習平臺,創新的網絡一站式學習、實踐體驗;服務及時貼心,內容專業、有趣易學。專注服務互聯網工程師快速成爲技術高手!公司地址:<address>北京市西城區德外大街10號</address></p> 
</body>
</html>



2-13. 加入一行代碼? 使用  <code> 標籤

在介紹語言技術的網站中, 避免不了在網頁中顯示一些計算機專業的編程代碼,當代碼爲一行代碼時,你就可以使用<code>標籤

<code>var i = i + 300 </code> 

注意:在文章中一般如果要插入多行代碼時不能使用<code>標籤了

注:如果是多行代碼, 可以使用<pre>標籤

<!DOCTYPE HTML>									
<html>							
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>code標籤介紹</title>
</head>
<body>
    <p>我們可能知道水平漸變的實現,類似這樣:
        <code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code></p>
</body>
</html>


2-14.  使用  <pre> 標籤爲你的網頁加入大段代碼

語法:

<pre>語言代碼</pre>

<pre>標籤的主要作用: 預防格式化的文本。被包圍 pre 元素中的文本通常會保留空格和換行符。

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pre標籤的使用</title>
</head>

<body>
<pre>
    var message="歡迎";
    for(var i=1;i<=10;i++)
    {
        alert(message); 
    }
</pre>
</body>
</html>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章