HTML总结2

Takklin
132 阅读4分钟

之前的总结已经包含了<html>, <body>, <main>, <h1>-<h3>, <section>, <p>, <a>, <img>, <ul>/<ol>, <li>, <figure>, <figcaption>, <em>, <strong>, <form>等。现在的新代码里，新增了<!DOCTYPE html>, <head>, <meta>, <title>, <fieldset>, <legend>, <label>, <input>, <button>, <footer>，还有一些新的属性比如checked, placeholder, required。

让我们逐个分析这些新标签和属性的用法。例如，<!DOCTYPE html>是文档类型声明，告诉浏览器这是HTML5文档。<head>包含元数据，如<meta charset>和<title>。<fieldset>和<legend>用于组织表单控件，<label>关联输入元素，<input>有不同的类型，如radio和checkbox，<button>用于提交表单，<footer>是页脚部分。

还要注意属性部分，比如checked用于默认选中 单选按钮 或 复选框，placeholder在输入框中显示提示文本，required表示必填项。此外，<label>的for属性与对应的id关联，提升可访问性。

我们还需要注意许多，比如<form>里新增的结构和元素，以及页脚的使用。我们还可以在之后总结更多表单控件或CSS样式。

1. <!DOCTYPE html>

  • 作用：声明文档类型为HTML5
  • 必须位置：文档第一行

2. <head>

  • 作用：包含元数据（不会显示在页面上）

  • 必须包含：

    • <meta charset="utf-8">：定义字符编码
    • <title>：页面标题（显示在浏览器标签页）

新增表单相关标签

3. <fieldset> & <legend>

  • 作用：

    • <fieldset>：将表单控件分组（默认带边框）
    • <legend>：为分组添加标题

4. <label>

  • 作用：为表单元素添加说明文字（点击文字可聚焦控件）

  • 关联方式：

    • 包裹输入控件
    • 或使用 for 属性匹配控件的 id
<!-- 方式1：包裹控件 -->
<label>
  <input type="checkbox" name="agree"> 我同意条款
</label>

<!-- 方式2：通过for-id关联 -->
<input type="checkbox" id="newsletter">
<label for="newsletter">订阅新闻</label>
  • 犯过的错误：

b7990cacd18d9d069051757a8b7b951.png

5. <input> 扩展用法

b7990cacd18d9d069051757a8b7b951.png

  • 已用类型：

    • type="radio"：单选按钮（相同 name 为一组）
    • type="checkbox"：复选框
    • type="text"：文本输入框

  • 关键属性：

    • checked：默认选中（布尔属性，无需值）
    • placeholder：输入框提示文字，可以翻上去复制代码验证
    • required：必填项（提交时会验证）
<input type="email" placeholder="请输入邮箱" required>
<input type="radio" name="size" value="large" checked>

6. <button>

  • 作用：创建可点击按钮

  • 关键属性：

    • type="submit"：提交表单（默认行为）
    • type="reset"：重置表单
    • type="button"：普通按钮（需配合JavaScript）
<button type="submit">提交订单</button>
<button type="button" onclick="alert('Hi')">点击我</button>

新增语义化标签

7. <footer>

  • 作用：定义页面底部内容（如版权信息）
<footer>
  <p>© 2023 我的网站</p>
</footer>

完整功能示例

<!-- 包含所有新标签的完整表单示例 -->
<form action="/submit">
  <fieldset>
    <legend>用户信息</legend>
    
    <label>
      用户名：
      <input type="text" name="username" placeholder="输入用户名" required>
    </label>

    <fieldset>
      <legend>性别</legend>
      <label><input type="radio" name="gender" value="male" checked> 男</label>
      <label><input type="radio" name="gender" value="female"> 女</label>
    </fieldset>

    <label>
      <input type="checkbox" name="newsletter"> 订阅新闻
    </label>
  </fieldset>

  <button type="submit">注册</button>
</form>

<footer>
  <p>联系我们：contact@example.com</p>
</footer>

关键细节说明

  1. name 属性：表单提交时的参数名（如 name="username" 对应后台接收的字段）
  2. value 属性：表单提交时发送的值（单选/复选必需）
  3. 标签关联：使用 label 的 for 与 input 的 id 匹配可提升可访问性
  4. 布尔属性：如 checked/required 只需写属性名，不需要值（但XHTML中需写 checked="checked"）

答 疑

为什么不同类型的表单元素可以有不同的 name 属性：

  1. name 属性的作用是标识表单元素，使服务器能够接收和区分不同类型的输入数据。每个表单字段（不管是复选框、单选按钮、文本框等）都需要有一个 name 属性，服务器通过该属性来识别该字段的数据。
  2. name 可以有不同的值，这意味着不同的表单字段可以使用不同的 name 来表示它们的内容。对于复选框、文本框、单选按钮等，不同的 name 属性帮助服务器将来自不同输入控件的数据正确分类和存储。

举个例子

假设你有一个表单，它包含复选框、单选按钮和文本输入框：

html
CopyEdit
<form action="/submit" method="POST">
  <!-- 复选框 -->
  <input type="checkbox" name="personality" value="loving"> Loving
  <input type="checkbox" name="personality" value="playful"> Playful

  <!-- 单选按钮 -->
  <input type="radio" name="meal" value="breakfast"> Breakfast
  <input type="radio" name="meal" value="lunch"> Lunch

  <!-- 文本输入框 -->
  <input type="text" name="cat_name" placeholder="Enter your cat's name">

  <button type="submit">Submit</button>
</form>

结果是什么？

  • 复选框：这两个复选框有相同的 name="personality" ，当它们被选中时，服务器会接收到多个 personality 字段的数据，类似于：

    plaintext
CopyEdit
personality=loving&personality=playful

  • 单选按钮：两个单选按钮的 name="meal" ，由于单选按钮只能选中一个，服务器会接收到：

    plaintext
CopyEdit
meal=breakfast

    或者：

    plaintext
CopyEdit
meal=lunch

  • 文本框：文本框的 name="cat_name" ，服务器会接收到：

    plaintext
CopyEdit
cat_name=Fluffy

为什么可以使用不同的 name？

  • 每种控件（复选框、单选按钮、文本框等）都有自己的作用和特性，它们的数据在服务器端需要不同的处理方式。例如：

    • 复选框 可能包含多个选项（通过数组处理），因此使用相同的 name 来收集多个选项的值。
    • 单选按钮 只允许选择一个选项，因此它们的 name 使得服务器知道在这组选项中只选择了一个。
    • 文本框 提供单一的数据输入，服务器通过 name 属性知道文本框的内容。

总结

  • 不同类型的表单控件（复选框、单选按钮、文本框等）可以有不同的 name 属性，具体取决于它们的功能和如何在服务器端处理数据。
  • name="personality" 是复选框组的标识，而 name="meal" 和 name="cat_name" 分别用来标识单选按钮和文本框。这样可以让服务器正确地处理每个字段的数据，避免混淆。
avatar
文章
阅读
粉丝