圖片標籤
加載一張圖片:
<img src="./img/Aida.png"/>
<img src="img/head.jpg"/>
可以看到圖片的末尾不會換行,所以圖片標籤是行內元素。
屬性
長寬:
改變圖片的大小,可以寫成像素,也可以寫成百分比。
width="200px" height="200px"
注:當只寫寬或者只寫高的時候,圖片會將長寬等比例的放大縮小
使用網絡資源
只需要在src中寫入對應圖片的地址即可
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" >
不安全,被別人刪了就加載不出來了
標題
<img src="img/109951163723944814.gif" title="ITMan 現狀" alt = "圖片加載失敗" >
- title : 當鼠標懸浮在圖片上的時候會出現
- alt :當圖片加載失敗的時候會出現
超鏈接標籤
點擊可以跳轉到另一個界面
文本
<!-- 本地資源 -->
<a href="dome02.html" >跳轉</a>
<!-- 網絡資源 -->
<a href="http://www.baidu.com">百度</a><br>
圖片
超鏈接標籤內部也可以是圖片,點擊圖片跳轉另一個頁面
<a href="http://www.baidu.com"><img src = "https://www.baidu.com/img/bd_logo1.png?where=super" width="100px"/></a>
跳轉位置
在默認情況下,新打開的頁面是在原頁面的,可以通過修改target參數修改跳轉頁面的位置。
<a href="http://www.baidu.com" target="_blank">baidu</a><!--在新窗口打開-->
參數爲:
原頁面是新打開頁面的父級頁面,第一個打開的窗口是頂層頁面。
錨點
錨點用於頁面內的跳轉,用於“返回頂部”、“目錄”等
<a href="#first">第一章</a><br>
<a href="#second">第二章</a><br>
<a href="#third">第三章</a><br>
<a href="#fourth">第四章</a><br>
<a id = "first"/>
<a id = "second"/>
<a id = "third"/>
<a id = "fourth"/>
設置標籤用a便籤的id參數(在html5之後用id,之前用name),在合適的位置添加錨點,之後在需要跳轉的位置用a標籤的herf參數 #+錨點名,即可實現跳轉。
表格標籤
創建一個表格
創建一個表格用<table></table>
在表格中加入一行<tr></tr>
在行中加入單元格<td></td>
如果想加表頭用<th></th>
<table >
<tr>
<th>姓名</th>
<th>id</th>
<th>學校</th>
</tr>
<tr>
<td>王二狗</td>
<td>2969</td>
<td>dmu</td>
</tr>
<tr>
<td>大偉哥</td>
<td>3929</td>
<td>dmu</td>
</tr>
</table>
屬性
表格框的寬度:
<table border="1px">
內容到邊框的距離
<table cellpadding="5px">
單元格之間的寬度
<table cellspacing="10px">
調整單元格高度
通過調整行的高度實現
<tr height="100px">
調整單元格寬度
通過調整第一行單元格寬度實現
<th width="100px">學校</th>
快捷建表
<!--建4行5列的表格,輸入下面的語句,按tab-->
table>tr*4>td*5
單元格合併
只能相鄰單元格,合併的時候一定要記得把合併的單元格標籤刪掉
<td colspan="2"></td><!--行合併,向右合併一個,一共兩個合成一個-->
<td rowspan="2"></td><!--列合併,向下合併一個,一共兩個合成一個-->
原格式輸出
可以將尖括號內的文本原格式輸出,html中什麼樣,瀏覽器中就什麼樣,常用於輸出代碼(換行多)。
<pre>xxx</pre>
尖括號的輸出
在html中使用尖括號,瀏覽器會自動識別爲標籤,想要用尖括號,就要用尖括號的替代符號。
< — <
> — >
< h1 > 尖括號的輸出 < / h1 >