JB2-7-HTML

周航宇JoeZhou2026-02-06 15:09

Java道经第2卷 - 第7阶 - HTML

文章目录

  • [S01. H5概念入门](#S01. H5概念入门)
    • [E01. H5概念入门](#E01. H5概念入门)
      • [1. 基本结构](#1. 基本结构)
      • [2. 全局属性](#2. 全局属性)
      • [3. 实体符号](#3. 实体符号)
  • [S02. H5图文标签](#S02. H5图文标签)
    • [E01. 容器相关标签](#E01. 容器相关标签)
      • [1. 段落标签p](#1. 段落标签p)
      • [2. 区块标签div](#2. 区块标签div)
      • [3. 引用标签blockquote](#3. 引用标签blockquote)
      • [4. 保留标签pre](#4. 保留标签pre)
      • [5. 新容器标签](#5. 新容器标签)
    • [E02. 文字相关标签](#E02. 文字相关标签)
      • [1. 换行标签br](#1. 换行标签br)
      • [2. 水平线标签hr](#2. 水平线标签hr)
      • [3. 内联标签span](#3. 内联标签span)
      • 4. 标题标签h#
      • [5. 缩小标签small](#5. 缩小标签small)
      • [6. 角标标签sup](#6. 角标标签sup)
      • [7. 链接标签a](#7. 链接标签a)
    • [E03. 媒体相关标签](#E03. 媒体相关标签)
      • [1. 图片标签img](#1. 图片标签img)
      • [2. 音频标签audio](#2. 音频标签audio)
      • [3. 视频标签video](#3. 视频标签video)
      • [4. 图文标签figure](#4. 图文标签figure)
  • [S03. H5数据标签](#S03. H5数据标签)
    • [E01. 列相关表标签](#E01. 列相关表标签)
      • [1. 有序列表标签ol](#1. 有序列表标签ol)
      • [2. 无序列表标签ul](#2. 无序列表标签ul)
      • [3. 描述列表标签dl](#3. 描述列表标签dl)
    • [E02. 表格相关标签](#E02. 表格相关标签)
      • [1. 合并单元格](#1. 合并单元格)
      • [2. 完整表格](#2. 完整表格)
      • [3. 整列控制](#3. 整列控制)
  • [S04. H5表单标签](#S04. H5表单标签)
    • [E01. 表单区域](#E01. 表单区域)
      • [1. input分组容器](#1. input分组容器)
      • [2. input常用属性](#2. input常用属性)
      • [3. input常用类型](#3. input常用类型)
    • [E02. 其他控件](#E02. 其他控件)
      • [1. 按钮控件button](#1. 按钮控件button)
      • [2. 下拉菜单select](#2. 下拉菜单select)
      • [3. 文本区域textarea](#3. 文本区域textarea)

心法：本章使用 Maven 父子结构项目进行练习。

练习项目结构如下：

shell 复制代码 
|_ v2-7-web-html
	|_ 8080 test

武技：搭建练习项目结构。

  1. 创建父项目 v2-7-web-html，删除 src 目录。
  2. 创建子项目 test，注意是 Maven Archetype 类型，不需要添加任何依赖。

S01. H5概念入门

E01. H5概念入门

心法：超文本标记语言，全称 Hyper Text Mark-up Language 5，简称 HTML5 或 H5，是一门面向浏览器的标记语言，包括文本，图片，音频，视频，链接等超文本元素，用于 布局（仅决定哪个位置放置哪个元素） HTML 页面。

H5 文件组成结构 ：H5 文件以 .html 为后缀，由 标签 和 文本 组成，具体如下表：

组成部分 简述 详述
H5 标签 描述功能 由 <> 和小写字母组成，分两种： 单标签 ：不需 "夹" 内容，如 <br>，<hr>，<img> 等（H5 规范中，自闭合标签无需写末尾斜线） 双标签 ：需要 "夹" 内容，如 <p>内容</p>，<ul><li>JoeZhou</li></ul>等
H5 文本 描述内容 支持且仅支持 <!-- 注释内容 --> 这一种注释格式，且不能嵌套

1. 基本结构

心法：H5 代码基本结构包括文档声明和根标签 <html>，根据 HTML 规范，根标签 <html> 中最好包括且仅包括 1 个头标签 <head> 和 1 个体标签 <body>，多写可能会导致浏览器解析异常。

H5 代码基本结构：

相关标签 中文 描述
<!DOCTYPE html> 文档声明 告诉浏览器当前文档是 HTML5 格式，必须写在首行（无结束标签）
<html></html> 根级标签 HTML 文档的根容器，包裹所有内容： lang="zh-cmn-Hans"：设置网站为 简体中文 环境 lang="en"：设置网站为 英文 环境
<head></head> 页头标签 存放页面 功能性配置，如编码、标题、外部资源等
<body></body> 页体标签 存放页面 展示性内容，如文字、图片、按钮等

页头标签中的常用配置：

相关标签 中文 描述
<title> 页面标题 显示在浏览器标签栏，收藏或书签时默认用该标题
<meta charset="UTF-8"> 网站编码 强制设置字符编码为 UTF-8，解决中文乱码核心配置 必须放在 <head> 靠前位置
<meta name="keywords" content="AA，BB"> <meta name="author" content="JoeZhou"> <meta name="description" content="XXX"> 网站关键字 网站作者 网站描述 供搜索引擎抓取 keywords 用英文逗号分隔 description 控制在 100 字内
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 适配移动端 width=device-width：视口宽度自动适配设备宽度 initial-scale=1.0：1 比 1 缩放，避免错位
<base href="/html/"> 统一路径前缀 该配置对当前页中的全部 href/src/action 属性都生效
<link rel="icon" type="image/x-icon" href="/my.ico"> 网站图标 显示在浏览器标签左侧 支持 .ico/.png 格式 建议尺寸 16x16 或 32x32

武技：开发 HTML 基本结构代码。

  1. 替换图标：将图标文件 my.ico（自行准备）拷贝到项目的 webapp 目录下，与 index.html 同级。
  2. 开发页面：将子项目中自带的 index.jsp 替换为 index.html，并开发如下代码：
html 复制代码 
<!--文档声明用于告诉浏览器我是一个HTML文档，一般写在首行-->
<!DOCTYPE html>
<!--根标签用于告诉浏览器HTML代码从哪里开始，到哪里结束-->
<!--lang="zh-cmn-Hans": 告诉浏览器本页面是中文简体环境，供翻译使用-->
<html lang="zh-cmn-Hans">
<!--页头: 开发功能性代码-->
<head>
    <!--页面标题: 网页被加入收藏夹或者书签时，会默认使用标题作为名字-->
    <title>我的首页</title>
    <!--配置网页的字符编码: 建议使用 UTF-8 编码-->
    <meta charset="UTF-8">
    <!--配置网站关键字/网站作者/网站内容描述: 一般用于搜索引擎-->
    <meta name="keywords" content="Java，学习">
    <meta name="author" content="JoeZhou">
    <meta name="description" content="该仅用于页面用于HTML学习">
    <!--统一路径前缀: 该配置对当前页中的全部 href/src/action 属性都生效-->
    <base href="/html/">
    <!--引入图标: 图标会显示在网站标题左侧-->
    <link rel="icon" type="image/x-icon" href="/my.ico">
</head>
<!--页体: 开发展示性代码-->
<body>
Hello HTML !
</body>
</html>
  1. 部署项目：将子项目部署到 Tomcat 服务器，项目发布名设为 "html" 即可。
  2. 访问首页 ：启动 Tomcat 服务并访问 http://localhost:8080/html/index.html 首页。
  3. 验证效果 ：
    1. 浏览器标签栏显示 "我的首页"+ 自定义图标（my.ico）。
    2. 页面显示 "Hello HTML !"。
    3. 右键页面 → 查看网页源代码：确认代码结构与编写的一致。

2. 全局属性

心法：H5 标签通过 键值对 描述属性，规则如下：

  1. 属性名必须小写。
  2. 属性值建议用双引号（主流规范）或单引号包裹。
  3. 对于双标签，属性均写在开始标签内。
  4. 布尔属性（如 hidden/contenteditable 等）：只要存在该属性就生效，优先极简写法（仅写属性名）。

全局属性：所有 HTML 标签都能使用的属性，称为全局属性，常见的全局属性如下：

全局属性 描述 示例
id 为标签设置 不可重复 的唯一标识，一般用于 JS 捕获 id = "userId"
class 为标签设置 可重复 的标识，一般用于 CSS 捕获（可写多个，空格分隔） class = "item"
title 鼠标悬停在标签上时显示的文字提示，提升用户体验 title = "有惊喜"
contenteditable 布尔属性，控制元素内容是否可编辑： 仅写属性名或设置 contenteditable="true"：可编辑 不写或设置 contenteditable="false"：不可编辑（默认） contenteditable contenteditable = "true" contenteditable = "false"
hidden 布尔属性，隐藏元素，等同于 CSS 的 display: none 样式，隐藏后不占页面空间 hidden hidden="hidden"
dir 设置文字显示方向 dir = "ltr"：从左向右布局 dir = "rtl"：从右向左布局

武技：开发 view/全局属性.html 页面，并测试 H5 全局属性。

html 复制代码 
<!-- contenteditable：点击文本可直接修改（布尔属性，仅写属性名=可编辑） -->
<p id="part01" class="part-item" contenteditable>点我可修改文本（试试输入新内容）</p>

<!-- hidden：布尔属性，有则隐藏、无则显示 -->
<p id="part02" class="part-item">我没被隐藏（无hidden属性）</p>
<p id="part03" class="part-item" hidden>我被隐藏（仅写hidden，推荐写法）</p>
<!-- 冗余写法示例（不推荐，仅作对比） -->
<p id="part04" class="part-item" hidden="hidden">我被隐藏（冗余写法，效果同上）</p>

<!-- title：鼠标悬停2秒左右显示提示文字 -->
<p id="part05" class="part-item" title="恭喜你发现了惊喜！">鼠标放在我身上有惊喜</p>

<!-- dir：文本显示方向 -->
<p id="part06" class="part-item" dir="rtl">床前明月光（dir="rtl" 从右到左）</p>
<p id="part07" class="part-item" dir="ltr">床前明月光（dir="ltr" 从左到右，默认）</p>

效果图：

3. 实体符号

心法：HTML 中部分特殊字符（如 <，> 和 & 等）会被浏览器误解析为标签或实体的开头，无法直接显示，且多个空格会被合并为 1 个，这些场景都需要用实体符号（转义字符） 替代。

实体符号格式：

  • &实体名称;：结尾的分号不可省略，可读性高。
  • &实体编号;：实体编号就是字符的 Unicode 编码，结尾的分号不可省略，兼容性高。

常用的实体符号：

显示结果 描述 实体名称 实体编号
半角空格，一个英文的宽度 &nbsp; &#160;
全角空格，一个中文的宽度 &emsp; &#8195;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
'' 双引号 &quot; &#34;
© 版权（copyright） &copy; &#169;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;
± 正负号 &plusmn; &#177;
™ 未注册或申请中的商标，无法律强制保护，仅作标识使用 &trade; &#8482;
® 已核准注册的商标，受法律严格保护，是法定专用标识 &reg; &#174;
· 间隔号 &middot; &#183;

武技：开发 view/实体符号.html 页面，并测试 H5 实体符号。

html 复制代码 
<!-- 空格实体：解决多个空格合并的问题 -->
<p>默认空格（多个合并为1个）：空 格 格 格</p>
<p>全角空格（1个中文宽）：空&emsp;格&emsp;格&emsp;格</p>
<p>半角空格（1个英文宽）：空&nbsp;格&nbsp;格&nbsp;格</p>

<!-- 特殊符号：避免被解析为标签 -->
<p>错误示例（直接写< >会被解析为标签）：<br></p>
<p>正确示例（用实体）：&lt;br /&gt;</p>

<!-- 和号实体：避免被解析为实体开头 -->
<p>错误示例（&会被识别为实体开头）：&lt;</p>
<p>正确示例：&amp;lt;</p>

<!-- 引号实体：直接在属性中使用双引号或单引号容易导致属性值提前闭合 -->
<p title="hello &quot;HTML&quot;">鼠标悬停查看双引号</p>
<p title='hello 'HTML''>鼠标悬停查看引号</p>

<!-- 特殊符号实体 -->
<p>版权号：&copy; 2026 学习笔记</p>
<p>乘号：3 &times; 4 = 12</p>
<p>除号：8 &divide; 2 = 4</p>

<!-- 实体名称 vs 实体编号 对比 -->
<p>实体名称（可读性高）：&lt; &gt; &copy;</p>
<p>实体编号（兼容性高）：&#60; &#62; &#169;</p>

效果图：

S02. H5图文标签

E01. 容器相关标签

心法：H5 容器标签的核心作用是划分页面区域、承载内容，分为两类：

  1. 基础容器（如 <div> / <p> / <pre> 等）：以布局 / 格式控制为主，无特殊语义。
  2. 语义化容器（如 <header> / <nav> / <article> 等）：在 <div> 基础上增加 "语义含义"，提升 SEO、无障碍访问和代码可读性。

常用的容器标签如下：

标签 中文名称 核心用途 关键特点（默认样式+语义）
<p> 段落 承载一段独立的文本内容 如文章段落 1. 块级元素，默认100%宽度 2. 段落间自动换行，上下有默认外边距 3. 仅能包含行标签如 span，em 等，不能嵌套块级标签如 div 等
<div> 区块 通用布局容器，承载任意内容 如文本或其他容器等 1. 块级元素，默认100%宽度 2. 无内外边距 3. 无任何语义，纯布局用途（"万能容器"）
<blockquote> 块引用 承载大段引用文本 如引用名人名言、外部文章片段等 1. 块级元素，默认左右有缩进（margin） 2. 语义上标记"引用内容"，搜索引擎可识别 3. 可配合 cite = "地址" 属性标注引用来源
<pre> 预格式化 承载需要保留原始格式的文本 如代码、诗词、表格文本等 1. 块级元素，默认显示等宽字体 2. 完全保留内容的空格、换行和缩进 3. 注意：内容中特殊字符需用实体符号

武技：开发 view/容器标签.html 页面，并测试 H5 容器标签。

1. 段落标签p

心法：<p> 是 HTML 专用于承载独立文本段落的块级标签，核心语义是 "一段完整的文本内容"，适用于文章段落、说明文本、简短文案等纯文本类内容。

标签特点：

  1. 默认样式：100% 宽度、自动换行，段落上下有默认外边距（margin），区分不同文本块。
  2. 嵌套规则：仅可包含行内元素，比如文本，<span>，<em>，<a> 等，禁止嵌套块级元素，如 <div>，<h1>，<p> 等，否则浏览器会自动拆分 <p> 导致布局错乱。
  3. 核心价值：相比 <div>，<p> 有明确的 "段落" 语义，利于 SEO 和文本内容的结构化解析。

武技：在 view/容器标签.html 页面中测试 H5 的段落标签。

html 复制代码 
<!--段落中仅建议放文字-->
<p>凡是到达了的地方，都属于昨天。</p>
<p>哪怕那山再青，那水再秀，那风再温柔。</p>

效果图：

2. 区块标签div

心法：<div> 是 HTML 最基础的通用块级容器标签，无任何内置语义（仅表示 "一个区块"），被称为 "万能容器"，适用于页面布局分区。

标签特点：

  1. 默认样式：100% 宽度、自动换行，无默认外边距 / 内边距，也无任何视觉样式。
  2. 嵌套规则：无任何限制，可嵌套行内元素，如文本，<span> ，<p>，<div>，甚至所有语义化标签等。
  3. 核心价值：作为页面布局的 "基础积木"，用于划分区域、组合内容，是 CSS 布局的核心载体。

武技：在 view/容器标签.html 页面中测试 H5 的区块标签。

html 复制代码 
<!--区块中放什么都行-->
<div>太深地流连便成了一种羁绊，绊住的不仅是双脚，还有未来。</div>
<div>怎么能不喜欢出发呢？没见过大山的巍峨，真是遗憾。</div>

效果图：

3. 引用标签blockquote

心法：<blockquote> 是 HTML 专用于承载大段引用文本的块级标签，核心语义是 "这段内容引用自外部来源"，适用于引用名人名言、外部文章片段、书籍摘录等大段引用内容，而非普通文本缩进。

标签特点：

  1. 默认样式：100% 宽度、自动换行，左右两侧有默认缩进（margin），部分浏览器会添加左侧边框。
  2. 核心属性 ：cite：可选，用于标注引用内容的来源 URL 出处，浏览器不会可视化显示该属性，但利于搜索引擎解析、无障碍工具识别。
  3. 语义区分：<blockquote> 用于块级大段引用，小段行内引用优先用 <q> 标签（自动添加双引号，无缩进）。
  4. 嵌套规则：可包含任意块级 / 行内元素如 <p>，<em>，<br > 等，符合普通块级标签嵌套逻辑。

武技：在 view/容器标签.html 页面中测试 H5 的引用标签。

html 复制代码 
<!--表示文本来自别处，而且大段出现，前后两端都会有缩进-->
<!--cite 属性：标注引用来源（语义化规范），浏览器不显示但利于SEO/无障碍 -->
<blockquote cite="https://www.baidu.com">
  怎么能不喜欢出发呢？没见过大山的巍峨，真是遗憾！-- 以上文字来自于汪国真散文诗
</blockquote>

效果图：

4. 保留标签pre

心法：<pre> 是 HTML 专用于承载预格式化文本的块级标签，核心语义是 "保留文本的原始格式（空格、回车、缩进）"，适用于展示代码片段、ASCII 艺术图形、需要固定排版的文本，如诗词、表格文本等。

标签特点：

  1. 默认样式：100% 宽度、显示等宽字体，内容不会自动换行（超出容器会横向滚动），完全保留输入时的空白格式。
  2. 核心规则：文本中的特殊字符会被浏览器解析为标签或实体的开头，必须转义为实体符号。
  3. 语义价值：区别于普通文本标签，<pre> 明确表示 "需要固定格式的内容"，适合代码、ASCII 图形、诗词格律等场景。

武技：在 view/容器标签.html 页面中测试 H5 的引用标签。

html 复制代码 
<!--该标签中的内容会保留空格和回车-->
<pre>
00000     000     00000
  0      0   0    0
  0      0   0    000
  0      0   0    0
000       000     00000
</pre>

效果图：

5. 新容器标签

心法：新容器标签指的是 H5 新增的语义化块级容器，本质是 "带语义的 <div>"，默认样式和 <div> 一致，如 100% 宽度、无默认间距等，但新增了明确的 "区域语义"，适用于搭建页面核心结构（头部 / 导航 / 主体 / 侧边栏 / 页脚）。

标签特点 ：相比无意义的 <div class="header">，语义化标签能让搜索引擎、无障碍工具（如屏幕阅读器）识别页面结构，同时提升代码可读性和团队协作效率。

常用新容器标签：

新容器标签 中文名称 核心用途 其它
<header> 区域头 承载区域的头部内容，如 LOGO、标题、导航、搜索框等 提升 SEO 和无障碍解析
<nav> 导航区域 承载页面的导航链接，如主导航、侧边栏导航等 搜索引擎优先抓取其中的链接
<section> 主题区域 承载页面的一个独立主题模块，如商品列表、新闻板块等 区分不同内容模块
<article> 独立区域 承载独立、完整的内容，如一篇文章、一条评论、一个商品卡片等 即使脱离页面也有完整意义
<aside> 侧边区域 承载与主内容相关的附属内容，如侧边栏、推荐阅读、广告等 非核心但相关的内容
<footer> 区域脚 承载区域的底部内容，如版权声明、联系方式、友情链接等 页面/模块均可使用

武技：在 view/容器标签.html 页面中测试 H5 的新容器标签。

html 复制代码 
<header>
    头部位置，存放Logo和导航
    <nav>这里是导航的区域</nav>
</header>
<section>
    主题A
    <article>主题A中的独立内容1</article>
    <article>主题A中的独立内容2</article>
</section>
<section>
    主题B
    <article>主题B中的独立内容1</article>
    <article>主题B中的独立内容2</article>
</section>
<aside>侧边栏区域</aside>
<footer>版权信息和友情链接</footer>

效果图：

E02. 文字相关标签

心法：H5 文字标签常用于表达文本的含义和状态，或实现文本排版功能。

常用的文字标签如下：

标签 中文 描述内容 核心特点（语义+样式+实战）
<strong> 强调加粗 语义化强调文本（重要内容） 1. 样式：默认粗体显示 2. 语义：表示文本 重要性 / 严肃性 ，区别于 <b>（纯样式加粗） 3. 实战：可完全替代 <b>，更符合 SEO / 无障碍规范
<em> 强调倾斜 语义化强调文本（强调语气） 1. 样式：默认斜体显示 2. 语义：表示文本 语气 / 重点强调 ，区别于 <i>（纯样式斜体） 3. 实战：可完全替代 <i>，优先用于需要强调的文本
<ins> 插入下划线 标记新增/插入的文本 1. 样式：默认带下划线 2. 语义：表示文本是 新增 / 插入 的，区别于 <u>（纯样式下划线） 3. 实战：可替代 <u>，避免纯样式下划线与链接混淆
<mark> 文本高亮 标记需要突出显示的文本 1. 样式：默认黄色背景、黑色文字 2. 语义：表示文本 需重点关注 （如搜索结果、关键信息） 3. 实战：可通过 CSS 自定义高亮颜色（background-color）
<del> 删除线 标记废弃/删除的文本 1. 样式：文字中间贯穿一条横线 2. 语义：表示文本 已废弃 / 删除 （如价格折扣、内容修订） 3. 实战：常与 <ins> 搭配（如原价 99 现价 ++69++）
<br> 换行符 强制文本换行 1. 样式：无可视化效果，仅占用换行垂直空间 2. 规则：HTML 源码回车 / 多空格会合并为 1 个空格，需用 <br> 实现换行 3. 实战：避免连续多个 <br>，换行间距用 CSS margin/padding 控制
<hr> 水平线 标记内容分段的分隔线 1. 样式：默认占父元素 100% 宽度、灰色细横线，自带上下外边距 2. 语义：表示 内容主题分段 （而非纯装饰线） 3. 实战：可通过 CSS 自定义颜色/粗细/样式（如虚线）
<span> 行内容器 包裹行内文本/元素用于局部控制 1. 样式：无默认样式（行内显示，宽高由内容决定） 2. 语义：无任何语义，仅作为 "行内版 div" 3. 实战：用于局部文本样式修改（如单个文字改色），不可嵌套块级元素
<h#> 标题 标记页面/模块标题（#=1~6） 1. 样式：字号随层级递减（h1 最大），默认加粗、块级显示、上下有外边距 2. 语义：h1（页面核心标题）→ h6（最低级子标题），表达内容层级 3. 实战：一个页面仅 1 个 h1，层级需连续（h1 → h2 → h3，禁止跳级）
<hgroup> 标题分组 组合主标题+副标题 1. 样式：无默认样式，仅语义容器 2. 语义：明确 "主标题 + 副标题" 的关联关系 3. 实战：仅用于 h1 + h2 组合，不可嵌套多个同级标题
<small> 辅助小字 标记次要/补充性文本 1. 样式：字号比父元素小一号，行内显示 2. 语义：表示文本是 辅助信息 （如备注、版权、免责声明） 3. 实战：可嵌套在标题内（如 <h1>主标题 <small>副标题</small></h1>）
<sup> 上标 标记数学 / 特殊符号的上标 1. 样式：字号缩小一号，垂直向上偏移 2. 语义：表示 角标（上） （如平方、指数、脚注） 3. 实战：22=4、参考[1]
<sub> 下标 标记数学 / 特殊符号的下标 1. 样式：字号缩小一号，垂直向下偏移 2. 语义：表示 角标（下） （如化学式、数学底数） 3. 实战：H2O、log28=3
<a> 超链接 实现页面跳转/锚点/文件下载 1. 样式：默认蓝色、下划线，hover 变色 2. 核心属性：href（跳转目标）、target（打开方式）、download（下载） 3. 实战：空链接用 href="javascript:void(0);" 替代 #（避免页面滚动）

武技：开发 view/文字标签.html 页面，并测试 H5 文字标签。

html 复制代码 
<!--基础修饰-->
<div class="basic-modifications">
	<mark>
		<em>
			<strong>
				图文标签
			</strong>
		</em>
	</mark>
	<p>原价：<del>¥99.00</del> 现价：<ins>¥69.00</ins></p>
</div>

效果图：

1. 换行标签br

心法：HTML 源码中的回车、多个空格会被浏览器自动合并为 1 个空格，无法实现换行 / 多空格效果，需靠 <br> 强制换行，其核心功能是打破文本的连续显示，实现换行。

标签特点：<br> 仅占用换行的垂直空间，无额外边距 / 样式，连续多个 <br> 会叠加换行效果，但属于不规范用法，应该使用 CSS 来进行控制。

武技：在 view/文字标签.html 页面中测试 H5 的换行标签。

html 复制代码 
<!--换行标签-->
<div class="break">
    你好<br><br><br>世界
</div>

效果图：

2. 水平线标签hr

心法：<hr> 是 HTML 用于标记内容分隔的自闭合块级标签（HTML5 规范省略 /，推荐写 <hr> 而非 <hr />），其核心是分隔不同主题或模块的内容块（而非单纯加一条线），搜索引擎 / 无障碍工具可识别 "内容分段"。

标签特点：<hr> 占父元素 100% 宽度，显示为灰色细水平线，部分浏览器会自带上下外边距，作为块级元素，<hr> 会自动换行，前后内容不会和水平线同行显示。

武技：在 view/文字标签.html 页面中测试 H5 的水平线标签。

html 复制代码 
<!--水平线标签-->
<div class="horizontal-line">
    你好<hr><hr><hr>世界
</div>

效果图：

3. 内联标签span

心法：<span> 是 HTML 最基础的行内通用容器标签，无任何内置语义（仅表示 "一段行内文本"），被称为 "行内版 <div>"，专为 "局部行内文本的样式 / 行为控制" 设计。

标签特点：<span> 是行内元素，不会独占一行，无默认样式（无间距、无边框、无背景），宽高由内容决定，无法直接设置。

武技：在 view/文字标签.html 页面中测试 H5 的内联标签。

html 复制代码 
<!--内联标签-->
<div class="inline">
    你好<span style="color: red;">世界</span>
</div>

效果图：

4. 标题标签h#

心法： <h#> 是 HTML 专用于标记页面 / 模块标题的块级语义标签，层级从 <h1>（最高级）到 <h6>（最低级）依次递减，核心是表达 "内容层级关系"，搜索引擎会优先抓取标题标签内容，无障碍工具可识别标题层级，提升页面可读性。

标签特点：

  1. 默认样式：字号随层级递减，默认加粗，块级显示（独占一行），上下有默认外边距。
  2. <hgroup> 标签：专为标题分组设计的块级标签，用于组合 "主标题 + 副标题"（如 <h1> 主标题 + <h2> 副标题），无默认样式，仅提升语义完整性，不会改变标题的显示效果。
  3. 核心规则：一个页面仅能有 1 个 <h1> 作为页面唯一核心标题，且标题层级需连续（如 <h1> → <h2> → <h3>），禁止跳级。

武技：在 view/文字标签.html 页面中测试 H5 的标题标签。

html 复制代码 
<!--标题相关-->
<div class="head-title">
    <!--<hgroup> 专门用来对 <h#> 进行分组 -->
    <hgroup style="color: red;">
	    <!--一个页面仅能有 1 个 <h1> 作为页面唯一核心标题-->
        <h1>主标题</h1>
		<h2>副标题</h2>
    </hgroup>
    <h3>3号标题文本</h3>
    <h4>4号标题文本</h4>
	<h5>5号标题文本</h5>
	<h6>6号标题文本</h6>
</div>

效果图：

5. 缩小标签small

心法：<small> 是 HTML 专用于标记辅助性小字的行内语义标签，核心语义是 "次要 / 补充性文本" 如备注、版权声明、免责声明、标题副标题、辅助说明等，利于 SEO 和无障碍解析，而非单纯 "缩小字号"。

标签特点：

  1. 默认样式：字号比父元素小一号（如父元素 16px，<small> 默认为 14px），行内显示（不独占一行），无其他默认样式；
  2. 嵌套规则：行内元素，可嵌套其他行内标签（如 <span>，<em> 等），不可嵌套块级元素；

武技：在 view/文字标签.html 页面中测试 H5 的缩小标签。

html 复制代码 
<!--缩小标签-->
<div class="small">
    <span>我是正常文字</span>
    <small>比正常文字小一号</small>
    <h1>1号标题主内容 <small>1号标题副内容</small></h1>
    <h2>2号标题主内容 <small>2号标题副内容</small></h2>
</div>

效果图：

6. 角标标签sup

心法：<sup>（上标）和 <sub>（下标）是 HTML 专用于标记角标文本的行内语义标签，核心语义是 "数学 / 特殊符号的角标"，而非单纯的位置调整。

标签特点：

  • <sup>：行内显示，默认字号比父元素小一号，垂直向上偏移（上标），常用于平方、立方、指数、脚注引用等场景。
  • <sub>：行内显示，默认字号比父元素小一号，垂直向下偏移（下标），常用于化学式、数学底数、下标注释等场景。

武技：在 view/文字标签.html 页面中测试 H5 的角标标签。

html 复制代码 
<!--角标标签-->
<div class="pub-sub">
    <p>勾股定理：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
    <p>化学公式：H<sub>2</sub>SO<sub>4</sub>（硫酸）</p>
</div>

效果图：

7. 链接标签a

心法：<a>（Anchor 锚点）是 HTML 专用于创建超链接的行内标签，核心功能是实现页面跳转、锚点定位或文件下载，核心属性为 href（跳转目标）和 target（打开方式）。

路径分类：

  • 绝对路径：完整的资源地址，如 https://www.baidu.com、D:/index.html 等，适用于外部网站和本机文件跳转。
  • 相对路径 ：以当前文件为基准的地址，适用于项目内部文件跳转，其中几种特殊表示如下：
    • ./：当前目录，用于访问当前目录下的文件（可省略）。
    • ../：上一级目录，用于访问父目录下的文件。
    • /：目录分隔符，用于访问子目录下的文件。。

核心属性：

核心属性 描述 可选值
href 指定跳转 / 定位 / 下载目标 https://www.baidu.com：跳转到指定的 URI 页面，需加协议头 ./index.html：跳转到本地某页面 #：仅占位不跳转，但会导致页面滚到顶部，建议使用 href="javascript:void(0);" 代替 #某ID值：跳转到当前页面中 id = xx 的标签的位置，即 锚链接 效果
target 指定链接打开方式 _self：在当前页面打开，默认值 _blank：在新页面打开，最常用 _top ：在最上层框架打开，仅兼容老框架，已淘汰，不推荐 _parent：在父框架打开，仅兼容老框架，已淘汰，不推荐 iframe自定义的name：在指定的帧窗口中打开，仅兼容老帧窗口，已淘汰，不推荐
download 下载链接目标文件（而非跳转） download：下载文件，默认使用文件的名称和后缀 download="自定义文件名.zip"：下载文件，使用指定的文件名称和后缀

武技：开发 view/链接标签.html 页面，并测试 H5 链接标签。

html 复制代码 
<div class="href">
    <!--<a> 标签没有 href 属性时，点击无效-->
    <a>无href的链接</a>
    <!--跳转到指定的URI页面-->
    <a href="https://www.baidu.com">点我跳入百度</a>
    <!--跳转到本地某页面-->
    <a href="../index.html">点我跳入 index.html 页面</a>
    <!--仅占位，不跳转-->
    <a href="#">点我跳入本页面</a>
</div>

<!--锚链接-->
<div class="current-id">
    <p id="first-line">小说第一行(锚点位置)</p>
    <p>小说内容001</p>
    <p>小说内容002</p>
    <p>小说内容003</p>
    <p>小说内容004</p>
    <p>小说内容005</p>
    <p>小说内容006</p>
    <p>小说内容007</p>
    <p>小说内容008</p>
    <p>小说内容009</p>
    <p>小说内容010</p>
    <p>小说内容011</p>
    <p>小说内容012</p>
    <p>小说内容013</p>
    <p>小说内容014</p>
    <p>小说内容015</p>
    <p>小说内容016</p>
    <p>小说内容017</p>
    <p>小说内容018</p>
    <p>小说内容019</p>
    <p>小说内容020</p>
    <p>小说内容021</p>
    <p>小说内容022</p>
    <p>小说内容023</p>
    <p>小说内容024</p>
    <p><a href="#first-line">回到小说第一行</a></p>
</div>

<div class="target">
    <!--在当前页面打开，默认值-->
    <a href="https://www.baidu.com" target="_self">点我跳入百度（当前页面）</a>
    <!--在新页面打开-->
    <a href="https://www.baidu.com" target="_blank">点我跳入百度（新页面）</a>
</div>

<!--下载文件-->
<div class="download">
    <a href="./全局属性.html" download>点我下载文件</a>
    <a href="./全局属性.html" download="我的文件.html">点我下载文件</a>
</div>

效果图：


E03. 媒体相关标签

1. 图片标签img

心法：<img> 是 HTML 用于嵌入图片的 自闭合行内块级标签（非容器标签，无法嵌套其他元素），核心功能是在页面中展示位图（jpg/png/gif/webp 等），核心属性为 src（图片地址）和 alt（替代文本）。

属性 可选值 描述
src 图片地址 图片地址，与超链接一致，分绝对路径（网络图片）和相对路径（本地图片），推荐使用相对路径
alt 任意字符串 当图片因某种原因无法显示时的替代文本，还能被搜索引擎或屏幕阅读器识别，提升页面可访问性，必填
loading eager: 立刻加载，默认值 lazy：懒加载 H5 新增，对大图片使用懒加载可提升页面加载性能

武技：开发 view/图片标签.html 页面，并测试 H5 图片标签。

html 复制代码 
<!--引入网络图片-->
<div class="remote-image-address">
    <img src="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028" 
         alt="该图片走丢了..."
         loading="lazy">
</div>

<!--引入本地图片-->
<div class="local-image-address">
    <img src="../static/image/狮子.jpg" 
         alt="该图片走丢了..."
         loading="lazy">
</div>

效果图：

2. 音频标签audio

心法：<audio> 是 H5 新增的音频播放标签（块级元素），用于在页面中嵌入音频播放功能，替代传统的 Flash 音频播放方案，支持通过 <source> 子标签提供多格式音频源，以解决不同浏览器兼容性问题。

属性 描述
controls 布尔值，添加音频控件，包括播放，暂停，进度条等
muted 布尔值，开启静音播放
autoplay 布尔值，开启自动播放，所有现代浏览器均要求音频静音才能自动播放
loop 布尔值，开启循环播放
preload 是否预加载元数据和缓存，可选如下： none：不预加载 metadata：仅预加载元数据（时长 / 大小等） auto：预加载全部音频，大文件慎用，默认值

音频格式兼容性：

格式 支持浏览器 MIME 类型
MP3 所有现代浏览器、IE9+ audio/mpeg
OGG Chrome/Firefox/Edge/Safari audio/ogg
WAV Chrome/Firefox/Edge audio/wav

武技：开发 view/音频标签.html 页面，并测试 H5 音频标签。

html 复制代码 
<!--音频播放器-->
<div class="audio-player">
    <audio controls muted autoplay preload="metadata">
        <source src="../static/media/test.mp3" type="audio/mpeg">
        <source src="../static/media/test.ogg" type="audio/ogg">
        <!-- 降级提示：不支持 H5 audio 的浏览器显示 -->
        <p>您的浏览器不支持HTML5音频播放，请升级浏览器！</p>
    </audio>
</div>

效果图：

3. 视频标签video

心法：<video> 是 H5 新增的视频播放标签（块级元素），用于在页面中嵌入视频播放功能，替代传统的 Flash 视频播放方案，支持通过 <source> 子标签提供多格式视频源，以解决不同浏览器兼容性问题。

属性 描述
controls 布尔值，添加视频控件，包括播放，暂停，全屏按钮，进度条等
muted 布尔值，开启静音播放
autoplay 布尔值，开启自动播放，所有现代浏览器均要求视频静音才能自动播放
loop 布尔值，开启循环播放
preload 是否预加载元数据和缓存，可选如下： none：不预加载 metadata：仅预加载元数据（时长 / 分辨率等） auto：预加载全部视频，大文件慎用，默认值
poster 视频封面图，视频默认第一帧，音频没有封面

视频格式兼容性：

格式 支持浏览器 MIME 类型
MP4 所有现代浏览器、IE9+ video/mp4
WebM Chrome/Firefox/Edge/Safari video/webm
OGV Chrome/Firefox/Edge video/ogg

武技：开发 view/视频标签.html 页面，并测试 H5 视频标签。

html 复制代码 
<!--视频播放器-->
<div class="video-player">
    <video controls muted autoplay loop preload="metadata" poster="../static/image/蛙.jpg">
        <source src="../static/media/test.mp4" type="video/mp4">
        <source src="../static/media/test.webm" type="video/webm">
        <!-- 降级提示：不支持H5 video的浏览器显示 -->
        <p class="fallback-tip">您的浏览器不支持HTML5视频播放，请升级至最新版本！</p>
    </video>
</div>

效果图：

4. 图文标签figure

心法：<figure> 是 H5 新增的语义化图文组合标签（块级元素），核心作用是将 "媒体内容（图片 / 音频 / 视频）+ 说明文字" 封装为一个独立的语义单元（如插图、图表、代码块 + 标题 / 说明），区别于普通 <div> + <img> + <p> 的无意义排版，<figure> + <figcaption> 明确告诉浏览器和搜索引擎 "这是一组关联的图文单元"，提升页面语义化和无障碍解析能力。

标签 含义 显示特性 关联规则
<figure> 图文/媒体组合容器 块级，独占一行，浏览器默认 margin: 1em 40px 可包裹图片，音频，视频
<figcaption> 图文/媒体说明/标题 块级，默认继承容器样式 一个 <figure> 内建议仅 1 个

注意 ：1 个 <figure> 内放应该只放 1 个 <figcaption> + <img> 组合，多组图文需拆分为多个 <figure>。

武技：开发 view/图文标签.html 页面，并测试 H5 图文标签。

html 复制代码 
<!--图文列表-->
<div class="figure">
    <figure>
        <figcaption>这是一只猫的图片</figcaption>
        <img src="../static/image/猫.jpg" alt="">
    </figure>
    <figure>
        <figcaption>这是一只猫的图片</figcaption>
        <img src="../static/image/猫.jpg" alt="">
    </figure>
</div>

效果图：

S03. H5数据标签

E01. 列相关表标签

心法：HTML 列表标签用于结构化展示 一维数据，分为有序列表、无序列表和描述列表 3 类，核心价值是让数据展示更具语义和可读性，而非单纯靠文本换行 / 空格排版。

无论是什么列表，均支持嵌套写法。

武技：开发 view/列表标签.html 页面。

1. 有序列表标签ol

心法：<ol>（Ordered List）是有序列表容器标签（块级元素），必须与 <li>（List Item，列表项）组合使用，<ol> 仅作为容器，列表项内容需写在 <li> 内。

有序列表常用属性：

属性名 类型 可选值/说明 默认值
type 常规属性 1：数字（1,2,3...） A：大写字母（A,B,C...） a：小写字母（a,b,c...） I：大写罗马数字（Ⅰ,Ⅱ,Ⅲ...） i：小写罗马数字（ⅰ,ⅱ,ⅲ...） 1
start 常规属性 任意正整数，指定有序列表的起始序号（如 start="3" 从 3 开始计数） 1
reversed 布尔属性 无可选值，仅需写属性名（reversed），实现列表项倒序排列 不生效

武技：在 view/列表标签.html 页面中测试 H5 的有序列表标签。

html 复制代码 
<!--有序列表-->
<div class="ordered-list">
    <h4>1. 基础有序列表（type="a" 小写字母）</h4>
    <ol type="a">
        <li>生</li>
        <li>老</li>
        <li>病</li>
        <li>死</li>
    </ol>
    <h4>2. 起始序号从3开始（start="3"）</h4>
    <ol type="1" start="3">
        <li>第三步：执行操作</li>
        <li>第四步：验证结果</li>
        <li>第五步：保存数据</li>
    </ol>
    <h4>3. 倒序排列（reversed）</h4>
    <ol type="A" reversed>
        <li>第一名</li>
        <li>第二名</li>
        <li>第三名</li>
    </ol>
</div>

效果图：

2. 无序列表标签ul

心法：<ul>（Unordered List）是无序列表容器标签（块级元素），必须与 <li>（List Item，列表项）组合使用，<ul> 仅作为容器，列表项内容需写在 <li> 内。

无序列表常用属性：

属性名 类型 可选值/说明 默认值
type 常规属性 disc：实心圆点（●） circle：空心圆圈（○） square：实心方块（■） none：隐藏标记 disc

注意：无序列表的 type 属性已过时。

武技：在 view/列表标签.html 页面中测试 H5 的无序列表标签。

html 复制代码 
<!--无序列表-->
<div class="unordered-list">
    <h4>1. 基础无序列表（默认 type="disc" 实心圆点）</h4>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
        <li>葡萄</li>
    </ul>

    <h4>2. 空心圆圈标记（type="circle"）</h4>
    <ul type="circle">
        <li>首页</li>
        <li>产品中心</li>
        <li>关于我们</li>
        <li>联系客服</li>
    </ul>

    <h4>3. 实心方块标记（type="square"）</h4>
    <ul type="square">
        <li>红色</li>
        <li>绿色</li>
        <li>蓝色</li>
    </ul>
</div>

效果图：

3. 描述列表标签dl

心法：<dl>（Description List）是描述列表容器标签（块级元素），由 <dt>（Description Term，描述项 / 标题）和 <dd>（Description Definition，描述内容 / 定义）组合使用，核心语义是 "名词 - 解释" 的键值对关系（如术语解释、商品参数、功能说明等）。

标签 含义 显示特性 关联规则
<dl> 描述列表容器 块级，独占一行 仅包裹 <dt> 和 <dd>，不可直接写文本
<dt> 描述项（标题/术语） 块级，顶格显示 一个 <dt> 可对应 1 ~ N 个 <dd>
<dd> 描述内容（定义） 块级，默认缩进显示（通常 40px） 必须关联对应的 <dt> 存在

武技：在 view/列表标签.html 页面中测试 H5 的描述列表标签。

html 复制代码 
<!--描述列表-->
<div class="description-list">
    <!-- 1个dt对应多个dd -->
    <h4>1. 基础描述列表（术语+多段解释）</h4>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言（HyperText Markup Language），用于构建网页结构的标记语言。</dd>
        <dd>非编程语言，仅负责描述页面的语义和结构，无逻辑处理能力。</dd>
        <dt>CSS</dt>
        <dd>层叠样式表（Cascading Style Sheets），用于美化HTML页面的样式语言。</dd>
    </dl>

    <!-- 多个dt对应一个dd -->
    <h4>2. 多术语共用一个解释</h4>
    <dl>
        <dt>移动端</dt>
        <dt>手机端</dt>
        <dt>手持设备端</dt>
        <dd>指运行在手机、平板等便携式移动设备上的网页/应用版本。</dd>
    </dl>
</div>

效果图：

E02. 表格相关标签

心法：<table> 是 HTML 专用于展示 二维数据 的容器标签（块级元素），核心语义是 "行 + 列" 的网格状数据，如报表、名单、参数表等。

表格相关标签：

标签 类型 含义/说明 状态/特性
<table> 容器标签 表格根容器，包裹所有表格行/单元格，专用于展示二维结构化数据 块级元素，无默认边框
<tr> 行标签 表格行，包裹 <td> 或 <th>，一行对应一组单元格 块级，仅用于 <table> 内
<td> 单元格标签 普通数据单元格，存放表格具体数据 行内块级，默认左对齐、无加粗
<th> 表头标签 表头单元格，存放列/行标题 行内块级，默认加粗+水平居中，带表头语义

过时属性：

  • 表格标签支持使用属性 border = "1px" 同时设置表格和单元格的边框，但目前已过时。

武技：开发 view/表格标签.html 页面，并测试 H5 表格标签的基本结构。

html 复制代码 
<!--表格基本结构-->
<table border="1px">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>描述</th>
    </tr>
    <tr>
        <td>001</td>
        <td>赵四</td>
        <td>58</td>
        <td>男</td>
        <td>象牙山村第一人，亚洲舞王！</td>
    </tr>
    <tr>
        <td>002</td>
        <td>刘能</td>
        <td>59</td>
        <td>男</td>
        <td>前村副主任</td>
    </tr>
</table>

效果图：

1. 合并单元格

心法：单元格合并是表格中处理复杂二维数据的核心能力，分为 跨行 合并（垂直方向，多行共用一个单元格）和 跨列 合并（水平方向，多列共用一个单元格），合并后的单元格会占用其他行或列的单元格位置，被占用的单元格必须删除（否则表格结构错乱）。

相关属性 ：rowspan / colspan 仅能写在 <td> 或 <th> 标签上：

属性名 合并类型 说明（N 必须是大于 1 的正整数，N = 1 无合并意义）
rowspan 跨行合并 垂直方向合并单元格，N 表示合并的行数（如 rowspan = "2" 表示占 2 行）
colspan 跨列合并 水平方向合并单元格，N 表示合并的列数（如 colspan = "2" 表示占 2 列）

武技：在 view/表格标签.html 页面中测试 H5 的合并单元格写法。

html 复制代码 
<!--合并单元格-->
<!--合并单元格-->
<table border="1px">
    <tr>
        <td colspan="2">01</td>
        <td>03</td>
        <td rowspan="3">04</td>
    </tr>
    <tr>
        <td>05</td>
        <td>06</td>
        <td>07</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">09</td>
        <td>11</td>
    </tr>
    <tr>
        <td>15</td>
        <td>16</td>
    </tr>
</table>

效果图：

2. 完整表格

心法：完整表格的核心语义结构为 table > caption + thead + tbody + tfoot，表格内的所有数据仅能写在 <caption>（标题）、<td>（普通单元格）、<th>（表头单元格） 中，<tr>，<thead>，<tbody>，<tfoot> 仅作为容器，不可直接写数据。

表格其它补充标签：

<table> 子标签 中文 描述
<caption> 表格标题 必须放在 <table> 内第一个位置，默认样式为表格上方 + 水平居中
<thead> 表格头 存放表格的列标题行 <th>，表格头内容一定在 <tbody> 之上
<tbody> 表格体 存放表格的核心数据行，即使不手动书写，浏览器也会自动生成 一个 <table> 可包含多个 <tbody>
<tfoot> 表格脚 存放表格的合计/备注/统计信息，表格脚内容一定在 <tbody> 之下

武技：在 view/表格标签.html 页面中测试 H5 的完整表格写法。

html 复制代码 
<!--表格完整结构-->
<table border="1px">
    <!--必须放在 <table> 内第一个位置，默认样式为表格上方 + 水平居中 -->
    <caption>象牙山村人员统计表</caption>
    <!--存放表格的列标题行 <th>，表格头内容一定在 <tbody> 之上-->
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>描述</th>
    </tr>
    </thead>
    <!--存放表格的核心数据行，即使不手动书写，浏览器也会自动生成，一个 <table> 可包含多个 <tbody>-->
    <tbody>
    <tr>
        <td>001</td>
        <td>赵四</td>
        <td>58</td>
        <td>男</td>
        <td>象牙山村第一人，亚洲舞王！</td>
    </tr>
    <tr>
        <td>002</td>
        <td>刘能</td>
        <td>59</td>
        <td>男</td>
        <td>前村副主任</td>
    </tr>
    </tbody>
    <!--存放表格的合计/备注/统计信息，表格脚内容一定在 <tbody> 之下 -->
    <tfoot>
        <tr>
            <td colspan="5">统计：共 2 人</td>
        </tr>
    </tfoot>
</table>

效果图：

3. 整列控制

心法：<colgroup>（列组）+ <col>（列）是 H5 专用于整列样式或属性控制的语义化标签，无需逐个设置单元格样式，可批量控制一列或多列的样式（如宽度、背景色、边框），核心价值是 "整列控制更高效"。

列控制规则：

  1. <colgroup> 必须放在 <table> 内、<caption> 之后（若有）、<thead> 或 <tbody> 之前。
  2. 一个 <col> 对应表格的一列，"控制第 N 列" 需在前 N-1 列用 <col/> 无声占位，第 N 列的 <col> 写控制属性。

武技：在 view/表格标签.html 页面中测试 H5 的行列控制写法。

html 复制代码 
<!--行列控制-->
<table border="1px">
    <colgroup>
        <col>
        <col>
        <!--第三列：背景绿色-->
        <col style="background-color: green">
    </colgroup>
    <!--第一行：背景红色-->
    <tr style="background-color: red">
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>描述</th>
    </tr>
    <tr>
        <td>001</td>
        <td>赵四</td>
        <td>58</td>
        <td>男</td>
        <td>象牙山村第一人，亚洲舞王！</td>
    </tr>
    <tr>
        <td>002</td>
        <td>刘能</td>
        <td>59</td>
        <td>男</td>
        <td>前村副主任</td>
    </tr>
</table>

效果图：

S04. H5表单标签

E01. 表单区域

心法：<form> 是 H5 专用于 采集用户数据 并提交的语义化容器，核心作用是 "划定表单区域 + 定义数据提交规则"，一个表单区域中至少包含 1 - N 个表单控件（输入控件，下拉菜单等）和 0 - 1 个提交按钮。

表单区域 <form> 常用属性：

属性名 描述 描述 默认值
action 指定表单数据提交的目标地址 支持绝对路径，相对路径和 #（当前页面） #
method 指定表单数据提交的方式 GET：速度快、不安全（地址栏可见）、数据量小 POST：速度慢、安全（地址栏不可见）、数据量大 GET
target 指定提交后响应结果的显示位置 _self：在当前页面打开，默认值 _blank：在新页面显示 _top ：在最上层框架显示，仅兼容老框架，已淘汰，不推荐 _parent：在父框架显示，仅兼容老框架，已淘汰，不推荐 iframe自定义的name：在指定的帧窗口中显示，仅兼容老帧窗口，已淘汰，不推荐 _self

关联输入控件 ：表单中的输入控件统一使用 <input> 标签表示，推荐使用 <label for = "控件的ID值"> 关联控件描述文字，此后点击文字可聚焦对应控件，提升可访问性。

武技：开发 view/表单区域.html 页面，并测试 H5 表单区域的相关标签。

html 复制代码 
<!--action属性-->
<div class="action">
    <h4>测试action属性</h4>
    <form action="https://www.baidu.com">
        <!--文字关联-->
        <label for="usernameIpt01">账号：</label>
        <!--表单控件-->
        <input id="usernameIpt01" name="username">
        <!--提交按钮-->
        <button>提交</button>
    </form>
</div>

<!--method属性-->
<div class="action">
    <h4>测试method属性</h4>
    <form action="https://www.baidu.com" method="post">
        <label for="usernameIpt02">账号：</label>
        <input id="usernameIpt02" name="username">
        <button>提交</button>
    </form>
</div>

<!--target属性-->
<div class="target">
    <h4>测试target属性</h4>
    <form action="https://www.baidu.com" target="_blank">
        <label for="usernameIpt03">账号：</label>
        <input id="usernameIpt03" name="username">
        <button>提交</button>
    </form>
</div>

效果图：

1. input分组容器

心法：<fieldset> 是表单控件分组容器，默认带边框样式，其子标签 <legend> 可以定义分组标题，默认显示在分组边框左上角。

相关标签：

标签 作用 使用场景
<fieldset> 表单控件分组容器，默认带边框样式 按业务逻辑分组（如基本信息/联系方式）
<legend> 配合 <fieldset> 使用，定义分组标题，默认显示在分组边框左上角 分组标题标注

武技：开发 view/表单分组.html 页面，并测试 H5 表单控件分组的相关标签。

html 复制代码 
<!--fieldset标签-->
<div class="fieldset">
    <h4>测试fieldset标签</h4>
    <form>
        <fieldset>
            <legend>基本信息</legend>
            <label for="usernameIpt04">账号：</label>
            <input id="usernameIpt04" name="username">
            <br>
            <label for="passwordIpt">密码：</label>
            <input id="passwordIpt" name="password">
        </fieldset>

        <fieldset>
            <legend>实名信息</legend>
            <label for="realnameIpt">真实姓名：</label>
            <input id="realnameIpt" name="realname">
            <br>
            <label for="idcardIpt">身份证号：</label>
            <input id="idcardIpt" name="idcard">
        </fieldset>
        
        <button>提交</button>
    </form>
</div>

效果图：

2. input常用属性

心法：<input> 是 H5 表单中最核心的输入控件，通过不同属性可实现 "输入限制、默认值、交互规则" 等能力，核心价值是精准采集用户输入。

输入控件常用属性如下：

<input> 常用属性 可选值 描述 关键注意点
name 任意字符串 控件名称，表单提交时的 "键名"，无 name 则数据无法提交 同表单内必须唯一（需要分组的除外）
value 任意字符串 控件默认值，提交时若用户未输入则传递该值 radio 等需配合 value 使用
placeholder 任意字符串 背景提示文字，无输入时显示，输入后消失 仅提示，非默认值，无法提交
pattern 任意正则字符串 提交时校验输入内容是否符合正则规则（浏览器原生校验） 需配合 required 生效
maxlength 任意正整数 限制用户输入的最大字符数 仅限制输入，不限制 value 默认值长度
autocomplete off, on 自动完成提示，可给 <form> 设置以全局生效 浏览器兼容性差
required 布尔值 必填控件，提交前校验，未输入则提示并阻止提交 原生校验提示可通过 CSS/JS 自定义
autofocus 布尔值 页面加载完成后自动聚焦该控件 一个页面仅能有一个控件设置该属性
readonly 布尔值 只读控件，无法编辑，但提交时仍会传递 name + value 值 样式上无禁用态，仅禁止输入
disabled 布尔值 禁用控件，无法编辑，且提交时不传递该控件的 name + value 值 样式上有禁用态，完全不可交互

武技：开发 view/输入控件.html 页面，并测试 H5 输入控件的常用属性。

html 复制代码 
<!--输入控件-->
<form action="https://www.baidu.com">
    <label for="usernameIpt01">账号01：</label>
    <input id="usernameIpt01"
           name="username01"
           value="zhaosi"
           placeholder="请输入账号"
           pattern="^[a-zA-Z]+$"
           maxlength="3"
           autocomplete="off"
           required
           autofocus>
    <br>
    <label for="usernameIpt02">账号02（只读）：</label>
    <input id="usernameIpt02" name="username02" value="liuneng" readonly>
    <br>
    <label for="usernameIpt03">账号03（禁用）：</label>
    <input id="usernameIpt03" name="username03" value="guangkun" disabled>
    <br>
    <button>提交</button>
</form>

效果图：

3. input常用类型

心法：<input> 的 type 属性是控件的 "核心身份标识"（默认 text 类型），不同类型对应不同的输入场景和浏览器原生交互（如数字控件只显示数字键盘、日期控件弹出日历等），核心价值是贴合输入场景 + 降低开发成本。

input 常用类型：

<input> 常用类型 描述 核心属性/注意点
text 单行文本控件，默认类型 支持 maxlength / pattern / placeholder 等通用属性
password 单行密码控件，输入内容隐藏（显示●） autocomplete="off"：建议设置此项，避免浏览器记住密码
radio 单选控件，同组 name 相同，仅能选中一个 checked：默认选中 value：自定义提交值，必填，替代默认 on
checkbox 多选控件，同组 name 相同，可选中多个 checked：默认选中 value：自定义提交值，必填，替代默认 on
hidden 隐藏控件，用户不可见，用于传递后台所需数据 仅传递 value 值，无交互属性（如 required / autofocus 无效）
file 文件上传控件，可选择本地文件 accept：限制 MIME 类型，如 image/png 等 multiple：允许多文件上传
number 数字控件，仅允许输入数字/小数点，移动端弹出数字键盘 min：最小值 max：最大值 step：步长，默认1
date 日期控件，弹出原生日历，格式 yyyy-MM-dd min：最小值 max：最大值
time 时间控件，弹出原生时间选择器，格式 hh:mi min：最小值 max：最大值 step：步长，如 step = "900"（15分钟）
month 月份控件，格式 yyyy-MM min：最小值 max：最大值
datetime-local 日期时间控件，格式为 yyyy-MM-dd hh:mi min：最小值 max：最大值

注意：日期相关控件仅 IE 不支持，Chrome/Firefox/Edge/ 主流移动端浏览器均支持，覆盖 95%+ 用户。

武技：在 view/输入控件.html 页面中测试 H5 输入控件的常用类型。

html 复制代码 
<!--输入类型-->
<form action="https://www.baidu.com" autocomplete="off">
    <label for="ipt01">单行文本</label>
    <input type="text" id="ipt01" name="username">
    <br>
    
    <label for="ipt02">单行密码</label>
    <input type="password" id="ipt02" name="password">
    <br>
    
    <span>单选按钮</span>
    <input type="radio" id="ipt03" name="gender" value="1" checked>
    <label for="ipt03">男</label>
    <input type="radio" id="ipt04" name="gender" value="0">
    <label for="ipt04">女</label>
    <br>
    
    <span>多选按钮</span>
    <input type="checkbox" id="ipt05" name="hobby" value="smoking" checked>
    <label for="ipt05">抽烟</label>
    <input type="checkbox" id="ipt06" name="hobby" value="drinking" checked>
    <label for="ipt06">喝酒</label>
    <input type="checkbox" id="ipt07" name="hobby" value="firehair">
    <label for="ipt07">烫头</label>
    <br>
    
    <label for="ipt08">隐藏控件</label>
    <input type="hidden" id="ipt08" name="id" value="10">
    <br>
    
    <label for="ipt09">文件控件</label>
    <input type="file" id="ipt09" name="avatar">
    <br>
    
    <label for="ipt10">数字控件</label>
    <input type="number" id="ipt10" name="age" min="18" max="60" step="2">
    <br>
    
    <label for="ipt11">日期控件</label>
    <input type="date" id="ipt11" name="date">
    <br>
    
    <label for="ipt12">时间控件</label>
    <input type="time" id="ipt12" name="time">
    <br>
    
    <label for="ipt13">月份控件</label>
    <input type="month" id="ipt13" name="month">
    <br>
    
    <label for="ipt14">日期时间控件</label>
    <input type="datetime-local" id="ipt14" name="datetime">
    <br>
    
    <button type="submit">提交</button>
</form>

效果图：

E02. 其他控件

1. 按钮控件button

心法：<button> 是 H5 表单中功能丰富的按钮控件，区别于 <input type="button">，<button> 内部可嵌套文字、图标等内容，语义更灵活，且按钮本身不会向后台传递 name / value（除非手动设置），仅触发交互行为。

按钮类型：按钮类型由 type 属性决定，默认为 submit 提交按钮：

<button> 的 type 属性值 简述 描述 其它补充
button 普通按钮 无默认行为 无特殊属性，用于配合 JS 绑定点击事件
reset 重置按钮 用于将表单内的所有 value 重置回默认值 无法重置 disabled 控件
submit 提交按钮 点击后提交表单数据 formaction：重写表单 action（提交地址） formmethod：重写表单 method（提交方式） formtarget：重写表单 target（显示目标）

武技：开发 view/按钮控件.html 页面，并测试 H5 按钮控件。

html 复制代码 
<!--按钮控件-->
<form action="https://www.baidu.com">
    <label for="ipt"></label>
    <input id="ipt" name="username" value="zhaosi">
    <button type="submit">提交</button>
    <button type="button">普通</button>
    <button type="reset">重置</button>
</form>

效果图：

2. 下拉菜单select

心法：<select> + <option> 是 H5 专用于 "单选 / 多选下拉选择" 的语义化控件，核心价值是限定用户输入范围，避免自由输入的格式混乱，<select> 通过核心属性控制整体规则（名称、必填），<option> 控制单个选项的状态（值、默认选中、禁用）。

下拉菜单相关标签：

标签 常用属性 可选值 描述 关键注意点
<select> name required multiple size 任意字符串 布尔值 布尔值 正整数 下拉菜单名称，表单提交时的 "键名"，无 name 则数据无法提交 必选控件，提交前校验，未选择则提示并阻止提交 开启多选模式（默认单选） 设置可见选项数量（如 size="3" 显示 3 行），默认下拉展开 同表单内需唯一 原生校验提示可自定义 多选时按住 Ctrl 或 Shift 键选择 多选时常用，单选时极少用
<option> value selected disabled 任意字符串 布尔值 布尔值 选项的值，表单提交时传递该值 默认选中该选项 禁用该选项，不可选中，提交时也不会传递该值 未设置则传递 <option> 内的文字 单选时仅能有一个，多选时可多个 禁用选项样式可通过 CSS 自定义
<optgroup> label disabled 任意字符串 布尔值 分组标题，只读不可选中，用于归类 <option> 禁用整个分组，分组内所有 <option> 均不可选中 必须写在 <optgroup> 标签上 批量禁用选项时常用

武技：开发 view/下拉菜单.html 页面，并测试 H5 下拉菜单。

html 复制代码 
<!--下拉菜单（单选）-->
<form action="https://www.baidu.com">
    <label for="sel01">请选择您喜欢的食物：</label>
    <select name="food" id="sel01" required>
        <optgroup label="粮食类">
            <option value="rice">大米</option>
            <option value="millet">小米</option>
            <option value="corn">玉米</option>
        </optgroup>
        <optgroup label="水果类">
            <option value="apple" selected>苹果</option>
            <option value="banana">香蕉</option>
            <option value="pear">鸭梨</option>
        </optgroup>
        <optgroup label="其他类">
            <option value="other" disabled>我被禁用了</option>
        </optgroup>
    </select>
    <br>

    <button type="submit">提交</button>
</form>

<!--下拉菜单（多选）-->
<form action="https://www.baidu.com">
    <label for="sel02">请选择您喜欢的食物：</label>
    <select name="food" id="sel02" required multiple size="3">
        <option value="rice">大米</option>
        <option value="millet">小米</option>
        <option value="corn">玉米</option>
        <option value="apple" selected>苹果</option>
        <option value="banana">香蕉</option>
        <option value="pear">鸭梨</option>
    </select>
    <br>

    <button type="submit">提交</button>
</form>

效果图：

3. 文本区域textarea

心法：<textarea> 文本域是 H5 专用于多行文本输入的语义化控件，区别于 <input type="text">（单行文本框），文本域支持换行、回车、空格的原生保留，核心适配 "大段文本输入" 场景，如备注、留言、描述等。

<textarea> 常用属性如下：

<textarea> 常用属性 可选值 描述 关键注意点
cols 正整数 初始列数（字符数），定义文本域默认宽度 仅为初始值，优先用 CSS width 控制
rows 正整数 初始行数（行数），定义文本域默认高度 仅为初始值，优先用 CSS height 控制
disabled 布尔值 禁用文本域，不可输入/编辑，提交时不传递值 样式自带禁用态，无法聚焦
readonly 布尔值 只读文本域，不可编辑，提交时正常传递值 可聚焦，无禁用态，仅禁止输入
required 布尔值 必填校验，提交前检查是否有内容，无内容则提示并阻止提交 原生校验提示可自定义
autofocus 布尔值 页面加载后自动聚焦文本域 一个页面仅能有一个控件设置该属性
maxlength 正整数 限制最大输入字符数（含换行/空格），超出后无法输入 支持实时字数统计，兼容所有现代浏览器
placeholder 任意字符串 背景提示文字，无输入时显示，输入后消失 不支持换行，提示文字过长建议精简
name 任意字符串 文本域名称，表单提交时的 "键名"，无 name 则数据无法提交 同表单内需唯一，核心提交标识
wrap soft/hard soft：换行处理，提交时不保留换行，默认值 hard：提交时保留换行 hard 需配合 cols 使用

<textarea> 交互控制 ：文本域右下角默认允许拖拽缩放，可使用 resize: none 样式取消该功能，以避免页面布局错乱。

武技：开发 view/文本区域.html 页面，并测试 H5 文本区域。

html 复制代码 
<!--文本区域-->
<form action="https://www.baidu.com" method="post">
    <label for="txt01">个人介绍</label>
    <br>
    <textarea id="txt01"
              name="info"
              cols="50"
              rows="10"
              maxlength="100"
              required
              autofocus
              placeholder="在此填写你的个人介绍.."></textarea>
    <br>

    <button type="submit">提交</button>
</form>

效果图：

Java道经第2卷 - 第7阶 - HTML

相关推荐
代码小库2 小时前
【课程作业必备】Web开发技术HTML静态网站模板 - 校园动漫社团主题完整源码
前端·html
云计算DevOps-韩老师2 小时前
HTML 中的行级元素（inline）、块级元素（block）、行内块元素（inline-block）
html
珹洺2 小时前
Bootstrap-HTML（二）深入探索容器，网格系统和排版
前端·css·bootstrap·html·dubbo
BillKu2 小时前
VS Code HTML CSS Support 插件详解
前端·css·html
JZC_xiaozhong2 小时前
多系统权限标准不统一？企业如何实现跨平台统一权限管控
java·大数据·微服务·数据集成与应用集成·iam系统·权限治理·统一权限管理
xixixin_2 小时前
【React】中 Body 类限定法：优雅覆盖挂载到 body 的组件样式
前端·javascript·react.js
换日线°2 小时前
NFC标签打开微信小程序
前端·微信小程序
爬山算法3 小时前
Hibernate（85）如何在持续集成/持续部署（CI/CD）中使用Hibernate？
java·ci/cd·hibernate
苦逼IT运维3 小时前
从 0 到 1 理解 Kubernetes：一次“破坏式”学习实践（一）
linux·学习·docker·容器·kubernetes
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03Vue-skills的中文文档04让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南05Claude Code Skills 实用使用手册06一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示07UV安装并设置国内源08OpenClaw Chrome扩展使用教程 - 浏览器中继控制09Linux下V2Ray安装配置指南10AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南