1. 程式人生 > 其它 >前端HTML5標籤學習(一)

前端HTML5標籤學習(一)

1.基本標籤

1.1標題標籤<h1>我是一級標題</h2>

1.2段落標籤<p>我是段落標籤</p>

1.3換行標籤<br>

1.4水平線標籤<hr>

1.5斜體標籤<em>我是斜體標籤</em>

1.6字型加粗標籤<strong>我是字型加粗標籤</strong>

1.7影象標籤<img src=" 路徑" alt="圖片載入失敗提示資訊">

./同一層級目錄../上一層級目錄

1.8超連結標籤<a href=" 網址" target=_blank>網址名</a>

<a href="#">網址名</a>

target屬性值為_blank時,表示在新標籤頁中開啟 #表示不會跳轉 2.加的標籤 2.1無序列表 2.2有序列表 2.3自定義列表 3.表格標籤 4.塊元素與行內元素 在網頁上獨佔一行的叫塊元素,可以放在同一行的叫行內元素。 常見的行內元素:a標籤,img標籤,strong標籤,em標籤 常見的塊元素:標題標籤,p標籤,hr標籤,ul標籤 無意義的塊元素與行內元素 無意義的塊元素標籤<div>我是無意義的塊元素</div> 無意義的行內元素標籤<span>我是無意義的行內元素</span>
<!
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>憫農</title> </head> <body> <!-- !+回車或Tab鍵搭建框架
--> <!-- html是檔案型別 --> <!-- Ctrl鍵加/ 快速註釋--> <!-- &nbsp 是空格符 --> <!-- 1.基本標籤 --> <!-- 1.1標題標籤 --> <!-- <h1>我是一級標題</h1> <h2>我是二級標題</h2> <h3>我是三級標題</h3> <h4>我是四級標題</h4> <h5>我是五級標題</h5> <h6>我是六級標題</h6>--> <!-- 1.2段落標籤 --> <p>鋤禾日當午,汗滴禾下土。誰知盤中餐,粒粒皆辛苦。</p> <!-- 1.3換行標籤 --> <br> <!-- 1.4水平線標籤 --> <hr> <!-- 1.5斜體標籤 --> <em>我是斜體標籤</em> <!-- 1.6加粗標籤 --> <strong>我是加粗標籤</strong> <!-- 1.7影象標籤 --> <img src="./t014b1edc92f1a7ec1b.jpg" alt="圖片載入失敗提示資訊"> <!-- src="圖片路徑" --> <!-- ./同一層級目錄 ../上一層級目錄 --> <!-- 1.8超連結標籤 --> <a href="網址">網址名</a> <!-- 調到自己寫的htlm頁面 --> <a href="./helloworld.html">憫農</a> <!-- target屬性值為_blank時,表示在新標籤頁中開啟 --> <a href="https://www.baidu.com/"target="_blank">百度</a> <!-- 2.加的標籤 --> <!-- 2.1無序列表 --> <ul> <li>書本</li> <li>水果</li> <li>動物</li> </ul> <!-- 2.2有序列表 --> <ol> <li>起床</li> <li>刷牙洗漱</li> <li>吃早飯</li> </ol> <!-- 2.3自定義列表 --> <dl> <dt>水果</dt> <dd>香蕉</dd> <dd>桃子</dd> <dd>西瓜</dd> <dt>動物</dt> <dd>老虎</dd> <dd>熊貓</dd> <dd>獅子</dd> </dl> <!-- 3.表格標籤 --> <table border="2"> <tr> <td>姓名</td> <td>年齡</td> <td>性別</td> </tr> <tr> <td>tom</td> <td>18</td> <td></td> </tr> <tr> <td>maary</td> <td>15</td> <td></td> </tr> </table> </body> </html>