首页 前端知识 HTML—列表、表格、表单

HTML—列表、表格、表单

2024-09-21 21:09:19 前端知识 前端哥 610 983 我要收藏

1、列表

作用:布局内容排列整齐的区域

列表分类:无序列表、有序列表、定义列表

1.1 无序列表

作用:布局排列整齐的不需要规定顺序的区域 

标签:ul 嵌套 li,ul 是无序列表,li 是列表条目

注意事项:ul标签里面只能包裹li标签

1.2 有序列表

作用:布局排列整齐的需要规定顺序的区域

标签:ol 嵌套,ol 是有序列表,li 是列表条目

注意事项:

  • ol标签里面只能包裹li标签
  • li标签里面可以包裹任何内容

1.3 定义列表

标签:dl 嵌套 dt 和 dd,dl是定义列表,dt是定义列表的标题,dd是是定义列表的描述 / 详情

注意事项:

  • dl 里面只能包含 dt 和 dd
  • dt 和 dd 里面可以包含任何内容

2、表格

网页中的表格与Excel表格类似,用来展示数据

标签:table 嵌套 tr,tr嵌套 td / th。

标签名说明
table表格
tr
th表头单元格
td内容单元格

 提示:在网页中,表格默认没有边框线,使用border属性可以为表格添加边框线

2.1 表格结构标签-了解

作用:用表格结构标签把内容划分区域,让表格结构更清晰,语义更清晰

标签名含义特殊说明
thead表格头部表格头部内容
tbody表格主体主要内容区域
tfoot表格底部汇总信息区域
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td>100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>90</td>
                <td>100</td>
                <td>190</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>全市第一</td>
                <td>全市第一</td>
                <td>全市第一</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

2.2 合并单元格

作用:将多个单元格合并成一个单元格,以合并同类信息

合并单元格的步骤:

1.明确合并的目标

2.保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)

  • 跨行合并,保留最上单元格,添加属性 rowspan
  • 跨列合并,保留最左单元格,添加属性 colspan

3.删除其他单元格


<!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">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td rowspan="2">100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <!-- <td>100</td> -->
                <td>198</td>
            </tr>    
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="3">全市第一</td>
                <!-- <td>全市第一</td>
                <td>全市第一</td> -->
            </tr>
        </tfoot>
    </table>
</body>
</html>

3、表单

作用:手机用户信息

使用场景:

  • 登录页面
  • 注册页面
  • 搜索区域

4、input标签基本使用

input 标签 type 属性值不同,则功能不同。

type属性值说明
text文本框,用于输入单行文本
password密码框
radio单选框
checkbox多选框
file上传文件

5、input标签占位文本

占位文本:提示信息

注意:

  • 占位符:placeholder
  • 如果需要实现单选效果,需要设置相同的name属性值
  • 单选框和多选框的默认选中:checked

6、单选框 radio

属性名作用特殊说明
name控件名称控件分组,同组只能选中一个(单选功能)
checked默认选中属性名和属性值相同,简写为一个单词

7、上传文件- file

默认情况下,文件上传表单控件只能上传一个文件,添加multiple属性可以实现文件多选功能

8、多选框-checkbox

多选框也叫复选框。

默认选中:checked

9、下拉菜单

标签:select 嵌套 option,select是下拉菜单整体,option是下拉菜单的每一项

常见属性:selected:下拉菜单的默认选中

10、文本域

作用:多行输入文本的表单控件

标签: textarea ,双标签

常见属性:

  • cols:规定了文本域内可见宽度
  • rows:规定了文本域内可见行数

11、label标签 

经验:用label标签绑定文字和表单控件的关系,增大表单控件的点击范围。

之前是只能在小圆圈里面点击才能选中,使用label使它点击男或女也可以选中

11.1 label标签-增大点击范围

写法一:

  • label标签只包裹内容,不包裹表单控件
  • 设置label标签的for属性值和表单控件的id属性相同

写法二:

  • 使用label标签包裹文字和表单控件,不需要属性

提示:支持label标签增大点击范围的表单控件:文本框、上传文件、单选框、多选框、下拉菜单、文本域等等。

12、按钮-button

type属性值说明
submit提交按钮,点击后可以提交数据到后台(默认功能)
reset重置按钮,点击后将表单控件恢复默认值
button普通按钮,默认没有功能,一般配合JavaScript使用

注意:

如果需要实现以上按钮功能,需要配合form标签使用

form使用方法:用form标签把表单标签一起包裹起来即可

13、无语义的布局标签

作用:布局网页(划分网页区域,摆放内容)

  • div:独占一行
  • span:不换行

14、字符实体

作用:在网页中显示预留字符

15、综合案例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            <img src="../photo/1.jpg" alt="">
            <h3>吃泡面咋了,不让吃</h3>
        </li>
        <li>
            <img src="../photo/2.jpg" alt="">
            <h3>柠檬头,我好爱,你爱嘛</h3>
        </li>
        <li>
            <img src="../photo/3.jpg" alt="">
            <h3>冬天了,冬天了,降温了</h3>
        </li>
    </ul>
</body>
</html>

16、综合案例二-注册信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>注册信息</h1>
    <form action="">
        <!-- 表单控件 -->
        <!-- 个人信息 -->
        <h2>个人信息</h2>
        <label for="">姓名:</label><input type="text" placeholder="请输入真实姓名">
        <br><br>
        <label>密码:</label><input type="password" placeholder="请输入密码">
        <br><br>
        <label>确认密码</label><input type="password" placeholder="请输入确认密码">
        <br><br>
        <label>性别:</label>
        <label><input type="radio" name="gender" checked> 男</label>
        <label><input type="radio" name="gender"> 女</label>
        <br><br>
        <label>居住城市:</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>武汉</option>
            <option>广州</option>
            <option>深圳</option>
        </select>
        
        <!-- 教育经历 -->
        <h2>教育经历</h2>
        <label>最高学历:</label>
        <select>
            <option>博士</option>
            <option>硕士</option>
            <option>本科</option>
            <option>大专</option>
        </select>
        <br><br>
        <label>学校名称:</label><input type="text"><br><br>
        <label>所学专业:</label><input type="text">
        <br><br>
        <label>在校时间:</label>
        <select>
            <option>2015</option>
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
        </select>
        --
        <select>
            <option>2019</option>
            <option>2020</option>
            <option>2021</option>
            <option>2022</option>
        </select>
        <!-- 工作经历 -->
        <h2>工作经历</h2>
        <label>公司名称:</label><input type="text">
        <br><br>
        <label>工作描述:</label>
        <br>
        <textarea></textarea>
        <br><br>
        <!-- 协议和按钮 -->
        <input type="checkbox"><label>已阅读并同意以下协议:</label>
        <ul>
            <li><a href="#">《用户服务协议》</a></li>
            <li><a href="#">《隐私政策》</a></li>
        </ul>
        <br><br>
        <button>免费注册</button>
        <button type="reset">重新填写</button>
    </form>
</body>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18515.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!