HTML中的常用標籤及簡單注意事項

HTML標籤

標籤的語義化

所謂標籤語義化，就是指標籤的含義

爲什麼要有語義化標籤

1、方便代碼的閱讀和維護

2、同時讓瀏覽器或是網絡爬蟲可以很好地解析，從而更好分析其中的內容

3、使用語義化標籤會具有更好地搜索引擎優化

核心：合適的地方給一個最爲合理地標籤

語義是否良好，在於我們去掉CSS後，網頁結構依然組織有序，並且具有良好的可讀性

排版標籤

排版標籤主要和CSS搭配使用，顯示網頁結構的標籤，是網頁佈局最常用的標籤

標題標籤

爲了使網頁更具語義化，經常在頁面中用到標題標籤，HTML提供了六個等級的標題

<h1>一級標題</h1>
<h2>二級標題</h2>
.....

段落標籤

在網頁中要把文字有條理的顯示出來

<p></p>

是HTML文檔中最常見的標籤，默認情況下，文本在一個段落中會根據瀏覽器大小自動換行

一行一個

水平線標籤（單標籤）

在網頁中，常常看到一些水平線將段落與段落之間隔開，使得文檔結構清晰，層次分明，這些水平線可以通過插入圖片來實現， 也可以簡單地通過標籤來完成

<hr />

換行標籤（單標籤）

在HTML中，一個段落中的文字會從左到右依次排序，直到瀏覽器窗口的右端，然後自動換行，如果希望某段文本強制換行顯示，就需要使用換行標籤

<br />

div span標籤

div span 是沒有語義的，div表示分區，span表示跨度

<div></div>
<span></span>

默認div一行顯示一個，span一行顯示多個

文本格式化標籤

在網頁中，又是需要爲文字設置粗體、斜體或者下劃線效果，這是就需要使用HTML中的文本格式化標籤，是文字以特殊的方式顯示

<b>粗體</b><strong>XHTML推薦使用strong</strong>
<i>斜體</i><em>XHTML推薦使用em</em>
<s>刪除線</s><del>XHTML推薦使用del</del>
<u>下劃線</u><ins>XHTML推薦使用ins</ins>

圖像標籤（單標籤）

HTML網頁中，任何元素的實現都要依靠HTML標籤，要想在網頁中顯示圖像就需要使用圖像標籤，

<img src="圖像URL" />

img標記屬性

src：URL：圖像的路徑

alt：文本 ：圖像不能顯示時的替換文本

title：文本，鼠標懸停時顯示的內容

width：像素（XHTML不支持頁面百分比%）：設置圖像的寬度

height：像素（XHTML不支持頁面百分比%）：設置圖像的高度

border：數字：設置圖像邊框的寬度

鏈接標籤

在HTML中創建超鏈接非常簡單，只須用標籤環繞需要被鏈接的對象即可

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

href：用於指定鏈接目標的url地址，當爲標籤應用href屬性時，它就具有了超鏈接的功能

target：用於指定鏈接頁面的打開方式，其取值有self和_blank兩種，其中self爲默認值，blank爲在新窗口中打開方式

注意

1、外部鏈接 例如

<a href="http://www.baidu.com">百度</a>

2、內部鏈接 直接鏈接內部頁面名稱即可，比如

<a href="index.html">首頁</a>

3、如果沒有確定的鏈接目標，通常直接鏈接標籤的href屬性定義爲”#“，表示該鏈接暫時爲一個空鏈接

4、不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接

錨點標籤

通過創建錨點鏈接，用戶能快速定位到目標內容

創建錨點鏈接分爲兩步

1、使用”a href=”#id名“鏈接文本/a“創建鏈接文本

2、使用相應的id標註跳轉的位置

<a href="#live"></a>
<h1 id="live">生活</h1>

base標籤（單標籤）

base可以設置整體鏈接的打開狀態，可以直接設置頁面中所有鏈接的打開方式

<base target="_blank" />

特殊字符

空格： 
<：&lt;
>：&gt;
&：&amp;
￥：&yen;
©（版權）：&copy;
®（註冊商標）：&reg;
°：&deg;
±：&plusmn;
✖：&times;
➗：&divide;
²；&sup2;
³：&sup3;

註釋標籤

在HTML中有一種特殊的標籤，如果需要在HTML文檔中添加一些便於閱讀和理解但又不需要顯示在頁面中的註釋文字，就需要使用註釋標籤

<!-- 註釋語句 -->

註釋內容不會顯示在瀏覽器中，但是作爲HTML文檔內容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到

列表標籤

把…製成表，以表顯示，列表最大的特點就是整齊、整潔、有序

無序列表ul

無序列表的各個列表項之間沒有順序之分，是並列的

<ul>
    <li>列表項1</li>
    <li>列表項2</li>
    ……
</ul>

注意

1、ul之間只能嵌套li，直接在ul標籤中輸入其他標籤或者文字的做法都是不允許的

2、li之間相當於一個容器，可以容納所有元素

3、無序列表會帶有自己的樣式屬性

*list-style：none：取消li前的小點

有序列表ol

有序列表即爲有排列順序的列表，其各個列表項按照一定的順序排列定義

<ol>
    <li></li>
    <li></li>
</ol>

自定義列表

自定義列表通常用於對術語或名詞進行解釋和描述，自定義列表項前沒有任何符號

<dl>
    <dt>名詞1</dt>
    <dd>名詞1的解釋1</dd>
    <dd>名詞1的解釋2</dd>
    
    <dt>名詞2</dt>
    <dd>名詞2的解釋1<dd>
    <dd>名詞2的解釋2<dd>
</dl>