链接元素和表格

链接元素

链接元素<a href=""></a>

1、链接网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接元素-链接网页</title>
</head>
<body>
    <a href="https://www.php.cn">我是一个链接，链接到网页</a>
</body>
</html>

2、跳转到邮箱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接元素-链接邮箱</title>
</head>
<body>
    <a href="mailto:123456@qq.com">我是一个链接，链接到邮箱</a>
</body>
</html>

3、跳转到电话

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接元素-链接电话</title>
</head>
<body>
    <a href="tel:18012345678">我是一个链接，链接到电话</a>
</body>
</html>

4、跳转到本页面的锚点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接元素-跳转锚点</title>
</head>
<body>
    <a href="#anchor">我是一个链接，跳转锚点</a>
    <div id="anchor">我是锚点</div>
</body>
</html>

表格

看下面的商品信息表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="1" width="700" cellspacing="0" cellpadding="10" align="center">
        <caption style="font-size: 1.5rem; margin-bottom: 10px">
            商品信息表
          </caption>
        <thead>
            <th>ID</th>
            <th>分类</th>
            <th>名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>总价</th>
        </thead>
        <tbody>
            <tr>
                <td>1000</td>
                <td rowspan="2">电子产品</td>
                <td>笔记本</td>
                <td>5500</td>
                <td>2</td>
                <td>11000</td>
            </tr>
            <tr>
                <td>1001</td>
                <!-- <td>电子产品</td> -->
                <td>手机</td>
                <td>3000</td>
                <td>3</td>
                <td>9000</td>
            </tr>
            <tr>
                <td colspan="6" style="text-align: center;">分割一下</td>
            </tr>
            <tr>
                <td>1002</td>
                <td rowspan="2">家用电器</td>
                <td>电视机</td>
                <td>2000</td>
                <td>1</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>1003</td>
                <!-- <td>家用电器</td> -->
                <td>空调</td>
                <td>1500</td>
                <td>2</td>
                <td>3000</td>
            </tr>
            <tr>
                <td colspan="6" style="text-align: center;">分割一下</td>
            </tr>
            <tr>
                <td>1004</td>
                <td>服装</td>
                <td>牛仔裤</td>
                <td>120</td>
                <td>2</td>
                <td>240</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：表格中, 一定要有tbody, 这个要注意, 因为你写不写, 浏览器会自动添加的, 而js处理的目标是浏览器生成的dom对象, 所以要注意一下

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

html语义化结构元素和markdowm常用写法

2020-09-29 09:37:43