前端开发-标签

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

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

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

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

  • 必知属性

    • src:图片的路径(本地路径或网络 URL,必填)。
    • alt:替代文本(不仅是 "加载失败提示",更是屏幕阅读器识别图片的关键,强烈建议填写,提升无障碍性)。
  • 布局小技巧

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

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

(1)无序列表 <ul><li>:最常用的列表形式
  • 标准结构

    css 复制代码
    <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>:带序号的列表
  • 作用:用于需要明确顺序的内容(如 "步骤说明""排名列表")。

  • 示例

    css 复制代码
    <ol>
      <li>打开浏览器</li>
      <li>输入网址</li>
    </ol>
  • 局限性 :默认序号样式(数字 / 字母)难以自定义,且序号不可选中,实际开发中常用 ul 配合 CSS 模拟有序列表。

(3)定义列表 <dl><dt><dd>:解释说明型内容
  • 适用场景:展示 "主题 + 解释" 结构(如术语解释、FAQ 问答、商品参数)。

  • 结构规则

    css 复制代码
    <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> 标签:精细化控制文本
  • 定位 :行内文本容器,仅用于包裹少量文字(如给某几个字改颜色)。
  • 限制 :不可嵌套块级元素(divp、列表等)或表单元素,避免语义混乱。
(3)特殊符号:补充文本格式
  • &nbsp;:空格(一个 &nbsp; 代表一个半角空格,多个连续使用可增加间距)。
  • <br>:换行(单标签,强制文字换行,不同于 <p> 的段落间距)。

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

核心结构(语义化写法)

xml 复制代码
<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>:统一管理表单元素

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

  • 核心属性

    xml 复制代码
    <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 提交按钮 点击后自动提交表单数据到 formaction 地址
reset 重置按钮 点击后清空所有表单输入内容
button 普通按钮(需自定义功能) 需配合 JavaScript 使用(如 <input type="button" value="点击触发事件">

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

  • 适用场景:从固定选项中选择(如城市、性别)。

  • 标准写法

    xml 复制代码
    <select name="city">
      <option value="beijing">北京</option>
      <option value="shanghai" selected>上海</option> <!-- selected:默认选中 -->
    </select>
    • name:提交时的字段名(如表单提交后会传 city=shanghai)。
    • value:选项对应的实际提交值(而非显示的文字)。

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

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

  • 常用写法

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

    • readonly:只读(可选中但不能修改)。
    • disabled:禁用(背景灰色,不可输入,也不会提交数据)。

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

  • 作用:扩大单选框 / 复选框的点击区域(点击文字也能选中选项)。

  • 两种关联方式

    1. 父子关联(推荐,更简洁):

      bash 复制代码
      <label>
        <input type="checkbox" id="agree"> 我同意协议
      </label>
    2. 同级关联(需通过 forid 绑定):

      ini 复制代码
      <label for="agree">我同意协议</label>
      <input type="checkbox" id="agree">

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

相关推荐
Zachery Pole1 小时前
BootStrap
前端·bootstrap·html
淮北4942 小时前
最简单的实验室资产管理系统,使用Flask,mysql,html(四、知识补充)
mysql·flask·html
多啦C梦a3 小时前
【前端必修】闭包、`this`、`箭头函数`、`bind`、节流,一篇文章全懂!
前端·javascript·html
爱编程的喵5 小时前
深入理解JavaScript节流函数:从原理到实战应用
前端·javascript·html
web守墓人11 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
国家不保护废物1 天前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
学长学姐我该怎么办1 天前
从零开始学前端html篇2
前端·html
程序员秘密基地1 天前
基于html,css,vue,vscode,java,springboot,mysql数据库,在线考勤,管理系统
java·vue.js·spring·html·web app
杨超越luckly1 天前
HTML应用指南:利用GET请求获取全国山姆门店位置信息
信息可视化·数据分析·html·argis·门店