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. 爲你的網頁中添加一些空格
<!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>