HTML标签（2）_ur与ul标签htlm-CSDN博客

本文链接：https://blog.csdn.net/m0_61696306/article/details/120898359

1.表格标签

1.1表格的作用

表格主要用于显示、展示数据，它可以让数据现实的更加规整，便于处理数据

表格不是用来布局页面的，而是用来展示数据的

1.2表格的基本语法

<table>
    <tr>
        <td>单元格里的内容</td>
       ....
    </tr>
    ....
</table>

<table></table>是用于定义表格的标签
<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
<td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

1.3表头单元格标签

一般表头单元格位于表格的第一行或者第一列，表头单元格里面的文本内容加粗居中显示

方法:<th>标签表示HTML表格的表头部分（table head的缩写）

<table>
    <tr>
        <th>表头单元格里的内容</th>
       ....
    </tr>
    ....
</table>

1.4表格的属性

表格标签属性并不常用，后面一般通过 CSS 来设置

目的有两个：

记住这些英语单词，后面CSS中会使用
直观感受表格的外观

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式。
border	1或""	规定表格是否有边框，默认为"",表示没有边框
cellpadding	像素值	规定单元边沿与其内容的距离，默认的为1像素
cellspacing	像素值	规定单元格之间的距离，默认为2像素
width或height	像素值或百分比	规定表格的宽度或高度

1.5表格的结构标签

使用场景：表格太长，为了更好的表示表格的语义，可以将表格分割为表格头部和表格主体两大部分。

在表格标签中，分别用<thead>标签表示表格的头部，用<tbody>表示表格色主体区域，这样可以更好的分清表格结构。

如下面代码，使用这两个标签说明头部与主体（代码源于B站一名up主）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>今日小说排行榜</title>
</head>
<body>
    <table align="center" width="500" height="249" border="1" cellspacing="0">
    <thead>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>

        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
    </tbody>           
    </table>
</body>
</html>

1.6合并单元格

合并单元格的方式：

跨行合并：rowspan=“合并单元格的数目”
跨列合并：colspan=“合并单元格的个数”

目标单元格（写合并代码）：

跨行：最上侧的单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码

合并单元格的方式：

先确定是跨行还是跨列
找到目标单元格，再确定合并的单元格数目。例如<td colspan=2></td>
删除被合并的单元格

建议:先将表格框架写好，再去添加合并单元格的标签，最后在去删除被合并的单元格

2.列表标签

表格用来显示数据，而列表是用来布局的。

列表最大的特点就是整齐、整洁、有序。

分为三类：、

无序列表
有序列表
自定义列表

2.1无序列表

<ur>标签表示HTML中的无序列表，一般会以项目符号呈现列表

而列表项用<li>标签定义

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

无序列表中各项是并列的，没有顺序之分
<ul></ul>标签中只能放<li>标签，不能放入其他任何标签
<li>标签中可以放入任何标签
无序列表会带有自己的样式属性，后面我们会使用CSS进行设计

2.2有序列表

<ol>标签用来表示有序列表，<li>标签用来定义列表项。

列表中的各项顺序会按定义是的顺序以数字来显示。

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

注意点：同无序列表

2.3自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl>标签用于定义描述列表，常与<dt>(定义项目/名字)<dd>（描述每一个项目/名字）标签一起使用

<dl>
    <dt>名词</dt>
    <dd>名次解释`</dd>
    <dd>名词解释2</dd>
    ......
</dl>

注意：<dl>中只能有<dd><dt>

3.表单

3.1为什么要表单

方便收集用户数据

3.2表单的组成

再HTML中一个完整的表单由表单域，表单控件（也称为表单元素）和提示信息3个部分组成。

3.3表单域

表单域是一个包含表单元素的区域

在HTML标签中<form>标签用于定义表单域，以实现用户信息的收集和传递。

<form>会将他范围里的表单元素信息传给服务器

<form action="urld" method="提交方式" name="表单域名">
各种表单元素控件

</form>

属性	属性值	作用
action	url地址	用于接收并处理表单数据的服务器程序url地址
method	get/post	用于设计表单数据的提交方式，其取值为get/post
name	名称	用于指定表单的名称，以区分同一个页面的多个表单域

3.4表单控件

3.4.1 `<input>`输入表单元素

表单元素中<input>标签用于收集用户信息

在<input>标签中，包含一个type属性，根据不同的type属性值，输入的字段有很多形式

<input type="属性值"/>

<input/>为单标签。

type属性设置不同的属性值用来指定不同的控件类型

属性值	描述
button	定义可点击按钮（多数情况，用于通过JavaScript启动脚本）
checkbox	定义复选框(多选）
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮（单选）
rest	定义重置按钮，重置按钮会重置表单内的所有数据
submit	定义提交按钮，提交按钮会将表单数据发送到服务器
text	定义单行的输入字段，用户可以在其中输入文本，默认宽度为20个字符
name	定义input元素的名称（由用户自己定义）
value	规定input元素的值。（由用户自己定义）
checked	规定此input元素首次加载时应当被选中
maxlength	规定输入字段中的字符的最大长度

当在一个栏目中设置多个单选按钮时，要想实现可以多选一，可以在每个单选按钮中设置为相同的名字

而多选按钮相同

<body>
    <form action="xxx.php" method="get">
         <!-- text 文本框 用户可以里面输入任何文字 -->
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br> 
        <!-- password 密码框 用户看不见输入的密码 -->
        密码: <input type="password" name="pwd" >  <br> 
        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
        性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> 人妖   <input type="radio" name="sex" value="人妖">   <br> 
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
        <br> 
        <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button  后期结合js 搭配使用-->
        <input type="button" value="获取短信验证码"> <br>
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像:  <input type="file" >
    </form>
</body>

3.4.2`<lable>`标签

<lable>标签用于绑定一个表单元素，当点击<lable>标签里的文本是可以选择该选项的

<lable for="sex">男</lable>
<input type="radio" name="sex" id=sex>

核心：<lable>的for属性应当与相关元素的id相同

<lable for="text">用户名:</lable><input type="text" id="text">

3.4.3`<select>`下拉标签

<select>
     <option>选项一</option>
	 <option>选项二</option>
     <option>选项三 </option>

</select>

1：< select>中至少含有一对

2：在<option>中定义selected="selected"时，当前选项为默认选项

3.4.4文本域标签

<textarea>
		w
</textarea>

d相同

<lable for="text">用户名:</lable><input type="text" id="text">

3.4.3`<select>`下拉标签

<select>
     <option>选项一</option>
	 <option>选项二</option>
     <option>选项三 </option>

</select>

1：< select>中至少含有一对

2：在中定义selected="selected"时，当前页面为默认选项

3.4.4文本域标签

<textarea>
		w
</textarea>

当用户输入的文字较多，就不能使用文本框表单<input type="text>,而是使用<textarea>
在表单元素中，<textarea>用于定义多行文本输入控件，常用于留言板等
注意：可以在标签内定义行数与每行字数
cols=“每行字符数” rows=“规定的行数”.但在之后实际开发中，一般使用CSS来设计