HTML复习（2）

最新推荐文章于 2023-04-13 20:30:07 发布

奋斗吧程序媛

最新推荐文章于 2023-04-13 20:30:07 发布

阅读量98

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/m0_67841039/article/details/124436302

版权

本文详细介绍了HTML的列表、表格、表单元素以及语义化标签的应用，包括无序列表、有序列表、自定义列表、表格结构、各种表单控件如input、button、select和textarea，以及如何创建有语义的布局。

摘要由CSDN通过智能技术生成

一、列表标签

无序列表

有序列表

自定义列表

列表标签总结：

二、表格标签

表格标签总结（代码展示）：

<!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" width="400" height="400">
    <!-- 表格整体的大标题 -->
    <caption><h3>优秀学生信息表格</h3></caption>
    <!-- 表格的头部 -->
    <thead>
      <tr>
        <th>年级</th>
        <th>姓名</th>
        <th>学号</th>
        <th>班级</th>
      </tr>
    </thead>
    <!-- 表格的主体 -->
    <tbody>
      <tr>
        <!-- 保留 -->
        <td rowspan="2">高三</td>
        <td>张三</td>
        <td>110</td>
        <td>三年二班</td>
      </tr>
      <tr>
        <!-- 删除 -->
        <!-- <td>高三</td> -->
        <td>赵四</td>
        <td>120</td>
        <td>三年三班</td>
      </tr>
    </tbody>
    <!-- 表格的底部 -->
    <tfoot>
      <tr>
        <td>评语</td>
        <!-- 保留 -->
        <td colspan="3">你们都很优秀</td>
        <!-- 统统删除掉 -->
        <!-- <td>你们都很优秀</td> -->
        <!-- <td>你们都很优秀</td> -->
      </tr>
    </tfoot>
  </table>
</body>
</html>

三、表单标签

1. input系列标签

补充介绍：

2. button按钮标签

3. select下拉菜单标签

4. textarea文本域标签

5. label标签

表单标签总结（代码展示）：

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

  <form>
    昵称：
    <input type="text" placeholder="请输入昵称">
    <br><br>

    性别：
    <label>
      <input type="radio" name="sex" checked>男
    </label>
    <label>
      <input type="radio" name="sex">女
    </label>
    <br><br>

    所在城市：
    <select>
      <option>上海</option>
      <option>北京</option>
      <option>广州</option>
      <option>深圳</option>
    </select>
    <br><br>

    婚姻状况：
    <input type="radio" name="marry" checked>未婚
    <input type="radio" name="marry">已婚
    <input type="radio" name="marry">保密
    <br><br>

    喜欢的类型：
    <input type="checkbox" checked>可爱
    <input type="checkbox" checked>性感
    <input type="checkbox">御姐
    <input type="checkbox">萝莉
    <input type="checkbox">小鲜肉
    <input type="checkbox">大叔
    <br><br>

    个人介绍：<br><br>
    <textarea name="" id="" cols="60" rows="10"></textarea>

    <h3>我承诺</h3>
    <ul>
      <li>年满18岁、单身</li>
      <li>抱着严肃的态度</li>
      <li>真诚寻找另一半</li>
    </ul>

    <input type="checkbox">我同意所有条款
    <br><br>

    <input type="submit" value="免费注册">
    <input type="reset">
  </form>
</body>
</html>