html的常用基礎標籤，學習web前端的第一步
圖片標籤
列表標籤
<dl>
<dt>上層</dt>
<dd>下層<dd>
</dl>
效果：
上層
下層
有序列表
<a href="#">標籤的target屬性當值為_self時，為在本頁打開連接，當屬性值為_blank時，為從新打開一個標籤頁打開，href=#表示頁面不進行跳轉
表格標籤
<table><tr>行<td>
寫在table內的表格標題標籤<caption>
以前常用table做布局，雖然現在不常用了，但這裡也演示一下table布局
目標就是把網頁做成一個類似這樣的布局。有些表格中的一塊要麼跨行要麼跨列，思考方法是看這快是否在一行，如果在一行那就是跨列，如果在一列那就是跨行。跨行跨列的操作都是針對單元格的，所以寫屬性要寫在單元格上，跨列用colspan，跨行用rowspan。
Advertisements
表格中的每一個單元格內部還可以套一個表格，所以設計網站的時候，可以先確定整體的行數和列數，確定一個大表格，然後具體到某行某列的時候再看具體的行數列數，然後再套用相應的表格。這樣從整體到部分，就可以確定出一個網站的骨架了，然後最內部的高度決定次內部的高度，一層一層逐漸決定，內部的可以把外部給撐大，所以內部一定要設置好高度和寬度。一般來說外部設置好高度，而內部聽過百分比的方式操作高度。
的方式製作一個購物網站的首頁
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
Advertisements
</head>
<body>
<table border="1px" width="1300px" align="center" cellpadding="0px" cellspacing="0px">
<tr>
<td>
<table border="0px" width="100%"><!--寬度100%就表示和上一層完全重合-->
<tr height="50px">
<td width="33.3%">
<img src="../img/alibaba.jpg" height="48px"/>
</td>
<td width="33.3%">
<img src="../img/header.png" height="48px"/>
</td>
<td width="33.3%">
<a href="">登陸</a>
<a href="">註冊</a>
<a href="">購物車</a>
</td>
</tr>
</table>
</td>
</tr>
<tr height="50px" bgcolor="black">
<td>
<a href="#"><font size="5" color="white">首頁</font></a>
<a href="#"><font color="white">手機</font></a>
<a href="#"><font color="white">寵物</font></a>
<a href="#"><font color="white">家用電器</font></a>
<a href="#"><font color="white">數碼</font></a>
</td>
</tr>
<tr>
<td>
<img src="../img/lunbo.jpg" width="100%"/>
</td>
</tr>
<tr>
<td>
<table border="1px" width="100%">
<tr height="50px">
<td colspan="7">
<font size="5">最新商品</font>
<img src="../img/title2.jpg" height="100%">
</td>
</tr>
<tr>
<td rowspan="2" width="190px" height="500px">
<img src="../img/big01.jpg" width="100%" height="100%"/>
</td>
<td colspan="3" width="555px" height="250px">
<img src="../img/middle01.jpg" width="100%" height="100%"/>
</td>
<td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td>
<td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td>
<td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td>
</tr>
<tr>
<td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td><td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td><td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td><td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td><td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td><td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="../img/ad.jpg" width="100%"/>
</td>
</tr>
<tr>
<td>
<table border="1px" width="100%">
<tr height="50px">
<td colspan="7">
<font size="5">最新商品</font>
<img src="../img/title2.jpg" height="100%">
</td>
</tr>
<tr>
<td rowspan="2" width="190px" height="500px">
<img src="../img/big01.jpg" width="100%" height="100%"/>
</td>
<td colspan="3" width="555px" height="250px">
<img src="../img/middle01.jpg" width="100%" height="100%"/>
</td>
<td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td>
<td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td>
<td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td>
</tr>
<tr>
<td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td><td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td><td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td><td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td><td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td><td width="185px" height="250px" align="center">
<a href=""></a><img src="../img/small09.jpg" /></a><br/>
<a><font color="red">廚房用具</font></a><br/><br/><br/>
<font color="red">￥300</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="../img/footer.jpg" width="100%"> </td>
</tr>
<tr>
<td align="center">
<a href="#">關於我們</a>
<a href="#">聯繫我們</a>
<a href="#">加入我們</a>
<a href="#">關於我們</a>
<a href="#">關於我們</a>
<a href="#">關於我們</a>
</td>
<p>
這個是一個首頁
</p>
</tr>
</table>
</body>
</html>
效果為
框架集標籤frameset
frameset不能和body一起用，用的時候把body去掉
frame的屬性
超鏈接的target屬性的值，如果和frame的name屬性的值一樣，那麼點擊超鏈接的效果是，超鏈接所顯示的頁面會在那麼frame區域顯示。
可以看出分出了預定效果，html這裡沒有涉及h5的內容，且很基礎，但都是常用的標籤，老手就請忽略這篇文章。
超鏈接完成定位標記
使用超鏈接完成從頁面底部點擊回到頂部的操作
頂部寫<a name="top">頂部</a>
底部寫<a href="#top">回到頂部</a>
這樣點擊回到頂部連接，就調到頂部，#top的意思是在本頁中找name為top的鏈接
<pre></pre>標籤格式化輸出，保存數據的原樣格式
<sub><sub>下標
<sup><sup>上標