共计 17028 个字符，预计需要花费 43 分钟才能阅读完成。
1. HTML 入门
1.1. HTML / CSS / JavaScript 概述
HTML 主要用于网页主体结构的搭建
CSS 主要用于页面元素美化
JavaScript 主要用于页面元素的动态处理
1.2. HTML 概述
HTML5 是什么？
HTML5 是 超文本标记语言（HyperText Markup Language）的第五个主要版本。这是一种专门用来创建网页的编程语言。你可以把它想象成一种特殊的“说明书”，它告诉电脑浏览器如何排列和展示网页上的文字、图片、视频、链接等各种内容。
HTML5 的特点与优势
- 现代化与兼容性：HTML5 是在 HTML4.01 的基础上进行了重大升级，旨在满足现代互联网的需求。它不仅保留了 HTML4 中有效的部分，还引入了许多新的功能和改进，确保网页能在不同类型的设备（如桌面电脑、平板、手机等）上顺畅显示，并提供一致的用户体验。
- 多媒体支持 ：HTML5 的一大亮点是直接支持多媒体内容，如音频（
标签）和视频（标签），无需借助外部插件（如 Flash）。这意味着开发者可以直接在网页上嵌入音频和视频，用户无需安装额外软件就能观看和收听。 - 绘图与动画 ：HTML5 引入了SVG（Scalable Vector Graphics，可缩放矢量图形） 的支持。SVG 是一种基于 XML 的矢量图形格式，可以创建高质量的矢量图形、图表、动画等，并且这些图形可以无损缩放，非常适合响应式设计和高清显示。此外，HTML5 还支持使用
标签进行动态绘图和复杂图形渲染，为游戏、数据可视化等交互式应用提供了基础。 - 增强的表单功能：HTML5 对表单控件进行了扩展，提供了更丰富的输入类型（如日期选择器、颜色选择器等）、内置验证机制，以及更方便的数据绑定，使得网页表单的创建和使用更加便捷、用户友好。
- 更好的结构化：HTML5 引入了新的语义化标签，如
- 离线存储与应用程序缓存：HTML5 支持本地存储（如 localStorage 和 sessionStorage）以及应用程序缓存，使得网页应用可以在用户离线时继续工作，或者在下次访问时更快地加载资源，提升了网页应用的性能和可用性。
- API 扩展：HTML5 提供了一系列 JavaScript API（应用程序编程接口），如 Geolocation（地理位置）、Web Workers（后台线程）、Web Sockets（双向通信）等，极大地扩展了网页的功能，使开发者能够创建更接近原生应用体验的网页应用。
总结
HTML5 是构建现代网页和 Web 应用的关键工具，它通过一系列新特性和改进，使得网页不仅能更好地展示文本和图像，还能直接处理多媒体、创建交互式图形、实现复杂的前端逻辑，并具备更好的设备兼容性和离线能力。对于初学者来说，学习 HTML5 意味着掌握创建丰富、动态、响应式网页的基础技能，是进入 Web 开发领域的第一步。
1.3. 标记语言
- 标记语言概述
标记语言是一种特定类型的计算机语言，它使用一系列的标签（tag）来标记文本、图像、多媒体等内容，以便指示其结构、语义、样式或行为。这些标签是预定义的关键字，通常用尖括号 和 > 包裹起来，用来为文档或数据赋予额外的意义和指示如何处理这些信息。与编程语言不同，标记语言不涉及复杂的程序逻辑、变量赋值、条件判断、循环结构、函数调用等概念，其重点在于描述和组织内容的层次结构以及与之相关的元数据。
- 代码示例
- 双标签（成对标签）
双标签，又称成对标签，由一对开始标签和结束标签构成，分别表示一个元素的开始和结束。例如：
HTML is a very popular front-end technology.
在这个例子中：
是结束标签，标志着段落的结束。- 两标签之间的文本
"HTML is a very popular front-end technology."被称为 标签体 或 元素内容，它是被
- 单标签（自闭合标签）
单标签，又称自闭合标签，由一个单独的标签表示，无需配对的结束标签。单标签通常用于那些不需要包裹内容或内容为空的元素。例如：
这里：
是单标签，用于创建一个文本输入框（text input）。由于输入框本身不包含任何内部文本内容，所以它以自封闭形式表示。type="text"和name="username"是 属性 ，它们提供了关于输入框特性和识别信息。属性总是出现在开始标签内，并以属性名 ="属性值"的格式书写。
属性是标签的一部分，用于向元素添加附加信息或设置特定的行为参数。属性通常位于开始标签内，紧随标签名之后，并用等号 = 连接属性名和属性值。属性值通常被引号包围（既可以是单引号 ' 也可以是双引号 "），但某些情况下，当属性值仅包含字母、数字和连字符且无空格时，引号可以省略。例如：
show detailhref是属性名，表示超链接的 指向目标（Hypertext Reference）。"http://www.xxx.com"是属性值，指定了链接所要跳转到的具体网页地址。
综上所述，标记语言如 HTML 通过标签、标签体和属性来构建结构化的文档，这些文档能够被浏览器等用户代理解析并呈现为可视化的网页。HTML 标签定义了文档的各个组成部分及其相互关系，属性则提供了进一步的详细信息和指令，使文档具有丰富的交互性和语义表达能力。尽管 HTML 不具备传统编程语言的复杂逻辑控制能力，但它在网页开发中扮演着至关重要的角色，与 CSS（层叠样式表）和 JavaScript（脚本语言）共同构成了现代 Web 前端技术的基础。
1.4. HTML 结构
1. 文档声明（Doctype）
文档声明是 HTML 文件的首行，用于告知浏览器当前文档所遵循的 HTML 规范或版本。这一声明对于浏览器正确解析和渲染页面至关重要。
这个声明包含了详细的 DTD（Document Type Definition，文档类型定义）信息，指示文档遵循 HTML 4.01 Transitional 标准。其中，“-//W3C//DTD HTML 4.01 Transitional//EN”指定了 DTD 的名称和类型，后面的 URL 则是该 DTD 的官方地址。HTML4 有多个子版本（如 Strict、Transitional 等），分别对应不同的严格程度和兼容性要求。
HTML5 的文档声明简化为一行，只包含一个简短的声明语句，即。这种简洁的形式易于记忆和书写，同时适用于现代浏览器对 HTML5 标准的支持。
目前，由于 HTML5 提供了更强大的功能、更好的跨平台兼容性和更友好的开发者体验，已经成为 Web 开发领域的主流选择。因此，新开发的 HTML 文档通常使用 HTML5 的文档声明。
2. 根标签（html）
标签作为整个 HTML 文档的根元素，是所有其他标签的容器。一个典型的 HTML 文档结构始于 标签，并以 结束，如下所示：
所有其他 HTML 元素，包括 和，都必须嵌套在 标签之内，形成文档的完整结构。
3. 头部元素（head）
标签定义了文档的头部，其中包含了一系列非可视化信息，这些信息对于浏览器和搜索引擎等解析工具来说十分重要，但并不会直接呈现在网页的可见区域内。常见的头部元素包括：
：用于嵌入或链接 JavaScript 代码，提供网页的动态交互功能。
@import导入外部样式表。：用于链接外部资源，如 CSS 文件、图标（favicon）、预加载资源等。：提供元数据信息，如字符编码、网页描述、关键词、viewport 设置等，影响浏览器对文档的处理和搜索引擎的索引。
例如：
网页标题
4. 主体元素（body）
标签包含了网页的所有可见内容，即用户在浏览器窗口中实际看到和交互的部分。包括文本、图片、视频、音频、表格、列表、表单、链接等各类 HTML 元素均应在 标签内进行定义。
例如：
5. 注释
HTML 注释用于在源代码中插入解释性文本，对代码进行说明，方便开发者阅读和理解。注释不会被浏览器解析和显示，对网页的布局和功能没有影响。
注释的写法如下：
在实际开发中，注释常用于记录代码目的、功能、作者、修改日期等信息，或者暂时屏蔽某段代码以进行调试。保持良好的注释习惯有助于代码维护和团队协作。
1.5. HTML 入门
- 准备一个纯文本文件, 拓展名为 html
- 使用记事本打开网页, 在网页内开发代码
我的第一个网页
hello html!!!
- 使用浏览器打开文件, 查看显示的内容
1.6. HTML 概念词汇解释 标签
标签
在 HTML（HyperText Markup Language，超文本标记语言）中，标签 是构成其语法的基本单元，它们由一对尖括号 和 > 包裹，用来指示网页内容的结构、意义和呈现方式。标签分为两类：
- 双标签：双标签由一个开始标签和一个结束标签组成，它们以相同的名字但结束标签前多了一个斜杠
/来表示。例如：
这是一个段落。
在这里，
是开始标签，
是结束标签，它们共同定义了一个段落元素。
- 单标签：单标签只有开始部分，没有对应的结束部分，通常用来表示无需闭合的内容或状态。单标签通常以一个斜杠
/结尾，但有时也可以省略斜杠，仅由一个标签符号表示。例如：
或简写为
这个标签表示一个换行符。
属性
属性 是 HTML 标签的一部分，它们提供额外的信息来修饰或配置标签的行为、样式或与外部资源的关联。属性总是出现在开始标签之内，并以键值对的形式存在，即由属性名和等号后紧跟的属性值构成。例如：
访问示例网站href属性定义了链接的目标 URL，其值为"https://www.example.com"。target属性指定了链接在何处打开，其值_blank表示在新窗口或标签页中打开链接。
文本
文本 是指在 HTML 双标签之间直接书写的文字内容、空格、换行以及其他可见字符。文本是网页中向用户传达信息的核心部分。例如：
欢迎来到我们的网站
这里的文本是 "欢迎来到我们的网站"，它位于
开始标签和相应的 结束标签之间，表示一个一级标题。
元素
元素 是经过浏览器解析后的一个完整逻辑实体，它包括一个标签（可能是单标签或双标签对）、可能存在的属性，以及标签内部包含的所有内容（如文本、嵌套的其他元素等）。一个元素可以视为 HTML 文档结构和内容的基本构建块。对于双标签：
这是一段文本。
![描述性文本]()
上述代码片段中，
和 ![]()
class、src 和 alt），并可能包含文本或其他元素。整个
标签及其内部所有内容构成了一个 div 元素；
标签及其包含的文本构成了一个 p 元素；而 ![]()
img 元素。这些元素共同组成了 HTML 文档的结构，浏览器根据这些元素的类型和属性来决定如何渲染和展示网页内容。
1.7. HTML 语法规则
1. 根标签有且只能有一个
每个 HTML 文档必须有一个根元素，它作为所有其他元素的顶层容器。这个根元素就是
2. 无论是双标签还是单标签都需要正确关闭
- 双标签 必须成对出现，每个开始标签
这是段落内容。
- 单标签 虽然不需要单独的结束标签，但通常以
/ 符号自我闭合。例如：
或者简写为
3. 标签可以嵌套但不能交叉嵌套
HTML 标签可以相互嵌套，即一个标签可以作为另一个标签的内容。嵌套时，必须保持正确的层级关系，每个开始标签必须有相应的结束标签，并且嵌套顺序应为“先开后关”，即内层标签完全包含在它的外层标签之内。不允许标签交叉，例如：
- 项目一
- 项目二
- 项目一
项目二
4. 注释语法为
在 HTML 中添加注释以解释代码或临时屏蔽某些代码片段，使用
5. 属性必须有值，值必须加引号，H5 中属性名和值相同时可以省略属性值
HTML 标签的属性通常需要一个对应的值来指定其具体设置。属性值应当放在等号 = 后面，并用单引号 ' 或双引号 " 包围。在 HTML5 中，如果属性名和属性值相同，可以省略属性值，仅保留属性名。例如：
6. HTML 中不严格区分字符串使用单双引号
在为 HTML 属性赋值时，既可以使用单引号 '，也可以使用双引号 " 来包裹字符串值，两者在功能上是等价的。选择使用哪一种取决于个人偏好或团队编码规范，但同一属性的值必须使用同一种引号开始和结束：
![描述文字]()
![描述文字]()
7. HTML 标签不严格区分大小写，但是不能大小写混用
HTML 标签名、属性名对大小写不敏感，这意味着
、
、
都会被浏览器识别为同一个标签。尽管如此，为了代码的一致性和可读性，建议始终使用小写。但是，不推荐在同一标签或属性名称中混合使用大小写，如
或 claSs，因为这样会降低代码的清晰度和易维护性。
8. HTML 中不允许自定义标签名，强行自定义则无效
HTML 标准定义了一系列预设的标签，开发者必须使用这些已知标签来构建网页结构。自创的标签名（如
1.8. VSCode 安装使用
Download Visual Studio Code - Mac, Linux, Windows
推荐插件
- Auto Rename Tag 自动修改标签对插件
- Chinese Language Pack 汉化包
- HTML CSS Support HTML CSS 支持
- Intellij IDEA Keybindings IDEA 快捷键支持
- Live Server 实时加载功能的小型服务器
- open in browser 通过浏览器打开当前文件的插件
- Prettier-Code formatter 代码美化格式化插件
- Vetur VScode 中的 Vue 工具插件
- vscode-icons 文件显示图标插件
- Vue 3 snipptes 生成 VUE 模板插件
- Vue language Features Vue3 语言特征插件
1.9. 在线帮助文档
w3school 在线教程
2. HTML 常见标签
2.1. 标题标签
标题标签一般用于在页面上定义一些标题性的内容, 如新闻标题, 文章标题等, 有 h1 到 h6 六级标题
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
2.2. 段落标签
段落标签一般用于定义一些在页面上要显示的大段文字, 多个段落标签之间实现自动分段的效果
记者从工信部了解到，近年来我国算力产业规模快速增长，年增长率近 30%，算力规模排名全球第二。
工信部统计显示，截至去年底，我国算力总规模达到 180 百亿亿次浮点运算 / 秒，存力总规模超过 1000EB（1 万亿 GB）。国家枢纽节点间的网络单向时延降低到 20 毫秒以内，算力核心产业规模达到 1.8 万亿元。中国信息通信研究院测算，算力每投入 1 元，将带动 3 至 4 元的 GDP 经济增长。
近年来，我国算力基础设施发展成效显著，梯次优化的算力供给体系初步构建，算力基础设施的综合能力显著提升。当前，算力正朝智能敏捷、绿色低碳、安全可靠方向发展。
2.3. 换行标签
单纯实现换行的 标签是 br,如果想添加分隔线, 可以使用hr 标签
换行标签：
分割线标签：
工信部统计显示，截至去年底，我国算力总规模达到 180 百亿亿次浮点运算 / 秒，存力总规模超过 1000EB（1 万亿 GB）。
国家枢纽节点间的网络单向时延降低到 20 毫秒以内，算力核心产业规模达到 1.8 万亿元。
中国信息通信研究院测算，算力每投入 1 元，将带动 3 至 4 元的 GDP 经济增长。
2.4. 列表标签
2.4.1. 有序列表
有序列表
分条列项展示数据的标签, 其每一项前面的符号带有顺序特征
- 列表标签 ol
- 列表项标签 li
- JAVA
- 前端
- 大数据
2.4.2. 无序列表
无序列表
分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征
- 列表标签 ul
- 列表项标签 li
- JAVASE
- JAVAEE
- 数据库
2.4.3. 嵌套列表
列表和列表之前可以签到, 实现某一项内容详细展示
-
JAVA
- JAVASE
- JAVAEE
- 数据库
- 前端
- 大数据
2.5. 超链接标签
点击后带有链接跳转的标签 , 也叫作 a 标签
- href 属性 用于定义连接
-
- href 中可以使用绝对路径, 以 / 开头, 始终以一个固定路径作为基准路径作为出发点
- href 中也可以使用相对路径, 不以 / 开头, 以当前文件所在路径为出发点
- href 中也可以定义完整的 URL
- target 属性 用于定义打开的方式
-
- _blank 在新窗口中打开目标资源
- _self 在当前窗口中打开目标资源
相对路径本地资源连接
绝对路径本地资源连接
外部资源链接
2.6. 多媒体标签
2.6.1. 图片标签![]()
img(重点) 图片标签, 用于在页面上引入图片
- src 属性：用于定义图片的连接
- title 属性：用于定义鼠标悬停时显示的文字
- alt 属性：用于定义图片加载失败时显示的提示文字
![尚硅谷 logo]( "尚硅谷")
2.6.2. 音频标签
用于在页面上引入一段声音
- src 属性：用于定义目标声音资源
- autoplay 属性：用于控制打开页面时是否自动播放
- controls 属性：用于控制是否展示控制面板
- loop 属性：用于控制是否进行循环播放
2.7. 表格标签
(重点)
常规表格
- table 标签：代表表格
- thead 标签：代表表头 可以省略不写
- tbody 标签：代表表体 可以省略不写
- tfoot 标签：代表表尾 可以省略不写
- tr 标签：代表一行
- td 标签：代表行内的一格
- th 标签：自带加粗和居中效果的 td
2.7.1. 基本操作
员工技能竞赛评分表
排名
姓名
分数
1
张小明
100
2
李小东
99
3
王小虎
98
2.7.2. 单元格上下跨行
通过 td 的 rowspan 属性实现上下跨行
员工技能竞赛评分表
排名
姓名
分数
备注
1
张小明
100
前三名升职加薪
2
李小东
99
3
王小虎
98
2.7.3. 单元格左右跨行
通过 td 的 colspan 属性实现左右的跨列
员工技能竞赛评分表
排名
姓名
分数
备注
1
张小明
100
前三名升职加薪
2
李小东
99
3
王小虎
98
总人数
2000
平均分
90
及格率
80%
2.8. 表单标签
标签是表单的容器，定义了一个表单域，其中包含了供用户填写和交互的各种表单元素。form 标签具有以下重要属性：
action：此属性指定表单数据提交到的服务器地址（URL）。当用户提交表单时，浏览器会将表单内所有相关数据发送到这个指定的地址进行处理。method：此属性决定了表单数据提交的方式，有两种常见值：
-
get：数据以 URL 查询字符串的形式附加到提交地址后面。查询字符串以问号 ? 开始，多个参数间用 & 分隔。由于 URL 长度有限制且数据会显示在地址栏中，因此不适合提交大量或敏感信息。post：数据以 HTTP 请求体的形式发送，不会在 URL 中显示。这种方式适用于提交大量数据或包含敏感信息的表单，因为数据不在 URL 中暴露，且理论上能传输更大的数据量。
2. input 标签
input 标签通过 type 属性定义其类型，常见的类型包括：
text：创建一个单行文本输入框，用户可以在此输入文本信息。password：创建一个密码输入框，用户输入的字符将以星号或圆点替代显示，保护密码隐私。submit：创建一个提交按钮，点击后触发表单提交，将表单数据发送到指定的action URL。reset：创建一个重置按钮，点击后将表单所有输入字段恢复到初始状态（通常是清除用户已输入的内容）。
此外，input 标签还具有重要的 name 属性：
name：为表单字段指定一个名称，该名称作为提交数据的键，其对应的用户输入值作为提交数据的值。服务器端通过这些名称来识别和处理接收到的数据。
2.8.1. 单行文本框
单行文本框，input 中的 type 属性为 "text"
个性签名：
2.8.2. 密码框
密码框，input 中的 type 属性为 "password"
密码：
2.8.3. 单选框
- 单选框分组与互斥： 这里的两个单选框都有 name="sex"，这意味着它们属于同一组，用来让用户选择性别。因为是同一组，所以它们之间是互斥的，也就是说，用户在同一时间只能选择其中的一个（不能同时选“男”和“女”）。
- 提交表单时的信息传递： 假设用户选择了“女”单选框并提交表单，浏览器会将选中的单选框的信息发送给服务器。具体来说，会将单选框的 name（这里是“sex”）和 value（这里是选中的“女”对应的“summer”）组合成一个键值对，即 sex="summer"。服务器通过这个键值对就能知道用户选择了哪种性别。
- 设置默认选中项： 在代码中， 女 这个单选框含有 checked="checked"，这表示当网页刚打开时，这个单选框（“女”）已经被默认选中了。用户可以直接看到它被选中，也可以选择取消并选另一个选项。
- 属性值的简写： 在这里，checked="checked" 可以简化为 checked，因为属性名（checked）和属性值（checked）相同。所以，上述代码中的 checked="checked" 改为 checked 后，效果不变，依然表示该单选框默认被选中。
你的性别是：男
女
2.8.4. 复选框
你喜欢的球队是：
巴西
德国
法国
中国
意大利
2.8.5. 下拉框
你喜欢的运动是：
- 下拉列表用到了两种标签：
-
- 标签：这是一个 HTML 元素，用于创建一个下拉列表（也称为选择框），用户可以在其中从多个预定义选项中进行选择。整个下拉列表由这个标签定义。
- 标签：每个
- name 属性在 select 标签中设置：
-
- name="interesting"：在
- value 属性在 option 标签中设置：
-
- 如 value="swimming"、value="running" 等：每个
- option 标签的标签体是显示出来给用户看的：
-
- 在
- 提交到服务器的是 value 属性的值：
-
- 当用户在下拉列表中做出选择并提交表单时，浏览器将发送
- 通过在 option 标签中设置 selected="selected" 属性实现默认选中的效果：
-
- 在 这一行中，selected="selected" 属性指示浏览器在页面加载时，自动选择这个选项作为下拉列表的初始状态。用户初次看到这个下拉框时，“射击”将是已经突出显示且被选中的项目。如果没有指定这个属性，通常第一个选项会被默认选中；如果有多个 selected 属性出现，则根据 HTML 规范，最后一个被解析的 selected 选项生效。
2.8.6. 按钮
或
或
或
- 普通按钮 (
- 显示为“普通按钮”，点击后无内置效果。
- 需要通过 JavaScript 添加点击事件处理函数来赋予其具体功能（如执行某个操作、更新页面等）。
- 重置按钮 (
- 显示为“重置按钮”，点击后会将所在表单的所有表单项恢复到初始状态（如默认值或空白）。
- 提交按钮 (
- 显示为“提交按钮”，点击后会将所在表单的所有有 name 属性的表单项的值发送到服务器（URL 由表单的 action 属性指定），通常用于数据提交和处理。
2.8.7. 隐藏域
通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户 id 等等。
2.8.8. 多行文本框
自我介绍：
多行文本框
没有 value 属性：
- 与其他表单控件（如
value 属性。这是因为
设置默认值：
- 要为
在这个例子中，当页面加载时，文本区域会自动显示“我是默认显示的自我介绍内容...”。用户可以在此基础上进行修改，或者完全删除并输入自己的内容。
2.8.9. 文本标签
头像:
- 作用：让用户从本地设备选择并上传文件到网页。
- 示例：
- 功能：
-
- 点击后弹出文件选择对话框。
- 用户选择文件后，显示所选文件名。
- 提交表单时，将所选文件发送到服务器。
- 应用场景：头像上传、文档上传、图片上传等。
2.9. 布局相关标签
标签：
- 俗称“块”，是一种通用的容器元素，用于划分页面结构，实现布局。
- 在 HTML 中， 标签没有任何特定的语义含义（不像
、
原文地址: JavaWeb–HTML&CSS
