html表格，无序，有序，自定义，无语义，表单标签，特殊字符详解

前言❤️❤️

hello hello💕，这里是洋不写bug~😄，欢迎大家点赞👍👍，关注😍😍，收藏🌹🌹
这篇文章设计了涉及了大量的常用进阶标签，掌握后制作网页的能力会有大幅度的提升💪💪💪 🎆个人主页：洋不写bug的博客🎆所属专栏：前端基础
🎆铁汁们对于前端的各种常用核心语法，都可以在上面的前端专栏学习，专栏正在持续更新中🏀，有问题可以写在评论区或者私信我哦~

1，表格标签

1，基础语法

如果想要在网页中创建出这样的一个表格，那就要使用表格标签

表格标签：

table 标签：表示整个表格
tr: 表示表格的一行行标签
td: 表示一个单元格列标签
th: 表示表头单元格会居中加粗
thead: 表格的头部区域 (注意和 th 区分，范围是比 th 要大的)

刚刚那个表，一共有4行，一行里面有3列

先写个table标签表示整个表格 ，一个tr标签表示一行，一个td标签表示一个单元格
就用一个tr标签包三个td标签，表示一行的表格

代码如下：

markup 复制代码

<body>
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

可以写完第一个tr以后，后面就直接复制前面的即可

这里有个很好用的快捷键，选中一段，直接按shift + alt + 下，就会在下面复制

代码复用时使用这个快捷键非常的方便👍👍👍

还有个小技巧，不用一个一个输入td，直接输入td* 3，按enter键，可以生成三组td标签

接下来就开始往表里面填写数据，td表示每行的每个单元格，按照顺序填数据就可以了

还要把table的边框宽度（border）设置为1px，border是table标签的属性

在大部分浏览器中，table边框宽度都是0 ，因此如果不设置边框宽度的话是看不出表格的效果的
代码如下：

markup 复制代码

<table border="1">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>3</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>4</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>女</td>
            <td>5</td>
        </tr>
    </table>

如果不加上border属性的话，没有表格的效果

2，优化

加上border属性会发现表格不仅非常小，而且单元格之间还有间距，这就需要再调一些属性去优化一下

点击鼠标右键，点击一下检查，会发现这个表格的尺寸很小，这是因为刚刚没有在代码中定义表格的长宽尺寸，因此使用的是默认尺寸

单元格之间有间距是怎么回事呢?

这是因为表格有个属性，叫cellspacing，表示的是单元格之间的距离

cellspacing不定义的话，默认大小是两个像素，就出现了单元格之间的空格

把cellpacing设置为0即可（设置的每个属性用空格隔开即可，不能加逗号 ）

代码如下：

sql 复制代码

<table border="1" height="300px" width="500px" cellspacing="0">

再看下运行结果，刚刚的问题就都解决了

但是还可以做一些优化，这个表展现在页面的中间会感觉更美观一些

另外，每个单元格里的元素都居中会更好看一些

对于整个表格在浏览器网页中的位置，需要使用align来控制，align表示的是对齐方式，可以左对齐，中对齐，右对齐；
对于元素在每个格子中的居中，需要使用cellpadding属性来控制
cellpadding就是元素到格子边框的距离，通过调这个距离让元素在格子最中间
这里根据整个表的宽度估算下每个格子的宽度，大概居中就可以 （后面学习CSS后，有更加简单的方法来控制）

代码如下，设置完这些属性就会发现表格的效果好多了👍👍😊

sql 复制代码

<table border="1" height="300px" width="500px" cellspacing="0" 
align="center" cellpadding="50px">

3，表格头部和主体

还可以对表格继续进行优化，就是把表格分为表头和主体

在这个表中，上面姓名/性别/年龄这一行就是表格头部，下面的都是它们对应的数据，就是主体部分;
表格头部的元素就不再写在td标签中，改为写在th标签中

另外把头部主体包在thead标签中（thead最前面的t就是table的意思，表示表格的头部部分）
这样写一是html代码层次更加清晰，二是让头部元素加粗，另外头部元素也可以完全居中(刚刚设置的只是近似居中)

代码如下

markup 复制代码

<body>
        <table border="1" height="300px" width="500px" cellspacing="0" align="center" cellpadding="50px">
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>3</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>4</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>女</td>
            <td>5</td>
        </tr>
        </tbody>
    </table>
</body>

4，单元格的合并

有时候表格需要单元格的合并，还拿刚刚那个表格为例，如下图，把两行的性别单元格进行合并

代码示例如下，看完应该就能明白了
rowpan翻译过来就是跨行数的意思，让上面这个"男"跨两行，下面这一行性别这列的单元格就不用写了

markup 复制代码

 <tbody>
        <tr>
            <td>张三</td>
            <td rowspan="2">男</td>
            <td>3</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>4</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>女</td>
            <td>5</td>
        </tr>
        </tbody>

2，无序列表

网页中这样每段文字前都有一个小圆点，就是使用了无序列表标签

用ul标签搭配li标签，就构成了无序列表标签

