亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

HTML img標(biāo)簽和超鏈接標(biāo)簽詳細(xì)介紹

  發(fā)布時(shí)間：2025-06-20 17:00:45   作者：椰椰椰耶   我要評(píng)論
文章介紹了HTML中img標(biāo)簽的使用,包括src屬性（指定圖片路徑）、相對(duì)/絕對(duì)路徑區(qū)別、alt替代文本、title提示、寬高控制及邊框設(shè)置等，本文主要給大家介紹HTML img標(biāo)簽和超鏈接標(biāo)簽的相關(guān)知識(shí)，感興趣的哦朋友一起看看吧

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 用來(lái)替換的文字
  • alt 后面的文案，是只有當(dāng)圖片加載出錯(cuò)的時(shí)候才會(huì)顯示，如果圖片加載成功，則不會(huì)顯示
<html>
    <head>
        <title>這是 img 其他屬性演示</title>
    </head>
    <body>
        <p>
            白云圖片：<img src="cloud.pnggg" alt="白云圖片加載出現(xiàn)問(wèn)題">
        </p>
    </body>
</html>

title 屬性

  • 提示文本，鼠標(biāo)放到圖片上，就會(huì)有提示
<html>
    <head>
        <title>這是 img 其他屬性演示</title>
    </head>
    <body>
        <p>
            白云圖片：<img src="cloud.png" alt="白云圖片加載出現(xiàn)問(wèn)題" 
            title="這是一張美麗的白云圖片">
        </p>
    </body>
</html>

width/height 屬性

  • 控制寬度高度
  • 高度和寬度一般改一個(gè)就行，另外一個(gè)會(huì)等比例縮放，否則圖片就會(huì)失衡
<html>
    <head>
        <title>這是 img 其他屬性演示</title>
    </head>
    <body>
        <p>
            白云圖片：<img src="cloud.png" alt="白云圖片加載出現(xiàn)問(wèn)題" 
            title="這是一張美麗的白云圖片" wight="200px">
        </p>
    </body>
</html>
  • px 代表像素，就是圖片上許多的亮點(diǎn)。像素越大，圖片就越大

border 屬性

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

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

border 后面跟邊框的大小

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

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

  • href：必須具備，表示點(diǎn)擊后會(huì)跳轉(zhuǎn)到哪個(gè)頁(yè)面
  • target：代表打開(kāi)方式，默認(rèn)是 _self，直接在原頁(yè)面打開(kāi)新頁(yè)面；如果是 _blank，則用新的標(biāo)簽頁(yè)打開(kāi)
<!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 >點(diǎn)擊跳轉(zhuǎn)百度</a>
    <a ><img src="baidu.png" border="5px"></a>
    <a href="#">跳轉(zhuǎn)到當(dāng)前頁(yè)面</a>
</body>
</html>

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

表格標(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 方式來(lái)設(shè)置。這些屬性都要放到 table 標(biāo)簽中

  • align 是表格相對(duì)于周圍元素的對(duì)齊方式，align="center"（不是內(nèi)部元素的對(duì)齊方式）
  • border 表示邊框，1 表示有邊框（數(shù)字越大，邊框越粗）， "" 表示沒(méi)邊框.
  • cellpadding：內(nèi)容距離邊框的距離，默認(rèn) 1 像素
  • cellspacing：?jiǎn)卧裰g的距離，默認(rèn)為 2 像素
  • width / height：設(shè)置尺寸
    注意： 這幾個(gè)屬性 vscode 都提示不出來(lái)
<!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>
  • 合并列就用 rowspan；合并行就用 colspan
  • 后面的數(shù)字就是要和并的單元格數(shù)量
  • 合并后，被合并的單元格附近的單元格會(huì)被擠開(kāi)，要將其給注釋掉

到此這篇關(guān)于HTML img標(biāo)簽和超鏈接標(biāo)簽的文章就介紹到這了,更多相關(guān)html img標(biāo)簽和超鏈接標(biāo)簽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論