【HTML】img标签和超链接标签

文章目录

• img 标签
• • src 属性
  • alt 属性
  • title 属性
  • width/height 属性
  • border 属性
• 超链接标签：a

img 标签

img 是一个单标签

src 属性

img 标签必须搭配 src 使用（指定图片的路径）

• 相对路径：

  • ./xxx.png
  • ./img/xxx.png
  • ../xxx.png

• 绝对路径：

  • 图片路径
  • 网络上的图片资源

html>
    head>
        图片插入演示
    head>
    body>
        p>
            strong>
                相对路径下插入图片：strong>
            在本目录下：img src="cloud.png">
            br/>
            在本目录文件夹中：img src="img/cloud.png">
            br/>

            strong>
                绝对路径下插入图片：strong>
            br/>
            输入图片路径：img src="D://My Computer/cloud.png">
            br/>
            网络上的图片资源：img src="https://stricky-1319251483.cos.ap-chongqing.myqcloud.com/stricky/pic/202409111630616.png">
        p>
    body>
html>

alt 属性

• 当文本不能正确显示的时候，就会显示一个赋给 alt 用来替换的文字
• alt 后面的文案，是只有当图片加载出错的时候才会显示，如果图片加载成功，则不会显示

html>
    head>
        title>这是 img 其他属性演示title>
    head>
    body>
        p>
            白云图片：img src="cloud.pnggg" alt="白云图片加载出现问题">
        p>
    body>
html>

title 属性

• 提示文本，鼠标放到图片上，就会有提示

html>
    head>
        title>这是 img 其他属性演示title>
    head>
    body>
        p>
            白云图片：img src="cloud.png" alt="白云图片加载出现问题" 
            title="这是一张美丽的白云图片">
        p>
    body>
html>

width/height 属性

• 控制宽度高度
• 高度和宽度一般改一个就行，另外一个会等比例缩放，否则图片就会失衡

html>
    head>
        title>这是 img 其他属性演示title>
    head>
    body>
        p>
            白云图片：img src="cloud.png" alt="白云图片加载出现问题" 
            title="这是一张美丽的白云图片" wight="200px">
        p>
    body>
html>

• px 代表像素，就是图片上许多的亮点。像素越大，图片就越大
  

border 属性

加上边框，参数是宽度的像素，但是一般是使用 CSS 来设定

html>
    head>
        title>这是 img 其他属性演示title>
    head>
    body>
        p>
            白云图片：img src="cloud.png" alt="白云图片加载出现问题" 
            title="这是一张美丽的白云图片" wight="200px" border="10px">
        p>
    body>
html>

• border 后面跟边框的大小
  

• 标签后面的属性顺序是没有要求的，顺序对显示结果没有影响
• 每个属性之间用 空格 或者 回车 隔开都可以
• value 都写在 “” 里面

超链接标签：a

• href：必须具备，表示点击后会跳转到哪个页面
• target：代表打开方式，默认是 _self，直接在原页面打开新页面；如果是 _blank，则用新的标签页打开

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/">点击跳转百度a>
    a href="https://www.baidu.com/">img src="baidu.png" border="5px">a>
    a href="#">跳转到当前页面a>
body>
html>

• # 是一个占位符，仍然是当前地址
• 前两个都是直接跳转到百度，第三个仍然是留在当前网页

表格标签

• table 标签：表示整个表格
• tr：表示表格的一行
• td：表示一个单元格
• th：表示表头单元格，会 居中加粗
• thead：表格的头部区域（注意和 th 区分，范围是比 th 要大的）
• tbody：表格得到主体区域

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Documenttitle>
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>18td>
        tr>
        tr>
            td>李四td>
            td>男td>
            td>19td>
        tr>
        tr>
            td>王五td>
            td>女td>
            td>18td>
        tr>
    table>
body>
html>

• border：控制边框粗细
• width、width：控制表格大小
• cellspacing：控制单元格之间的距离，默认是 2 像素
• cellpadding：控制内容距离边框的距离，默认是 1 像素
• align：控制表格相对于周围元素的对齐方式

表格标签有一些属性，可以用于设置大小边框等，但是一般使用 CSS 方式来设置。这些属性都要放到 table 标签中

• align 是表格相对于周围元素的对齐方式，align="center"（不是内部元素的对齐方式）
• border 表示边框，1 表示有边框（数字越大，边框越粗），"" 表示没边框.
• cellpadding：内容距离边框的距离，默认 1 像素
• cellspacing：单元格之间的距离，默认为 2 像素
• width / height：设置尺寸
  注意：这几个属性 vscode 都提示不出来

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Documenttitle>
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>18td>
            tr>
            tr>
                td>李四td>
                td>男td>
                td>19td>
            tr>
            tr>
                td>王五td>
                td>女td>
                td>18td>
            tr>
        tbody>
    table>
body>
html>

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

合并单元格

将需要合并的单元格数量直接加在 td 后面

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Documenttitle>
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>18td>
            tr>
            tr>
                td>李四td>
                
                td>19td>
            tr>
            tr>
                td colspan="2">王五 / 女td>
                
                td>18td>
            tr>
        tbody>
    table>
body>
html>

• 合并列就用 rowspan；合并行就用 colspan
• 后面的数字就是要和并的单元格数量
• 合并后，被合并的单元格附近的单元格会被挤开，要将其给注释掉