【第一部分 | HTML】3：表格、列表和表单

最新推荐文章于 2023-07-27 19:56:42 发布

Graskli

最新推荐文章于 2023-07-27 19:56:42 发布

阅读量430

点赞数 1

分类专栏：【前端】HTML CSS JS 基础文章标签： html servlet 前端

本文链接：https://blog.csdn.net/m0_57265007/article/details/127112345

版权

【前端】HTML CSS JS 基础专栏收录该内容

30 篇文章 5 订阅

订阅专栏

本章介绍一下 HTML语言常用的三种元素：表格、列表和表单

| 表格

表格 · 基本语法

基本语法

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

表头标签

结构标签

我们可以通过表格结构标签，把表格的代码编写分为 [表头] 和 [表体] 两大部分

表格 · 属性（了解）

今后，表格的 align border width height 等属性都是在CSS中定义的

需要注意的是： cellpadding cellspacing无法写在CSS中

cellpadding：把文字看作一个矩形、其矩形与该单元格之间的距离为cellpadding
cellspacing：单元格和单元格之间的距离

表格 · 合并单元格

代码示例

<!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>

    <p>原始表格</p>
    <table border="1" cellspacing="0" width="100" height="100">
        <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>

    <p>跨列合并单元格</p>
    <table border="1" cellspacing="0" width="100" height="100">
        <tr>   <td>@</td>   <td colspan="2">@</td>   <!-- <td>@</td>-->  </tr>
        <tr>   <td>@</td>   <td>@</td>               <td>@</td>          </tr>
        <tr>   <td>@</td>   <td>@</td>               <td>@</td>          </tr>
    </table>

    <p>跨行合并单元格</p>
    <table border="1" cellspacing="0" width="100" height="100">
        <tr>   <td>@</td>                <td>@</td>    <td>@</td>   </tr>
        <tr>   <td rowspan="2">@</td>    <td>@</td>    <td>@</td>   </tr>
        <tr>   <!--<td>@</td>-->         <td>@</td>    <td>@</td>   </tr>
    </table>
</body>
</html>

表格 · 总结

| 列表

列表 · 简介

列表 · 三大列表语法

无序列表（重要）

有序列表

注意事项和无序列表一致

自定义列表

注意事项和无序列表一致
自定义列表相当于给一个列表加了一个列表头~~

列表 · 总结

| 表单

表单 · 简介

表单的作用：让用户填写信息，收集用户的信息
表单的构成：表单域（整个表单写在这里面）、表单控件（用户输入）、提示信息
表单的种类：inpuit输入元素、select下拉表单元素、textarea文本域元素

表单 · 表单域

表单 · input

input的基本简介

基本语法：

input的 type属性详解

注意：多个type=”radio”的input必须要有相同的名字，才能多选一

input示例

<!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>
    
    <h3>input表单元素</h3>
    <form action="#" method="get" name="表单域名称">
        input的text属性 <input type="text"> <br>
        input的password属性 <input type="password"><br>
        input的button属性 用于触发按钮响应 <input type="button" value="button"><br>
        input的submit属性 用于提交数据到服务器 <input type="submit" value="submit"><br>
        input的radio属性 用于单选按钮的定义  &nbsp;&nbsp;&nbsp;   【A】<input type="radio" >  【B】<input type="radio"><br>
        对于同名name的radio属性，会被视为一组，无法多选  &nbsp;&nbsp;&nbsp;   
        【A】<input type="radio" name="1" value="送到后台的值">  【B】<input type="radio" name="1" value="XXX" checked><br>
        input的checkBox属性，用于多选  【A】<input type="checkbox" name="1"> 【B】<input type="checkbox" name="1"> 【C】<input type="checkbox" name="1">
    </form>

</body>
</html>

表单 · input 各属性的使用场景

表单 · label标签

作用：增加用户体验

比如选择男女性别的时候，可以让用户点击头像就可以选中标签

在输入text文本的时候，点击文本的提示信息，就可以把光标放在输入栏内。

表单 · select textarea

示例：

<!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>

    
    <h4>下拉表单元素select</h4>
    <form>
        购买课程：
        <select>
            <option>Java基础</option>
            <option>Java后端基础</option>
            <option>Java后端</option>
            <option>Java前端</option>
            <option>Java互联网技术</option>
        </select>
        <input type="submit" value="购买"/>
    </form>



    <h4>文本域表单元素textarea</h4>
    <form>
        备忘录：
        <textarea cols="10" rows="3">textarea中间写的东西作为默认文字展示</textarea>
    </form>


</body>
</html>