HTML列表标签、表格标签、表单标签

Rubber树

已于 2022-10-06 11:16:08 修改

阅读量1.5k

点赞数 23

分类专栏： HTML CSS 文章标签： html 前端

于 2022-09-16 22:17:42 首次发布

本文链接：https://blog.csdn.net/btufdycxyffd/article/details/126896439

版权

HTML CSS 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

文章目录

1.列表标签

有序列表

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

ol，即ordered list（有序列表）。

type属性（定义列表项符号）

<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

无序列表

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

ul，即unordered list（无序列表）。

type属性（定义列表项符号）

<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

实际开发中用到有序列表挺少，无序列表用的多，注意两个特点：

（1）ul元素的子元素只能是li，不能是其他元素。

（2）ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加。

自定义列表

<dl>
    <dt>名词</dt>
    <dd>描述</dd>
</dl>

dl即definition list（定义列表），dt即definition term（定义名词），而dd即definition description（定义描述）。

案例展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--有序列表-->
    <ol>
        <li>小李 100</li>
        <li>小明 99</li>
        <li>小红 88</li>
    </ol>
    <!--type属性-->
    <ol type="A">
        <li>小李 100</li>
        <li>小明 99</li>
        <li>小红 88</li>
    </ol>
    <!--无序列表-->
    <ul>
        <li>香蕉</li>
        <li>苹果</li>
        <li>雪梨</li>
    </ul>
    <!--type属性-->
    <ul type="circle">
        <li>香蕉</li>
        <li>苹果</li>
        <li>雪梨</li>
    </ul>
    <!--自定义列表-->
    <dl>
        <dt>HTML</dt>   <!--默认显示缩进效果-->
        <dd>控制网页的结构</dd>
        <dt>CSS</dt>
        <dd>控制网页的样式</dd>
        <dt>JavaScript</dt>
        <dd>控制网页的行为</dd>
    </dl>
</body>
</html>

2.表格标签

基本结构

表格标签有三部分组成

（1）表格：table标签

（2）行：tr标签

（3）单元格：td标签

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

tr，指的是table row（表格行），td，指的是table data cell（表格单元格）。

表格属性

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

完整结构

表格标题（caption）

一个表格只能有一个标题，位于整个表格内的第一行。

表头单元格（th）

th，指的是table header cell（表头单元格）。

表格语义化

thead、tbody和tfoot标签。分别表示：表头、表身、表脚。显示效果没区别，但是代码结构更清晰，更有可读性和有利于后期的维护。

此外还方便分块来控制表格的CSS样式。

合并行

<td rowspan = "合并的行数"></td>

合并列

<td colspan = "合并的列数"></td>

合并行和合并列内容默认的是前面一个，后面那些需要删去。

案例演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="200" height="100">
        <!--表格标题-->
        <caption><strong>表格</strong></caption>
        <!--表格标签-->
        <thead>
            <tr>
                <!--表头单元格-->
                <th>姓名</th>
                <th>成绩</th>
                <th>身份</th>
            </tr> 
        </thead>
        <tbody>
            <tr>
                <td>小李</td>
                <td>99</td>
                <td>学生</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>底部</td>
                <td>底部</td>
                <td>底部</td>
            </tr>
        </tfoot>
    </table>
    <table border="1" width="200" height="100">
        <caption><strong>表格</strong></caption>
        <thead>
            <tr>
                <td>姓名</td>
                <td>成绩</td>
                <td>身份</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!--表头单元格-->
                <th>姓名</th>
                <th rowspan="2">成绩</th>
                <th>身份</th>
            </tr> 
            <tr>
                <td>小李</td>
                <!--后面的删掉-->
                <td>学生</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>底部</td>
                <td colspan="2">底部</td>
                <!--后面的删掉-->
            </tr>
        </tfoot>
    </table>
</body>
</html>

3.表单标签

前面学的都是静态页面，下面终于接触到动态页面了。简单来说，如果一个页面仅仅供用户浏览，那就是静态页面。如果这个页面还能实现与服务器进行数据交互（像注册登录、话费充值、评论交流），那就是动态页面。

form标签

<form>
    //各种表单标签
</form>

创建表单需要把所有表单标签放在form标签内部。

name属性（给表单进行命名）

<form name="myForm"></form>

method属性（指定表单数据使用哪一种http提交方法）

method属性取值有两个：一个是“get”，一个是“post”。get的安全性较差，而post的安全性较好。实际开发中，使用post比较多。

<form method="post"></form>

action属性（指定表单数据提交到哪一个地址进行处理）

<form action="地址"></form>

target属性（指定窗口的打开方式）

<form target="_blank"></form><!--新窗口-->

enctype（指定表单数据提交的编码方式）

一般不用自己设置

input系列标签

文本框

<input type="text" />

文本框常用属性

密码文本框（输入字符不可见）

<input type="password" />

单选框

<input type="radio" name="组名" value="取值" checked />

name属性能让单选框分为一组，这样就能几个之只能选一个，实现“单选”。

value属性取值跟后面的文本是相同的。加上value属性，是为了方便JavaScript或者服务器操作数据用的。

checked属性设置默认选中的框。

多选框

<input type="checkbox" name="组名" value="取值" />

与单选框的name相同，列为一组，不过多选设定为多选，系统会自动识别。

文件选择框

<input type="file" multiple />

multiple属性能选择多个文件上传。

提交按钮

<input type="submit" value="按钮的名字" />

给服务器提交数据。

重置按钮

<input type="reset" value="按钮的名字" />

清除用户在表单中输入的内容。

普通按钮

<input type="button" value="按钮的名字" />

配合JavaScript来进行各种操作的。

下拉列表

<select>
    <option>选项内容</option>
    <option>选项内容</option>
</select>

跟无序列表很像，其中无序列表是由ul和li这两个标签配合使用。

selected设置默认选择，即开头选中的。

文本域

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

label标签

<label for=""></label>

绑定内容与表格标签的关系，如单选框的时候可以鼠标点击文字（内容）来选定选项。

使用方法1：label标签把内容包裹起来，在表格标签中添加id属性，在label标签for属性中设置对应的id属性值

使用方法2：label标签直接把内容包裹起来，删去for属性。

案例演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form name="表单">
        文本框：<input type="text" placeholder="用户名">
        <br>
        <br>
        密码框：<input type="password" placeholder="密码">
        <br>
        <br>
        性别：<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女
        <br>
        <br>
        爱好：<input type="checkbox" name="like">编程<input type="checkbox" name="like">熬夜
        <br>
        <br>
        文件选择：<input type="file" multiple>
        <br>
        <br>
        提交按钮：<input type="submit" value="注册">
        <br>
        <br>
        重置按钮：<input type="reset" value="重新输入">
        <br>
        <br>
        普通按钮：<input type="button" value="普通按钮">
    </form>
    <select >
        <option>上海</option>
        <option selected>北京</option>
        <option>南京</option>
    </select>
    <br>
    <br>
    <textarea cols="30" rows="10">默认内容</textarea>
    <br>
    <br>
    <label for="man">性别：<input type="radio" name="sex" id="man">男 </label>
    <label ><input type="radio" name="sex" checked>女</label>

</body>
</html>