當(dāng)前位置：首頁 > news >正文

網(wǎng)站建設(shè)推進(jìn)會(huì)講話稿網(wǎng)址搜索ip地址

news 2025/7/2 2:32:58

網(wǎng)站建設(shè)推進(jìn)會(huì)講話稿,網(wǎng)址搜索ip地址,怎么查詢一個(gè)網(wǎng)站從哪做的,武器系統(tǒng)軟件開發(fā)文檔文章目錄 img 標(biāo)簽src 屬性alt 屬性title 屬性width/height 屬性border 屬性超鏈接標(biāo)簽：a表格標(biāo)簽合并單元格 img 標(biāo)簽 img 是一個(gè)單標(biāo)簽 src 屬性 img 標(biāo)簽必須搭配 src 使用（指定圖片的路徑） 相對(duì)路徑： ./xxx.png./img/xxx.…

文章目錄

img 標(biāo)簽
- src 屬性
- alt 屬性
- title 屬性
- width/height 屬性
- border 屬性
超鏈接標(biāo)簽：a
- 表格標(biāo)簽
- - 合并單元格

img 標(biāo)簽

img 是一個(gè)單標(biāo)簽

src 屬性

img 標(biāo)簽必須搭配 src 使用（指定圖片的路徑）

相對(duì)路徑：
- ./xxx.png
- ./img/xxx.png
- ../xxx.png
絕對(duì)路徑：
- 圖片路徑
- 網(wǎng)絡(luò)上的圖片資源

<html><head>圖片插入演示</head><body><p><strong>相對(duì)路徑下插入圖片：</strong>在本目錄下：<img src="cloud.png"><br/>在本目錄文件夾中：<img src="img/cloud.png"><br/><strong>絕對(duì)路徑下插入圖片：</strong><br/>輸入圖片路徑：<img src="D://My Computer/cloud.png"><br/>網(wǎng)絡(luò)上的圖片資源：<img src="https://stricky-1319251483.cos.ap-chongqing.myqcloud.com/stricky/pic/202409111630616.png"></p></body>
</html>

alt 屬性

當(dāng)文本不能正確顯示的時(shí)候，就會(huì)顯示一個(gè)賦給 alt 用來替換的文字
alt 后面的文案，是只有當(dāng)圖片加載出錯(cuò)的時(shí)候才會(huì)顯示，如果圖片加載成功，則不會(huì)顯示

<html><head><title>這是 img 其他屬性演示</title></head><body><p>白云圖片：<img src="cloud.pnggg" alt="白云圖片加載出現(xiàn)問題"></p></body>
</html>

image.png|373

title 屬性

提示文本，鼠標(biāo)放到圖片上，就會(huì)有提示

<html><head><title>這是 img 其他屬性演示</title></head><body><p>白云圖片：<img src="cloud.png" alt="白云圖片加載出現(xiàn)問題" title="這是一張美麗的白云圖片"></p></body>
</html>

image.png|402

width/height 屬性

控制寬度高度
高度和寬度一般改一個(gè)就行，另外一個(gè)會(huì)等比例縮放，否則圖片就會(huì)失衡

<html><head><title>這是 img 其他屬性演示</title></head><body><p>白云圖片：<img src="cloud.png" alt="白云圖片加載出現(xiàn)問題" title="這是一張美麗的白云圖片" wight="200px"></p></body>
</html>

px 代表像素，就是圖片上許多的亮點(diǎn)。像素越大，圖片就越大

border 屬性

加上邊框，參數(shù)是寬度的像素，但是一般是使用 CSS 來設(shè)定

<html><head><title>這是 img 其他屬性演示</title></head><body><p>白云圖片：<img src="cloud.png" alt="白云圖片加載出現(xiàn)問題" title="這是一張美麗的白云圖片" wight="200px" border="10px"></p></body>
</html>

border 后面跟邊框的大小

標(biāo)簽后面的屬性順序是沒有要求的，順序?qū)︼@示結(jié)果沒有影響
每個(gè)屬性之間用空格或者回車隔開都可以
value 都寫在 “” 里面

超鏈接標(biāo)簽：a

href：必須具備，表示點(diǎn)擊后會(huì)跳轉(zhuǎn)到哪個(gè)頁面
target：代表打開方式，默認(rèn)是 _self，直接在原頁面打開新頁面；如果是 _blank，則用新的標(biāo)簽頁打開

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>href 演示</title>
</head>
<body><a href="https://www.baidu.com/">點(diǎn)擊跳轉(zhuǎn)百度</a><a href="https://www.baidu.com/"><img src="baidu.png" border="5px"></a><a href="#">跳轉(zhuǎn)到當(dāng)前頁面</a>
</body>
</html>

image.png|449

# 是一個(gè)占位符，仍然是當(dāng)前地址
前兩個(gè)都是直接跳轉(zhuǎn)到百度，第三個(gè)仍然是留在當(dāng)前網(wǎng)頁

表格標(biāo)簽

table 標(biāo)簽：表示整個(gè)表格
tr：表示表格的一行
td：表示一個(gè)單元格
th：表示表頭單元格，會(huì)居中加粗
thead：表格的頭部區(qū)域（注意和 th 區(qū)分，范圍是比 th 要大的）
tbody：表格得到主體區(qū)域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1px" width="800" height="400" cellspacing="0" cellpadding="50" align="center"><tr><th>姓名</th><th>性別</th><th>年齡</th></tr><tr><td>張三</td><td>男</td><td>18</td></tr><tr><td>李四</td><td>男</td><td>19</td></tr><tr><td>王五</td><td>女</td><td>18</td></tr></table>
</body>
</html>

border：控制邊框粗細(xì)
width、width：控制表格大小
cellspacing：控制單元格之間的距離，默認(rèn)是 2 像素
cellpadding：控制內(nèi)容距離邊框的距離，默認(rèn)是 1 像素
align：控制表格相對(duì)于周圍元素的對(duì)齊方式

表格標(biāo)簽有一些屬性，可以用于設(shè)置大小邊框等，但是一般使用 CSS 方式來設(shè)置。這些屬性都要放到 table 標(biāo)簽中

align 是表格相對(duì)于周圍元素的對(duì)齊方式，align="center"（不是內(nèi)部元素的對(duì)齊方式）
border 表示邊框，1 表示有邊框（數(shù)字越大，邊框越粗）， "" 表示沒邊框.
cellpadding：內(nèi)容距離邊框的距離，默認(rèn) 1 像素
cellspacing：單元格之間的距離，默認(rèn)為 2 像素
width / height：設(shè)置尺寸
注意：這幾個(gè)屬性 vscode 都提示不出來

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1px" width="800" height="400" cellspacing="0" cellpadding="50" align="center"><thead><tr><th>姓名</th><th>性別</th><th>年齡</th></tr></thead><tbody><tr><td>張三</td><td>男</td><td>18</td></tr><tr><td>李四</td><td>男</td><td>19</td></tr><tr><td>王五</td><td>女</td><td>18</td></tr></tbody></table>
</body>
</html>

一般把表頭的信息放在 thead 中，表格信息放在 tbody 中

合并單元格

將需要合并的單元格數(shù)量直接加在 td 后面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1px" width="800" height="400" cellspacing="0" cellpadding="50" align="center"><thead><tr><th>姓名</th><th>性別</th><th>年齡</th></tr></thead><tbody><tr><td>張三</td><td rowspan="2">男</td><td>18</td></tr><tr><td>李四</td><!-- <td>男</td> --><td>19</td></tr><tr><td colspan="2">王五/女</td><!-- <td>女</td> --><td>18</td></tr></tbody></table>
</body>
</html>