前端开发-标签

一、基础标签：构建页面的 "砖瓦"

1. <img> 图片标签：展示视觉内容

• 核心格式 ：
  <img src="图片路径" alt="图片加载失败时显示的文字">

  ✅ 示例：<img src="logo.png" alt="网站logo">

• 必知属性：

  • src：图片的路径（本地路径或网络 URL，必填）。
  • alt：替代文本（不仅是 "加载失败提示"，更是屏幕阅读器识别图片的关键，强烈建议填写，提升无障碍性）。

• 布局小技巧 ：

  若想让多张图片横向排列，只需给它们的父容器添加 CSS 样式：display: flex。

2. 列表标签：有序 / 无序展示内容

（1）无序列表 <ul><li>：最常用的列表形式

• 标准结构：

  <ul>
    <li>第一项内容</li>
    <li>第二项内容</li>
  </ul>

• 核心规则：

  • ul 的直接子元素必须是 li ，但 li 内部可嵌套任何标签（包括 ul 实现多级列表，如 "菜单→子菜单"）。

• 必学样式（CSS） ：

  • 清除默认样式（几乎所有场景都需要）：
    ul { list-style: none; padding: 0; margin: 0; }
  • 子元素换行：ul { display: flex; flex-wrap: wrap; }（子元素超出父容器宽度时自动换行）。
  • 垂直居中：ul { display: flex; align-items: center; }（子元素在垂直方向居中对齐）。

（2）有序列表 <ol><li>：带序号的列表

• 作用：用于需要明确顺序的内容（如 "步骤说明""排名列表"）。

• 示例：

  <ol>
    <li>打开浏览器</li>
    <li>输入网址</li>
  </ol>

• 局限性 ：默认序号样式（数字 / 字母）难以自定义，且序号不可选中，实际开发中常用 ul 配合 CSS 模拟有序列表。

（3）定义列表 <dl><dt><dd>：解释说明型内容

• 适用场景：展示 "主题 + 解释" 结构（如术语解释、FAQ 问答、商品参数）。

• 结构规则：

  <dl>
    <dt>主题（如"HTML"）</dt>
    <dd>解释1：超文本标记语言</dd>
    <dd>解释2：用于构建网页结构</dd>
  </dl>

  • dl 的子元素只能是 dt（主题）或 dd（解释）。
  • 一个 dt 可对应多个 dd，也可单独存在（无解释）。

3. 文本与容器标签：组织页面内容

（1）段落标签 <p>：包裹文本段落

• 作用：定义一段文字，自带默认上下间距，区分不同段落。

• 常用样式：

  • 字体加粗：p { font-weight: bold; }
  • 调整行高：p { line-height: 1.5; }（让文字更易读）。

（2）容器标签 <div>：万能布局工具

• 核心特点：

  • 块级元素，默认独占一行，可通过 CSS 改为行内或行内块级。
  • 无固定语义，纯粹作为 "容器"，可嵌套任何标签（包括自身），是页面布局的核心（如 "头部""侧边栏""内容区" 都可用 div 划分）。

（3）标题标签 <h1>-<h6>：构建内容层级

• 使用原则：

  • h1：页面最重要标题（如文章大标题），一个页面仅用一次（对搜索引擎友好）。
  • h2-h6：层级递减的副标题（如章节标题、小节标题），可多次使用，体现内容逻辑。
    ✅ 示例：h1（文章标题）→ h2（章节标题）→ h3（小节标题）。

4. 链接与文本辅助：完善文字交互

（1）链接标签 <a>：跳转与导航

• 基础格式 ：
  <a href="目标地址" target="打开方式">链接文字</a>

• 关键属性：

  • href：跳转地址（必填，可为网页 URL、锚点 #id 或邮件 mailto:xxx@xx.com）。

  • target：

    • _self（默认）：在当前窗口打开链接。
    • _blank：在新窗口打开，保留原页面（推荐外部链接使用）。

（2）<span> 标签：精细化控制文本

• 定位 ：行内文本容器，仅用于包裹少量文字（如给某几个字改颜色）。
• 限制 ：不可嵌套块级元素（div、p、列表等）或表单元素，避免语义混乱。

（3）特殊符号：补充文本格式

•  ：空格（一个   代表一个半角空格，多个连续使用可增加间距）。
• <br>：换行（单标签，强制文字换行，不同于 <p> 的段落间距）。

