526互联

11月6日列表、标题、表格、基本、块级标签以及特殊符号

发布时间 2023-11-06 21:08:58作者: songjunwan

目录

列表标签

列表标签分为有序列表和无序列表

无序列表

格式如下

<ul type="disc">
　　<li>第一项</li>
　　<li>第二项</li>
</ul>

然后它的type属性有四种情况：

  • disc（实心圆点，默认值）
  • circle（空心圆圈）
  • square（实心方块）
  • none（无样式）

这里来测试一下默认的情况，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
<ul id="a">
    <li>123</li>
    <li>456</li>
    <li>789</li>
</ul>



</body>
</html>

结果如下

然后再来实现剩下的三个

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>

<!--type=disc的情况-->

<ul type="disc">
    <li>123</li>
    <li>456</li>
    <li>789</li>
</ul>

<!--type=circle的情况-->
<ul type="circle">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>


<!--type=square的情况-->
<ul type="square">
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

<!--type=none的情况-->
<ul type="none">
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>


</body>
</html>

结果如下图

注意点

上面无序列表标签的属性已经被弃用了，目前采用css的形式来使用

格式如下

<ul style="list-style-type: 还是以前那些属性名">
    <li></li>
    <li></li>
    <li></li>
</ul>

然后代码修改如下

<!--无序标签的新情况-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>

<!--type=disc的情况-->

<ul style="list-style-type: disc">
    <li>123</li>
    <li>456</li>
    <li>789</li>
</ul>

<!--type=circle的情况-->
<ul style="list-style-type:circle">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>


<!--type=square的情况-->
<ul style="list-style-type:square">
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

<!--type=none的情况-->
<ul style="list-style-type:none">
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>


</body>
</html>

结果如图

效果还是没有什么变化，就是格式修改了。

有序列表标签

基本的格式如下

<ol>
　　 <li>第一项</li>
　　 <li>第二项</li>
</ol>

带属性的格式如下

<ol type="1" start="1">
　　 <li>第一项</li>
　　 <li>第二项</li>
</ol>

type属性：

  • 1 数字列表，默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

start属性：数字是几就会从几开始推，这里是1它就从1开始

下面来实现带属性的情况

代码如下

<!--有序列表标签-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>有序标签</title>
</head>

<!--type是1的情况-->
<ol type="1" start="1">
　　 <li>第一项</li>
　　 <li>第二项</li>
</ol>

<!--type是A的情况-->
<ol type="A" start="1">
    <li>1</li>
    <li>2</li>
</ol>

<!--type是a的情况-->
<ol type="a" start="1">
    <li>3</li>
    <li>4</li>
</ol>

<!--type是I的情况-->
<ol type="I" start="1">
    <li>5</li>
    <li>6</li>
</ol>


<!--type是i的情况-->
<ol type="i" start="1">
    <li>7</li>
    <li>8</li>
</ol>

<body></body>
</html>

结果如图

标题标签

格式如下

<dl>
    <dt>标题1</dt>
        <dd>内容1</dd>

    <dt>标题2</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
</dl>

然后这里就以格式为例子演示结果

表格标签

首先表格标签不止一个标签，它是多个标签的总和

数据单元格快捷方式

table>tr*2>td{}

表头单元格快捷方式

table>tr*2>th{}

1.定义表格（table标签）

定义表格，所有其他表格标签都必须包含在 <table> 标签内。

<table>
    <!-- 表格内容 -->
</table>

2.行（tr标签）

定义表格的行（行），必须包含在 <table> 内。通常包含一个或多个 <td> 或 <th> 元素。

<table>
    <tr>
        <!-- 行内容 -->
    </tr>
</table>

3.表头单元格（th标签）

定义表头单元格，用于标识表格列的标题。

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
</table>

4.数据单元格（td标签）

定义数据单元格，用于存储表格中的数据。

<table>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

5.表格标题（caption标签）

定义表格标题，通常放在 <table> 标签之内，但在 <thead> 之前。

<table>
    <caption>学生信息</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

6.头部部分（thead标签）

定义表格的头部部分，包含表头行（<tr>），通常包含在 <table> 标签内。

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

7.主体部分（tbody标签）

定义表格的主体部分，包含数据行（<tr>），通常包含在 <table> 标签内。

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Alice</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

8.表格页脚（tfoot标签）

定义表格的页脚部分，通常包含在 <table> 标签内。通常用于显示汇总信息。

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Alice</td>
            <td>30</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总计</td>
            <td>55</td>
        </tr>
    </tfoot>
</table>

这里将上面的八个内容融合在一起使用代码如下

<!--表格标签-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格测试</title>
</head>
<body>

