HTML 从入门到起飞 · 系列合集：一站式学习不掉线
一、💻计算机基础
🌟艾伦·麦席森·图灵🌟 ⚔️ 二战时期，破译了德军的战争编码——英格玛。 🕊️ 让二战提前2年结束，拯救了上千万人的生命。 🏆 设立图灵奖，被后人誉为："人工智能之父"。
💻约翰·冯·诺依曼💻 🔧 制订了现代计算机标准——冯诺依曼体系结构。 📜 提出：计算机要采用二进制、明确计算机组成部分。 🏆 被后人誉为："现代计算机之父"。
1.分类
| 类别 | 项目/内容 |
|---|---|
| 🛠️ 硬件 | 中央处理器 (CPU): 负责处理计算机中的各种指令和数据。 |
| 存储器 | |
| - 📀 内存: 暂时性存储，读写速度快。容量有4GB、8GB、16GB、32GB等。 | |
| - 🕸️ 硬盘: 持久化存储，容量较大，如512GB、1TB、2TB等（1024GB = 1TB）。 | |
| 输入设备 | |
| - 🔑 键盘: 用于输入文本和命令。 | |
| - 🖱️ 鼠标: 用于控制光标和进行选择操作。 | |
| 输出设备 | |
| - 🎧 音箱: 输出音频信息。 | |
| - 🖥️ 显示器: 显示图像和文字信息。 | |
| 📚 软件 | 系统软件 |
| - 🪟 Windows | |
| - 🐧 Linux | |
| - 🍏 Mac | |
| - 🌀 Harmony | |
| 应用软件 | |
| - 🎮 哔哩哔哩: 视频平台 | |
| - 💬 微信: 社交通讯工具 | |
| - 📸 美图秀秀: 图像编辑软件 | |
| - 🎬 腾讯视频: 视频播放平台 |
2.👨💻应用软件架构
| 类别 | 子类别 | 项目/内容 |
|---|---|---|
| 📚 应用软件 | C/S 架构 | - 🎮 哔哩哔哩 - 💬 微信 - 📸 美图秀秀 - 🎬 腾讯视频 |
| 特点: • 🔧 需要安装 • ⏳ 偶尔更新 • 🖥️ 不跨平台 | ||
| B/S 架构 | - 🕹️ 英雄联盟 - 🎨 After Effects - 🚀 航天相关 - 🛡️ 军事相关 | |
| 特点: • ✅ 无需安装 • ✅ 无需更新 • 🌐 可跨平台 | ||
| 说明: 大型专业应用、安全性要求较高的应用，还要采用C/S架构 | ||
| 📚: 应用软件 C/S: Client/Server（客户端/服务器） B/S: Browser/Server（浏览器/服务器） |
3.🌍浏览器内核
| 浏览器 | 内核 | 备注 |
|---|---|---|
| 🌐 Chrome | 🔧 Blink | - 早期使用WebKit内核，现在使用Blink内核。 |
| 🍏 Safari | 🔧 WebKit | - 使用WebKit内核。 |
| 📱 IE | 🔧 Trident | - 使用Trident内核。 |
| 🦊 Firefox | 🔧 Gecko | - 使用Gecko内核。 |
| 🎭 Opera | 🔧 Blink | - 早期使用Presto内核（已放弃维护），现在使用Blink内核。 |
🛠️ 常用快捷键
Ctrl + Shift + K：删除当前行
Shift + Alt + ↑ / ↓：向上/向下复制当前行
鼠标滚轮 + 移动鼠标 或 Alt + 鼠标点击： 选中某一列并修改该列内容。 不动鼠标时可按 ↑ / ↓ 移动光标。
📐 HTML 标签使用规范：
h1 到 h6 标签 不能嵌套使用
p 标签中 不允许出现 h 标签 p 标签中 不允许出现 div 标签
ol（有序列表）和 ul（无序列表）可以互相嵌套使用
⚙️ 属性简写规则 如果 属性名 和 属性值 相同，可以简写为只写属性名。
示例：<input required required> 可以简写为 <input required>
二、🐟语义化标签
📌 HTML 标签语义化原则 核心思想：
标签的默认效果不重要（可以通过 CSS 修改）。 标签的语义最重要（体现内容结构和含义）。 📝 举例说明：
h1标签：
默认效果：文字很大 ➜ ❌ 不重要 语义：网页的主要标题 ➜ ✅ 非常重要
优势:
| 优势点 | 说明 |
|---|---|
| ✅ 代码结构清晰、可读性强 | 使用语义化标签可以让开发者更容易理解页面结构。 |
| 🔍 有利于 SEO（搜索引擎优化） | 搜索引擎能更好地理解页面内容，提升搜索排名。 |
| 📱 方便设备解析 | 如屏幕阅读器、盲人阅读器等辅助设备能更准确地解析内容，提升无障碍访问体验。 |
三、🟦块级元素和行内元素
📚 HTML 元素分类与嵌套规则
| 类型 | 特点 | 示例 |
|---|---|---|
| 📘 块级元素 | 独占一行，通常用于构建页面结构 | <div>, <p>, <h1>~<h6>, <ul>, <ol> 等 |
| 📘 行内元素 | 不独占一行，用于页面内的小内容展示 | <input>, <span>, <a>, <strong>, <em> 等 |
⚙️ 嵌套使用规则
| 规则编号 | 嵌套说明 | 示例（✅合法 / ❌非法） |
|---|---|---|
| Rule 1 | ✅ 块级元素中可以包含行内元素和块级元素 | <div><p><input></p></div> ✅ |
| Rule 2 | ❌ 行内元素中不能包含块级元素 | <span><div>非法</div></span> ❌ |
| Rule 3 | ❌ <h1> ~ <h6> 标签之间不能互相嵌套 | <h1><h2>标题</h2></h1> ❌ |
| Rule 4 | ❌ <p> 标签中不要写块级元素 | <p><div>不推荐</div></p> ❌ |
🧠 小结
块级元素：能包“一切”（块+行内），常用于布局。
行内元素：只能包行内，不能放块级，适合包裹文字、链接等。
特殊限制：
h1~h6 不能互相嵌套。
<p> 标签中不要放入块级元素。
四、📓文本标签
| 分类 | 说明 |
|---|---|
| 📌 用途 | 用于包裹 词汇、短语 等小段文字内容 |
| 📁 使用位置 | 通常写在 排版标签（如 <p>、<div>、<h1>~<h6>）里面 |
| 📐 内容粒度 | 相比排版标签更微观： ✅ 排版标签：大段文字（宏观） ✅ 文本标签：词汇短语（微观） |
| 🏷️ 元素类型 | 大多数是 行内元素，不会独占一行 |
✅ 总结一句话： 排版标签负责整体结构，文本标签聚焦细节内容；文本标签通常是行内元素，适合包裹词汇和短语。
📚 常用文本标签
| 标签名 | 标签语义 | 单/双标签 |
|---|---|---|
| em | 📖 要着重阅读的内容 | 双 |
| strong | ⚠️ 十分重要的内容（语气比em要强） | 双 |
| span | 📦 没有语义，用于包裹短语的通用容器 | 双 |
📝 生活中的例子 📦 大包装袋: div 📦 小包装袋: span
📚 不常用的文本标签
| 标签名 | 标签语义 | 单/双标签 |
|---|---|---|
| cite | 📖 作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑） | 双 |
| dfn | 🔍 特殊术语，或专属名词 | 双 |
| del & ins | ❌ 删除的文本 【与】 ✅ 插入的文本 | 双 |
| sub & sup | ⬇️ 下标文字 【与】 ⬆️ 上标文字 | 双 |
| code | 💻 一段代码 | 双 |
| samp | 📝 从正常的上下文中，将某些内容提取出来，例如：标识设备输出 | 双 |
| kbd | ⌨️ 键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中 | 双 |
| abbr | 📏 缩写，最好配合上 title 属性 | 双 |
| bdo | 🔄 更改文本方向，要配合 dir 属性，可选值: ltr（默认值）、rtl | 双 |
| var | 🟩 标记变量，可以与 code 标签一起使用 | 双 |
| small | 📑 附属细则，例如：包括版权、法律文本。--- 很少使用 | 双 |
| b | 🗞️ 摘要中的关键字、评论中的产品名称。--- 很少使用 | 双 |
| i | 🤔 本意是：人物的思想活动、所说的话等等。 现在多用于：呈现字体图标（后面要讲的内容）。 | 双 |
| u | ❌ 与正常内容有反差文本，例如：错的单词、不合适的描述等。--- 很少使用 | 双 |
| q | 📢 短引用 --- 很少使用 | 双 |
| blockquote | 📄 长引用 --- 很少使用 | 双 |
| address | 📍 地址信息 | 双 |
📝 备注
-
这些不常用的文本标签，编码时不用过于纠结（酌情而定，不用也没毛病）。
-
blockquote与address是块级元素，其他的文本标签，都是行内元素。 -
有些语义感不强的标签，我们很少使用，例如：
small，b，u，q，blockquote
-
HTML标签太多了！记住那些：重要的、语义感强的标签即可；截止目前，有这些：
h1~h6，p，div，em，strong，span
五、🧩图片标签
5.1图片标签
| 标签名 | 标签语义 | 常用属性 | 单/双标签 |
|---|---|---|---|
| img | 🖼️ 图片 | - src: 图片路径（又称：图片地址）--- 图片的具体位置 - alt: 图片描述 - width: 图片宽度，单位是像素，例如: 200px 或 200 - height: 图片高度，单位是像素，例如: 200px 或 200 | 单 |
📝 总结
-
单位说明：
-
📏 像素 (
px) 是一种单位，学到 CSS 时，我们会详细讲解。
-
-
修改建议：
-
⚠️ 尽量不同时修改图片的宽和高，可能会造成比例失调。
-
-
元素分类：
-
📐 暂且认为
img是行内元素（学到 CSS 时，会认识一个新的元素分类，目前咱们只知道：块、行内）。
-
-
alt属性的作用：-
🔍 搜索引擎通过
alt属性，得知图片的内容。--- 最主要的作用。 -
🖥️ 当图片无法展示时候，有些浏览器会呈现
alt属性的值。 -
🎧 盲人阅读器会朗读
alt属性的值。
-
📚 5.2 路径的分类
1.相对路径 定义：以当前位置作为参考点，去建立路径。
| 符号 | 含义 |
|---|---|
./ | 同级 |
/ | 下一级 |
../ | 上一级 |
2.绝对路径 定义：以根位置作为参考点，去建立路径。
| 类型 | 示例 | 说明 |
|---|---|---|
| 本地绝对路径 | E:/a/a.jpg | 很少使用 |
| 网络绝对路径 | http://www.atguigu.com/images/index_new/logo.png |
注意点：
使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。 使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入失败。
📝 总结
| 路径类型 | 定义 | 示例 | 特点与注意事项 |
|---|---|---|---|
| 相对路径 | 以当前位置作为参考点 | ./, /, ../ | - ./ 可省略 - 文件位置变动需修改路径 |
| 绝对路径 | 以根位置作为参考点 | 本地、网络绝对路径 | - 本地路径少用 - 网络路径需注意防盗链 |
📚 5.3图片格式概述与特点
| 格式 | 扩展名 | 概述 | 主要特点 | 使用场景 |
|---|---|---|---|---|
| jpg | .jpg 或 .jpeg | 是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）。 | - 支持的颜色丰富 - 占用空间较小 - 不支持透明背景 - 不支持动态图 | 对图片细节没有极高要求的场景，例如：网站的产品宣传图等。--- 该格式网页中很常见。 |
| png | .png | 是一种无损的压缩格式，能够更高质量的保存图片。 | - 支持的颜色丰富 - 占用空间略大 - 支持透明背景 - 不支持动态图 | 想让图片有透明背景；想更高质量的呈现图片；例如：公司logo图、重要配图等。 |
| bmp | .bmp | 不进行压缩的一种格式，在最大程度上保留图片更多的细节。 | - 支持的颜色丰富 - 保留的细节更多 - 占用空间极大 - 不支持透明背景 - 不支持动态图 | 对图片细节要求极高的场景，例如：一些大型游戏中的图片。（网页中很少使用） |
| gif | .gif | 仅支持256种颜色，色彩呈现不是很完整。 | - 支持的颜色较少 - 支持简单透明背景 - 支持动态图 | 网页中的动态图片。 |
| webp | .webp | 谷歌推出的一种格式，专门用来在网页中呈现图片。 | - 兼具上述几种格式的优点 - 兼容性不太好，需解决兼容性问题 | 网页中的各种图片。 |
| base64 | N/A | 一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。 | - 把图片进行 base64 编码，形成一串文本 - 直接作为 img 标签的 src 属性值 - 不受文件位置影响 | 一些较小的图片，或者需要和网页一起加载的图片。 |
📝 总结
-
jpg 格式：适用于对图片细节没有极高要求的场景，如网站产品宣传图，因其占用空间小且颜色丰富。
-
png 格式：适用于需要透明背景或高质量图片的场景，如公司logo和重要配图，虽然占用空间略大但支持透明背景。
-
bmp 格式：适用于对图片细节要求极高的场景，如大型游戏中的图片，尽管占用空间极大但能保留更多细节。
-
gif 格式：适用于网页中的动态图片，支持简单透明背景和动态图，但色彩呈现有限。
-
webp 格式：适用于网页中的各种图片，具备多种优点但兼容性需注意，webp支持动态图。
-
base64 格式：适用于一些较小的图片或需要与网页一起加载的图片，不受文件位置影响。
六、🔗超链接
1. 跳转到页面
标签属性
| 标签名 | 标签语义 | 常用属性 | 单/双标签 |
|---|---|---|---|
a | 超链接 | href | 双 |
-
href: 要跳转的具体位置。 -
target: 跳转时如何打开页面，常用值如下：-
_self: 在本页签中打开。 -
_blank: 在新页签中打开。
-
示例代码
<!-- 跳转到其他网页 -->
<a href="https://www.jd.com/" target="_blank">🔗 去京东</a>
<!-- 跳转到本地网页 -->
<a href="./10_HTML排版标签.html" target="_self">🔗 去看排版标签</a>注意点
-
代码中的多个空格、多个回车，都会被浏览器解析成一个空格！
-
虽然
a是行内元素，但a元素可以包裹除它自身外的任何元素！
2. 跳转到文件
示例代码
<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">📸 看自拍</a>
<a href="./resource/小电影.mp4">🎬 看小电影</a>
<a href="./resource/小姐姐.gif">👩 看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">💰 点我一夜暴富</a>
<!-- 浏览器不能打开的文件，会自动触发下载 -->
<a href="./resource/内部资源.zip">📦 内部资源</a>
<!-- 强制触发下载 -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">🔽 下载电影</a>⚠️注意点
-
若浏览器无法打开文件，则会引导用户下载。
-
若想强制触发下载，请使用
download属性，属性值即为下载文件的名称。
3. 唤起指定应用
示例代码
<!-- 唤起设备拨号 -->
<a href="tel:10010">📞 电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">✉️ 邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">💬 短信联系</a>⚠️注意点
-
通过
a标签，可以唤起设备应用程序。
📓总结
-
<a>标签主要用于创建超链接，实现页面跳转、文件下载和唤起设备应用等功能。 -
href属性指定链接的目标位置，target属性控制链接的打开方式。 -
download属性可以强制触发文件下载。 -
通过特定协议（如
tel:、mailto:、sms:）可以唤起设备应用。
七、列表
列表类型
| 类型 | 标签 | 描述 |
|---|---|---|
| 有序列表 | <ol> | 有顺序或侧重顺序的列表 |
| 无序列表 | <ul> | 无顺序或不侧重顺序的列表 |
| 自定义列表 | <dl> | 包含术语名称及术语描述的列表 |
1. 有序列表 (<ol>)
有序列表是有顺序或侧重顺序的列表。
示例代码
<h2>🔢 要把大象放冰箱总共分几步</h2>
<ol><li>🚪 把冰箱门打开</li><li>🐘 把大象放进去</li><li>🔒 把冰箱门关上</li>
</ol>2. 无序列表 (<ul>)
无序列表是无顺序或不侧重顺序的列表。
示例代码
<h2>🌆 我想去的几个城市</h2>
<ul><li>成都</li><li>上海</li><li>西安</li><li>武汉</li>
</ul>3. 列表嵌套
列表中的某项内容，又包含一个列表。
示例代码
<h2>🗺️ 我想去的几个城市</h2>
<ul><li>成都</li><li><span>上海</span><ul><li>外滩</li><li>杜莎夫人蜡像馆</li><li><a href="https://www.opg.cn/">东方明珠</a></li><li>迪士尼乐园</li></ul></li><li>西安</li><li>武汉</li>
</ul>⚠️注意点
-
<li>标签最好写在ul或ol中，不要单独使用。
4. 自定义列表 (<dl>)
自定义列表是一个包含术语名称以及术语描述的列表。
示例代码
<h2>📚 如何高效的学习？</h2>
<dl><dt>做好笔记</dt><dd>笔记是我们以后复习的一个抓手</dd><dd>笔记可以是电子版，也可以是纸质版</dd><dt>多加练习</dt><dd>只有敲出来的代码，才是自己的</dd><dt>别怕出错</dt><dd>错很正常，改正后并记住，就是经验</dd>
</dl>📓总结
-
HTML 提供了三种主要的列表类型：有序列表、无序列表和自定义列表。
-
使用
<ol>创建有序列表，使用<ul>创建无序列表，使用<dl>创建自定义列表。 -
列表可以嵌套使用，增强列表的层次感和组织性。
-
自定义列表适合用于术语和描述的展示。
八、表格
表格基本结构 🏗️
一个完整的表格由以下四部分组成：
-
表格标题 (
<caption>) 📑 -
表格头部 (
<thead>) 👤 -
表格主体 (
<tbody>) 👥 -
表格脚注 (
<tfoot>) 👣
示例代码 💻
<table><caption>📊 学生信息</caption><thead><tr><th>姓名</th><th>性别</th><th>年龄</th><th>民族</th><th>政治面貌</th></tr></thead><tbody><tr><td>张三</td><td>男</td><td>18</td><td>汉族</td><td>团员</td></tr><tr><td>李四</td><td>女</td><td>20</td><td>满族</td><td>群众</td></tr><tr><td>王五</td><td>男</td><td>19</td><td>回族</td><td>党员</td></tr><tr><td>赵六</td><td>女</td><td>21</td><td>壮族</td><td>团员</td></tr></tbody><tfoot><tr><td colspan="5">共计：4人</td></tr></tfoot>
</table>表格涉及的标签 🏷️
| 标签名 | 标签语义 | 常用属性 | 单/双标签 |
|---|---|---|---|
table | 表格 | width, height, border, cellspacing | 双 |
caption | 表格标题 | 双 | |
thead | 表格头部 | height, align, valign | 双 |
tbody | 表格主体 | 常用属性与 thead 相同 | 双 |
tfoot | 表格脚注 | 常用属性与 thead 相同 | 双 |
tr | 行 | 常用属性与 thead 相同 | 双 |
th | 表头单元格 | width, height, align, valign, rowspan, colspan | 双 |
td | 普通单元格 | width, height, align, valign, rowspan, colspan | 双 |
常用属性 🎨
| 标签名 | 标签语义 | 常用属性 | 单/双标签 |
|---|---|---|---|
table | 表格 | width, height, border, cellspacing | 双 |
thead | 表格头部 | height, align, valign | 双 |
示例代码 💻
<table width="100%" border="1" cellspacing="0"><thead><tr align="center" valign="middle"><th>姓名</th><th>性别</th><th>年龄</th><th>民族</th><th>政治面貌</th></tr></thead><tbody><tr><td>张三</td><td>男</td><td>18</td><td>汉族</td><td>团员</td></tr><!-- 更多行 --></tbody>
</table>常用标签补充 🔖
| 标签名 | 标签含义 | 单/双标签 |
|---|---|---|
br | 换行 | 单 |
hr | 分隔 | 单 |
pre | 按原文显示（一般用于在页面中嵌入大段代码） | 双 |
注意点 ⚠️
1.不要用 <br> 来增加文本之间的行间隔，应使用 CSS margin 属性。
2.<hr> 的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用 CSS 完成。
总结 📝
-
HTML 表格由标题、头部、主体和脚注四部分组成。
-
使用
<table>,<caption>,<thead>,<tbody>,<tfoot>,<tr>,<th>,<td>等标签创建表格。 -
表格的样式和布局可以通过 CSS 控制。
-
常用标签如
<br>,<hr>,<pre>用于页面布局和文本显示。
九、表单
1. 基本结构 🏗️
表单 (<form>) 📋
-
action: 指定表单提交地址（与后端人员沟通确定）。
-
target: 控制表单提交后如何打开页面，常用值：
-
_self: 在本窗口打开。 -
_blank: 在新窗口打开。
-
-
method: 控制表单的提交方式，暂时只需了解，在后续 Ajax 课程中会详细讲解。
输入框 (<input>) ⌨️
-
type: 设置输入框的类型，常用值
text表示普通文本。 -
name: 指定提交数据的名字（需与后端人员沟通后确定）。
按钮 (<button>) 🔘
-
本小节暂不涉及。
2. 常用表单控件 🛠️
文本输入框 📄
<input type="text">-
name: 数据的名称。
-
value: 输入框的默认输入值。
-
maxlength: 输入框最大可输入长度。
密码输入框 🔐
<input type="password">-
name: 数据的名称。
-
value: 输入框的默认输入值（一般不用，无意义）。
-
maxlength: 输入框最大可输入长度。
单选框 📍
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男-
name: 数据的名称，多个 radio 的 name 属性值要保持一致。
-
value: 提交的数据值。
-
checked: 默认选中。
复选框 📌
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男-
name: 数据的名称。
-
value: 提交的数据值。
-
checked: 默认选中。
隐藏域 🙈
<input type="hidden" name="tag" value="100">-
用户不可见的输入区域，用于提交表单时携带一些固定数据。
提交按钮 🔔
<input type="submit" value="点我提交表单">
<button>点我提交表单</button>-
注意：
-
button标签type属性的默认值是submit。 -
button不要指定name属性。 -
input标签编写的按钮，使用value属性指定按钮文字。
-
重置按钮 🔄
<input type="reset" value="点我重置">
<button type="reset">点我重置</button>-
注意：
-
button不要指定name属性。 -
input标签编写的按钮，使用value属性指定按钮文字。
-
普通按钮 🔘
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>-
注意：普通按钮的
type值为button，若不写type值是submit会引起表单的提交。
文本域 📝
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>-
rows: 指定默认显示的行数，影响文本域的高度。
-
cols: 指定默认显示的列数，影响文本域的宽度。
下拉框 📊
<select name="from"><option value="黑">黑龙江</option><option value="琼">海南</option><option value="粤">广东</option><option value="桂" selected>广西</option>
</select>-
name: 指定数据的名称。
-
option value: 提交的数据值，如果没有
value属性，提交的数据是option中间的文字；如果设置了value属性，提交的数据就是value的值（建议设置value属性）。 -
option selected: 默认选中。
3. 禁用表单控件 🚫
给表单控件的标签设置 disabled 即可禁用表单控件。
<input disabled>
<textarea disabled></textarea>
<button disabled></button>
<select disabled></select>4. label 标签 🏷️
label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
<label for="zhanghu">用户名：</label>
<input id="zhanghu" type="text" name="account" maxlength="20">-
for: 与表单控件的
id相对应。 -
注意：把表单控件套在
label标签的里面。
5. fieldset 与 legend 的使用 📚
fieldset 可以为表单控件分组，legend 标签是分组的标题。
<fieldset><legend>个人信息</legend><label for="zhanghu">用户名：</label><input id="zhanghu" type="text" name="account" maxlength="10"><br><label for="mima">密码：</label><input id="mima" type="password" name="pwd" maxlength="6"><br><label>性别：</label><input type="radio" name="gender" value="male" id="nan">男<input type="radio" name="gender" value="female" id="nv">女
</fieldset>总结 📚
-
表单控件用于收集用户输入的数据。
-
使用
<input>,<textarea>,<select>,<button>等标签创建表单控件。 -
表单控件的样式和布局可以通过 CSS 控制。
-
label标签用于增强表单控件的可访问性。 -
fieldset和legend用于对表单控件进行分组。
Win+v打开历史剪切板
🖼️ 十、框架标签 <iframe>
📌 功能与语义
-
功能：
-
<iframe>是 HTML 中的 内联框架标签，用于在当前网页中嵌入另一个网页或其他资源文件。 -
可以用来展示广告、视频、地图、外部页面等内容。
-
-
语义说明：
-
英文全称：inline frame，即“内联框架”。
-
属于双标签，必须有开始和结束标签（或使用自闭合写法）。
-
⚙️ 常用属性
| 属性名 | 说明 |
|---|---|
src | 设置要嵌入的页面地址（必填项）。 |
name | 定义框架名称，常与超链接的 target 属性配合使用。 |
width | 设置框架宽度（可为像素值或百分比）。 |
height | 设置框架高度（可为像素值或百分比）。 |
frameborder | 是否显示边框，取值为 0（无边框）或 1（有边框）。 |
✅ 推荐使用
frameborder="0"来去除默认边框，提升美观性。
💡 实际应用场景
1. 嵌入广告
-
将广告代码或广告页面通过
<iframe>引入到网页中。
2. 与超链接或表单的 target 配合
-
利用
name和target属性实现在指定框架中加载新内容。 -
示例：
<a href="demo02.html" target="frame">点击打开</a> <iframe name="frame"></iframe>
🧪 示例代码
<iframe src="https://demo.com" width="400" height="300" frameborder="0">
</iframe>🌐 此代码将在网页中嵌入一个宽度为 600px、高度为 400px 的网页窗口，并隐藏边框。
✅ 总结一句话：
<iframe>标签是网页中实现内容嵌套展示的重要工具，广泛应用于广告展示、跨域内容引入、模块化布局等场景。
十一、HTML 实体🌐
🔍 什么是 HTML 实体？
-
定义：
-
在 HTML 中，某些字符具有特殊含义（如
<、>、&等），不能直接在代码中使用。 -
如果想显示这些特殊字符，必须使用一种特殊的表示方式，这种表示方式就是 HTML 实体（HTML Entity）。
-
-
使用场景：
-
当你想让浏览器正确显示某些特殊符号时（例如小于号、版权符号等），就要使用 HTML 实体。
-
-
组成结构：
-
以
&开头 -
接实体名称（如
lt表示小于号）或#+ 数字编号（如<） -
以分号;结尾
✅ 示例：
-
命名实体：
< -
数字实体：
<
-
-
📚 常见 HTML 实体对照表
| 描述 | 实体名称 | 实体编号 | 示例展示 |
|---|---|---|---|
| 空格 | |||
| 小于号 | < | < | < |
| 大于号 | > | > | > |
| 和号 / 与符号 | & | & | & |
| 双引号 | " | " | " |
| 反引号 / 撇号 | ´ | ´ | ´ |
| 分（cent） | ¢ | ¢ | ¢ |
| 英镑（pound） | £ | £ | £ |
| 日元 / 人民币（yen） | ¥ | ¥ | ¥ |
| 欧元（euro） | € | € | € |
| 版权符号 | © | © | © |
| 注册商标 | ® | ® | ® |
| 商标 / 未注册商标 | ™ | ™ | ™ |
| 乘号 | × | × | × |
| 除号 | ÷ | ÷ | ÷ |
💡 小贴士：
-
使用命名实体更便于记忆，如
<。 -
使用数字实体更通用，适用于没有命名的字符，如
€。 -
实体对大小写敏感，请注意书写格式是否正确。
十二、全局属性
📚 常用的全局属性
| 属性名 | 含义 |
|---|---|
| id | 🔍 给标签指定唯一标识，注意：id 是不能重复的。 🌟 作用：可以让 label 标签与表单控件相关联；也可以与 CSS、JavaScript 配合使用。 ⚠️ 注意：不能在以下 HTML 元素中使用： <head>、<html>、<meta>、<script>、<style>、<title>。 |
| class | 🏷️ 给标签指定类名，随后通过 CSS 就可以给标签设置样式。 |
| style | 🎨 给标签设置 CSS 样式。 |
| dir | ⬅️➡️ 内容的方向，值: ltr、rtl。 ⚠️ 注意：不能在以下 HTML 元素中使用： <head>、<html>、<meta>、<script>、<style>、<title>。 |
| title | 💬 给标签设置一个文字提示，一般超链接和图片用得比较多。 |
| lang | 🌐 给标签指定语言，具体规范和可选值请参考【10. HTML 设置语言】。 ⚠️ 注意：不能在以下 HTML 元素中使用： <head>、<html>、<meta>、<script>、<style>、<title>。 |
十三、了解meta
🧾 <meta> 标签常用功能归纳
| 功能 | 代码示例 | 说明 |
|---|---|---|
| 🔤 配置字符编码 | <meta charset="utf-8"> | 设置网页使用 UTF-8 编码格式，避免乱码。 |
| 🖥️ IE 浏览器兼容性配置 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | 让 IE 浏览器以最高版本（Edge 模式）运行。 |
| 📱 移动端适配配置 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 适配移动端设备，控制视口宽度和缩放比例。 |
| 🔑 配置网页关键字 | <meta name="keywords" content="关键词1,关键词2,...（8-12个）"> | 帮助搜索引擎识别网页主题关键词。 |
| 📝 配置网页描述信息 | <meta name="description" content="简短描述（建议80字以内）"> | 提供给搜索引擎作为搜索结果中的摘要显示。 |
| 🕵️♂️ 控制搜索引擎爬虫行为 | <meta name="robots" content="index,follow"> | 控制是否允许搜索引擎索引页面或跟随链接。 常见值：index, noindex, follow, nofollow, all, none, noarchive, nocache |
| 👤 配置网页作者信息 | <meta name="author" content="tony"> | 标注网页开发者或作者名称。 |
| 🛠️ 配置网页生成工具 | <meta name="generator" content="Visual Studio Code"> | 表明网页使用的开发工具。 |
| © 配置网页版权信息 | <meta name="copyright" content="2023-2027©版权所有"> | 标注网页的版权归属信息。 |
| ⏳ 配置网页自动刷新 | <meta http-equiv="refresh" content="10;url=http://www.baidu.com"> | 页面在10秒后自动跳转到指定网址。 |
💡 常见 robots 属性值说明
| 值 | 含义 |
|---|---|
index | 允许搜索引擎索引该页面 |
noindex | 不允许搜索引擎索引该页面 |
follow | 允许搜索引擎跟随页面上的链接 |
nofollow | 不允许搜索引擎跟随页面上的链接 |
all | 等同于 index, follow |
none | 等同于 noindex, nofollow |
noarchive | 不允许搜索引擎缓存该页面内容 |
nocache | 同 noarchive，用于旧版浏览器兼容 |
✅ 总结一句话：
<meta>标签虽然不直接显示在网页上，但对 SEO、浏览器兼容性、移动端适配等都非常重要，是 HTML 文档中不可或缺的一部分。