markup 复制代码

<body>
    <ul>
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
    </ul>
</body>

无序标签每段文字前面都是点，没有强调这些内容的先后顺序，因此叫做无序标签

在CSDN中写博客的时候，这个无序标签还是比较常用的，可以展示一些知识点，结构更清晰（如下图：）

无序标签前面除了是实心圆点（disc），还可以是空心圆点（circle），或者正方形（square）
这是ul标签的type属性，浏览器默认是disc，也可以手动设置，例如下面就设置为正方形：

markup 复制代码

<ul type="square">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
    </ul>

3，有序列表

有时候表示的内容需要有先后顺序，比如热搜榜，就需要使用有序标签，有序标签是ol标签与li标签进行搭配

markup 复制代码

<body>
    <ol>
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
    </ol>
</body>

除了以数字来编号，还可以用大小写罗马数字，大小写英文字母来编号

这是ol标签的type属性

a表示小写英文字母编号
A表示大写英文字母编号
i表示小写罗马数字编号
I表示大写罗马数字编号
1表示数字编号（默认）

例如用大写罗马数字编号

ol标签还有一个start属性，表示第几个开始编号，这里设置为3，用大写英文字母编号

就是从第三个英文字母（C）开始编号

markup 复制代码

    <ol type="A" start="3">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
    </ol>

4，自定义列表

在对一些属性进行解释的时候，用到自定义列表效果会比较好
自定义列表使用dl，dt，dd标签，dt是属性，dd是具体解释

例如下面对一款产品进行解释

markup 复制代码

<body>
   <dl>
  <dt>产品名称</dt>
  <dd>无线蓝牙耳机</dd>
  
  <dt>续航时间</dt>
  <dd>单次充电8小时，充电盒总续航32小时</dd>
  
  <dt>连接方式</dt>
  <dd>蓝牙5.3，支持自动配对</dd>
</dl>
</body>

5，表单标签

这里可以输入账号和密码登录QQ，这个就是通过表单标签来实现的
而表单标签由表单域和表单空间来组成，实现用户与服务器的交互

1，表单域

表单域由form标签包裹，其中的一个核心属性就是action，action里面加上目标地址（这是后端学习的内容），就可以把用户的输入数据传到后台服务器进行处理

markup 复制代码

<form action=""></form>

2，表单控件

表单控件使用input标签实现

像刚刚的账号输入框，密码输入框具体还是由表单控件实现的
可以通过input标签的type属性，来控制input类型，type类型设置为text，就表示文本框
代码和图片如下：

markup 复制代码

   <form action="">
    账号：<input type="text">

type属性设为passward，input标签表示的就是密码框

密码框跟普通文本框的区别就是密码框里输入的内容不会在屏幕上显示，显示的是小黑点，也可以点击右面的眼睛，来显示密码
代码和图片如下：

markup 复制代码

<body>
   <form action="">
    账号：<input type="text">
    <br>
    密码：<input type="password">
</body>

在公司入职时，可能会填写这种个人信息的表格，像这种男女的选项，也是通过input标签来完成的
把type设置为radio，就表示单选框

但是这样写的话，就有个bug，那就是用户可以这三个都选，实际上应该是只能选择一个

markup 复制代码

<body>
   <form action="">
    性别：<input type="radio">男
    <input type="radio">女
    <input type="radio">保密
</body>

要解决这个问题，就要加入name属性，进行分组

如果三个input的name属性相同的话，那就只能选一个

代码如下：

markup 复制代码

<form action="">
    性别：<input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <input type="radio" name="gender">保密

还打开网页，默认就选择了一个选项，比如说默认选择保密选项

这是input标签中的checked属性来管理的，写 checked="checked"

markup 复制代码

 <form action="">
    性别：<input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <input type="radio" name="gender" checked="checked">保密
</body>

如果是爱好这些，可能同时有多个，可以多选，那就要用到复选框，type属性为checkbox：

代码和效果示例如下：

markup 复制代码

<body>
    爱好：
   <input type="checkbox">玩三角州
   <input type="checkbox">玩和平精英
   <input type="checkbox">玩王者荣耀
   <input type="checkbox">玩战地5
</body>

在这个登录页面中有个登录按钮，也是通过设置input的type属性来实现的

按钮要把input的type属性设置为button，value属性代表是按钮上显示的文字，onlick属性是点击按钮后会发生的事情

这里先写个普通按钮，设置点击后弹出一个显示hello world的对话框(alert里面加上文字就是在网页中弹出对话框，显示对话框中的文字 )：

代码和效果示例如下：

markup 复制代码

  <input type="button" value="普通按钮" onclick="alert('hello world!')">

在钉钉网页中提交作业可以提交一段内容，就是用文本框加上按钮来实现的

这里把输入内容提交到豆包官网上

写个班级文本框，在下面写两个按钮，一个提交，一个重置
按钮只需要设置type属性即可，像value还有onlick这些都不用管，浏览器有默认值（点击提交执行提交逻辑，点击重置执行重置逻辑）