<table>
    <!--表格标题-->
    <caption>学生信息</caption>

    <!--头部部分-->
    <thead>

    <!--行-->
    <tr>

        <!--表头单元格-->
        <th>姓名</th>
        <th>学校</th>
        <th>年龄</th>
    </tr>

    </thead>

    <!--主体部分-->
    <tbody>

    <tr>
        <!--数据单元格-->
        <td>韩</td>
        <td>xxxx学校</td>
        <td>16</td>
    </tr>
    <tr>
        <td>君</td>
        <td>xxxx学校</td>
        <td>17</td>
    </tr>
    </tbody>


    <!--表格页脚-->
    <tfoot>
        <td>年龄</td>
        <td>总和33</td>
    </tfoot>
</table>


</body>
</html>

效果如图

然后就是table标签属性的用法

属性

  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.（最好通过css来设置长宽）
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列（即合并单元格）

1.border属性：

格式

<table broder="添加数字">
    <!-- 表格内容 -->
</table>

这里添加数字的大小会影响外边框最后的效果

代码

<!--表格标签-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格测试</title>
    <style>
        #td1 {
            background-color: chocolate;
        }
    </style>
</head>
<body>


<table border="10">
    <!--表格标题-->
    <caption>学生信息</caption>

    <!--头部部分-->
    <thead>

    <!--行-->
    <tr>

        <!--表头单元格-->
        <th>姓名</th>
        <th>学校</th>
        <th>年龄</th>
    </tr>

    </thead>

    <!--主体部分-->
    <tbody>

    <tr>
        <!--数据单元格-->
        <td>韩</td>
        <td>xxxx学校</td>
        <td>16</td>
    </tr>
    <tr>
        <td>君</td>
        <td>xxxx学校</td>
        <td>17</td>
    </tr>
    <tr>
        <td id="td1">
            <a href="https://i.cnblogs.com/posts/edit">后台</a>
        </td>
    </tr>
    </tbody>
    <!--表格页脚-->
    <tfoot>
    <td>年龄</td>
    <td>总和33</td>
    </tfoot>
</table>

</body>
</html>

结果如图

2.cellpadding属性：

格式

<table cellpadding="添加数字">
    <!-- 表格内容 -->
</table>

这里添加数字影响的是内边距的效果

代码(与border一起来显示效果)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格测试</title>
    <style>
        #td1 {
            background-color: chocolate;
        }
    </style>
</head>
<body>


<table border="10" cellpadding="20">
    <!--表格标题-->
    <caption>学生信息</caption>

    <!--头部部分-->
    <thead>

    <!--行-->
    <tr>

        <!--表头单元格-->
        <th>姓名</th>
        <th>学校</th>
        <th>年龄</th>
    </tr>

    </thead>

    <!--主体部分-->
    <tbody>

    <tr>
        <!--数据单元格-->
        <td>韩</td>
        <td>xxxx学校</td>
        <td>16</td>
    </tr>
    <tr>
        <td>君</td>
        <td>xxxx学校</td>
        <td>17</td>
    </tr>
    <tr>
        <td id="td1">
            <a href="https://i.cnblogs.com/posts/edit">后台</a>
        </td>
    </tr>
    </tbody>
    <!--表格页脚-->
    <tfoot>
    <td>年龄</td>
    <td>总和33</td>
    </tfoot>
</table>

</body>
</html>

效果如图

3.cellspacing属性：

格式

<table cellspacing="添加数字">
    <!-- 表格内容 -->
</table>

这里添加数字影响的是外边距的效果，一般不用效果不好看

例子代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格测试</title>
    <style>
        #td1 {
            background-color: chocolate;
        }
    </style>
</head>
<body>


<table border="10" cellpadding="10" cellspacing="20">
    <!--表格标题-->
    <caption>学生信息</caption>

    <!--头部部分-->
    <thead>

    <!--行-->
    <tr>

        <!--表头单元格-->
        <th>姓名</th>
        <th>学校</th>
        <th>年龄</th>
    </tr>

    </thead>

    <!--主体部分-->
    <tbody>

    <tr>
        <!--数据单元格-->
        <td>韩</td>
        <td>xxxx学校</td>
        <td>16</td>
    </tr>
    <tr>
        <td>君</td>
        <td>xxxx学校</td>
        <td>17</td>
    </tr>
    <tr>
        <td id="td1">
            <a href="https://i.cnblogs.com/posts/edit">后台</a>
        </td>
    </tr>
    </tbody>
    <!--表格页脚-->
    <tfoot>
    <td>年龄</td>
    <td>总和33</td>
    </tfoot>
</table>

</body>
</html>

结果如图

width属性

格式

<table width="添加数字还有px">
    <!-- 表格内容 -->
</table>

要按照css来设置长度所以最后要有px这个元素，尽量在css里面来设计。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格测试</title>
    <style>
        #td1 {
            background-color: chocolate;
        }
    </style>
</head>
<body>


