目录
超链接标签 ：
<textarea>标签
环境搭建——Visual Studio Code
关于VScode的安装我们之前在JavaEE中提到过，没有什么难点，你也可以去网上搜搜相关教程，很快就能搞定。
我们这里主要是介绍三个你应该下载的插件，它们可以大大提升我们的编程效率：
1、Auto Rename Tag：
Auto Rename Tag 是 Visual Studio Code 中的一个插件，它提供了一项非常方便的功能，即在编辑 HTML 或 XML 文件时，自动重命名匹配的标签。
Auto Rename Tag 主要特点和用法：
-
自动重命名标签： 当我们在编辑 HTML 或 XML 文件时，如果我们修改了一个标签的名称，该插件会自动找到匹配的闭合标签，并将其名称相应地更新，以保持标签的一致性。
-
快速操作： 插件的操作非常简单。只需将光标置于要重命名的标签的任一侧，然后修改标签的名称。插件将自动检测到变化并更新匹配的标签。
-
支持多种语言： Auto Rename Tag 不仅支持 HTML，还支持其他类似标签的语言，比如 XML。这增加了插件的适用范围，使其在多种情况下都能发挥作用。
-
可配置性： 插件具有一些配置选项，可以根据我们的喜好进行定制。我们可以在设置中找到这些选项，并根据需要进行调整。
-
提高效率： 自动重命名标签可以帮助我们更快速地进行代码编辑，特别是在进行大规模的结构性修改时。它减少了手动查找匹配标签并进行相应更改的需要。
-
适用于团队协作： 在团队协作的开发环境中，保持标签的一致性是很重要的。Auto Rename Tag 可以帮助确保不会因为手动错误而引入代码错误。
为了安装 Auto Rename Tag 插件，我们可以打开 Visual Studio Code，点击左侧的 Extensions 图标，搜索 "Auto Rename Tag"，然后点击安装。安装完成后，插件将自动生效，开始提供自动重命名标签的功能。
2、view-in-browser
"View in Browser" 是 Visual Studio Code 中的另一个常用插件，它为开发者提供了在浏览器中预览网页的便捷方式。
-
实时预览： "View in Browser" 插件允许我们通过单击一两下的方式，轻松在默认浏览器中查看当前正在编辑的 HTML 文件。这为我们提供了实时预览，使我们能够更直观地看到对代码的更改所产生的效果。
-
快捷键支持： 该插件通常支持一些常用的快捷键，比如 F1 或者右键点击文件名的上下文菜单中的 "View in Browser" 选项。这使得预览操作更加便捷。
-
多浏览器支持： 插件通常支持配置多个浏览器，以便我们可以选择在不同的浏览器中查看网页，确保在各种环境下的兼容性。
-
自定义配置： 我们通常可以根据需要进行一些配置，例如指定默认浏览器、更改预览端口等。
-
与 Live Server 集成： 有时，"View in Browser" 插件可以与其他插件（例如 Live Server）进行集成，提供更强大的功能，例如自动刷新。
为了安装 "View in Browser" 插件，我们可以打开 Visual Studio Code，点击左侧的 Extensions 图标，搜索 "View in Browser"，然后点击安装。安装完成后，我们可以在编辑 HTML 文件时使用插件提供的功能，通过预览按钮或快捷键在浏览器中查看页面。这对于我们在开发过程中及时查看页面效果非常有帮助。
具体来看，如果我们现在想要打开我们新建的网页文件：
操作略显繁琐，但是如果我们下载了View in Browser这个插件：
这样简便多了。
3、Live Server
"Live Server" 是 Visual Studio Code 中一个流行的插件，它提供了一个轻量级的本地开发服务器，用于实时预览和调试网页。
-
实时预览： "Live Server" 插件可以启动一个本地开发服务器，使我们能够在浏览器中实时预览正在编辑的网页。任何对 HTML、CSS 和 JavaScript 文件的更改都会立即在浏览器中更新，无需手动刷新页面。
-
支持动态内容： 该插件不仅支持静态网页，还能处理包含动态内容的网页。它可以监视服务器端代码（如 Node.js）的更改，并在保存文件后重新加载页面。
-
内置服务器： "Live Server" 插件使用内置的开发服务器，无需额外配置。只需右键点击 HTML 文件，选择 "Open with Live Server"，就可以启动服务器并在默认浏览器中打开网页。
-
多浏览器支持： 与 "View in Browser" 插件一样，"Live Server" 也通常支持多个浏览器，以确保在各种环境中的兼容性。
-
自定义端口： 插件允许我们自定义开发服务器的端口，以便适应特定的需求。
-
支持 HTTPS： 在需要使用 HTTPS 的情况下，"Live Server" 也通常提供了相应的选项。
为了安装 "Live Server" 插件，我们可以打开 Visual Studio Code，点击左侧的 Extensions 图标，搜索 "Live Server"，然后点击安装。安装完成后，我们可以右键点击 HTML 文件，选择 "Open with Live Server"，启动本地开发服务器，并在默认浏览器中实时预览我们的网页。这对于前端开发者来说是一个非常方便的工具，能够提高开发效率。
每次修改完都需要保存和重新刷新网页：
HTML 结构
认识 HTML 标签
回想我们原来创建一个HTML文件的方式：
记事本打开，写入我们想要展示的内容：
保存的时候重命名：
但是这和我们印象中的HTML文件不太一样，它少了“标签”，所以不是标准的.html文件。
那么一个标准的HTML文件应该有怎样的结构？
HTML 代码是由标签构成的，每个标签以 < 开始，以 > 结束。
例如，<body>hello</body> 中包含了一个 <body> 标签，它是 HTML 页面的主体部分。
- 标签名： 标签名是指标签的名称，例如上述例子中的 body。标签名通常被放置在尖括号 < > 中，用于标识标签的类型。
- 成对出现： 大部分 HTML 标签都是成对出现的，即有开始标签和结束标签。例如，<body> 是开始标签，</body> 是结束标签。标签之间的内容（在这个例子中是 "hello"）是标签包裹的内容。
- 单标签： 少数标签是单标签，它们只有一个开始标签，没有对应的结束标签。例如，<img> 标签通常用于插入图像，它是一个单标签。
- 标签内容： 在开始标签和结束标签之间的部分是标签的内容。在 <body>hello</body> 中，"hello" 是 <body> 标签的内容。
- 属性： 开始标签中的属性提供了有关标签更多信息的方法。例如， <body id="myId">hello</body> 中的 <body id="myId"> 中的 id 属性为 <body> 标签设置了一个唯一的标识符，即 "myId"。属性通常以键值对的形式存在，用于配置标签的特定属性。
HTML 文件基本结构
<!DOCTYPE html> <!-- 声明文档类型，通知浏览器使用 HTML5 解析 -->
<html> <!-- html 标签是整个 HTML 文档的根标签，包裹了所有内容 -->
<head> <!-- head 标签包含了页面的元信息和头部信息 -->
<title>第一个页面</title> <!-- title 标签定义了网页的标题，显示在浏览器标签栏或页签上 -->
<!-- 其他元信息，如字符集设置、引入外部样式表和脚本等，也可以在 head 中添加 -->
</head>
<body> <!-- body 标签包含了网页的主体内容 -->
hello world <!-- 在 body 中写的内容是页面上实际显示的部分 -->
</body>
</html>
这段 HTML 代码展示了一个简单的 HTML 文档结构：
- <!DOCTYPE html>： 这是文档类型声明，指定了 HTML 文档所使用的规范版本。在这里，html 表示使用 HTML5。
- <html> 标签： 是整个 HTML 文档的根标签，包裹了文档的全部内容。
- <head> 标签：编写页面相关的属性，包含了文档的元信息和头部信息。这些信息通常不直接呈现在页面上，但对浏览器和搜索引擎等有重要作用。
- <title> 标签： 定义了网页的标题。这个标题通常显示在浏览器的标签栏或页签上，是用户识别页面的重要标识。
- <body> 标签： 页面的内容展示信息，包含了网页的主体内容，其中的文本和其他标签定义了实际显示在页面上的内容。
这个基本结构为 HTML 文档提供了一个清晰的框架，使浏览器能够正确地解析和呈现页面。在实际开发中，我们还可以在 <head> 中添加其他元信息，比如字符集设置、引入外部样式表和脚本等，以满足具体需求。
HTML 标签层次结构：
DOM 树： HTML 文档被解析成一棵 DOM 树（文档对象模型树，Document Object Mode），这是浏览器用来表示页面结构的一种方式。
DOM 树中的每个 HTML 元素都是一个节点，节点之间形成了层次关系。
-
HTML 元素节点： 在 DOM 树中，每个 HTML 元素都是一个节点。例如，<html> 元素是整个 DOM 树的根节点。
-
父子关系： 在 HTML 标签中，包含关系体现了父子关系。比如，<html> 元素是整个文档的根，它的子节点包括 <head> 和 <body>。这两者分别是 <html> 的子节点。
-
兄弟关系： 兄弟关系是指在同一层级下的元素节点。在 <html> 元素下，<head> 和 <body> 是兄弟节点，因为它们都是 <html> 元素的直接子节点。
-
父子关系继续： 在 <head> 元素下，<title> 元素是 <head> 的子节点，形成了继续的父子关系。
-
文本节点： 文本内容也是 DOM 树的一部分，例如，在 <body> 元素下的 "hello world" 是一个文本节点。
DOM 树的示例关系：
<!DOCTYPE html>
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>
- <html> 是整个 DOM 树的根节点。
- <head> 和 <body> 是 <html> 的直接子节点。
- <title> 是 <head> 的子节点。
- 文本节点 "hello world" 是 <body> 的子节点。
- <head> 和 <body> 是 <html> 的直接子节点。
在实际开发中，我们通过 JavaScript 可以动态地操作 DOM 树，比如添加、删除、修改节点，从而实现页面的交互和动态效果。DOM 提供了一种结构化的表示，使开发者能够以编程方式访问和操纵页面的内容和结构。
现在让我们用标准的HTML文件编写格式来重新完成我们的代码：
快速生成代码框架
在IDEA中创建HTML文件并输入！后按Tab键生成代码框架是一个非常方便的功能，称为"Live Templates"。这个特定的 live template 名称是 ！， 它会生成一个简单的 HTML5文件的基本结构。
创建整个项目的步骤如下：
-
在 IntelliJ IDEA 中打开一个项目或创建一个新项目。
-
在项目导航器中找到或创建一个文件夹，右键点击并选择 "New" -> "HTML File"。
-
输入文件名，例如 xxx.html，然后按 Enter。
-
在 xxx.html 文件中，键入 ! 然后按 Tab 键。
这时候，IDEA 会自动生成一个基本的 HTML5 文件框架，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
细节解释：
-
<!DOCTYPE html>： 这是文档类型声明（Document Type Definition，DTD），指定当前文件是一个 HTML5 文件。它有助于告诉浏览器以何种规范来解析文档，确保页面能够正确渲染。
-
<html lang="en">： 在<html>标签中，lang 属性表示当前页面的语言，这里设置为 "en"，表示英语。某些浏览器可能会根据此声明提供自动翻译提示。
-
<meta charset="UTF-8">： 这个meta标签用于描述页面的字符编码方式。指定字符编码为 UTF-8，确保页面能够正确地显示多语言字符，防止中文等字符出现乱码。
改一下字符的编码方式：
输入中文：
出现乱码：
这是因为我们此时编码的时候是按照ISO编码的，但是解码的时候却是按照UTF-8解码的。 -
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 是在 HTML 中的 <meta> 元素中使用的一个重要的视口设置。这段代码实际上是在告诉浏览器如何正确显示你的网页，尤其是在移动设备上。
（1）<meta> 元素： <meta> 元素用于在 HTML 文档中嵌入元数据，提供关于文档的信息。在这里，我们使用它来配置视口的元信息。
（2）name="viewport"： 这个属性指定了要设置的元信息的类型，即视口。
（3）content="width=device-width, initial-scale=1.0"：
width=device-width： 这部分规定了视口的宽度应该等于设备的宽度。这是为了确保网页内容不会因为在不同设备上显示而变形。它将网页的宽度设置为设备的宽度，以确保在移动设备上不会出现水平滚动条。
简单来说就是，这告诉浏览器，我们的网页的宽度应该和用户设备的屏幕宽度一样。这样，用户就不需要左右滑动来看完整的网页内容，尤其是在小屏幕的手机上。initial-scale=1.0： 这部分设置了页面的初始缩放级别。1.0 表示页面不进行初始缩放，即显示的大小为未经缩放的大小。这有助于确保页面在加载时以适应设备屏幕的宽度，并提供一致的显示效果。
也就是说，这表示网页一开始的时候，不要进行缩放。页面会以原始大小展示，不会被自动调整大小。这有助于确保我们的网页在加载时就呈现出用户期望的样子。
这些设置和声明为了确保网页在各种设备和浏览器上能够正常显示，提供了一些基本的配置，是创建健壮、兼容性强的网页的基础。
补充上解释注释再来看看：
<!DOCTYPE html> <!-- DTD (文档类型定义)，用于指定当前文件是一个 HTML5 文档 -->
<html lang="en"> <!-- html 标签，表示整个 HTML 文档的根标签 -->
<head> <!-- head 标签，包含了文档的元信息和头部信息 -->
<meta charset="UTF-8">
<!--
meta 标签用于提供关于文档的元信息。
charset="UTF-8"：指定文档的字符编码为 UTF-8。
UTF-8 是一种通用的字符编码，支持多语言字符，确保在网页中正常显示各种字符。
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
meta 标签中的 viewport 属性用于控制页面在不同设备上的显示和缩放。
width=device-width：让页面宽度等于设备宽度，确保在各种设备上适应。
initial-scale=1.0：设置页面的初始缩放级别为1.0，即不进行缩放。
这个设置对于移动端开发非常重要，确保页面在各种屏幕尺寸上正常呈现。
-->
<title>Document</title>
<!--
title 标签定义了文档的标题，将显示在浏览器的标题栏或页签上。
通常，你应该将 title 设置为描述页面内容的简短、明了的文字。
-->
</head>
<body> <!-- body 标签，包含了网页的主体内容 -->
<!-- 在这里可以添加页面的实际内容 -->
</body>
</html>
HTML 常见标签
注释标签
注释在编程中扮演着关键的角色，它不会显示在界面上。
注释的主要有两个目的：提高代码的可读性和解释代码的目的。
-
注释标签： 在HTML、CSS、JavaScript等编程语言中，注释通常使用特定的标签来表示。
在HTML中，注释以 <!-- 开始，以 --> 结束；
在CSS中，使用 /* 和 */ 包裹注释；
在JavaScript中，可以使用 // 进行单行注释，或者使用 /* */ 进行多行注释。 -
快捷键： 使用 ctrl + / 快捷键是一种便捷的方式进行注释和取消注释。这个快捷键通常适用于多种编程环境，如IDEA中的Java、HTML、CSS等文件。
-
注释的原则： 注释应该遵循以下原则以确保它们对代码读者有价值：
-
与代码逻辑一致： 注释的内容应该与代码逻辑一致，能够提供额外的信息，而不仅仅是重复代码。注释应该解释代码的目的、原因、设计选择等。
-
使用中文： 在中文环境中编写代码的情况下，建议使用中文进行注释。这可以确保整个代码库的一致性，并且有助于团队成员更容易理解代码。
-
避免传递负能量： 注释应该是中立和客观的。避免在注释中表达过多主观情感或负能量。注释的目的是解释和补充代码，而不是表达个人情绪。
-
适当的注释可以大大提高代码的可维护性和可读性，尤其是在长时间不接触某段代码后需要回顾的情况下。
因为注释不会显示在页面上，我们可以通过Fn+F12来查看：
或者我们随便打开一个网页，也可以看到里面的注释：
标题标签: h1—h6
标题标签 <h1> 到 <h6> 在 HTML 中用于定义标题，它们分别表示不同级别的标题，其中 <h1> 是最高级别的标题，而 <h6> 是最低级别的标题。
标题标签的作用是给页面的不同部分添加标题，以提供结构化的信息，同时也对搜索引擎优化（SEO）有帮助。数字越小，级别越高，字体相对越大。每个级别的标题都应该根据文档结构进行嵌套使用。
请注意，HTML 的标题标签不仅仅是字体大小的调整，还反映了文档结构的层次和重要性。在正确使用标题标签的情况下，搜索引擎可以更好地理解页面的结构和内容。
段落标签: p
在 HTML 中，使用 <p> 标签来定义段落。
当我们把一段比较长的文本粘贴到 HTML 中，确保在每一段文字之间使用 <p> 标签，以便浏览器正确地识别和渲染段落。
<p>这是第一个段落的文本。</p>
<p>这是第二个段落的文本。</p>
<p>这是第三个段落的文本。</p>
例如以下文本：
在CSS中，我们通常使用像素（px）作为单位。在桌面浏览器中，1个CSS像素通常对应着电脑屏幕的1个物理像素，但实际上，CSS中的像素只是一个抽象的单位。在不同设备或环境中，CSS中的1px所代表的物理像素是不同的。在早期的移动设备中，屏幕像素密度较低，一个CSS像素等于一个屏幕物理像素。然而，随着技术的发展，移动设备的屏幕像素密度增加，例如Retina屏，其中一个CSS像素可能等于两个物理像素。
在移动端浏览器中，以及某些桌面浏览器中，window对象的devicePixelRatio属性表示设备物理像素和设备独立像素的比例。设备独立像素可以看作是CSS像素。例如，在Retina屏的iPhone上，devicePixelRatio的值为2，表示1个CSS像素相当于2个物理像素。但要注意，devicePixelRatio在不同浏览器中存在兼容性问题，因此需要谨慎使用。用户缩放页面也会影响CSS中1px所代表的物理像素，放大页面会增加，缩小页面会减少。
我们直接放进HTML文件，它会显示成一坨：
用 <p> </p> 标签改进上述代码，每个段落放到 p 标签中：
注意事项：
-
p 标签之间存在一个空隙： 在 HTML 中，<p> 标签用于定义段落，浏览器会在每个段落之间默认添加一些空白间隔，以提高文本的可读性。
-
当前的 p 标签描述的段落，前面还没有缩进： 在当前 HTML 中，段落（<p>标签）的文本通常是左对齐而不进行缩进。在未来，可以使用 CSS（层叠样式表）来设置文本的缩进和其他样式。
-
自动根据浏览器宽度来决定排版： HTML 默认会根据浏览器的宽度自动进行排版，以确保适应不同屏幕尺寸和窗口宽度。
-
html 内容首尾处的换行、空格均无效： 在 HTML 中，文本内容首尾处的换行和空格通常会被浏览器忽略，不会影响实际显示效果。
-
在 HTML 中文字之间输入的多个空格只相当于一个空格： 多个连续的空格在 HTML 中会被视为一个空格。这是因为 HTML 默认会合并多个空白字符，以保持文本在渲染时的一致性。
-
HTML 中直接输入换行不会真的换行，而是相当于一个空格： 在 HTML 中，直接输入的换行（回车）通常会被视为一个空格，而不会产生实际的换行效果。要实现换行，可以使用 <br> 标签。
这些注意事项有助于理解 HTML 文档在浏览器中的默认行为，同时也强调了 CSS 在调整排版和样式方面的重要性。
换行标签: br
换行标签 <br> 是 HTML 中的一个单标签，它的名字来源于 "break"，表示换行。
与像 <p> 这样的标签不同，<br> 不需要结束标签，因为它没有包含文本或其他内容，所以它是一个单标签。
一些关于 <br> 标签的特点：
- 单标签： <br> 是一个单标签，直接在需要换行的地方使用即可，不需要闭合标签。
- 没有大空隙： 与 <p> 标签不同，<br> 标签在使用时不会产生像段落标签那样的大间隔，它只是简单地进行换行，而不添加额外的空白。
- 规范写法： <br/> 是 XHTML 的写法，是一种规范的写法形式。尽管在 HTML5 中可以省略斜杠，即写成 <br>，但为了更好的兼容性和符合规范，建议使用 <br/> 的写法。
示例：
这是一行文本。<br/>
这是换行后的文本。
如果不加<br>：
格式化标签
在网页开发中，文本格式化是一项重要的任务，它通过使用特定的HTML标签或CSS样式来使文本呈现出不同的样式效果。以下是一些常见的文本格式化知识点，包括使用HTML标签和CSS样式实现相应效果。
HTML标签实现文本格式化
加粗
在HTML中，可以使用 <strong> 标签或 <b> 标签来表示加粗文本。
<strong>strong 加粗</strong>
<b>b 加粗</b>
倾斜
文本倾斜可以通过 <em> 标签或 <i> 标签实现。
<em>倾斜</em>
<i>倾斜</i>
删除线
删除线效果可以通过 <del> 标签或 <s> 标签来实现。
<del>删除线</del>
<s>删除线</s>
下划线
使用 <ins> 标签或 <u> 标签可以添加下划线效果。
<ins>下划线</ins>
<u>下划线</u>
以上HTML中的这些标签对于文本样式的应用有一些区别，主要体现在它们对语义的强调上：
<strong> vs <b>：
- <strong>：用于强调文本的重要性，传达语义信息。浏览器默认样式为加粗。
- <b>：简单地将文本加粗，没有强调语义。通常用于样式目的而非语义强调。
<em> vs <i>：
- <em>：表示文本的强调，强调的是语义上的重要性。浏览器默认样式为斜体。
- <i>：简单地将文本设置为斜体，没有强调语义。通常用于样式目的而非语义强调。
<del> vs <s>：
- <del>：表示文本被删除，用于标记不再有效的内容，传达语义信息。
- <s>：简单地为文本添加删除线，没有强调语义。通常用于样式目的而非语义强调。
<ins> vs <u>：
- <ins>：表示文本是新增的，用于标记新添加的内容，传达语义信息。
- <u>：简单地为文本添加下划线，没有强调语义。通常用于样式目的而非语义强调。
总体而言，<strong>、<em>、<del> 和 <ins> 更符合语义化的HTML标记，因为它们能够传达更多关于文本结构和意图的信息。这使得页面更易于理解、维护和访问。而 <b>、<i>、<s> 和 <u> 更偏向于纯样式的应用，适用于仅仅想改变文本外观而不关心语义的情况。在实际应用中，选择使用哪个标签应该取决于文本的实际语义和作者的意图，以便更好地平衡样式和语义。
使用CSS实现文本格式化
虽然上述HTML标签是实现文本格式化的传统方法，但在实际开发中，我们更推荐使用CSS来处理样式，因为它提供了更灵活的控制和更好的可维护性。
这个部分会在讲CSS时具体说明的。
图片标签: img
img 标签必须带有 src 属性，img 标签的 src 属性指定了图像文件的路径。
路径可以是绝对路径或相对路径，具体取决于图像文件的位置与HTML文件的位置。
src 属性
绝对路径：
绝对路径指定图像文件的完整路径，包括文件在文件系统中的所有目录。如果 Gojo.jpg 图片文件与HTML文件不在同一目录下，那么可以使用绝对路径来引用它。例如：
这里的 /images/Gojo.jpg 是图像文件在服务器文件系统中的绝对路径。
<img src="E://VScode/images/Gojo.jpg">
相对路径：
相对路径指定图像文件相对于HTML文件的位置。如果 Gojo.jpg 图片文件与HTML文件在同一目录下，可以直接使用文件名：
<img src="Gojo.jpg">
在这种情况下，浏览器会在与HTML文件相同的目录下查找 Gojo.jpg 文件。
如果 Gojo.jpg 图片文件在HTML文件的上一级目录（父级目录）下，可以使用 ../ 来表示上一级目录：
<img src="../Gojo.jpg">
总之，通过使用绝对路径或相对路径，img 标签的 src 属性允许指定图像文件的位置，确保浏览器能够正确加载和显示图像。
目录结构和路径：
在网站开发中，良好的目录结构和正确的路径使用是非常重要的。这样可以使得项目更有组织性、易于维护，并且确保页面资源能够被正确引用。以下是对目录结构和路径的一些解释和示例：
1. 相对路径：
- 同级路径： 直接写文件名即可，或者使用 ./ 表示当前目录。
<img src="rose2.jpg" alt="Rose"> <!-- 或者 --> <img src="./rose2.jpg" alt="Rose"> - 下一级路径： 使用相对路径访问下一级目录中的文件。
<img src="image/1.jpg" alt="Image 1"> - 上一级路径： 使用 ../ 表示上一级目录。
<img src="../image/1.jpg" alt="Image 1">
2. 绝对路径：
- 磁盘路径： 使用完整的磁盘路径指定文件位置。
<img src="D:/rose.jpg" alt="Rose"> - 网络路径： 使用完整的网络路径指定文件位置。
<img src="https://images0.cnblogs.com/blog/130623/201407/300958470402077.png" alt="Image">
代码示例：
使用相对路径：
在html文件和image目录同级，访问同级的rose2.jpg。
/project-root
├── index.html
├── rose2.jpg
└── image
<img src="rose2.jpg" alt="Rose">
使用相对路径2：
在image目录中创建一个html文件，访问上一级目录的rose.jpg。
/project-root
├── index.html
└── image
└── image.html
└── rose.jpg
<img src="../rose.jpg" alt="Rose">
使用绝对路径1：
最好使用 / 表示根目录，而不要使用 \。
<img src="/images/rose.jpg" alt="Rose">
使用绝对路径2：
使用网络路径指定图像位置。
<img src="https://images0.cnblogs.com/blog/130623/201407/300958470402077.png" alt="Image">
img 标签的其他属性
alt 属性：
描述： 用于提供图像的替代文本，当图像无法加载时或者用户使用屏幕阅读器时，这段文本将被显示。它有助于提供对图像内容的描述。
<img src="image.jpg" alt="A beautiful landscape">
title 属性：
描述： 为图像定义一段标题，通常在用户将鼠标悬停在图像上时显示。提供一些额外的信息或描述。
<img src="image.jpg" alt="A beautiful landscape" title="Scenic View">
width 和 height 属性：
描述： 控制图像的宽度和高度。可以指定具体的像素值或百分比。如果只指定其中一个，另一个将按比例自动缩放，以保持图像的纵横比。
<img src="image.jpg" alt="A beautiful landscape" width="300" height="200">
border 属性：
描述： 定义图像的边框宽度。一般不直接在img标签上使用，而是使用CSS样式来设置。
<img src="image.jpg" alt="A beautiful landscape" style="border: 2px solid black;">
注意事项：
- 多个属性： 一个 img 标签可以同时包含多个属性，它们之间用空格或者回车分隔。
- 属性顺序： 属性之间的顺序不重要，可以根据个人偏好进行排列。
- "键值对" 格式： 每个属性都以 "键值对" 的格式表示，即属性名和属性值之间用等号连接。
这些属性使得 img 标签更加灵活，我们可以通过它们来控制图像的显示效果和提供更好的用户体验。
超链接标签 <a>：
超链接标签 <a> 用于创建链接，允许用户点击后跳转到其他页面或资源。
下面是关于 <a> 标签的一些重要属性和链接的不同形式的解释：
href 属性：
描述： 必须具备，表示点击后将跳转到的页面或资源的URL。
<a href="http://www.baidu.com">百度</a>
啥也没有，点击F12，发现我们的HTML代码中只有一个空的超链接 <a> 元素，但它没有任何内容，因此在浏览器中显示时可能是看不见的。
如果想在网页上显示一些内容，我们需要在 <a> 标签内添加文本或其他元素。
例如，我们可以在 <a> 标签内添加一个文本节点：
成功跳转：
我们也可以跳转到我们自己的本地页面：
target 属性：
描述： 控制链接的打开方式，默认是 _self 表示在当前窗口打开，如果是 _blank 则在新的标签页中打开。
<a href="http://www.baidu.com" target="_blank">百度</a>
点击后在新的页面打开了：
在新的页面打开：
链接的几种形式：
外部链接：
通过 href 引用其他网站的地址。
<a href="http://www.baidu.com">百度</a>
内部链接：
在网站内部页面之间的链接，使用相对路径即可。
<!-- 在一个目录中，先创建一个 1.html，再创建一个 2.html -->
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>
空链接：
使用 # 在 href 中占位。
<a href="#">空链接</a>
不做任何跳转，就停在当前页面：
下载链接：
href 对应的路径是一个文件，例如可以使用 zip 文件。
<a href="test.zip">下载文件</a>
网页元素链接：
可以给任何元素（例如图片）添加链接，将元素放到 <a> 标签中。
<a href="http://www.sogou.com">
<img src="Gojo.jpg" alt="">
</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com/">点击跳转到百度页面</a><br>
<a href="HTML03.html">点击跳转到HTML03页面</a><br>
<a href="#">在当前页面</a><br>
<a href="https://www.baidu.com/">
<img src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202101%2F29%2F20210129090823_04974.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706180298&t=dfcb5f06a132353011629486c0d4322c" alt="点击跳转回到百度首页" width="550px" height="600px" border="5px">
</a>
</body>
</html>
点击图片后直接跳转：
锚点链接：
可以快速定位到页面中的某个位置，使用 # 后接目标元素的 id。
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
禁止 <a> 标签跳转：
<a href="javascript:void(0);">百度</a>
<!-- 或者 -->
<a href="javascript:;">百度</a>
表格标签:
基本使用
- <table> 标签：表示整个表格。通常包含在 <body> 元素中，用于定义表格的整体结构。table 包含 tr , tr 包含 td 或者 th。
- <tr> 标签：表示表格中的一行。通常包含在 <table> 元素内，用于定义表格的行。
- <td> 标签：表示表格中的一个单元格。通常包含在 <tr> 元素内，用于定义表格的数据单元。
- <th> 标签：表示表格的表头单元格，通常位于表格的首行或首列。表头单元格通常会居中并加粗显示。
- <thead> 标签：定义表格的头部区域，包含表头单元格。注意与 <th> 的区别，<thead> 的范围更大。
- <tbody> 标签：定义表格的主体区域，包含除头部外的所有行和单元格。
表格标签还有一些属性可用于设置表格的样式和布局，但一般推荐使用CSS来进行样式的设置。一些常见的属性包括：
- align：设置表格相对于周围元素的对齐方式。例如，align="center" 可以使表格在页面中居中显示。
- border：表示表格的边框，值为1表示有边框，数字越大边框越粗，空字符串表示无边框。
- cellpadding：设置单元格内容与边框之间的距离，默认为1像素。
- cellspacing：设置单元格之间的距离，默认为2像素。
- width / height：设置表格的宽度和高度。
这些属性一般都应该放置在 <table> 标签中。
注意，虽然我们可以使用这些属性来设置表格的样式，但最好的做法是使用CSS来实现更灵活和可维护的样式设置。在一些编辑器中，如VSCode，对这些属性的提示可能会有限，因此建议查阅官方文档或其他资源获取更详细的属性信息。
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>明朗</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>小米</td>
<td>女</td>
<td>12</td>
</tr>
<tr>
<td>柳柳</td>
<td>女</td>
<td>24</td>
</tr>
<tr>
<td>洋洋</td>
<td>男</td>
<td>8</td>
</tr>
</table>在Visual Studio Code中，按下Shift + Alt + ↓（向下箭头）的组合键，可以复制当前行并将其粘贴到下一行。
这对于快速生成多个HTML标签非常方便，包括<tr>标签。
如果我们在HTML文件中的一行（或者连续多行）上使用这个组合键，它会将整个行复制到下一行，我们可以在复制的行上修改内容，以生成多个<tr>标签。这对于快速重复结构相似的标签很有用。
注意，这个组合键的效果可能会受到具体的VS Code配置和扩展的影响。如果你的VS Code 配置与默认设置不同，这个组合键的行为也可能有所不同。
<table> 标签：表示整个表格，具有以下属性：
- align="center"：将表格居中显示。注意，这里控制的是整个表格，而不是表格中的内容。
- border="1"：设置表格边框为1，即有边框。
- cellpadding="20"：设置单元格内容与边框之间的距离为20像素。
- cellspacing="0"：设置单元格之间的距离为0像素。
- width="500"：设置表格宽度为500像素。
- height="500"：设置表格高度为500像素。
如果不加上述属性：
<tr> 标签：表示表格中的一行。
<td> 标签：表示表格中的一个单元格，包含具体的数据。
<body>
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>明朗</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>小米</td>
<td>女</td>
<td>12</td>
</tr>
<tr>
<td>柳柳</td>
<td>女</td>
<td>24</td>
</tr>
<tr>
<td>洋洋</td>
<td>男</td>
<td>8</td>
</tr>
</tbody>
</table>
</body>注意，我们把列标题部分代码进行了相应的修改：
<thead> 标签：这是表头的开始标签，表示表格的表头部分。通常，表头位于表格的顶部，包含表格的列标题。
<tr> 标签：这是表格的行（table row）开始标签。表格中的内容按行组织。
<th> 标签：这是表头单元格（table header cell）的开始标签。与 <td>（表格数据单元格）不同，<th> 用于表示表格的标题或标签，是表头的一部分。
列标题：在每个 <th> 标签中包含了列的标题。
在我们的这个例子中，有三列，分别是 "姓名"、"性别"、"年龄"。
可以看到进行了相应的加粗显示。
合并单元格
合并单元格是在HTML表格中创建更复杂结构时的常见需求。
在表格中，我们可以通过设置rowspan和colspan属性来实现跨行和跨列的合并。
合并单元格的步骤如下：
-
确定合并方式：
- 跨行合并： 设置目标单元格的 rowspan 属性为 n（n 为要合并的行数）。
- 跨列合并： 设置目标单元格的 colspan 属性为 n（n 为要合并的列数）。
-
定位目标单元格：
- 跨列合并： 选择位于左侧的目标单元格。
- 跨行合并： 选择位于上方的目标单元格。
-
删除多余单元格：
删除与目标单元格相交的、不再需要的单元格。这样可以确保表格结构的一致性，并防止出现意外的表格布局问题。
下面是一个简单的HTML表格合并单元格的示例：
列表标签：
列表标签在HTML中主要用于布局和组织信息，能够创建整齐有序的文档结构。
无序列表（Unordered List）:
标签： <ul>
子项标签： <li>
说明： 无序列表用于表示项目之间没有特定顺序的列表，通常以符号（如小圆点）显示。
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
网页中：
在VSCode中，有许多类似的代码片段快捷键，可以帮助我们提高编码效率。
目前我们碰到过的有：
生成 HTML 结构：输入 ! 然后按下 Tab 键，可以生成基本的 HTML 结构。
生成列表结构：
输入 ul>li*4 然后按下 Tab 键，可以生成 <ul> 下有四个 <li> 的列表结构。
生成注释：输入 <!-- 然后按下 Tab 键，可以生成 HTML 注释的起始标签。
这只是其中的一小部分，VSCode支持丰富的代码片段和快捷键，可以在设置中查看或自定义这些快捷键。
要查看和自定义代码片段，可以按 Ctrl + Shift + P 打开命令面板，然后输入 "Preferences: Configure User Snippets"，选择相应的语言（如HTML），即可查看和编辑代码片段。
那么如果我们不想要默认的小圆点呢？
在HTML格式中，无序列表（<ul>）是一种用于呈现项目之间没有特定顺序关系的元素。默认情况下，无序列表的列表项前会显示小实心圆点。然而，如果我们希望改变默认的小圆点样式，可以使用type属性为无序列表指定不同的值。
type属性可用的值及其描述：
- disc：这是无序列表的默认值，使用实心圆点表示列表项。
- circle：使用空心圆圈表示列表项。
- square：使用实心方块表示列表项。
这样，我们就可以定制无序列表的外观，使其符合我们的页面设计或风格需求。
有序列表（Ordered List）:
标签： <ol>
子项标签： <li>
说明： 有序列表用于表示有特定顺序的项目列表，项目前面通常显示数字或字母。
<ol>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
同理，在HTML格式中，有序列表（<ol>）用于呈现按照特定顺序排列的项目，页允许我们使用不同的类型来标记列表项，通过 type 属性来指定。
- a：表示小写英文字母编号。
- A：表示大写英文字母编号。
- i：表示小写罗马数字编号。
- I：表示大写罗马数字编号。
- 1：表示数字编号，这是默认值。
当然，我们晚点会学到，虽然可以使用 type 属性来指定列表项的编号类型，但是根据HTML标准的建议，不推荐使用该属性，而是鼓励使用样式（CSS）来控制列表的外观。这是因为样式提供了更大的灵活性，并分离了内容和样式的关注点。
<table>
<ol type="a">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
<ol type="A">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
<ol type="i">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
<ol type="I">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
<ol type="1">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
</table>
在HTML中，有序列表元素 <ol> 还可以使用 start 属性来指定列表项的起始值，而不仅仅是使用默认的1。
start 属性允许我们设置有序列表的起始编号，这在一些特定的情境中可能很有用。
自定义列表（Definition List）:
总标签： <dl>
小标题标签： <dt>
说明标签： <dd>
说明： 自定义列表用于表示术语和其定义之间的关系。
<dl>
<dt>小标题1</dt>
<dd>围绕标题1来说明的内容</dd>
<dt>小标题2</dt>
<dd>围绕标题2来说明的内容</dd>
</dl>
<dl>
<dt>自定义列表显示内容
<dd>内容1</dd>
<dd>内容2</dd>
</dt>
</dl>在第一个片段中，每个 <dt> 和 <dd> 组合代表一个独立的标题和描述。
而在第二个片段中，一个 <dt> 下的多个 <dd> 则是在描述同一个标题。
第一个片段更符合常见的定义列表的使用方式，而第二个片段则使用了一种非典型的结构
自定义列表示例（参考小米官网下方）：
你可以根据需要查看小米官网的HTML和CSS代码，了解他们如何实现自定义列表，并根据设计需求进行相应的调整。CSS可以用来调整列表的样式，包括修改符号、间距等。
注意事项：
- 元素之间是并列关系： 在列表中，每个子项（如 <li>、<dt>、<dd>）都是相互独立的并列关系。
- ul/ol 中只能放 li，dl 中只能放 dt 和 dd： HTML规范规定了元素的正确嵌套，确保文档结构的一致性。
- li 中可以放其他标签： 允许在列表项中包含其他HTML标签，以实现更复杂的内容结构。
- 列表带有自己的样式，可以使用CSS来修改： 利用CSS样式可以自定义列表的外观，例如去除默认的标志（如小圆点）。
表单标签
表单是网页上用户输入信息的主要途径，通过表单，用户可以向网站提交数据。
在HTML中，表单主要分为两个部分：表单域和表单控件。
表单域定义了包含表单元素的区域。它是表单的容器，负责收集用户输入并将其提交到服务器。常用属性包括 action（指定表单数据提交的目标URL）和 method（指定提交表单的HTTP方法，通常是 "post" 或 "get"）。
表单控件是用户与表单交互的部分，包括输入框、提交按钮等。常用的控件标签有 <input>（用于创建各种类型的输入框）、<textarea>（用于多行文本输入）、<select>（用于下拉列表）等。
<form> 标签：
<form> 标签用于创建HTML表单，是收集用户输入的关键元素。
<form action="test.html">
... <!-- form 的内容 -->
</form>
属性说明：
action 属性：
作用： 指定表单数据提交的目标URL。
示例： action="test.html" 表示将表单数据提交到 "test.html" 页面。
表单的内容：
<form> 标签内包含了表单的具体内容，包括表单域和表单控件。例如，文本框、密码框、按钮等都可以放置在 <form> 标签内。
提交数据说明：
关于数据提交： 当用户填写表单并点击提交按钮时，表单数据将按照 action 属性指定的方式提交到目标URL。这可能涉及到服务器端脚本来处理表单数据，例如通过使用PHP、Node.js等进行服务器端编程。
与服务器和网络编程的关系：
-
需要结合服务器和网络编程理解： 了解 <form> 标签的功能需要结合服务器端和网络编程的知识。表单是与服务器进行交互的工具，通过表单数据的提交，服务器可以接收、处理用户的输入，并做出相应的响应。
-
进一步研究： 后续学习中，我们可以深入研究服务器端脚本（如PHP、Node.js等）的处理方式，以及网络编程的相关知识，从而更好地理解表单与服务器之间的交互过程。
<input> 标签：
<input> 标签是HTML中用于创建各种输入控件的重要元素。
常见属性
-
type 属性：
- 作用： 指定输入控件的类型。
- 取值： 可以是 button、checkbox、text、file、image、password、radio 等。
-
name 属性：
- 作用： 为输入控件命名，尤其对于单选按钮，必须具有相同的 name 才能实现多选一效果。
-
value 属性：
- 作用： 指定输入控件的默认值。
-
checked 属性：
- 作用： 对于单选按钮和复选按钮，可以指定默认是否选中。
-
maxlength 属性：
- 作用： 设定输入内容的最大长度。
常见输入控件类型：
-
文本框（Text Input）：
<input type="text" name="username" value="默认值"> -
密码框（Password Input）：
如果把这里的 type="password" 改为 type="text"，就不会是加密效果。<input type="password" name="password"> -
单选框（Radio Button）：
当name值是同一个时，只能选择其中一个。如果不设置name值相同，那么仍然都可选。
具体来说，在HTML中，单选框（Radio Button）通过设置相同的name属性值来实现同一组单选按钮。这样做的目的是确保用户在给定的组中只能选择其中一个选项。如果你有一组相关的单选按钮，并且它们共享相同的name属性，那么用户只能在这组按钮中选择一个。这是因为浏览器会将它们视为同一组，只允许用户选择其中的一个选项。
如果你在同一组中使用不同的name值，那么每个单选按钮都将成为独立的选项，用户可以选择多个。
另外，通过checked我们可以设置默认选中：
checked是一个用于设置 HTML 表单元素默认选中状态的属性。对于单选框（Radio Button）和复选框（Checkbox）来说，checked 属性用于指定在页面加载时是否应该处于选中状态。
需要注意的是，checked 属性可以省略值，只需要将它添加到单选框或复选框的标签中，即使不提供值，浏览器也会将其视为选中状态。<input type="radio" name="sex" value="male"> 男 <input type="radio" name="sex" value="female" checked> 女 -
复选框（Checkbox）：
<input type="checkbox" name="hobby" value="eat"> 吃饭 <input type="checkbox" name="hobby" value="sleep"> 睡觉 <input type="checkbox" name="hobby" value="game"> 打游戏 -
普通按钮（Button）：
<input type="button" value="按钮文本">普通按钮（通常是指<button>元素中的按钮）通常可以与JavaScript代码搭配使用，以便在用户与按钮交互时触发特定的操作或功能。
JavaScript允许我们在按钮被点击或其他交互事件发生时执行自定义的脚本代码。
-
提交按钮（Submit Button）：
<form action="test.html"> <input type="submit" value="提交"> </form>
-
清空按钮（Reset Button）：
<form action="test.html"> <input type="reset" value="清空"> </form>
-
选择文件（File Input）：
<input type="file" name="fileUpload">
你可能会疑惑，我们代码中的 name="hobby" 还有 value="sleep"有什么作用？
它们甚至都没有在页面上显示。
在我们的代码中，name 和 value 属性是关于 HTML 复选框（Checkbox）的两个重要属性。
-
name 属性：
- name 属性用于创建一个标识，将一组相关的复选框关联在一起。在你的例子中，所有的复选框都有相同的 name="hobby"。这意味着这三个复选框都属于名为 "hobby" 的组。
- 当用户选择其中一个复选框时，浏览器会将其值与 name 属性一起发送到服务器，以便在表单提交时能够识别用户选择的内容。在这种情况下，服务器可能会收到名为 "hobby" 的参数，其值是用户选择的兴趣爱好。
-
value 属性：
- value 属性定义了复选框被选中时发送到服务器的具体值。在你的例子中，每个复选框都有一个不同的 value 值，分别是 "eat"、"sleep" 和 "game"。
- 当用户选中某个复选框时，浏览器会将与该复选框相关联的 name 和 value 值发送到服务器，以便服务器能够识别用户选择的具体选项。
在页面上，这两个属性不会直接显示在用户界面上。它们的作用更多地体现在表单提交时，帮助服务器正确地解释和处理用户的选择。
注意事项：
-
单选框和复选框： 单选框需要具有相同的 name 属性，以便实现多选一的效果。
-
普通按钮的点击事件： 普通按钮的点击事件可以搭配JavaScript使用，后续学习中会重点研究。
-
提交按钮和清空按钮： 提交按钮和清空按钮必须放在 <form> 标签内。清空按钮点击后会将 <form> 内所有的用户输入内容重置。
-
选择文件： 文件输入框通过 <input type="file"> 实现，点击后会弹出文件选择对话框。
这些 <input> 标签的应用非常广泛，通过合适的属性和组合方式，可以满足不同的用户输入和交互需求。
<label> 标签
<label> 标签用于关联表单元素，通常与 <input> 元素一起搭配使用，提升用户体验。
<label for="male">男</label> <input id="male" type="radio" name="sex">
基本用法：
for 属性：
作用： 指定当前 <label> 与哪个相同 id 的 <input> 标签关联。
示例： for="male" 表示当前 <label> 与 <input> 元素中 id="male" 的那个标签相关联。
点击 label 选中对应的单选/复选框：
当用户点击 <label> 文本时，与之相关联的 <input> 元素会被选中，从而提升用户体验。
<form action="">
<label for="male">男</label>
<input type="radio" id="male" name="sex">
<label for="female">女</label>
<input type="radio" id="female" name="sex">
</form> 在这个示例中，点击 "男" 这个文本时，与之相关联的单选按钮 <input> 会被选中，点击 "女" 这个文本时，与之相关联的单选按钮 <input> 会被选中。
为什么使用 <label>：
- 语义化： <label> 提供了更好的语义化，使得页面结构更清晰。
- 可访问性： 使用 <label> 有助于提高网页的可访问性，特别是对于使用屏幕阅读器等辅助技术的用户。
- 用户体验： 点击文本选择单选/复选框，提供更大的点击区域，增强用户体验。
注意事项：
- 请确保 <label> 的 for 属性值与相应 <input> 的 id 属性值匹配，这样点击文本才能正确关联到对应的表单元素。
- 通过使用 <label>，可以不仅提升页面的可访问性，而且使得用户更容易理解和操作表单元素。
<select> 标签：
<select> 标签用于创建下拉菜单，允许用户从预定义的选项中进行选择。
<select name="" id="">
<option value="">请选择城市</option>
<option value="">上海</option>
<option value="">青岛</option>
<option value="">北京</option>
<option value="">云南</option>
<option value="">江苏</option>
<option value="">黑龙江</option>
</select>
<select>
<option>北京</option>
<option>青岛</option>
<option>云南</option>
<option>江苏</option>
<option>黑龙江</option>
<option selected="selected">上海</option>
</select>默认选择第一个：
指定所选项：
-
<option> 标签：
- <option> 标签用于定义下拉菜单中的选项。
- 在上述例子中，"北京" 和 "上海" 等等是下拉菜单的两个选项。
-
selected 属性：
- selected="selected" 表示默认选中的选项。
- 在上述例子中，"上海" 会在页面加载时默认选中。
默认选项示例：
<select>
<option>--请选择年份--</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
</select>
- 在这个例子中，第一个 <option> 设置了一个提示性的文本 "--请选择年份--"，并不代表一个有效的年份选项。用户可以从下拉菜单中选择其他年份。
- 默认情况下，第一个选项会被显示为下拉菜单的默认选项。如果希望设置其他选项为默认选中，可以使用 selected="selected" 属性。
注意事项：
- <select> 标签内部包含多个 <option> 标签，每个 <option> 标签定义一个可选项。
- 可以通过设置 <option> 标签的 selected 属性来指定默认选中的选项。
- 下拉菜单通常用于让用户从一组预定义的选项中进行选择，例如选择国家、城市、年份等。
- 增强用户体验：合理设置默认选项和提供可选项的提示文本，有助于提高用户体验和页面的友好性。
<textarea> 标签：
<textarea> 标签用于创建多行文本输入框，允许用户输入多行文本。
基本用法：
<textarea rows="3" cols="50">
</textarea>
rows 和 cols 属性：
- rows 定义文本区域的行数（高度）。
- cols 定义文本区域的列数（宽度）。
在上述例子中，rows="3" 表示文本区域显示 3 行，cols="50" 表示文本区域显示 50 列。
默认内容：
- <textarea> 标签内的内容是文本域的默认内容，我们可以在这里输入或编辑文本。
- 注意： 文本域中的空格、换行等都会被保留，因此在设置默认内容时需注意空格的影响。
CSS 样式调整：
rows 和 cols 属性通常不会直接使用，而是通过 CSS 样式来进行调整。
<style>
textarea {
width: 300px;
height: 100px;
}
</style>
在上述例子中，通过 CSS 样式将文本域的宽度设置为 300 像素，高度设置为 100 像素。
注意事项：
- <textarea> 标签适用于用户需要输入多行文本的场景，例如留言、评论等。
- rows 和 cols 属性可以用来控制文本域的默认尺寸，但更常见的做法是使用 CSS 样式进行调整。
- 默认内容中的空格、换行等会被保留，因此在设计默认内容时要注意文本格式。
- <textarea> 标签是创建多行文本输入框的重要工具，通过合适的设置和样式，可以满足不同场景的需求。
无语义标签
在网页开发中，div（division）和span是两个常用的 HTML 标签，它们没有明确的语义，而是用于布局和样式的控制：
1、 div 标签：
- 含义： div 是 division 的缩写，意为分割或区块。它通常被用作一个容器，将页面的不同部分或元素分隔开，以便进行样式设置、布局和组织页面结构。
- 特点： div 是一个块级元素，它独占一行，宽度默认为其包含内容的宽度。可以通过 CSS 样式对 div 进行调整，例如设置背景颜色、边框、内外边距等。
- 用途： 主要用于组织和布局网页的结构，将相关的内容或元素划分到一个独立的区块中。
2、 span 标签：
- 含义： span 是一个行内元素，用于标记文本或行内元素的一部分，它的含义是跨度。与 div 不同，span 不会独占一行，只会包裹其包含的内容。
- 特点： span 的宽度和高度默认由其包含内容的大小决定，不会独占一行，可以在文本中的任何位置使用。
- 用途： 主要用于对文本的部分进行样式设置，或者包裹行内元素以进行样式或脚本操作。
3、 <p> 标签：
- 含义： <p> 是 paragraph 的缩写，表示文本的一个段落。它用于将文本分组为段落，提供语义上的结构。
- 特点： <p> 是一个块级元素，独占一行，具有默认的上下边距。通常在段落之间创建间距，使文本更易阅读。
- 用途： 主要用于组织文本内容，将相关的句子或段落划分到一个独立的块中，以提高页面的结构化和可读性。
随便打开一个网页，都可以看到无数无语义标签：
示例代码中展示了四个 div 区块，第一个div独占一行，后三个每个 div 中包含了三个 span 元素。这种结构可以用于创建网页的基本布局，通过适当的式设置，实现页面的排版和设计。
例如，可以通过这种结构将页面划分成不同的区域，分别放置导航栏、内容区域等。这就给我们提供了一种灵活的方式来组织和设计网页的外观。
除了 <div>、<span>、和 <p> 之外，还有一些其他常见的无语义标签，它们主要用于页面布局和样式设置：
-
<em>：
- 含义： 表示强调的文本，通常以斜体显示。
- 特点： 是行内元素。
- 用途： 用于强调文本内容。
-
<strong>：
- 含义： 表示重要性强调的文本，通常以粗体显示。
- 特点： 是行内元素。
- 用途： 用于标识文本的重要性。
-
<br>：
- 含义： 表示换行。
- 特点： 是行内元素。
- 用途： 用于在文本中强制换行。
-
<hr>：
- 含义： 表示水平线。
- 特点： 是块级元素。
- 用途： 用于在页面中插入水平分隔线。
-
<a>：
- 含义： 表示超链接。
- 特点： 是行内元素。
- 用途： 用于创建超链接，链接到其他页面或资源。
-
<img>：
- 含义： 表示图像。
- 特点： 是行内元素。
- 用途： 用于在页面中插入图像。
这些标签在 HTML 中广泛应用，根据需要选择合适的标签以实现特定的排版和样式效果。
Emmet 快捷键
Emmet 是一种用于加速 HTML 和 CSS 编写的工具，提供了一套简单而强大的快捷键和语法。
一些常见的 Emmet 快捷键和语法示例：
-
快速输入标签：
- 快捷键：input[tab]
- 示例：生成 <input> 标签。
-
快速输入多个标签：
- 快捷键：div*3[tab]
- 示例：生成三个 <div> 标签。
-
标签带 id：
- 快捷键：div#sex[tab]
- 示例：生成一个带有 id 为 "sex" 的 <div> 标签。
-
标签带类名：
- 快捷键：div.sex[tab]
- 示例：生成一个带有类名 "sex" 的 <div> 标签。
-
标签带子元素：
- 快捷键：ul>li*3[tab]
- 示例：生成一个包含三个 <li> 的 <ul> 标签。
-
标签带兄弟元素：
- 示例：div+p+bq[tab] 生成 <div> 后跟 <p>、<b>、<blockquote> 三个兄弟元素。
-
标签带内容：
- 快捷键：span+span
- 示例：生成两个相邻的 <span> 标签。
-
标签带内容(带编号)：
- 快捷键：div{hello}
- 示例：生成一个包含文本 "hello" 的 <div> 标签。
-
标签带内容(使用变量)：
- 快捷键：div{$.hello}
- 示例：生成一个包含文本 "hello" 的 <div> 标签，其中 "$" 为变量前缀。
Emmet 还有更多强大的语法和功能，可以根据自己的需要灵活运用。这些快捷键和语法可以大大提高前端开发过程中的编写效率。
在实际使用中，大家可以根据自己的需求和习惯积累更多的 Emmet 快捷方式。
HTML 特殊字符
在 HTML 中，有一些特殊字符是预留给标记语言使用的，如果直接在 HTML 文档中使用这些字符，会导致解析错误。为了正确显示这些字符，需要使用 HTML 实体（HTML Entity）来替代。以下是一些常见的 HTML 特殊字符及其对应的实体表示：
- 空格：实体：
- 小于号 (<)：实体：<
- 大于号 (>)：实体：>
- 和号 (&)：实体：&
这些实体表示法使得 HTML 能够正确地解析和显示这些字符，而不会与 HTML 标签产生冲突。
例如，在文本中如果需要显示小于号 <，我们可以使用 < 来表示，以避免浏览器将其误解为标签的开始。
实体表示法在处理用户输入、显示代码示例等场景中非常有用，确保特殊字符能够被正确地呈现在 HTML 页面上。
综合案例: 展示简历信息
<h1>小橘子</h1>
<!-- 基本信息 -->
<div>
<h2>基本信息</h2>
<img src="https://t7.baidu.com/it/u=1276882317,1833371869&fm=193&f=GIF" width="500px" height="400px" border="5px">
<p><span>求职意向：</span>Java 开发工程师</p>
<p><span>联系电话：</span>XXX-XXX-XXXX</p>
<p><span>邮箱：</span>xxx@foxmail.com</p>
<p><a href="https://github.com">我的 github</a></p>
<p><a href="https://csdn.com">我的 博客</a></p>
</div>
<!-- 教育背景 -->
<div>
<h2>教育背景</h2>
<ol>
<li>1990 - 1996 胖橘幼儿园 幼儿园</li>
<li>1996 - 2002 胖橘小学 小学</li>
<li>2002 - 2005 胖橘中学 初中</li>
<li>2005 - 2008 胖橘中学 高中</li>
<li>2008 - 2012 胖橘大学 计算机专业 本科</li>
</ol>
</div>
<!-- 专业技能 -->
<div>
<h2>专业技能</h2>
<ul>
<li>Java 基础语法扎实，已经刷了 800 道 Leetcode 题；</li>
<li>常见数据结构都可以独立实现并熟练应用；</li>
<li>熟知计算机网络理论，并且可以独立排查常见问题；</li>
<li>掌握 Web 开发能力，并且独立开发了学校的留言墙功能。</li>
</ul>
</div>
<!-- 项目 -->
<div>
<h2>我的项目</h2>
<ol>
<li>
<h3>留言墙</h3>
<p>开发时间：2008年9月 到 2008年12月</p>
<p>功能介绍：
<ul>
<li>支持留言发布</li>
<li>支持匿名留言</li>
</ul>
</p>
</li>
<li>
<h3>学习小助手</h3>
<p>开发时间：2008年9月 到 2008年12月</p>
<p>功能介绍：
<ul>
<li>支持错题检索</li>
<li>支持同学探讨</li>
</ul>
</p>
</li>
</ol>
</div>
<!-- 其他信息 -->
<div>
<h2>个人评价</h2>
<p>在校期间，学习成绩优良，多次获得奖学金。</p>
</div>
综合案例: 填写简历信息
<table width="500px" cellspacing="0">
<thead>
<h3>请填写简历信息</h3>
</thead>
<tbody>
<!-- 姓名 -->
<tr>
<td>
<label for="name">姓名</label>
</td>
<td>
<input type="text" id="name">
</td>
</tr>
<!-- 性别 -->
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" id="male" checked="checked">
<!-- 图片要放到 label 内部, 保证点击图标也能选中单选框 -->
<!-- 还需要把 width 加上, 否则图片太大了 -->
<label for="male"><img src="https://bpic.588ku.com/element_origin_min_pic/00/92/46/8256f2234ed59ab.jpg" alt="" width="20px">男</label>
<input type="radio" name="sex" id="female">
<label for="female"><img src="http://pic.soutu123.com/element_origin_min_pic/00/92/94/1456f24501e4e45.jpg!/fw/700/quality/90/unsharp/true/compress/true" alt="" width="20px">女</label>
</td>
</tr>
<!-- 出生日期 -->
<tr>
<td>
出生日期
</td>
<td>
<select>
<option>--请选择年份--</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
</select>
<select>
<option>--请选择月份--</option>
<option value="">1</option>
<option value="">2</option>
<!-- 省略中间月份选项 -->
<option value="">12</option>
</select>
<select>
<option>--请选择日期--</option>
<option value="">1</option>
<!-- 省略中间日期选项 -->
<option value="">31</option>
</select>
</td>
</tr>
<!-- 就读学校 -->
<tr>
<td>
就读学校
</td>
<td>
<input type="text">
</td>
</tr>
<!-- 应聘岗位 -->
<tr>
<td>
应聘岗位
</td>
<td>
<input type="checkbox" id="frontend">
<label for="frontend">前端开发</label>
<input type="checkbox" id="backend">
<label for="backend">后端开发</label>
<input type="checkbox" id="qa">
<label for="qa">测试开发</label>
<input type="checkbox" id="op">
<label for="op">运维开发</label>
</td>
</tr>
<!-- 掌握的技能 -->
<tr>
<td>
掌握的技能
</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<!-- 项目经历 -->
<tr>
<td>
项目经历
</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<!-- 阅读公司要求 -->
<tr>
<td></td>
<td>
<input type="checkbox" id="lisence">
<label for="lisence">我已仔细阅读过公司的招聘要求</label>
</td>
</tr>
<!-- 查看状态 -->
<tr>
<td></td>
<td>
<a href="#">查看我的状态</a>
</td>
</tr>
<!-- 应聘者确认 -->
<tr>
<td></td>
<td>
<h3>请应聘者确认: </h3>
<ul>
<li>以上信息真实有效</li>
<li>能够尽早去公司实习</li>
<li>能接受公司的加班文化</li>
</ul>
</td>
</tr>
</tbody>
</table>
参考文档：
HTML菜鸟教程：HTML 列表 | 菜鸟教程 (runoob.com)
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
