Web---HTML

最新推荐文章于 2024-06-13 02:48:16 发布

zhangchen2022

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量63

点赞数

分类专栏： Web 文章标签：前端 html elementui

本文链接：https://blog.csdn.net/weixin_43988921/article/details/122473584

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<a>超链接

<a href="url">显示的内容</a>：

在链接后加上 target="_blank" 表示在新的页面打开这个链接，不加的话就是在原有页面打开此链接

</head>
<body>
    <a>是a标签，但是不能跳转</a>
    <a href="https:www.baidu.com/">百度</a>
    <a href="https://www.csdn.net/">CSDN博客</a>
    <br>
    <a href="https:www.baidu.com/" target="_blank">跳转到一个新的页面打开百度</a>
</body>
</html>

表格的使用：

table:表示整个表格

tr:表示表格的一行

td:表示一个单元格

th:表示表头单元格，会居中加粗

thead:表格的头部区域

tbody:表格得到主体区域

通过rowspan和colspan来指定单元格竖跨多少行或者横跨多少列

用代码实现如上表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于表格</title>
</head>
<body>
    <!-- emmt 语法 table>thead>tr+tbody>tr*3 -->
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>身高</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>小A</td>
                <td>23</td>
                <td>165</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小B</td>
                <td>33</td>
                <td>192</td>
            </tr>
            <tr>
                <td>3</td>
                <td>小C</td>
                <td>18</td>
                <td>177</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

成果如图：

：

代码练习：实现此图

    <table border="10">  <!--border 是有边界的意思-->
        <thead>
            <tr>
                <th>班级</th>
                <th>分组</th>
                <th>学生</th>
                <th>随便</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="6">葵花班</th>
                <th rowspan="3">A组</th>
                <th>张三</th>
                <th>1</th>
            </tr>
            <tr>
                <th>李四</th>
                <th>2</th>
            </tr>
            <tr>
                <th colspan="2">王五</th>
            </tr>
            <tr>
                <th rowspan="3">B组</th>
                <th colspan="2">孙六</th>
            </tr>
            <tr>
                <th>韩七</th>
                <th>3</th>
            </tr>
            <tr>
                <th>鲁八</th>
                <th>4</th>
            </tr>
            <tr>
                <th rowspan="6">莲花班</th>
                <th rowspan="3">A组</th>
                <th colspan="2">Alice</th>
            </tr>
            <tr>
                <th>Bob</th>
                <th>5</th>
            </tr>
            <tr>
                <th>Charies</th>
                <th>6</th>
            </tr>
            <tr>
                <th rowspan="3">B组</th>
                <th colspan="2">Dalian</th>
            </tr>
            <tr>
                <th>Falien</th>
                <th>8</th>
            </tr>
        </tbody>
    </table>

列表标签组（list）

1）有序列表<ol>

列表项<li>

2）无序列表<ul>

列表项<li>

3）自定义列表<dl>

列表项<dt>、<dt >

无语义标签：div & span

div: 分割

每个div都是独立的，结束后必须换行

span：跨度

span不换行

zhangchen2022

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web---HTML

<a>超链接<a href="url">显示的内容</a>：在链接后加上 target="_blank" 表示在新的页面打开这个链接，不加的话就是在原有页面打开此链接</head><body> <a>是a标签，但是不能跳转</a> <a href="https:www.baidu.com/">百度</a> <a href="https://www.c.
复制链接

扫一扫