一、顯示級分類

1、塊級元素（block）：獨佔一行，大小可以調整。總是在新行上開始。

高度，寬度可以使用css定義（如果當前元素的子元素小於或超出父元素，預設情況下也不會影響父元素的大小）。

行高以及外邊距和內邊距都可使用css控制。

塊級元素舉例：div p h1 h2 h3 h4 form ul ol dl標籤等

<div style="width:200px;height:100px;background: palevioletred;">第一個div</div>
<div>第二個div</div>
<div>第三個div</div>
 

2、內聯元素（inline）：不可以獨佔一行，不可以調整大小。和其他元素都在一行上。

內聯元素(inline element)：又稱為“文字模式”，即一個挨著一個，都在同一行按從左至右的順序顯示。

高度、寬度無法設定，即使使用css設定也不生效，高度寬度取決於子元素的高度和寬度。

行高以及外邊距和內邊距都無法由css控制。

內聯元素舉例：a b br i span 標籤等

<span style="width:200px;height:100px;background: palevioletred;">第一個span</span>
<span>第二個span</span>
 

3、內聯塊元素(inline-block):不可以獨佔一行，但是可以調整大小。和其他元素都在一行上。

內聯塊(inline-block)：具備內聯元素、塊元素的一部分特點。

高度、寬度可以設定。

 行高以及外邊距和內邊距都由css控制。

內聯塊舉例：input、select、option等。

<span style="width:200px;height:100px;background: palevioletred;">第一個span</span>
<span style="display: block;">第二個span</span>
<input style="width:200px;height:100px;background: palevioletred;">
 

如果想改變顯示級別，通過css的display屬性設定

二、文字型別的標籤

<u>中軟國際！</u><br>
<i>中軟國際</i><br>
<em>中軟國際</em><br>
<strong>中軟國際</strong><br>
<b>中軟國際</b><br>
<font color="red" size="7" face="楷體">中軟國際</font>

i，b,font,在html5中已經廢棄了。

三、快型別的文字標籤

h1-h6:表示標題文字，從大到小，加粗，外邊距（本元素與其他元素之間的距離）

align：屬性，水平對齊方式，left，center,right

<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>

四、超連結

點選內容，可以實現跳轉。

HTML 使用超級連結與網路上的另一個文件相連，通俗的說就是通過連線來訪問其他網頁資源。 （內聯元素）

1、屬性：href: 指定跳轉的路徑

      相對路徑：預設情況下是從當前html檔案所在的目錄開始

        ./當前路徑

        ../返回上一層路徑

        /根路徑後面要專案名稱才可以

      絕對路徑：

        網路上的路徑，訪問網路資源一定要加上http協議

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

        從某個碟符開始的路徑

        target: 指定如何開啟新的網頁

        _blank:在新的視窗中開啟

        _self:在當前網頁所在的框架內開啟，預設的

        _parent:在父框架內顯示

        _top:在最上層的框架顯示

        framename:框架的某一部分

        title:標題，當滑鼠移入的時候顯示

2、錨點：

實現的頁內跳轉

又叫命名錨記，是網頁內的超級連結，可以迅速定位當前網頁的某一個位置。

<a name="top"></a>

<a href="#top">回到頂部</a>

五、排版型別的標籤

1、p標籤：段落標籤，內部包裹一段文字，預設上下自帶16px的外邊距，塊級元素,align屬性：left,center,right。

2、div標籤：塊級元素，一般配合CSS一起對網頁佈局進行分塊。div本身是無意義的，需要通過class等起有意義的名字。

3、span標籤：內聯元素，用來對非特殊樣式顯示的元素進行渲染。

4、dl自定義列表：

類似定義的形式，可以寫一個標題，然後對標題進行描述。

dl:自定義列表，上下具有16px的外邊距

dt：自定義標題

dd：對標題的描述，左邊具有40px的外邊距

<dl>
	<dt>北京</dt>
	<dd>首都，全國人民都向往的地方。</dd>
	<dt>上海</dt>
	<dd>直轄市，東方明珠。</dd>
</dl>

5、有序列表

ol:ordered list，表示一組內容相似的，有先後順序的資料。上下有16px的外邊距，左邊有40px的內邊距

li:表示某一個項

type:前面標誌的型別， A，a，i，I，1（預設）

start:順序從幾開始，預設從1開始

6、無序列表                  用來設定網頁導航或者選單。通常使用ul標籤

ul：描述一組相似的，但是不分先後順序的資料資訊，上下有16px的外邊距，左邊有40px的內邊距

li:表示每一項

type:設定標識的樣式，disc（預設），circle，square

7、img圖片標籤

img:可以將外部的圖片引入到當前的網頁，內聯塊元素，inline-block，不能獨佔一行，可以調整大小

src:設定圖片的路徑，相對路徑

border:為圖片設定邊框，值為畫素px

width:寬度

height:高度

尺寸的表示：

1. 1. 絕對的畫素值，不隨著父元素的變化而變化的
   2. 相對的百分比，相對父元素大小的百分，大小會隨著父元素的變化而變化

對於圖片來說，一般我們只設置某一個方向的大小，另一個方向等比例地變化，不會拉伸或者壓縮。一般設定寬度。

alt:當圖片載入失敗的時候，顯示的文字

title:標題，當滑鼠移入圖片的時候，在滑鼠下方出現的文字

align:圖片的對齊方式

1. 1. 與同一行元素的垂直對齊方式，vertical-align，top , center ,bottom
   2. float,浮動

8、圖片對映

將一個圖片劃分成若干的區域，對每一個區域設定超連結。

設定img的usemap屬性的值為一個map的name的值，#name的值

同時設定map標籤：

Area：非閉合標籤

屬性： shape:區域的形狀，rect/circle/polygon/default

       Coords：設定形狀的座標，包括x，y的位置，半徑

       href:連結的地址

       alt:載入失敗時顯示的文字

       target:連結在什麼地方載入

<img src="img/dog.jpg" usemap="#Map"/>
<map name="Map">
    <area shape="circle" coords="160,150,50" alt="文字" href="12-eye.html" target="_blank"/>
    <area shape="circle" coords="240,200,50"  alt="文字" href="12-nose.html" target="_blank"/>
</map>