HTML标签(图片标签,超链接标签,表格标签)

原创已于 2024-09-05 20:57:46 修改 · 451 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2024-09-05 20:56:36 首次发布

1.图片标签img

img是单标签

img标签必须带有src属性,表示图片的路径

其他属性:

alt:替换文本,当图片不能正确显示的时候,加载不出来,会显示alt属性的文本内容。

title:提示文本,鼠标放到图片上,就会有提示

width/height:控制图片的宽度和高度

border:边框参数是宽度的像素px

src:图片的url路径, 相对路径;以html所在的位置为基准,找到图片的位置绝对路径:一个完整的磁盘路径或者网络路径

<!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>
    
    <img src="D:\Huawei Share\Screenshot\" alt="图片找不到了" title="这是一个图片" >
    <img src="D:\Huawei Share\Screenshot\林俊杰.bmp" width="100">
    <img src="D:\Huawei Share\Screenshot\林俊杰.bmp" width="500px" height="500px" border="8px">

</body>
</html>

2.超链接标签:a

href属性:必须具备,表示点击后会跳转到那个页面,(在原有的标签页刷新打开)

target:打开方式,默认是_self(在原有页面打开),target="_blank"(在新的标签页打开)

href="#",空连接(刷新)

href=相对路径自己写的网页内部链接 href="test.zip"路径是一个文件,下载链接

<a href="https://www.baidu.com/">百度</a>
    <a href="https://www.baidu.com" target="_blank">baidu</a>
    <a href="https://www.baidu.com" target="_self">baidu</a>

 <!-- 图片链接 双击图片跳转页面 -->
    <a href="https://www.baidu.com" >
        <img src="D:\Huawei Share\Screenshot\tomcat.bmp" alt="">
    </a>

3.表格标签

table:表示整个表格

tr:表示表格的一行

td:表示一个单元格

th:表示表头单元格,会居中加粗(td包含th)

thead:表格的头部区域,范围比th大

table标签中的属性:

align:表格相对于周围元素的对齐方式,align=center/left/right(在页面的中间,左,右)

border:表示边框,数字越大,边框越粗

cellpadding:内容距离边框的距离

cellspacing:单元格之间的距离

width/height:宽度高度

合并单元格:

跨行合并:rowspan="n"

跨列合并:colspan="n"

 <table  border="1" cellspacing="0" cellpadding="10"  align="right">
       <!-- <caption>成绩表</caption> -->
        <thead>成绩表</thead>
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>80</td>
            <td>90</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>80</td>
            <td>90</td>
        </tr>
        <tr>
            <td colspan="3">制表时间:2024/9/2</td>
        </tr>
    
</table>