HTML5 全面讲解笔记
MISY 350 Exam 1 复习 | 中英对照 · 完整代码 · 实时演示
1. 基本术语 | Basic Terms
| 术语 Term | 中文 | 定义 | 示例 Example |
|---|
| Tag | 标签 |
HTML 关键字，用尖括号 < > 包裹。分开标签和闭标签（闭标签多一个 /） |
<html>（开标签）
</html>（闭标签） |
| Element | 元素 |
开标签 + 内容 + 闭标签 组成的整体。是 HTML 文档的基本构建块 |
<title>Example</title>
↑ 开标签 ↑ 内容 ↑ 闭标签 |
| Attribute | 属性 |
写在开标签内的名值对（name="value"），用来提供元素的附加信息。每个属性由名称和值组成，值用引号包裹 |
<meta charset="utf-8">
属性名=charset，属性值=utf-8 |
| Void Element | 空元素 |
没有内容、没有闭标签的元素。它可以自闭合（在 > 前加 /），也可不写 /（HTML5 两者都合法） |
<br> 或 <br />
<img src="a.jpg"> |
1.1 术语在一段完整代码中的位置
<!DOCTYPE html> <!-- 文档类型声明：告诉浏览器这是 HTML5 -->
<html lang="en"> <!-- lang 是 attribute（属性），"en" 是 value（值） -->
<head>
<meta charset="UTF-8"> <!-- void element（空元素）：有属性，无内容，无闭标签 -->
<title>My Page</title> <!-- element（元素）= 开标签 + 内容 + 闭标签 -->
</head>
<body>
<h1 id="main-title">Hello</h1> <!-- id 是 attribute -->
</body>
</html>
2. 文档结构 | Document Structure
核心规则：
<!DOCTYPE html> 必须写在第 1 行；HTML 标签不区分大小写（但推荐小写）；
<title> 是 <head> 中唯一必需的元素。
2.1 最简 HTML5 骨架
<!DOCTYPE html> <!-- ① DOCTYPE：告诉浏览器这是 HTML5 文档，必须第 1 行 -->
<html lang="en"> <!-- ② html：根元素，lang 属性声明页面语言 -->
<head> <!-- ③ head：元信息区，不直接显示在页面上 -->
<meta charset="UTF-8"> <!-- 字符编码 — 几乎所有页面都用 UTF-8 -->
<title>页面标题</title> <!-- 必需！显示在浏览器标签页上 -->
</head>
<body> <!-- ④ body：可视内容区，所有页面显示的内容都在这里 -->
<!-- 你的内容写在这里 -->
</body>
</html>
3. Head 元素 | Head Elements
| 元素 Element | 中文 | 作用 | 必需? |
|---|
| <title> | 页面标题 | 浏览器标签页文字 + 搜索引擎结果标题 | 是 |
| <meta> | 元数据 | 提供字符编码、关键词、描述、视口等元信息 | 否（强烈推荐） |
| <link> | 外部链接 | 引入外部 CSS（样式表）、favicon 等 | 否 |
| <style> | 内嵌样式 | 直接在 HTML 中写 CSS（嵌入式样式） | 否 |
| <script> | 脚本 | 嵌入或引用 JavaScript 代码 | 否 |
3.1 完整 Head 示例
<head>
<!-- ① 字符编码：防乱码，建议放第一个 meta -->
<meta charset="UTF-8">
<!-- ② 视口：移动端适配必备 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- ③ SEO 相关 meta（可选） -->
<meta name="keywords" content="HTML, CSS, JavaScript"> <!-- 关键词 -->
<meta name="description" content="页面描述，150字以内"> <!-- 描述 -->
<!-- ④ 标题（必需） -->
<title>我的网页</title>
<!-- ⑤ 引入外部 CSS relationship(告诉浏览器这个外部文件是 “样式表”，必须) type(说明文件内容是 纯文本格式的 CSS 代码, 不必须) hypertext reference(指定位置，必须) -->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
Head 元素效果演示 — 查看浏览器标签页的标题和页面编码
此页面的浏览器标签页标题是：MISY350 — HTML5 全面讲解笔记 | 中英对照 + 代码演示
4. 块级 vs 行内元素 | Block-Level vs Inline
| 类型 Type | 中文 | 行为 | 常见元素 |
|---|
| Block-level | 块级元素 |
① 独占一行 ② 宽度默认撑满父容器 ③ 有完整的 Box Model（盒模型） |
<h1>~<h6> <p> <div> <table> <form> <ol> <ul> <li> |
| Inline | 行内元素 |
① 不换行，与其他内容同行 ② 宽度仅占内容所需 ③ 无完整 Box Model（但可通过 display:block 转换） |
<a> <img> <strong> <em> <span> <br> |
4.1 直观对比演示
<!-- Block-level 块级元素：每个都独占一行 -->
<!-- 独占一行：默认自动换行 / 宽度默认撑满父容器 / 可以正常设置 width、height、padding、margin，上下左右外边距内边距全部生效 -->
<!-- <h1>~<h6>（标题）、<p>（段落）、<div>（通用容器）、<table>（表格）、<form>（表单）、<ol>（有序列表）、<ul>（无序列表）、<li>（列表项） -->
<p style="background: #dfe6e9; padding: 8px;">我是块级 p 元素</p>
<div style="background: #ffeaa7; padding: 8px;">我是块级 div 元素</div>
<!-- Inline 行内元素：不换行，同行排列 -->
<!-- 和文字、其他行内元素并排显示在同一行 / 宽度自适应，刚好包裹自身内容 / 无完整 Box Model（但可通过 display:block 转换）垂直方向 padding/margin 不生效，只有水平方向有效 -->
<!-- <a>（链接）、<img>（图片，特殊行内元素，可设宽高）、<strong>（加粗）、<em>（斜体）、<span>（行内通用容器）、<br>（换行） -->
<span style="background: #81ecec; padding: 4px;">行内</span>
<strong style="background: #fab1a0; padding: 4px;">行内</strong>
<a href="#">行内链接</a>
实际渲染效果 ↓
我是块级 p 元素
我是块级 div 元素
行内
行内
行内链接
5. Body 常用元素 | Common Body Elements
5.1 标题 | Headings <h1> ~ <h6>
<!-- h1~h6：Block 元素，数字越大字号越小；h1 一般每个页面只用一次 -->
<h1>一级标题 — 最大，通常用于页面主标题</h1>
<h2>二级标题</h2>
<h6>六级标题 — 最小</h6>
标题层级效果 ↓
一级标题 — 最大
二级标题
三级标题
六级标题 — 最小
5.2 段落 & 文字强调 | Paragraph & Text Emphasis
<!-- p：Block 元素，段落。内可嵌套 strong（加粗）和 em（斜体） -->
<p>
这是一个段落。其中<strong>这部分加粗</strong>，
而<em>这部分斜体</em>。
</p>
段落 & 强调效果 ↓
这是一个段落。其中这部分加粗，而这部分斜体。
5.3 超链接 | Hyperlink <a>
| 属性 | 值示例 | 作用 |
|---|
href | "https://example.com" | 目标 URL（外部链接） |
href | "#section2" | 页面内部锚点（跳转到 id="section2" 的元素） |
href | "mailto:[email protected]" | 点击后打开默认邮件客户端 |
target | "_blank"（可选） | 在新标签页打开链接 |
download | "filename.pdf"（可选） | 点击后下载文件而非打开 |
<!-- 外部链接：href 写完整 URL -->
<a href=
"https://www.google.com" target=
"_blank">打开 Google（新标签页）
</a>
<!-- 内部锚点：先给目标元素设 id，再用 href="#id" 跳转 -->
<h2 id=
"faq">常见问题
</h2>
<a href=
"#faq">跳转到常见问题
</a>
<!-- 邮件链接 -->
<a href=
"mailto:[email protected]">发送邮件
</a>
5.4 图片 | Image <img> — Void Element
<!-- img 是 void element（空元素），无闭标签
src：图片路径 | width/height：尺寸 | alt：替代文字（无障碍 + SEO 必备） -->
<img src="photo.jpg" alt="描述文字"
width="300" height="200">
5.5 列表 | Lists <ul> <ol> <li>
<!-- 无序列表 ul + li：每项前显示圆点 -->
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<!-- 有序列表 ol + li：每项前显示数字序号 -->
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
<!-- 嵌套列表：li 内可再放 ul/ol -->
<ul>
<li>水果
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
</li>
</ul>
5.6 分组 | Grouping <div> <span>
<!-- div：Block 分组容器，用于布局和样式化一段区域 -->
<div style="background: #dfe6e9; padding: 12px;">
<h2>区域标题</h2>
<p>区域内容...</p>
</div>
<!-- span：Inline 分组容器，用于给行内文字加样式而不打断行 -->
<p>这里是<span style="color: red;">红色文字</span>示例。</p>
5.7 换行 | Line Break <br> — Void Element
<!-- br：强制换行，void element，不能用来做段落间距（段落间距用 p + CSS margin） -->
<p>第一行文字<br>第二行文字</p>
5.8 特殊字符 | Special Characters
| 字符实体 Entity | 显示结果 | 说明 |
|---|
© | © | 版权符号 |
| (空格) | 不换行空格（non-breaking space） |
< | < | 小于号（less than） |
> | > | 大于号（greater than） |
& | & | & 符号 |
" | " | 双引号 |
6. 表格 | Table
| 元素 | 中文 | 作用 |
|---|
| <table> | 表格容器 | 整个表格的根元素 |
| <thead> | 表头区域 | 包含列标题行（语义分组，可选但推荐） |
| <tbody> | 表体区域 | 包含数据行（语义分组，可选但推荐） |
| <tfoot> | 表尾区域 | 汇总/统计行（可选） |
| <tr> | 表行 | Table Row — 表格中的一行 |
| <th> | 表头单元格 | Table Header — 文字默认加粗居中 |
| <td> | 数据单元格 | Table Data — 普通单元格，默认左对齐 |
6.1 完整表格代码
<table>
<!-- thead：表头区域（列名） -->
<thead>
<tr> <!-- tr = 一行 -->
<th>姓名</th> <!-- th = 表头单元格（加粗居中） -->
<th>成绩</th>
<th>等级</th>
</tr>
</thead>
<!-- tbody：表体区域（数据） -->
<tbody>
<tr>
<td>Alice</td> <!-- td = 数据单元格 -->
<td>95</td>
<td>A</td>
</tr>
<tr>
<td>Bob</td>
<td>87</td>
<td>B</td>
</tr>
</tbody>
</table>
7. 表单 | Forms — 重点考点
7.1 <form> 元素属性
| 属性 Attribute | 值 Value | 说明 |
|---|
method | "get" 或 "post" | 提交方式：get 把数据附在 URL 上；post 把数据藏在消息体中 |
action | "submit.php" | 提交目标 URL：表单数据发往哪个服务器地址处理 |
考试重点：GET 数据在 URL 可见、有长度限制、可缓存；POST 数据隐藏在消息体中、无长度限制、不可缓存。
7.2 Input 类型大全 — 全部考点类型 + 注释
<form method="post" action="submit.php">
<!-- ===== 基础输入类型 ===== -->
<!-- text：单行文本输入，最常用的 input 类型 -->
<label>用户名:</label>
<input type="text" name="username" placeholder="请输入用户名">
<!-- password：密码框，输入内容显示为圆点 -->
<label>密码:</label>
<input type="password" name="pwd">
<!-- email：邮箱输入框，浏览器会自动验证格式（如必须有 @） -->
<label>邮箱:</label>
<input type="email" name="email">
<!-- tel：电话号码输入（移动端会弹出数字键盘） -->
<label>电话:</label>
<input type="tel" name="phone">
<!-- ===== 选择类型 ===== -->
<!-- radio：单选按钮。同名（同 name）的 radio 互斥，只能选一个 -->
<label>性别:</label>
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female" checked> 女 <!-- checked：默认选中 -->
<!-- checkbox：复选框。同 name 的一组可以多选 -->
<label>爱好:</label>
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动
<!-- ===== 特殊类型 ===== -->
<!-- color：颜色选择器，点击弹出取色面板 -->
<label>颜色:</label>
<input type="color" name="favcolor">
<!-- datetime-local：日期时间选择器（不含时区） -->
<label>日期:</label>
<input type="datetime-local" name="meeting">
<!-- range：滑动条，min/max 设范围，value 设默认值 -->
<label>评分:</label>
<input type="range" name="rating" min="0" max="10" value="5">
<!-- hidden：隐藏字段，用户看不到但会随表单一起提交 -->
<input type="hidden" name="userid" value="83921">
<!-- ===== 多行文本 ===== -->
<!-- textarea：不是 input 类型，是独立元素！cols/rows 设尺寸 -->
<label>留言:</label>
<textarea name="message" rows="3" cols="40"></textarea>
<!-- ===== 按钮类型 ===== -->
<!-- submit：提交按钮，点击后表单数据发送到 action 指定的 URL -->
<input type="submit" value="提交">
<!-- reset：重置按钮，点击后清空表单所有字段回到初始值 -->
<input type="reset" value="重置">
</form>
7.3 表单属性 | Form Attributes（写在 input 上）
| 属性 | 值 | 作用 |
|---|
autofocus | （无值，写属性名即可） | 页面加载时自动获得焦点（光标定位到此输入框） |
placeholder | "提示文字" | 输入框内显示的灰色提示（不是真正的值，输入即消失） |
autocomplete | "on" 或 "off" | 是否允许浏览器记住并自动补全输入过的内容 |
required | （无值） | 标为必填项；提交前浏览器自动检查，为空时阻止提交并提示 |
<!-- 属性使用示例：组合使用 -->
<input type="text" name="fullname"
placeholder="请输入姓名" <!-- 灰色提示文字 -->
autofocus <!-- 页面加载后光标自动到这里 -->
autocomplete="on" <!-- 允许浏览器记住输入 -->
required> <!-- 必填项，不填不能提交 -->
7.4 select vs datalist
| 元素 | 中文 | 特点 |
|---|
| <select> | 下拉菜单 | 只能从预设选项中选一个（除非加 multiple） |
| <datalist> | 数据列表 | 提供候选项，但用户可以自由输入任意值 |
<!-- select：下拉选择，只能从选项里挑 -->
<select name="rating">
<option value="5">Amazing（非常满意）</option>
<option value="4" selected>Good（满意）</option> <!-- selected：默认选中 -->
<option value="1">Very bad（非常不满意）</option>
</select>
<!-- datalist：下拉建议 + 自由输入，通过 list 属性绑定 input -->
<input type="text" name="browser" list="browsers">
<datalist id="browsers"> <!-- id 必须与 input 的 list 属性一致 -->
<option value="Chrome">
<option value="Safari">
</datalist>
8. 页面结构元素 | Page Structure Elements
核心思想：这些是 HTML5 新增的语义化（semantic）元素，
用有意义的标签名替代 <div id="header"> 这种写法，让代码更可读、搜索引擎更友好。
它们本质上都是 Block-level 元素。
| 元素 Element | 中文 | 用途 | 考点提示 |
|---|
| <header> | 页头 / 区段头 |
页面或区段的头部区域（可包含标题、logo、导航等） |
≠ <head>！header 是可视内容，head 是元数据区 |
| <nav> | 导航 |
导航链接的分组区域 |
通常放主要导航菜单，不是每个链接组都是 nav |
| <article> | 文章 / 独立内容 |
独立、可单独分发的内容块（新闻稿、博客帖子、评论） |
核心思路：这段内容脱离页面后仍有意义 |
| <section> | 区段 |
相关内容的分组 |
建议每个 section 都包含一个 h1~h6 标题 |
| <aside> | 侧边栏 |
与主内容相关但非主体的补充内容（侧边栏、广告等） |
通常浮在主体内容旁边 |
| <figure> | 插图容器 |
包裹图表、图片、代码等自包含内容 |
配合 <figcaption> 使用 |
| <figcaption> | 插图标题 |
为 figure 提供说明文字；可关联多个 figure |
写在 figure 内部，通常放最前或最后 |
| <details> | 折叠详情 |
可展开/折叠的内容容器 |
点击 summary 切换展开/收起 |
| <summary> | 折叠标题 |
details 的标题（始终可见，前面有三角形箭头） |
写在 details 内部，一般是第一个子元素 |
| <mark> | 高亮 |
标记/高亮文本（默认黄色背景） |
行内元素（Inline），用于关键词高亮 |
| <wbr> | 建议换行点 |
Word Break Opportunity — 当需要换行时，浏览器优先在此处断行 |
Void element，用于长单词或长URL中 |
| <footer> | 页脚 / 区段脚 |
页面或区段的底部区域（版权信息、联系方式等） |
一个页面可有多个 footer |
8.1 完整页面结构示例
<!DOCTYPE html>
<html>
<body>
<!-- header：页面头部，可包含标题和导航 -->
<header>
<h1>我的博客</h1>
<nav> <!-- nav：导航链接组 -->
<a href="#">首页</a> |
<a href="#">文章</a> |
<a href="#">关于</a>
</nav>
</header>
<!-- article + section：主体内容区 -->
<article> <!-- article：独立内容块 -->
<h2>HTML5 语义化元素</h2>
<section> <!-- section：相关内容分组 -->
<h3>什么是语义化</h3>
<p>语义化就是用有意义的标签代替 div...</p>
</section>
<section>
<h3>常见元素</h3>
<p>包括 header、nav、article...</p>
</section>
</article>
<!-- aside：侧边内容 -->
<aside>
<h3>相关文章</h3>
<ul><li>CSS3 动画教程</li></ul>
</aside>
<!-- figure + figcaption：插图 + 说明 -->
<figure>
<img src="chart.png" alt="图表">
<figcaption>图 1：2025 年数据趋势</figcaption>
</figure>
<!-- details + summary：可展开的折叠内容 -->
<details>
<summary>点击展开更多信息</summary>
<p>这里是折叠起来的详细内容，点击 summary 才会显示。</p>
</details>
<!-- mark：高亮关键词 -->
<p>这是一段文字，其中的<mark>关键词</mark>被高亮显示。</p>
<!-- wbr：在长单词中提供建议换行点 -->
<p>超长单词示例：super<wbr>cali<wbr>fragilistic<wbr>expialidocious</p>
<!-- footer：页脚 -->
<footer>
<p>© 2025 我的博客. All rights reserved.</p>
</footer>
</body>
</html>
8.2 页面结构可视化
每个元素用不同颜色标记，直观展示页面结构 ↓
DETAILS + SUMMARY — 点击这里展开/折叠隐藏内容
这是折叠起来的详细内容，只有点击上面的 summary 才会显示。
文本中的 MARK — 高亮文本 演示
9. HTML5 考点速查表 | Quick Reference
| 考点 | 关键内容 | 易错提醒 |
|---|
| 基础术语 | Tag / Element / Attribute / Void element | Void element 无闭标签（<br>, <img>, <meta>） |
| 文档结构 | DOCTYPE → html → head → body | title 是 head 中唯一必需的 |
| Block vs Inline | Block 独占一行、Box Model 适用；Inline 不换行 | 可通过 display:block 转换 |
| 表单 method | get（URL 可见,有长度限制,可缓存）vs post（隐藏,无限制,不缓存） | 考试高频考点，必须区分清楚 |
| Input 类型 | text / password / email / tel / radio / checkbox / color / datetime-local / range / hidden / submit / reset | textarea 不是 input！radio 同 name 互斥；checkbox 同 name 不互斥 |
| 表单属性 | autofocus / placeholder / autocomplete / required | autofocus 不需写值；placeholder 不是真正的值 |
| select vs datalist | select 只能选预设项；datalist 可自由输入 | datalist 通过 id 与 input 的 list 属性配对 |
| 表格 | table > thead/tbody > tr > th/td | th 加粗居中；td 普通左对齐 |
| 语义元素 | header / nav / article / section / aside / figure+figcaption / details+summary / mark / wbr / footer | header ≠ head！header 是 body 内的可见元素 |
| 特殊字符 | © < > & | 在 HTML 中写 < 和 > 必须用实体 |
— MISY 350 Exam 1 Review · HTML5 全面讲解笔记 · 完 —