提交按钮是把输入的内容传到form标签action属性中写的地址，重置按钮就是清空之前写的东西

markup 复制代码

<body>
  <form action="https://www.doubao.com/chat/?channel=microsoft&source=microsoft_db_17&type=daoh&theme=wangzjh">
    班级：<input type="text" name="class"> 
    <input type="submit">
    <input type="reset">
  </form>
</body>

这里可以输入1班,提交后就会进入到豆包界面

看上面的地址，显示class = 1班

但是豆包的服务器端逻辑主要用于处理聊天消息、会话状态等，并不预设接收或处理 class 这类自定义参数，因此参数这里传过来也会被忽略

3，label标签

钱买你用input标签来写的单选框，还有个小问题，那就是这个选择空心圆的比较小，有时候点的快了鼠标没放在上面可能点不住
如果点击男生的字体就选择男，就不用必须把鼠标对准空心圆了，就会方便很多

这就需要通过label标签来实现

原来"男"，"女"这些文字是直接写在外面，现在就写在label标签中
还要在input标签里加个id属性，与label标签中的for属性相关联

这样鼠标点击字体，也可以进行选择

代码和效果如下：

markup 复制代码

<body>
 <label for="male">男</label>
 <input type="radio" name="sex" id="male">
 <label for="female">女</label>
 <input type="radio" name="sex" id="female">
 <label for="secret">保密</label>
 <input type="radio" name="sex" id="secret">
</body>

4，select标签

在公司入职时可能需要统计学历，往往就是以下拉表选择的形式，那就要使用到select标签

select标签里面包option标签，option里写要选择的内容，第一个option标签中的内容不点开下拉表也会显示

markup 复制代码

 <select name="" id="">
    <option value="">请选择学历</option>
    <option value="">博士</option>
    <option value="">研究生</option>
    <option value="">本科</option>
    <option value="">专科</option>
 </select>

5，textarea标签

公司入职比如说要填个人擅长技能，需要一个大点的文本框，就称之为文本域 ，使用textarea来表示
cols属性指的是文本域一行最多能显示多少个字符，rows指定的是文本域的可见高度，超过这个高度就要向下翻

markup 复制代码

     <textarea name="" id="" cols="30" rows="10"></textarea>

6，无语义标签

无语义标签，没有固定的用途

里面可以套许多标签，比如套h标签表示标题，套img标签表示图片，套p标签表示段落

随便选个网页，右键点击检查，会发现里面最多的就是div标签

无语义标签有两种：

div 块级无语义标签，独占一行，是一个大盒子
span 行内无语义标签，不独占一行，是一个小盒子
写这样一段代码，在网页上右键点击检查
鼠标放在代码上，就会发现span标签是一个一个的小盒子，不独占一行
markup 复制代码
```
<body>
     <span>篮球</span>
     <span>足球</span>
     <span>羽毛球</span>
     <span>台球</span>
</body>
```
再写个div标签，还是检查看下，就会发现div每个独占一行，是大盒子
markup 复制代码
```
     <div>篮球</div>
     <div>足球</div>
     <div>羽毛球</div>
     <div>台球</div>
```
当然，也可以用div来包span,还是一行
markup 复制代码
```
    <div>
     <span>篮球</span>
     <span>足球</span>
     <span>羽毛球</span>
     <span>台球</span>
     </div>
```
7，特殊字符

一些字符在html中是不能直接表示的，例如空格，大于号，小于号，按位与（&）

就要用特殊的字符来表示

特殊字符：
空格： 
小于号：<
大于号：>
按位与：&

如下所示，这里打出四个空格，在网页中却只能显示出一个，在需要多个空格的效果时，就要使用  

markup 复制代码

<body>
    <p>这里有4个空格    我们看下效果</p>
</body>

markup 复制代码

<body>
    <p>这里有4个空格&nbsp;&nbsp;&nbsp;&nbsp;我们看下效果</p>
</body>

而大于号和小于号，直接打的话就会跟标签的符号冲突，因此也需要用特殊字符来表示

还有一个&用来表示&，这个直接写一个是可以打印出来呀，那为什么还要用特殊字符

markup 复制代码

<p>&</p>

那如果需要在浏览器页面上显示一个 直接写的话就会被当作空格来处理，
那就可以这样写，这样只会解析第一个特殊字符，就可以在页面上显示 

结语💕💕

这篇文章的标签知识比较多，特别是标签各个属性的含义

像表格标签，列表，表单标签还有无语义字符，制作网页时都是特别常用的，就需要多练习，打好基础🐵🐵🐵
以上就是今天的所有内容啦～完结撒花～🥳🎉🎉

html表格，无序，有序，自定义，无语义，表单标签，特殊字符详解

前言❤️❤️

1，表格标签

1，基础语法

2，优化

3，表格头部和主体

4，单元格的合并

2，无序列表

3，有序列表

4，自定义列表

5，表单标签

1，表单域

2，表单控件

3，label标签

4，select标签

5，textarea标签

6，无语义标签

7，特殊字符

结语💕💕