HTML基础（三）：列表、表格、表单标签学习

列表标签

列表的应用场景

  • 场景：在网页中按照行展示关联性内容，如新闻列表、排行榜、账单等
  • 特点：按照行的方式整齐显示内容
  • 种类：有序列表、无序列表、自定义列表

无序列表

  • 场景：在网页中表示一组无顺序之分的列表，如新闻列表
  • 标签组成：
标签名 说明
ul 表示无序列表的整体，用于包裹li标签
li 表示无序列表的每一项，用于包含每一行的内容

  • 显示特点

    • 列表的每一项前默认圆点标识

  • 注意点

    • ul只允许包含li标签
    • li标签可以包含任意内容

  • 代码

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

有序列表

  • 场景：在网页中表示一组有顺序之分的列表，如排行榜
  • 标签组成：
标签名 说明
ol 表示有序列表的整体，用于包裹li标签
li 表示有序列表的每一项，用于包含每一行的内容

  • 显示特点

    • 列表的每一项前默认显示序号标识

  • 注意点

    • ol只允许包含li标签
    • li标签可以包含任意内容

  • 代码

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

自定义列表

  • 场景：在网页的底部导航中通常会使用自定义列表实现
  • 标签组成：
标签名 说明
dl 表示自定义列表的整体，用于包裹dt/dd标签
dt 表示自定义列表的主题
dd 表示自定义列表的针对主题的每一行内容

  • 显示特点

    • dd前会默认显示缩进效果

  • 注意点

    • dl标签只允许包含dt/dd标签
    • dt/dd标签可以包含任意内容

  • 代码

<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

表格标签

表格的基本标签

  • 场景：在网页中以行+列的单元格的方式整齐展示和数据，如学生成绩表
  • 基本标签:
标签名 说明
table 表格整体，可用于包裹多个tr
tr 表格每行，可用于包裹td
td 表格单元格，可用于包裹内容
  • 注意点:
    • 标签的嵌套关系：table > tr > td
  • 代码：
 <table>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>100</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>90</td>
        </tr>
    </table>

表格相关属性

  • 场景：设置表格基本展示效果
  • 常见相关属性：
属性名 属性值 效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度
  • 注意点：
    • 实际开发时针对于样式效果推荐使用CSS设置
  • 代码：
<table border="1" width="200" height="200">
        <tr>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>100</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>90</td>
        </tr>
</table>

表格标题和表头单元格标签

  • 场景：在表格中表示整体大标题和一列小标题
  • 其他标签：
标签名 名称 说明
caption 表格大标题 表示表格整体大标题，默认在表格整体顶部居中位置显示
th 表头单元格 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

  • 注意点：

    • caption标签书写在table标签内部
    • th标签书写在tr标签内部（用于替换td标签）

  • 代码：

<table border="1" width="200" height="200">
        <caption>学生成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>100</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>90</td>
        </tr>
</table>

表格的结构标签

  • 场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰。
  • 结构标签：
标签名 名称
thead 表格头部
tbody 表格主体
tfoot 表格底部
  • 注意点：
    • 表格结构标签内部用于包裹tr标签
    • 表格的结构标签可以省略
  • 代码：
<table border="1" width="200" height="200">
        <caption>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>100</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>90</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总计</td>
                <td>190</td>
            </tr>
        </tfoot>
</table>

合并单元格

  • 场景：将水平或垂直多个单元格合并成一个单元格
  • 合并单元格步骤：
    1. 明确合并哪几个单元格
    2. 通过左上原则，确定保留谁删除谁
      • 上写合并->只保留最上的，删除其他的
      • 左右合并->只保留最左的，删除其他的
    3. 给保留的单元格设置：跨行合并（rowspan）、垮列合并（colspan）
属性名 属性值 说明
rowspan 合并单元格的个数 跨行合并，将多行的单元格垂直合并
colspan 合并单元格的个数 跨列合并，将多列的单元格垂直合并
  • 注意点：
    • 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
  • 代码：
 <table border="1" width="200" height="200">
        <caption>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td rowspan="2">100</td>
            </tr>
            <tr>
                <td>小红</td>
                
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">总计190</td>
            </tr>
        </tfoot>
 </table>

表单标签

