html标签

最新推荐文章于 2025-04-24 02:25:51 发布

pk5515

最新推荐文章于 2025-04-24 02:25:51 发布

阅读量93

点赞数

分类专栏： # HTML+CSS 文章标签： html5

本文链接：https://blog.youkuaiyun.com/pk5515/article/details/120297531

版权

HTML+CSS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了HTML中的表格元素用法，包括标题、表头、表尾和跨行/列单元格。此外，还展示了如何插入图片并添加链接，以及如何利用iframe嵌入网页。通过示例代码，读者可以了解如何创建和操作这些元素，提升Web开发技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格

<!DOCTYPE html>
<html lang="CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <caption><b>我的书单</b></caption>
        <tr>
            <th>书名</th>
            <th>作者</th>
        </tr>
        <tr>
            <td>高等数学</td>
            <td>线性代数</td>
        </tr>
        <tr>
            <td>Java实用教程</td>
            <td>Linux就该这么学</td>
        </tr>
        <tr>
            <td rowspan="2">跨越两行的单元格</td>
            <td>普通单元格</td>
        </tr>
        <tr>
            <td>普通单元格</td>
        </tr>
        <tr>
            <td colspan="2">跨越两列的单元格</td>
        </tr>
        <tr>
            <td>普通单元格</td>
            <td>普通单元格</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述
test1.html:

<!DOCTYPE html>
<html lang="CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <caption>
            <b>我的书单</b>
        </caption>
        <thead>
        <tr>
            <th>&nbsp;</th>
            <th>书名</th>
            <th>作者</th>
        </tr>
        </thead>   
        <tfoot>
        <tr>
            <td colspan="3" style="text-align: right;">现总计：四本图书</td>
        </tr>
        </tfoot>
        <tbody>
        <tr>
            <th rowspan="2">java体系</th>
            <td>疯狂java讲义</td>
            <td>李刚</td>
        </tr>
        <tr>
            <td>轻量级java EE企业应用实战</td>
            <td>李刚</td>
        </tr>
    </tbody>
    <tbody>
    <tr>
        <td rowspan="2">ios体系</td>
        <td>疯狂Swift讲义</td>
        <td>李刚</td>
    </tr>
    <tr>
        <td>疯狂ios讲义</td>
        <td>李刚</td>
    </tr>
    </tbody>
    </table>
</body>
</html>

在这里插入图片描述
第一行是thead部分，第二三行是第一个tbody部分，第四五行是第二个tbody部分，第六行是tfoot部分。

图片

test2.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>
    <h4>这是一张图片</h4>
    <img src="img/scene .JPG" alt="黄山松树" width="200"><br>
    <h4>我在图片上添加了链接</h4>
    <a href="test1.html" target="_blank"><img src="img/city.jpg" alt="这是一张城市的照片" width="200"></a><br>
</body>
</html>

在这里插入图片描述
点击城市照片后：

iframe

test3.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>
    <iframe src="test1.html" width="400" height="200"></iframe><br>
    主页面内容<br>
    <iframe src="test1.html" width="400" height="200" srcdoc="<h3>HTML 5</h3><div>HTML 5是重要的标记语言</div>"></iframe><br>
    <iframe src="test4.html" width="400" height="200" sandbox="allow-forms"></iframe><br>
    <iframe src="test5.html" width="400" height="200" sandbox="allow-top-navigation"></iframe><br>
</body>
</html>

test4.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>
    <form action="test1.html">
        用户名：<input type="text" name="name"/><br>
        密码：<input input="password" name="pass"/><br>
        <input type="submit" value="提交"/><br>
    </form>
</body>
</html>

title属性用于为HTML元素指定额外信息。通常来说，当用户把鼠标移动到该元素上时，浏览器将会显示title属性所指定的信息。
title属性常和<a…/>元素一起使用，以提供关于链接目标的信息。同时他也是<abbr…/>元素必需的属性
test5.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>
    <a href="https://www.baidu.com/?tn=40020637_5_oem_dg" alt="百度一下，你就知道" title="这是百度的网址" target="_top">点击使用百度</a>
</body>
</html>

在这里插入图片描述
accesskey属性
当HTML页面中有很多个元素时，可以通过该标签属性指定激活该元素的快捷键，这样用户通过键盘快捷键就可以激活对应的HTML元素。
Alt+相应按键

<!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>
    <form>
        用户名：<input type="text" name="name" accesskey="n"/><br>
        密码：<input input="password" name="pass" accesskey="p"/><br>
        <a href="test1.html" accesskey="x">第一个页面</a>
    </form>
</body>
</html>