HTML學習(二)

圖片標籤

加載一張圖片:

<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中使用尖括號,瀏覽器會自動識別爲標籤,想要用尖括號,就要用尖括號的替代符號。
< — &lt
> — &gt

&lt h1 &gt 尖括號的輸出 &lt / h1 &gt

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章