input系列标签

  • 场景：在网页中显示收集用户信息的表单效果，如登陆页、注册页
  • 标签名：input
    • input标签可以通过type属性值的不同，展示不同效果
      type属性值
标签名 type属性值 说明
input text 文本框，用于输入单行文本
input password 密码框，用于输入密码
input radio 单选框，用于多选一
input checkbox 多选框，用于多选多
input file 文件选择，用于之后上传文件
input submit 提交按钮，用于提交
input reset 重置按钮，用于重置
input button 普通按钮，默认无功能，之后
  • 代码
文本框：<input type="text">
<br>
密码框：<input type="password">
<br>
单选框：<input type="radio">
<br>
多选框：<input type="checkbox" >
<br>
上传文件：<input type="file">

input系列标签-文本框

  • 场景：在网页中显示输入单行文本的表单控件
  • type属性值：text
  • 常用属性：
属性名 说明
placeholder 占位符，提示用户输入内容的文本
  • 代码
<input type="text" placeholder="请输入信息">

input系列标签-单选框

  • 场景：在网页中显示多选一的单选表单控件
  • type属性值：radio
  • 常用属性
属性名 说明
name 分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checked 默认选中

  • 注意点：

    • name属性对于单选框有分组功能
    • 有相同name属性值的单选框为一组，一组中同时只能有一个被选中

  • 代码

性别：<input type="radio">男 <input type="radio">女

性别：<input type="radio" name="sex">男 
    <input type="radio" name=“sex” checked>女

input系列标签-文件选择

  • 场景：在网页中显示文件选择的表单控件
  • type属性值：file
  • 常见属性：
属性名 说明
multiple 多文件选择
  • 代码
上传文件：<input type="file" multiple>

input系列标签-按钮

  • 场景：在网页中显示不同功能的按钮表单控件
  • type属性值
type属性值 说明
submit 提交按钮。点击之后提交数据给后端服务器
reset 重置按钮。点击之后恢复表单默认值
button 普通按钮。默认无功能，之后配合js添加功能

  • 注意点

    • 如果需要实现以上按钮功能，需要配合form标签一起用
    • form使用方法：用form标签把表单标签一起包裹起来即可

  • 代码

<form action="">
    用户名：<input type="text">
    <br>
    密码：<input type="text">
    <br>
    <input type="submit">
    <input type="reset">
    <input type="button" value="普通按钮">

</form>

button按钮标签

  • 场景：在网页中显示用户点击的按钮
  • 标签名：button
  • type属性值（同input的按钮系列）
type属性值 说明
submit 提交按钮。点击之后提交数据给后端服务器
reset 重置按钮。点击之后恢复表单默认值
button 普通按钮。默认无功能，之后配合js添加功能
  • 注意点：
    • 谷歌浏览器中button默认是提交按钮
    • button标签是双标签，更便于包裹其他内容，如图片、文字等
  • 代码
<button>我是按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮，没有任何功能</button>

select下拉菜单标签

  • 场景：在网页中提供多个选择项的下拉菜单表单控件

  • 标签组成：

    • select标签：下拉菜单的整体
    • option标签：下拉菜单的每一项

  • 常见属性：

    • selected：下拉菜单的默认选中

  • 代码

<select>
    <option>汉堡</option>
    <option selected>薯条</option>
    <option>可乐</option>
</select>

textarea文本域标签

  • 场景：在网页中提供可以输入多行文本的表单控件

  • 标签名：textarea

  • 常见属性：

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

  • 注意点：

    • 右下角可以拖拽改变大小
    • 实际开发时针对于样式效果推荐使用css设置

  • 代码

<textarea cols="60" rows="10">请输入信息</textarea>

label标签

  • 场景：常用于绑定内容与表单标签的关系
  • 标签名：label
  • 使用方法1：
    1. 使用label标签把内容包裹起来
    2. 在表单标签上添加id属性
    3. 在label标签的for属性中设置对应的id属性值
  • 代码
<input type="radio" name="sex" id="nan"><label for="nan">男</label>

  • 使用方法2:

    1. 直接使用label标签把内容和表单标签一起包裹起来
    2. 需要把label标签的for属性删除即可

  • 代码

<label><input type="radio" name="sex">男</label>
posted @ 2022-08-25 09:51  是小鱼呀  阅读(117)  评论(0)  编辑  收藏  举报