<table border="10" cellpadding="10" cellspacing="10" width="10px">
    <!--表格标题-->
    <caption>学生信息</caption>

    <!--头部部分-->
    <thead>

    <!--行-->
    <tr>
        <!--表头单元格-->
        <th>姓名</th>
        <th>学校</th>
        <th>年龄</th>
    </tr>

    </thead>

    <!--主体部分-->
    <tbody>

    <tr>
        <!--数据单元格-->
        <td>韩</td>
        <td>xxxx学校</td>
        <td>16</td>
    </tr>
    <tr>
        <td>君</td>
        <td>xxxx学校</td>
        <td>17</td>
    </tr>
    <tr>
        <td id="td1">
            <a href="https://i.cnblogs.com/posts/edit">后台</a>
        </td>
    </tr>
    </tbody>
    <!--表格页脚-->
    <tfoot>
    <td>年龄</td>
    <td>总和33</td>
    </tfoot>
</table>

</body>
</html>

结果如图

5.rowspan属性

格式如下

<table>
    <tr>
        <td rowspan="数字">
        内容
        </td>
    </tr>
</table>

里面的数字是几就会合并多少行的单元格

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格测试</title>
    <style>
        #td1 {
            background-color: chocolate;
        }
    </style>
</head>
<body>


<table border="10" cellpadding="10" cellspacing="10" width="10px">
    <!--表格标题-->
    <caption>学生信息</caption>

    <!--头部部分-->
    <thead>

    <!--行-->
    <tr>
        <!--表头单元格-->
        <th>姓名</th>
        <th>学校</th>
        <th>年龄</th>
    </tr>

    </thead>

    <!--主体部分-->
    <tbody>

    <tr>
        <!--数据单元格-->
        <td rowspan="3">韩</td>
        <td>xxxx学校</td>
        <td>16</td>
    </tr>
    <tr>
        <td>君</td>
        <td>xxxx学校</td>
        <td>17</td>
    </tr>
    <tr>
        <td id="td1">
            <a href="https://i.cnblogs.com/posts/edit">后台</a>
        </td>
    </tr>
    </tbody>
    <!--表格页脚-->
    <tfoot>
    <td>年龄</td>
    <td>总和33</td>
    </tfoot>
</table>

</body>
</html>

效果如图

6.colspan属性

格式如下

<table>
    <tr>
        <td colspan="数字">
        内容
        </td>
    </tr>
</table>

里面的数字是几就会合并多少列的单元格

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格测试</title>
    <style>
        #td1 {
            background-color: chocolate;
        }
    </style>
</head>
<body>


<table border="10" cellpadding="10" cellspacing="10" width="10px">
    <!--表格标题-->
    <caption>学生信息</caption>

    <!--头部部分-->
    <thead>

    <!--行-->
    <tr>
        <!--表头单元格-->
        <th>姓名</th>
        <th>学校</th>
        <th>年龄</th>
    </tr>

    </thead>

    <!--主体部分-->
    <tbody>

    <tr>
        <!--数据单元格-->
        <td colspan="3">韩</td>
        <td>xxxx学校</td>
        <td>16</td>
    </tr>
    <tr>
        <td>君</td>
        <td>xxxx学校</td>
        <td>17</td>
    </tr>
    <tr>
        <td id="td1">
            <a href="https://i.cnblogs.com/posts/edit">后台</a>
        </td>
    </tr>
    </tbody>
    <!--表格页脚-->
    <tfoot>
    <td>年龄</td>
    <td>总和33</td>
    </tfoot>
</table>



</body>
</html>

效果如图

还有一个特别的属性就是高度和宽度

就是在th和td标签里面定义

格式如下

<table>
    <tr>
        <td height="数字+px" width="数字+px">
        内容
        </td>
    </tr>
</table>

这里面的格式td也是th的格式

测试代码为修改前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>666</title>

</head>
<body>
<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>君</td>
        <td>17</td>
    </tr>

</table>
</body>
</html>

效果图

修改代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>666</title>

</head>
<body>
<table border="1">
    <tr>
        <th height="100px" width="100px">姓名</th>
        <th height="100px" width="100px">年龄</th>
    </tr>
    <tr>
        <td height="100px" width="100px">君</td>
        <td height="100px" width="100px">17</td>
    </tr>

</table>
</body>
</html>

效果如图

基本标签

如图

代码

<!--基本标签-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<b>加粗</b>
<i>斜体字</i>
<u>下划线</u>
<s>删除符</s>
<p>段落标签</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<br>换行符

<hr>
</body>
</html>

效果如图

块级标签

div标签通常情况下就是一种容器

例子如下

<!--块级标签-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div>
  <h3 style="color: lightpink">标题3</h3>
  <p>这是段落</p>
</div>
</body>
</html>

结果如图

特殊符号如何在html实现的方法

如图

然后代码如下

<!--特殊字符的实现-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
空&nbsp; &nbsp;格 <br>
大于号&gt;<br>
小于号&lt;<br>
特别符号&amp;<br>
人民币&yen;<br>
版权&copy;<br>
注册&reg;<br>
</body>
</html>

效果如图

上面的特殊字符主要需要记忆的是空格的用法。