列表、表单和表格

最新推荐文章于 2025-06-10 20:12:07 发布

别动，让我来

最新推荐文章于 2025-06-10 20:12:07 发布

阅读量481

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/Niu_Ambition/article/details/90147125

前端专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了HTML中的列表、表单和表格元素的使用方法，包括标签结构、属性及样式设置，适合初学者快速掌握HTML的基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.列表

列表标签

1.列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单，它是含有语义的，标签结构如下：
无序标签:

<ul>
    <li>列表标题一</li>
    <li>列表标题二</li>
    <li>列表标题三</li>
</ul>

有序标签:

<ol>
    <li>列表标题一</li>
    <li>列表标题二</li>
    <li>列表标题三</li>
</ol>

2.列表的内容一般是可以链接的，点击链接到新闻或者文章的具体内容，所以具体结构一般是这样的：

<ul>
    <li><a href="#">列表标题一</a></li>
    <li><a href="#">列表标题二</a></li>
    <li><a href="#">列表标题三</a></li>
</ul>

列表相关样式

列表开头序号：

list-style:none;
        none 空；
        cricle 空心圆；
        decimal 序号（1 2 3）；
        decimal-leading-zero 序号（01 02 03）；
        disc 实心圆；
        llower-alpha 序号（a b c d）；
        lower-greek 序号（α β）；
        lower-latin 序号（a b c）；
        lower-roman 序号（i ii iii）；
        upper-alpha 序号（A B C）；
        upper-roman 序号（Ⅰ Ⅱ Ⅲ）

二. 表单

html表单

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：

1、标签定义整体的表单区域

action属性定义表单数据提交地址
method属性定义表单提交的方式，一般有“get”方式和“post”方式

2、标签为表单元素定义文字标注

3、标签定义通用的表单元素

type属性
type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
value属性 定义表单元素的值
name属性 定义表单元素的名称，此名称是提交数据时的键名

4、标签定义多行文本输入框

5、标签定义下拉表单元素

6、标签与标签配合，定义下拉表单元素中的选项

表单常用样式、属性及示例

outline 设置input框获得焦点时，是否显示凸显的框线，一般设置为没有。
例如：outline:none;
placeholder 设置input输入框的默认提示文字：

	<input type="text" class="input_txt" placeholder="请输入你内容"

案例：

<body>
    <h1>注册表单</h1>
    <form action="http://www.baidu.com" method="get">
        <p>
        <label>用户名：</label>
        <input type="text" name="username">
        </p>

        <p>
        <label>密&nbsp;&nbsp;&nbsp;码：</label>
        <input type="password" name="password">
        </p>

        <p>
        <label>性&nbsp;&nbsp;&nbsp;别：</label>
        <input type="radio" name="gender" value="0"> 男
        <input type="radio" name="gender" value="1"> 女
        </p>

        <p>
        <label>爱&nbsp;&nbsp;&nbsp;好：</label>
        <input type="checkbox" name="hobby" value="study"> 学习
        <input type="checkbox" name="hobby" value="zixi"> 自习
        <input type="checkbox" name="hobby" value="coding"> 敲代码
        <input type="checkbox" name="hobby" value="practise"> 练习
        <input type="checkbox" name="hobby" value="review"> 复习
        <input type="checkbox" name="hobby" value="preview"> 预习
        </p>

        <p>
        <label>玉&nbsp;&nbsp;&nbsp;照：</label>
        <input type="file" name="pic">
        </p>

        <p>
        <label>籍&nbsp;&nbsp;&nbsp;贯：</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">深圳</option>
            <option value="3">广州</option>
        </select>
        </p>

        <p>
        <label>简&nbsp;&nbsp;&nbsp;介：</label>
        <textarea name="info"></textarea>
        </p>

        <p>
            <input type="submit" value="提 交">
            <input type="reset" value="重 置">
            <input type="button" value="普通按钮">

        </p>



    </form>
</body>

三. 表格

表格元素：

1、<table>标签：声明一个表格

2、<tr>标签：定义表格中的一行

3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

表格相关样式属性:

border-collapse 设置表格的边线合并，如：border-collapse:collapse;

基本语法格式：

 <table>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张山</td>
            <td>男</td>
            <td>18</td>
            <td>python10</td>
        </tr>
        <tr>
            <td>2</td>
            <td>张山</td>
            <td>男</td>
            <td>18</td>
            <td>python10</td>
 </tr>
 </table>