HTML学习 Part2

列表

1.无序列表

使用<ul>标签创建，列表项前默认会有圆点标记。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

2.有序列表

通过<ol>标签创建，列表项前会按照数字或字母顺序进行编号。

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

3.定义列表

借助<dl>标签创建，它由术语（<dt>）和定义（<dd>）两部分构成。

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

列表标签的嵌套使用

<ul>
  <li>水果
    <ol>
      <li>苹果</li>
      <li>香蕉</li>
    </ol>
  </li>
  <li>蔬菜
    <ol>
      <li>胡萝卜</li>
      <li>西红柿</li>
    </ol>
  </li>
</ul>

效果：

  • 水果
    1. 苹果
    2. 香蕉
  • 蔬菜
    1. 胡萝卜
    2. 西红柿

表格

  • <table>：作为表格的容器，所有与表格相关的内容都要放在这个标签内。

  • <tr>（Table Row）：代表表格中的行，表格有多少行就需要多少个<tr>标签。

  • <td>（Table Data）：指的是表格中的单元格，每个单元格都要放在<tr>标签内。

  • <th>（Table Header）：表示表头单元格，通常用于呈现列标题，会以粗体居中的形式显示。

  • <caption>：用于为表格添加标题，该标题会显示在表格的上方。

  • <thead>：对表格的头部内容进行分组，一般包含表头行。

  • <tbody>：用于分组表格的主体内容，包含数据行。

  • <tfoot>：对表格的页脚内容进行分组，常用于放置汇总行，并且会显示在表格的底部。

<table border="1">    <!--border是设置边框-->
  <caption>2023年第一季度订单汇总</caption>
  <thead>
    <tr>
      <th>订单编号</th>
      <th>客户名称</th>
      <th>金额</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ORD-2023-001</td>
      <td>ABC科技</td>
      <td>¥12,500.00</td>
    </tr>
    <tr>
      <td>ORD-2023-002</td>
      <td>XYZ公司</td>
      <td>¥8,300.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">总计</td>
      <td>¥20,800.00</td>
    </tr>
  </tfoot>
</table>

单元格合并

  • colspan：用于设置单元格跨列的数量，跨列合并。
  • rowspan：用于设置单元格跨行的数量，跨行合并。
<table>
  <tr>
    <th>项目</th>
    <th colspan="2">第一阶段</th>
    <th colspan="2">第二阶段</th>
  </tr>
  <tr>
    <td>负责人</td>
    <td>张三</td>
    <td>李四</td>
    <td>王五</td>
    <td>赵六</td>
  </tr>
  <tr>
    <td rowspan="2">时间</td>
    <td colspan="2">3月</td>
    <td colspan="2">4月</td>
  </tr>
  <tr>
    <td>开始</td>
    <td>结束</td>
    <td>开始</td>
    <td>结束</td>
  </tr>
</table>

表单

在 HTML 里，表单是网页和用户进行交互的重要工具，它能够收集用户输入的数据，像文本、密码、选择项等。

1. 文本输入

<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
  • type：可以设置为text（普通文本）、password（密码输入框，输入的内容会被隐藏）、email（邮箱格式校验）、number（数字输入）等。

2. 单选按钮（Radio）

<label>性别：</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
  • 同一组单选按钮要使用相同的name属性，这样用户只能从中选择一个选项。
  • checked表示默认选中

3. 复选框（Checkbox）

<label>爱好：</label>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">阅读</label>
<input type="checkbox" id="sports" name="hobby" value="sports" checked>
<label for="sports">运动</label>
  • 复选框允许用户选择多个选项，提交时会将选中的值以数组形式传递。

4. 下拉选择框（Select）

<label for="city">城市：</label>
<select id="city" name="city">
  <option value="">请选择</option>
  <option value="beijing">北京</option>
  <option value="shanghai" selected>上海</option>
  <option value="guangzhou">广州</option>
</select>
  • selected：这个属性可以将某个选项设为默认选中状态。

5. 文本域（Textarea）

<label for="message">留言：</label>
<textarea id="message" name="message" rows="3" cols="30" placeholder="请输入留言内容"></textarea>
  • 适用于需要用户输入多行文本的场景，比如评论、留言等。

6. label标签用于增大点击范围

1.通过for属性（<label>）和id属性（表单控件）建立关联：

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

2.隐式关联（嵌套方式），将表单控件直接放在<label>标签内部，无需额外的for和id：

<label>
  记住我
  <input type="checkbox" name="remember">
</label>

按钮(button)

<button>点击我</button>
  • **[默认]提交按钮(submit)**：这种按钮主要用于表单提交，它是按钮的默认类型。
<button type="submit">提交表单</button>
  • **重置按钮(reset)**：点击该按钮可以重置表单中的所有输入内容。
<button type="reset">重置表单</button>
  • **普通按钮(button)**：这种按钮没有默认行为，通常需要配合 JavaScript 来实现特定功能。
<button type="button">普通按钮</button>

按钮的属性

  • disabled：当设置为disabled时，按钮会变灰，无法点击。
<button disabled>不可用按钮</button>
  • id 和 class：id用于唯一标识按钮，class则用于为按钮添加样式。
<button id="myButton" class="btn-primary">带ID和类的按钮</button>
  • onclick：这是一个事件属性，用于定义按钮被点击时执行的 JavaScript 代码。
<button onclick="alert('Hello World!')">点击触发弹窗</button>

注意：要把按钮标签整体用form(双)标签包括起来才会起作用

div和span

div标签（大盒子）：独占一行

span标签（小盒子）：不换行

如果要在网页里显示一个标签，则>可以用&gt；

<可以用&lt；

空格可以用&nbsp；

在代码中敲键盘的空格，网页只识别一个


综合案例-注册信息：

<!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>
    <h2>个人信息</h2>
    <label>姓名：</label>
    <input type="text" placeholder="请输入真实姓名">
    <br>
    <label>密码：</label>
    <input type="password" placeholder="请输入密码">
    <br>
    <label>确认密码</label>
    <input type="password" placeholder="请输入确认密码">
    <br>
    <label>性别:</label>
    <input type="radio" id="male">
    <label for="male">男</label>
    <input type="radio" id="female">
    <label for="female">女</label>
    <br>
    <label>居住城市：</label>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>南昌</option>
    </select>
    <h2>教育经历</h2>
    <label>最高学历：</label>
    <select>
        <option>博士</option>
        <option>硕士</option>
        <option>本科</option>
    </select>
    <br>
    <label>学校名称：</label>
    <input type="text">
    <br>
    <label>所学专业：</label>
    <input type="text">
    <br>
    <label>在校时间</label>
    <select>
        <option>2015</option>
        <option>2016</option>
        <option>2017</option>
        <option>2018</option>
        <option>2019</option>
        <option>2020</option>
    </select>
    ~
    <select>
        <option>2019</option>
        <option>2020</option>
        <option>2021</option>
        <option>2022</option>
        <option>2023</option>
    </select>
    <br>
    <h2>工作经历</h2>
    <label>公司名称：</label>
    <input type="text">
    <br>
    <label>工作描述：</label>
    <br>
    <input type="text">
    <br>
    <input type="radio" id="yes">
    <label for="yes">已阅读并同意以下协议</label>
    <br>
    <ul>
        <li><a href=#>《用户服务协议》</a></li>
        <li><a href=#>《隐私政策》</a></li>
    </ul>
    <br>
    <br>
    <button>免费注册</button>
    <button type="reset">重新填写</button>

</body>
</html>