二、表格标签 <table>：结构化展示数据

核心结构（语义化写法）

<table>
  <caption>学生成绩表</caption> <!-- 表格标题，位于表格上方居中 -->
  <thead> <!-- 表头区域，存放列标题 -->
    <tr> <!-- 行 -->
      <th>姓名</th> <!-- 表头单元格，文字默认加粗居中 -->
      <th>成绩</th>
    </tr>
  </thead>
  <tbody> <!-- 表格主体，存放数据 -->
    <tr>
      <td>张三</td> <!-- 数据单元格 -->
      <td>90</td>
    </tr>
  </tbody>
  <tfoot> <!-- 表尾区域，可放总计、说明等 -->
    <tr><td>平均分</td><td>85</td></tr>
  </tfoot>
</table>

常用属性（快速调整表格样式）

属性名	作用说明	适用标签
border	设置边框宽度（如 border="1"）	table
align	水平对齐（left/center/right）	table（表格居中）、tr/td（内容对齐）
valign	垂直对齐（top/middle/bottom）	tr/td
cellspacing	单元格之间的间距（默认 2px）	table
cellpadding	单元格内容与边框的内边距	table
rules="all"	显示所有内部边框（更清晰）	table
rowspan	合并行（如 rowspan="2" 跨 2 行）	td/th
colspan	合并列（如 colspan="3" 跨 3 列）	td/th

三、表单标签：收集用户输入

表单是网页与用户交互的核心，用于登录、注册、信息提交等场景。

1. 表单容器 <form>：统一管理表单元素

• 必须包裹所有表单元素，用于指定数据提交的目标和方式。

• 核心属性：

  <form action="/submit" method="post">
    <!-- 表单元素放这里 -->
  </form>

  • action：数据提交的后台接口地址（如 /api/login）。
  • method：提交方式（post 用于敏感数据，get 用于简单查询，数据会拼在 URL 后）。

2. 输入元素 <input>：多样化输入控件

<input> 是表单中最灵活的元素，通过 type 属性实现不同功能：

type 值	功能描述	核心属性及用法
text	单行文本框（如用户名）	- placeholder="请输入用户名"：提示文字 - maxlength="10"：最多输入 10 个字符
password	密码框（输入隐藏）	同 text，但输入内容显示为圆点 / 星号
checkbox	复选框（可多选）	- name="hobby"：同组选项 name 必须相同（如 "爱好" 分组） - checked：默认选中
radio	单选框（仅选一个）	同 checkbox，但同组中只能选中一个
file	文件上传（如头像）	- 可配合 accept="image/*" 限制仅上传图片
submit	提交按钮	点击后自动提交表单数据到 form 的 action 地址
reset	重置按钮	点击后清空所有表单输入内容
button	普通按钮（需自定义功能）	需配合 JavaScript 使用（如 <input type="button" value="点击触发事件">）

3. 下拉选项框 <select><option>：预设选项选择

• 适用场景：从固定选项中选择（如城市、性别）。

• 标准写法：

  <select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai" selected>上海</option> <!-- selected：默认选中 -->
  </select>

  • name：提交时的字段名（如表单提交后会传 city=shanghai）。
  • value：选项对应的实际提交值（而非显示的文字）。

4. 多行文本框 <textarea>：输入长文本

• 用于输入大段文字（如留言、备注）。

• 常用写法：

  <textarea 
    rows="4"  <!-- 默认显示4行 -->
    cols="30" <!-- 默认显示30列宽度 -->
    placeholder="请输入详细信息"
    style="resize: none;" <!-- 禁止用户调整大小 -->
  ></textarea>

• 特殊属性：

  • readonly：只读（可选中但不能修改）。
  • disabled：禁用（背景灰色，不可输入，也不会提交数据）。

5. <label> 标签：提升交互体验

• 作用：扩大单选框 / 复选框的点击区域（点击文字也能选中选项）。

• 两种关联方式：

  1. 父子关联（推荐，更简洁）：

     <label>
       <input type="checkbox" id="agree"> 我同意协议
     </label>

  2. 同级关联（需通过 for 和 id 绑定）：

     <label for="agree">我同意协议</label>
     <input type="checkbox" id="agree">

  ⚠️ 注意：id 在页面中必须唯一，不可重复。