html的學習知道有哪些標籤，怎麼使用，其餘就是如何將這些標籤互相混合嵌套使用了。
1.html圖像img標籤的使用
<img>標籤可以在網頁上插入一張圖片，它是獨立使用的標籤，通過“src”屬性定義圖片的地址，通過“alt”屬性定義圖片加載失敗時顯示的文字，以及對搜索引擎和盲人讀屏軟件的支持。
<img src="images/pic.jpg" alt="產品圖片" />
絕對路徑和相對路徑
像網頁上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分爲絕對地址和相對地址。
- 絕對地址：相對於磁盤的位置去定位文件的地址
- 相對地址：相對於引用文件本身去定位被引用的文件地址
絕對地址在整體文件遷移時會因爲磁盤和頂層目錄的改變而找不到文件，相對路徑就沒有這個問題。相對路徑的定義技巧：
-
“ ./ ” 表示當前文件所在目錄下，比如“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。
-
“ ../ ” 表示當前文件所在目錄下的上一級目錄，比如“../images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。
2.HTML的href鏈接標籤使用
<a>標籤可以在網頁上定義一個鏈接地址，通過src屬性定義跳轉的地址，通過title屬性定義鼠標懸停時彈出的提示文字框。
<a href="#"></a> <!-- # 表示鏈接到頁面頂部 -->
<a href="http://www.baidu.com/" title="百度一下">百度首頁</a>
<a href="2.html">測試頁面2</a>
定義頁面內滾動跳轉
頁面內定義了“id”或者“name”的元素，可以通過a標籤鏈接到它的頁面滾動位置，前提是頁面要足夠高，有滾動條，且元素不能在頁面頂部，否則頁面不會滾動。
<a href="#mao1">標題一</a>
......
......
<h3 id="mao1">跳轉到的標題</h3>
3.HTML的list列表標籤使用
3.1 有序列表
在網頁上定義一個有編號的內容列表可以用<ol>、<li>配合使用來實現，代碼如下：
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>
在網頁上生成的列表，每條項目上會按1、2、3編號，有序列表在實際開發中較少使用。
3.2 無序列表
在網頁上定義一個無編號的內容列表可以用<ul>、<li>配合使用來實現，代碼如下：
<ul>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ul>
在網頁上生成的列表，每條項目上會有一個小圖標，這個小圖標在不同瀏覽器上顯示效果不同，所以一般會用樣式去掉默認的小圖標，如果需要圖標，可以用樣式自定義圖標，從而達到在不同瀏覽器上顯示的效果相同,實際開發中一般用這種列表。
3.3 定義列表
定義列表通常用於術語的定義。<dl>標籤表示列表的整體。<dt>標籤定義術語的題目。<dd>標籤是術語的解釋。一個<dl>中可以有多個題目和解釋，代碼如下：
<h3>前端三大塊</h3>
<dl>
<dt>html</dt>
<dd>負責頁面的結構</dd>
<dt>css</dt>
<dd>負責頁面的表現</dd>
<dt>javascript</dt>
<dd>負責頁面的行爲</dd>
</dl>
4.列表，圖像，鏈接混合使用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表,圖片，鏈接混合使用</title>
</head>
<body>
<h1>圖片</h1>
<!-- 完整的寫法是：src="./images/002.jpg" ./ 表示當前目錄，可以省略 -->
<img src="./abc.png" alt="隨便一張圖" />
<a href="http://www.baidu.com" title="百度一下">到百度首頁</a>
<h1>有序列表</h1>
<!-- ol>li*3 -->
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<h1>無序列表</h1>
<!-- ul>(li>a{新聞標題})*3 -->
<ul>
<li><a href="#">新聞標題一</a></li>
<li><a href="#">新聞標題二</a></li>
<li><a href="#">新聞標題三</a></li>
</ul>
<h1>定義列表</h1>
<!-- dl>(dt+dd)*3 -->
<dl>
<dt>html</dt>
<dd>負責頁面結構</dd>
<dt>css</dt>
<dd>負責頁面的表現</dd>
<dt>javascript</dt>
<dd>負責頁面的行爲</dd>
</dl>
</body>
</html>
5.html表格table標籤的使用
5.1table常用標籤
- 1、table標籤：聲明一個表格
- 2、tr標籤：定義表格中的一行
- 3、td和th標籤：定義一行中的一個單元格，td代表普通單元格，th表示表頭單元格
5.2 table標籤裏的常用屬性：
- 1、border 定義表格的邊框
- 2、cellpadding 定義單元格內內容與邊框的距離
- 3、cellspacing 定義單元格與單元格之間的距離
- 4、align 設置單元格中內容的水平對齊方式,設置值有：left | center | right
- 5、valign 設置單元格中內容的垂直對齊方式 top | middle | bottom
- 6、colspan 設置單元格水平合併
- 7、rowspan 設置單元格垂直合併
- border-collapse:collapse 設置邊框合併，製作一像素寬的邊線的表格
5.3 表格的傳統佈局：
傳統的佈局方式就是使用table來做整體頁面的佈局，佈局的技巧歸納爲如下幾點：
- 1、定義表格寬高，將border、cellpadding、cellspacing全部設置爲0
- 2、單元格里面嵌套表格
- 3、單元格中的元素和嵌套的表格用align和valign設置對齊方式
- 4、通過屬性或者css樣式設置單元格中元素的樣式
傳統佈局目前應用：
- 1、快速製作用於演示的html頁面
- 2、商業推廣EDM製作(廣告郵件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<h1>表格</h1>
<table border="1" cellpadding="20" cellspacing="20">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<table border="1" width="300" height="200" align="center">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td valign="top" align="center">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<br />
<br />
<br />
<!-- table>(tr>td*5)*6 -->
<table border="1" width="700" height="300" align="center">
<tr>
<td colspan="5">基本情況</td>
</tr>
<tr>
<td width="15%"></td>
<td width="25%"></td>
<td width="15%"></td>
<td width="25%"></td>
<td rowspan="5"><img src="images/person.png" alt="人物圖片"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>