1. 程式人生 > >HTML常見標籤使用解釋

HTML常見標籤使用解釋

1. <html></html>稱為根標籤,所有的網頁標籤都在<html></html>中。

2. <head> 標籤用於定義文件的頭部,它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標籤,
頭部標籤在下一小節中會有詳細介紹。

3. 在<body>和</body>標籤之間的內容是網頁的主要內容,如<h1>、<p>、<a>、<img>等網頁內容標籤,在這裡的標籤中的內容會在瀏覽器中顯示出來。

4.<head>標籤的作用。文件的頭部描述了文件的各種屬性和資訊,包括文件的標題等。絕大多數文件頭部包含的資料都不會真正作為內容顯示給讀者。

5.<title>標籤:在<title>和</title>標籤之間的文字內容是網頁的標題資訊,它會出現在瀏覽器的標題欄中。網頁的title標籤用於告訴使用者和搜尋引擎這個網頁的主要內容是什麼,搜尋引擎可以通過網頁標題,
迅速的判斷出網頁的主題。每個網頁的內容都是不同的,每個網頁都應該有一個獨一無二的title。

6.程式碼註釋的作用是幫助程式設計師標註程式碼的用途,過一段時間後再看你所編寫的程式碼,就能很快想起這段程式碼的用途。程式碼註釋不僅方便程式設計師自己回憶起以前程式碼的用途,還可以幫助其他程式設計師很快的讀懂你的程式的功能,方便多人合作開發網頁程式碼。
語法:<!--註釋文字 -->

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

1). 更容易被搜尋引擎收錄。

2). 更容易讓螢幕閱讀器讀出網頁內容。

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

9.<p>標籤的預設樣式,可以在上圖中看出來,段前段後都會有空白,如果不喜歡這個空白,可以用css樣式來刪除或改變它。

10.文章的段落用<p>標籤,那麼文章的標題用什麼標籤呢?在本節我們將使用<hx>標籤來製作文章的標題。
標題標籤一共有6個,h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。並且依據重要性遞減。<h1>是最高的等級。
語法:
<hx>標題文字</hx> (x為1-6)

11.  但兩者在強調的語氣上有區別:<em> 表示強調,<strong> 表示更強烈的強調。並且在瀏覽器中<em> 預設用斜體表示,<strong> 用粗體表示。兩個標籤相比,目前國內前端程式設計師更喜歡使用<strong>表示強調。

語法:
<em>需要強調的文字</em>  
<strong>需要強調的文字</strong>

12.<span>標籤為文字設定單獨樣式
1). <em>和<strong>標籤是為了強調一段話中的關鍵字時使用,它們的語義是強調。
2). <span>標籤是沒有語義的,它的作用就是為了設定單獨的樣式用的。
語法:<span>文字</span>

13.比如在你的網頁的文章裡想引用某個作家的一句詩,這樣會使你的文章更加出彩,那麼<q>標籤是你所需要的。

語法:<q>引用文字</q>

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

      等等,上一節<q>標籤不是也是對文字的引用嗎?不要忘記<q>標籤是對簡短文字的引用,比如說引用一句話就用到<q>標籤。所以使用<blockquote>。

      語法:
        <blockquote>引用文字</blockquote>
        
15.    <br />標籤是一個空標籤,沒有HTML內容的標籤就是空標籤,空標籤只需要寫一個開始標籤,這樣的標籤有<br />、<hr />和<img />。    

16.html程式碼中輸入空格、回車都是沒有作用的。要想輸入空格,必須寫入&nbsp;。

17.有時會需要加一些用於分隔的橫線,這樣會使文章看起來整齊些。
1). <hr />標籤和<br />標籤一樣也是一個空標籤,所以只有一個開始標籤,沒有結束標籤。

2). <hr />標籤的在瀏覽器中的預設樣式線條比較粗,顏色為灰色,可能有些人覺得這種樣式不美觀,沒有關係,這些外在樣式在我們以後學習了css樣式表之後,都可以對其修改。

18.一些網站的聯絡地址資訊需要在網頁中展示出來,這些聯絡地址資訊如公司的地址就可以<address>標籤。也可以定義一個地址(比如電子郵件地址)、簽名或者文件的作者身份。
語法:
<address>聯絡地址資訊</address>

19.,避免不了在網頁中顯示一些計算機專業的程式設計程式碼,當代碼為一行程式碼時,你就可以使用<code>標籤了.
<code>程式碼語言</code>

20.使用<pre>標籤為你的網頁加入大段程式碼,
<pre>語言程式碼段</pre>