html常用標籤（塊元素和行內元素、鏈接、列表、表格）

html塊

1、<div>標籤：塊元素，表示一塊內容，沒有具體的語義。
2、<span>標籤：行內元素，表示一行中的一小段內容，沒有具體的語義。

含樣式和語義的標籤

1、<em>標籤：行內元素，表示語氣中的強調詞
2、<i>標籤：行內元素，原本沒有語義，w3c強加了語義，表示專業詞彙
3、<b>標籤：行內元素，原本沒有語義，w3c強加了語義，表示文檔中的關鍵字或者產品名
4、<strong>標籤：行內元素，表示非常重要的內容

html鏈接

<a>標籤可以在網頁上定義一個鏈接地址。

• 通過 src 屬性定義跳轉的地址.
• 通過 title 屬性定義鼠標懸停時彈出的提示文字框.

<a href="#"></a> <!--  # 表示鏈接到頁面頂部   -->
<a href="http://www.baidu.com/" title="跳轉到百度頁面</a>
<a href="test2.html">測試頁面2</a>

頁面內定義了“id”或者“name”的元素，可以通過<a>標籤鏈接到它的頁面滾動位置。

• 前提是頁面要足夠高，有滾動條，且元素不能在頁面頂部，否則頁面不會滾動。

<a href="#mao1">標題一</a>
......
<h3 name="mao1">跳轉到的標題</h3>

html列表

1、有序列表

在網頁上定義一個有編號的內容列表可以用<ol>、<li>配合使用來實現，代碼如下：

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

在網頁上生成的列表，每條項目上會按1、2、3編號，有序列表在實際開發中較少使用。

2、無序列表

在網頁上定義一個無編號的內容列表可以用<ol>、<li>配合使用來實現，代碼如下：

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

在網頁上生成的列表，每條項目上會有一個小圖標，這個小圖標在不同瀏覽器上顯示效果不同，所以一般會用list-style: none;去掉默認的小圖標，如果需要圖標，可以用樣式自定義圖標，從而達到在不同瀏覽器上顯示的效果相同,實際開發中一般用這種列表。

3、定義列表

定義列表通常用於術語的定義。<dl>標籤表示列表的整體。<dt>標籤定義術語的題目。<dd>標籤是術語的解釋。一個<dl>中可以有多個題目和解釋，代碼如下：

<h3>前端三大塊</h3>
<dl>
    <dt>html</dt>
    <dd>負責頁面的結構</dd>

    <dt>css</dt>
    <dd>負責頁面的表現</dd>

    <dt>javascript</dt>
    <dd>負責頁面的行爲</dd>

</dl>

html表格

1、table常用標籤

1、<table>標籤：聲明一個表格
2、<tr>標籤：定義表格中的一行
3、<td>和<th>標籤：定義一行中的一個單元格，<td>代表普通單元格，<th>表示表頭單元格

2、table常用屬性

1、border： 定義表格的邊框
2、cellpadding： 定義單元格內內容與邊框的距離
3、cellspacing： 定義單元格與單元格之間的距離
4、align： 設置單元格中內容的水平對齊方式（ left | center | right）
5、valign： 設置單元格中內容的垂直對齊方式（ top | middle | bottom）
6、colspan： 設置單元格水平合併
7、rowspan： 設置單元格垂直合併

3、傳統佈局

傳統的佈局方式就是使用table來做整體頁面的佈局，佈局的技巧歸納爲如下幾點：
1、定義表格寬高，將border、cellpadding、cellspacing全部設置爲0
2、單元格里面嵌套表格
3、單元格中的元素和嵌套的表格用align和valign設置對齊方式
4、通過屬性或者css樣式設置單元格中元素的樣式