当前位置：首页 > article >正文

【2025.2最新版】从零开始的HTML网页开发学习笔记（包含网页基础概念 HTML语法前端工具VsCode介绍）

article 2025/2/24 13:01:23

文章目录

基础概念篇
- 网页相关的基础概念
- 浏览器和浏览器内核
- Web标准
HTML5使用语法
- HTML的基本语法规范
- HTML文件基本结构标签
- 文档类型声明语言和字符集设置
- 元数据标签
- 外部链接标签
- 语义化标签
- 文本排版标签
- 文本格式化标签
- 两种容器标签
- 图像标签
- 视频标签
- 音频标签
- 画布标签
- 超链接标签
- 代码注释常用特殊字符
- 表格标签
- 列表标签
- - 无序列表
  - 有序列表
  - 自定义列表（描述列表）
- 表单标签
- - 表单域标签
  - 表单输入标签
  - 其他表单标签
- 按钮标签
- 内联网页标签
前端开发工具VSCode基本介绍
- VsCode推荐插件
- VSCode快捷键
- Live Server 插件端口修改

基础概念篇

网页相关的基础概念

网页和网站：

网页的概念：
- 网页是通过使用 HTML 等标记语言，遵循特定的语法规则来编写的文件。
- 网页文件必须通过浏览器进行解析、渲染，并执行其中的脚本代码，从而转换为用户可阅读和互动的界面。
- 网页内容通常包括文本、图片、音频、视频以及超链接等多种元素。
- 网页文件通常以 .html 或 .htm 作为后缀，因此它们也被称作HTML文件。
网站的概念：网站是由一系列内容相关、相互链接的网页组成的集合，旨在为访问者提供特定类型的信息或服务。

HTML（超文本标记语言）：一种用于构建网页内容结构的标记语言，其设计简洁，易于理解和使用。

超文本：突破了传统文本的界限，允许在文档中嵌入图片、音频、视频以及超链接等丰富媒体内容。
标记语言：本身不是一种编程语言，而是一种基于标记的系统，通过使用一系列预定义的标签来描述网页的结构和内容。这些标签指示浏览器如何展示文档中的各个元素。

创建并查看HTML文件的最简方法：

首先，启动记事本或任何纯文本编辑器，并创建一个新的文本文件。
接着，在编辑器中输入或粘贴HTML代码。
然后，将文件保存到计算机上，确保将文件扩展名更改为 .html 或 .htm 。
最后，使用浏览器打开该HTML文件，查看和体验编写的网页效果。

浏览器和浏览器内核

浏览器：

基本概念：用于显示和运行网页的平台，它使得用户能够访问和互动互联网上的内容。
国际上常用的浏览器：包括微软开发的 IE 浏览器、Mozilla 基金会推出的开源浏览器 Firefox 、谷歌公司推出的 Chrome 浏览器、微软的新一代浏览器 Edge、苹果公司开发的 Safari 浏览器，以及起源于挪威电信公司研究的 Opera 浏览器。
前端开发人员的浏览器选择：由于 Chrome 浏览器在市场上占据较大份额，许多前端开发人员倾向于选择它进行开发和测试。

浏览器内核：

基本概念：浏览器内核也被称为渲染引擎，是浏览器的核心组件，负责解析HTML文档、处理样式信息，并渲染网页内容。
常用的浏览器内核：
- Trident：曾是 IE 浏览器的内核，也被一些国产浏览器如猎豹安全浏览器、百度浏览器和搜狗浏览器所采用。
- Gecko：Firefox 浏览器的内核，一个开源的浏览器内核，以其稳定性和扩展性而闻名。
- Webkit：最初由苹果公司开发，用于 Safari 浏览器，也被一些追求性能的浏览器所采用。
- Blink：由谷歌基于 Webkit 开发的分支，现在是 Chrome 浏览器和 Opera 浏览器的内核。此外，360安全浏览器和QQ浏览器等国产浏览器也采用了 Blink 内核。
国产浏览器常用内核：国产浏览器大部分使用的是 Webkit 或 Blink 内核。

Web标准

基本概念：Web标准是由万维网联盟（W3C）以及其他标准化组织共同制定的一系列规范集合，旨在统一网络内容的发布和显示。

为什么要制定标准：制定Web标准的目的是为了确保不同开发人员能够编写出统一、兼容的网页内容。这样做的好处包括简化网站的维护过程、减少网站流量消耗、提升页面加载速度，以及优化用户体验。

标准组成：Web标准分为三个核心部分：结构、表现和行为，这三者应当相互独立，以确保网页的清晰和高效。

结构：涉及网页内容的组织与分类，主要通过 HTML（超文本标记语言）来实现。
表现：关注网页的外观和布局设计，如字体、颜色、间距等，主要通过 CSS（层叠样式表）来定义。
行为：涉及网页的交互性和动态功能，如用户输入响应和页面效果，主要通过 JavaScript（JS）来编写。

HTML5使用语法

HTML的基本语法规范

标签的表示：在HTML中，所有的标签名必须被包含在一对尖括号 <> 内。

单个标签和成对标签：

大多数HTML标签是成对出现的，包括一个开始标签 <标签名> 和一个相应的结束标签 </标签名> ，它们一起定义了元素的作用范围。
也有一些标签是单个标签（自闭合标签），如 <标签名 />。这一类标签的数量相对来说非常少。
在HTML5中，推荐即使是自闭合标签也使用斜杠来明确表示其自闭合性质，尽管对于某些传统标签，如 <img> 和 <br> ，省略斜杠也是可接受的。

双标签之间的关系：HTML中的双标签可以形成两种基本关系：包含（嵌套）关系，其中一个标签完全包含在另一个标签内；以及并列关系，其中标签在文档结构中是兄弟关系，并排存在。

HTML文件基本结构标签

<html>标签：作为HTML文档的根标签，这是一个双标签，所有的其他HTML标签和内容都应当嵌套在 <html> 标签内部。

<head>标签：这是一个双标签，用于定义HTML文档的头部，其中包含了文档的元数据，如标题、样式、脚本和字符编码等信息。

<title>标签：作为 <head> 标签的必需的子标签，<title> 是一个双标签，它用于指定网页的标题，这个标题将在浏览器的标题栏或标签页上显示。

<body>标签：这是一个双标签，包含了HTML文档的所有主体内容，如文本、图像、链接和其他页面元素，是网页上用户直接交互的部分。

文档类型声明语言和字符集设置

文档类型声明标签 <!DOCTYPE>：

使用语法：<!DOCTYPE html>
标签作用：该标签告诉浏览器用来显示网页的的HTML版本是 HTML5（而非 HTML4 和 XML 等其他HTML版本）。
标签位置：该声明必须位于HTML文档的第一行。
注意事项：该标签不是一个HTML标签，而是一个文档类型声明，它对整个文档的结构和渲染模式进行定义。

HTML标签的lang属性：

使用语法：<html lang=语言名称>。
属性作用：该属性用于声明网页的语言，有助于搜索引擎优化、屏幕阅读器的正确发音等浏览器内部功能。
属性值：常见的属性值中，en 表示英文，zh-CN 表示简体中文， zh-TW 表示繁体中文， fr 表示法语。这个属性并不限制网页显示的内容语言，而是提供有关文档语言的信息。
注意事项：即使设置了 lang 属性，网页仍然可以包含其他语言的内容。定义该属性值只是为浏览器提供参考，例如网页自带的翻译功能。

设置HTML文件的字符集：

设置方式：在 <head> 标签内使用 <meta charset="字符集类型"> 来设置。
属性作用：指定HTML文件使用的字符编码，确保浏览器正确地解释和显示字符。
常用的属性值：荐使用"utf-8"，这是一种通用的字符编码，能够支持世界上大多数语言的字符。其他的编码方式如 GB2312、BIG5、GBK 等，通常用于特定语言环境。

最基础的HTML文件模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>网页标题</title>
</head>
<body>
    欢迎来到我的网页
</body>
</html>

元数据标签

元数据的概念：元数据是指那些描述其他数据的数据。虽然它不会直接显示在网页内容中，但它在幕后扮演着重要角色，影响着网页的索引、显示和交互。

标签作用：<meta> 标签用于提供关于网页的元数据信息，这些信息对于浏览器、搜索引擎以及其他网络服务来说是至关重要的。

常见的网页元数据：包括但不限于网页的字符编码、描述、关键词、作者信息以及页面刷新频率等。

代码中的位置：<meta> 标签通常放置在 HTML 文档的 <head> 部分中。在该标签中，可以使用name属性或http-equiv属性来指定元数据类型。这两种属性是互斥的，即一个<meta>标签不能同时使用这两个属性。

使用语法：（关于如何在 <meta> 标签中指定网页编码，我们已在之前的讨论中详述，故此处不再重复）

添加网页描述信息：通过 <meta name="description" content="具体网页描述">，可以提供对网页内容的简洁概述。这有助于搜索引擎在搜索结果中展示该网页，从而提高可见性。
添加网页关键词信息：使用 <meta name="keywords" content="关键词1, 关键词2, 关键词3"> 来列出与网页内容相关的关键词。这些关键词应以英文逗号分隔，有助于搜索引擎优化。
添加网页作者信息：通过 <meta name="author" content="作者名">，可以标明网页的创建者或维护者。
添加网页的响应式设计：<meta name="viewport" content="width=device-width, initial-scale=1.0"> ，这行代码将网页的宽度设置为与当前设备的屏幕宽度一致，且网页的初始缩放比例为1:1。这样的设置确保了网页在不同设备上，尤其是移动设备上，能够以适当的尺寸和比例进行显示，从而提升用户体验。
添加IE浏览器的文档模式：使用 <meta http-equiv="X-UA-Compatible" content=文档模式属性值> 可以设置IE浏览器的文档模式，文档模式用于控制IE浏览器如何渲染界面。常用的属性值是"IE=edge"，表示使用IE浏览器最新的Edge模式来进行页面渲染。对其他的浏览器使用这一行代码则不会影响渲染效果。注意，应将该标签放在 <head> 标签内的最顶部，确保在加载CSS和JS前生效。

外部链接标签

标签作用：用于指定当前文档与外部资源之间的关系。

代码位置：通常位于HTML文档的 <head> 部分。

基本语法：

<link rel="关系类型" href="资源URL">

rel属性：定义了当前文档与链接资源的关系类型。以下是一些常用的rel属性值：

链接到外部样式表：<link rel="stylesheet" href="styles.css">
链接到网页图标：<link rel="icon" href="favicon.ico">
链接到替代版本的文档（如RSS订阅）：<link rel="alternate" href="rss.xml" type="application/rss+xml">
链接到文档的作者信息：<link rel="author" href="author.html">
链接到文档的版权信息：<link rel="license" href="license.txt">

href属性介绍：指定链接资源的URL，可以是相对路径或绝对路径。

语义化标签

下面介绍的这些标签都是在 HTML5 中引入的。

<header> 标签：
- 基本作用：<header> 标签通常用于表示页面或页面中一个区域的头部部分，一般包含网站的 logo、导航菜单、搜索框等内容。
- 使用语法：<header> ... </header>
- 注意事项：一个页面可以有多个 <header> 元素，比如在页面顶部有一个全局的 <header>，在文章、侧边栏等区域也可以有各自的 <header>。
<nav> 标签：
- 基本作用：<nav> 标签用于定义页面的导航链接部分，其中应该包含指向其他页面或当前页面其他部分的链接。并非页面上所有的链接都需要放在 <nav> 标签中，通常仅用于主要的导航菜单。
- 使用语法：<nav> ... </nav>
<main> 标签：
- 基本作用：<main> 标签用于表示页面的主要内容区域。
- 使用语法：<main> ... </main>
- 注意事项：一个页面只能有一个 <main> 元素，并且它应该是页面内容中独有的部分，不包含重复的内容（如侧边栏、页脚、页眉等）。
<footer> 标签：
- 基本作用：<footer> 标签用于表示页面或页面中一个区域的底部部分，通常包含版权信息、联系方式、相关链接等内容。
- 使用语法：<fooster> ... </fooster>
- 注意事项：一个页面可以有多个 <footer> 元素，比如在页面底部有一个全局的 <footer>，在文章、侧边栏等区域也可以有各自的 <footer>。
<section> 标签：
- 基本作用：<section> 标签用于定义文档中的一个区域，比如章节、页眉、页脚或文档中的其他部分。它应该是有语义的内容分组，通常包含一个标题（<h1> - <h6>）。
- 使用语法：<section> ... </section>
<article> 标签：
- 基本作用：<article> 标签用于定义独立的、完整的、可以独自存在的内容，比如一篇博客文章、新闻报道、论坛帖子等。
- 使用语法：<article> ... </article>
- 注意事项：每个 <article> 都应该有其独立的意义，并且可以在其他地方复用。
<aside> 标签：
- 基本作用：<aside> 标签用于定义与页面主要内容相关但又相对独立的内容，通常表现为侧边栏，包含一些补充信息、相关链接、广告等。
- 使用语法：<aside> ... </aside>

文本排版标签

标题系列标签<h>：

标签作用：成对标签，用于定义网页内容的标题。这些标题在浏览器中通常会以加粗和较大的字体显示，并且每个标题独占一行，以突出其重要性。
标签分级：在HTML5中，标题标签从 <h1> 到 <h6> 共分为六个级别，其中 <h1> 表示最高级别的标题，字体最大，重要性最高；而 <h6> 表示最低级别的标题，字体最小，重要性最低。这种分级有助于构建文档的结构，并且对SEO（搜索引擎优化）也有积极作用。

段落标签<p>：

标签作用：成对标签，用于将文本内容组织成段落。它在网页设计中起到了分隔文本块的作用。
标签特点：段落内的文本会根据浏览器窗口的宽度自动换行，并且段落与段落之间会有默认的垂直间距，这有助于提高文档的可读性。

换行标签<br>：

标签作用：单标签，用于在文本中强制创建一个换行，而不是等待文本到达浏览器窗口的边缘时自动换行。
标签特点：该标签可以在不增加额外间距的情况下实现文本的换行。

水平线标签<hr>：

标签作用：单标签，用于在网页中插入一条水平线。这条水平线通常用来分隔内容，如分隔文章的不同部分、章节或者标题与正文。

文本格式化标签

文本加粗标签：

推荐表示方法：<strong>...需要加粗的文本...</strong>。
另一种表示方法：<b>...需要加粗的文本...</b>。

文本倾斜标签：

推荐表示方法：<em>...需要倾斜的文本...</em>。
另一种表示方法：<i>...需要倾斜的文本...</i>。

文本删除线标签：

推荐表示方法：<del>...需要加删除线的文本...</del>。
另一种表示方法：<s>...需要加删除线的文本...</s>。

文本下划线标签：

推荐表示方法：<ins>...需要加下划线的文本...</ins>。
另一种表示方法：<u>...需要加下划线的文本...</u>。

文本高亮标签：

表示方法：<mark>...需要添加高亮的文本...</mark>。

文本缩小标签：

表示方法：<small>...需要变为小字体的文本...</small>。

文本上标和下标标签：

表示方法：用 <sup> ... </sup> 表示作为上标的文本，用 <sub> ... </sub> 表示作为下标的文本。

备注：文本格式化标签中，加粗和倾斜最为常用，其他几种标签使用情况较少。

两种容器标签

标签作用：容器标签用于封装和包含网页中的元素，充当内容的容器。这两个标签本身不带有特定的语义，主要用于布局和样式应用。

标签分类：<div> 标签和 <span> 标签，这两个标签都是双标签。

标签区别：

<div> 标签作为一个块级元素，它会自动开始新的一行，适用于创建较大的区块和布局结构。
<span> 标签是一个内联元素，它可以在同一行内与其他内容并列，适合对小块文本进行特定样式的封装。

图像标签

标签格式：<img src="图像URL"/>，该标签是一个单标签。
常用属性：
- scr：<img> 标签的必须属性，表示图像的URL。这里的URL可以是一个相对路径或绝对路径，也可以是一个网络图片的链接地址。
- alt：如果图像不能正常显示，则进行显示的文字。
- title：鼠标移动到图像上时进行提示的文字。
- width：给图像设置宽度。一般宽度和高度设置一个即可，另一个属性会自动根据图片的高宽比进行调整。
- height：给图像设置高度。一般宽度和高度设置一个即可，另一个属性会自动根据图片的高宽比进行调整。
- border：给图像设置边框宽度。但是在一般情况下，都是通过CSS对图像的宽度进行设置而非使用HTML，因此该属性往往用不到。

注意事项：

属性顺序和分隔方式：同一个标签的各个属性之间不分先后顺序；标签名和属性，属性和属性之间均采用空格进行分隔。
属性值格式：属性采用键值对的格式，即属性=”属性值"。

视频标签

标签作用：在网页中嵌入视频内容，并且支持多种视频格式。

使用语法：

<video src="video.mp4" controls></video>

属性介绍：

src：指定视频文件的 URL。例如 <video src="video.mp4"></video>
controls：添加播放控件（播放、暂停、音量、进度条等）。例如 <video src="video.mp4" controls></video>
autoplay：视频加载后自动播放。例如 <video src="video.mp4" autoplay></video>
loop：视频播放结束后自动重新播放。例如 <video src="video.mp4" loop></video>
muted：视频静音。例如 <video src="video.mp4" muted></video>
poster：指定视频加载前的占位图像。例如 <video src="video.mp4" poster="poster.jpg"></video>
width 和 height：设置视频的宽度和高度。例如 <video src="video.mp4" width="640" height="360"></video>
preload：指定视频在页面加载时是否预加载。例如 <video src="video.mp4" preload="auto"></video> 。可选值：auto（预加载整个视频）、metadata（仅预加载元数据）、none（不预加载）。

音频标签

标签作用：在网页中嵌入音频内容。

使用语法：

<audio src="audio.mp3" controls></audio>

属性介绍：

该标签的属性和 <video> 标签的属性类似，因此可以直接参考视频标签部分的内容。
和视频标签属性的区别在于，<audio> 标签没有 poster 属性（因为音频无需视觉展示内容），通常也不需要设置高度和宽度。

画布标签

标签简介：HTML5中引入的一个元素，用于在网页上绘制图形、动画、图像等。它提供了一个可以通过 JavaScript 进行绘制的空白画布，开发者可以在上面绘制各种图形、文本、图像，甚至实现复杂的动画效果。

使用语法：该元素的创建语法如下，具体对该元素进行的操作一般都是基于JS进行的。

<canvas width="画布宽度" height="画布高度"></canvas>

超链接标签

超链接分类：

外部链接：指向其他网站的超链接，一般以 http:// 或 https:// 开头，少数情况下也会使用其他类型的协议（例如 ftp://）。
内部链接：网站内部各个网页之间的超链接，不需要以 http:// 或 https:// 开头，而是直接指向网站内部的相对路径或绝对路径。

超链接标签<a>：

标签作用：从当前网页页面链接到另一个网页页面。
标签语法：

   <a href="跳转目标的URL" target="目标窗口的弹出方式">...表示超链接的文本或图像...</a>

href属性：指定链接目标的URL地址，是一个必须属性。一些特殊的属性值如下：

空链接：如果目标网页还不确定或不存在，则将属性值设置为“#”即可，表示空链接。
下载链接：若该属性值设置为一个文件的路径，如压缩文件或可执行文件，则点击该链接将触发文件下载。
网页元素链接：超链接可以包含任何网页元素，例如，使用图片作为链接的语法为 <a href="跳转目标的URL"><img src="图片地址" alt="图片描述"></a>。
锚点链接：
- 链接作用：在点击链接后，可以快速定位到当前网页中的某个指定位置。
- 设置方法：首先找到需要跳转到的位置，为该处的标签设置 id 属性，属性值即可视为该标签的名称，假设名称为 X 。接着，在进行跳转的链接中，将 href 属性的值设置为 #X 即可。

target属性：表示超链接窗口的打开方式。默认值为”_self"，表示用当前窗口打开超链接；如果采用"_blank"，则表示以新窗口的方式打开超链接。

代码注释常用特殊字符

代码注释：

注释的作用：让代码更易读和更容易维护。
注释的语法：。

特殊字符：常用的特殊字符只需要记住空格、大于号和小于号即可，其他的特殊字符可以在使用时进行查阅。

空格：&nbsp
大于号：&gt
小于号：&lt

表格标签

基本作用：用于清晰整齐地展示数据。

使用语法：

<table>
  <caption>表格标题</caption>
  <tr>
    <td>单元格内的文字</td>
  </tr>
</table>

表格标签<table>：双标签，用于定义表格体本身。
表格标题标签 <caption> ：双标签，用于定义表格的标题。该标签必须放在表格标签下的第一行中。该标签是可选的。
表行标签<tr>：双标签，用于定义表格中的行，必须嵌套在<table>标签中。
单元格标签<td>：双标签，用于定义表格中的单元格，必须嵌套在<tr>标签中。
表头单元格标签<th>：表头单元格，是一种特殊的单元格，其中的内容会加粗居中显示。该标签也必须嵌套定义在表行标签<tr>中。
表格的头部标签<thead>、主体标签<tbody> 和页脚标签 <tfoot>：
- 标签作用：这三个标签并不定义网页的显示内容。但是当表格很长时，这三个标签可以很好地表达表格的语义。
- 标签使用：这三个标签都是双标签，常常配合在一起使用。其中 <thead> 标签表示的区域即为表格的头部区域，<tbody> 表示的区域即为表格的主体区域，而 <tfoot> 表示表格的页脚区域（主要用于放置那些对表格整体数据进行概括、总结的内容，比如统计数据、合计金额等，增强表格的可读性和实用性。）另外，<thead> 内部必须有 <tr> 标签。
合并单元格：
- 方式分类：可以分为跨行合并和跨列合并两种方式，分别用rowspan和colspan进行表示。这种单元格合并，实际上是指定某一个单元格所占的行数和列数。
- 目标单元格的概念：对于跨行合并，目标单元格即为最上方的单元格；对于跨列合并，目标单元格即为最左侧的单元格。合并单元格时，需要在目标单元格中写合并代码。
- 合并单元格的步骤：首先，确定是跨行合并还是跨列合并；接着，找到目标单元格，将合并方式作为该单元格的属性，需要合并的单元格数量作为属性值，写上合并代码。例如，<td colspan="2"></td>；最后，删除合并后多出的单元格。

表格的外观设置：一般是通过CSS进行设置，因此此处暂时不进行介绍。可以设置的内容包括表格在网页中的位置、表格单元格的边框粗细、表格单元格中的内容到单元格边框的距离、单元格之间的间距、表格的宽度和宽度等。

列表标签

标签作用：列表的作用是完成网页布局。

列表分类：列表可以分为无序列表、有序列表和自定义列表。

无序列表

基本概念：无序列表是指各个列表项之间没有先后顺序的列表，是三种列表中最重要的列表。

使用语法：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

注意事项：

<ul> 标签中只能直接嵌套 <li> 标签，而不能嵌套其他类型的标签。
<li> 标签相当于是一个容器，里面可以存放各种网页元素；可以通过CSS设置无序列表的样式属性。

基本样式：无序列表的每个列表项之前都会有一个小圆点，但是实际开发中一般会通过CSS样式设置将其去掉。基本语法是通过CSS将所有该列表项标签 <li> 的 list-style 属性值设置为 none。

有序列表

基本概念：有序列表是指列表项具有先后顺序的列表，但是这种列表在开发过程中使用不多。

使用语法：

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ol>

注意事项：

<ol> 标签中只能嵌套 <li> 标签，而不能嵌套其他类型的标签。
<li> 标签相当于是一个容器，里面可以存放各种网页元素；可以通过CSS设置有序列表的样式属性。

基本样式：有序列表的每个列表项之前都会有一个标号，但是实际开发中一般会通过CSS样式设置将其去掉。基本语法是通过CSS将所有该列表项标签 <li> 的 list-style 属性值设置为 none。

自定义列表（描述列表）

使用场景：一个列表中有多个项目，每一个项目都有多个描述或解释。一个常见的自定义列表使用场景如下所示：
在这里插入图片描述

使用语法：

用 <dl> 标签来定义自定义列表，用 <dt> 来定义自定义列表中的每一个项目（其中 dt 表示定义术语），用 <dd> 来定义每一个项目的描述和解释。需要注意的是，<dl> 标签中同样只能嵌套 <dt> 标签和 <dd> 标签。
虽然 <dt> 标签和 <dd> 标签没有明确的个数对应关系，但是一个 <dt> 往往对应多个 <dd>。
容易出错的是，<dt> 和 <dd> 属于并列关系，而非包含关系。

<dl>
  <dt>项目名1</dt>
    <dd>项目解释1</dd>
    <dd>项目解释2</dd>
</dl>

表单标签

标签作用：为了与用户进行交互，收集用户的资料信息。

表单组成：表单可以分为表单域、表单控件（也被称为表单元素）和提示信息三部分。

表单域标签

基本概念：包含表单控件的区域。

基本作用：当表单提交给服务器时，会将表单域中的所有信息提交。

使用语法：使用<form>标签定义表单域。具体语法为：

   <form action="url地址" method="提交方式" name="表单域名称" enctype="表单数据编码方式">...各种表单元素控件...</form>

action参数：用于指定接收并处理表单数据的服务器程序的URL地址。
method参数：用于设置表单数据的提交方式，取值为 get 或 post 。
name参数：用于指定表单的名称，来区分同一个页面中的多个不同表单。
enctype参数：用于指定表单数据发送到服务器之前的编码类型。不同的编码类型会导致数据以不同的格式发送到服务器，服务器需要根据这个格式正确解析数据。该属性的可取属性值有下面三个：
- application/x-www-form-urlencoded：默认值，将表单数据转换为键值对的形式，其中键和值都采用URL编码。这种方式适合发送简单的数据，例如文本框、单选框和复选框中的内容。
- multipart/form-data：当表单中包含文件上传的控件时，必须采用这个编码类型。它会将表单分割为多个部分，每个部分都有自己的头部信息，这样可以上传二进制数据。该属性值适用于包含文件上传的表单，也可以用于发送非ASCII码字符和二进制数据。
- text/plain：一种简单的编码方式，直接使用文本形式发送表单数据而不进行URL编码。这种方式很少使用。

表单输入标签

基本使用：单标签，使用方式为：<input type="属性值”/>，其中属性值取不同值表示使用不同的表单控件进行输入。 type 属性的常用的属性值如下：
- <input type="text"/>：表示输入方式为简单的文本框输入。
- <input type="password"/>：表示以掩码文本框的形式进行输入。
- <input type="radio"/>：表示以单选框的形式进行输入；同一组单选框中的选项需要设置 name 属性，即通过命名来标识这些单选框属于同一组中。语法为 <input type="radio" name="指定的名称" /> 。
- <input type="checkbox"/>：表示以复选框的形式进行输入。一组复选框也需要指定name属性，来表示这些复选框属于同一组中。
- <input type="submit"/>：表示定义提交按钮，会自动将表单域中的所有数据发送给服务器。
- <input type="reset"/>：表示定义重置按钮，会自动将表单域中的所有数据全部清空。
- <input type="button"/>：定义一个普通按钮，来完成某项具体的工作。具体的工作脚本内容往往由JavaScript进行设置。实际的开发过程中更多直接使用<button></button>标签，而不是设置<input>标签的type属性值为button。
- <input type="file"/>：定义一个上传文件的按钮。下面给出一些常用的内容介绍：
  - 允许一次性上传多个文件：使用 <input type="file" multiple>。
  - 允许指定上传的文件类型：可以直接指定文件的扩展名，例如 ".jpg, .pdf, .png"，也可以指定MIME类型，例如接受所有类型的图片文件时可以使用 "image/*"。
  - 最常监听的事件：当用户在点击该按钮弹出的对话框中选择了文件且该文件与上一次选择的文件不同或是第一次选择，就会触发该元素的 change 事件，这是这个元素最常被JS代码监听的事件。
  - 注意事项：如果需要进行文件上传，则表单域的 enctype 属性的值只能设置为 multipart/form-data。
- <input type="hidden"/>：定义一个隐藏的输入字段。
- <input type="image"/>：定义表单提交按钮的另一种方法，但是按钮的外观是一张指定的图像。
其他属性：
- name 属性：编程人员自定义属性值，用于描述通过 <input> 标签输入的元素的名称，在单选框和复选框中也可以用于标识同一组中的多个单选框和复选框。每个表单元素都最好有该属性值。
- value 属性：编程人员自定义属性值，用于设置通过 <input> 标签输入的元素的值。对于文本框输入，可以直接在其中看到定义的该属性信息，而对于两种选择框则无法看出。该属性主要被后台人员使用。每个表单元素都应该有这个属性值。
- checked 属性：对选择框一类的输入类型适用，属性值固定为 "checked" ，规定通过 <input> 标签输入的元素首次加载时应该被选中。
- maxlength 属性：对于文本框一类的输入类型适用，属性值为一个整数，表示该输入控件中的最长字符个数。这个属性使用较少，并且可以通过正则表达式来进行等效替代。

其他表单标签

标注标签 <label>：

标签作用：双标签，该标签经常与表单一起使用。标签可以绑定一个表单元素，当点击 <label> 标签中的文本时，浏览器会自动将光标转到对应的表单元素上，从而方便用户使用。
绑定语法：首先，对于一个用于输入的 <input> 标签元素，设置其 id 属性的属性值为一个指定的名称。接着，创建一个 <label> 标签，然后将该标签的 for 属性的属性值为刚刚设置的名称即可。

下拉列表标签 <select>：

使用场景：双标签。在页面中，如果有多个选项让用户进行选择，并且想要节约用户的屏幕空间，则可以使用该标签。
使用语法：需要注意的是，该标签中至少包含一个选项。如果要定义某个选项为默认选中，则可以将该 <option> 的 selected属性的值设置为 “selected” 。

<select>
  <option>选项1</option>
  <option>选项2</option>
  ...
</select>

文本域标签 <textarea>：

使用场景：当用户输入的内容较多，单行的文本框就不够使用了，就需要使用该标签，因为该控件中可以输入多行文本。
使用语法：双标签。即 <textarea>...具体的文本内容...</textarea>。另外，可以用 rows 和 cols 两个属性指定该文本域的行数和列数（实际情况很少这么做，而是通过CSS进行调整）。
placeholder属性：用于在该区域没有文字输入时显示提示性文字，属性的值即提示文字的内容。当用户未输入内容时，textarea中会用浅灰色显示提示文字；当用户输入任何内容后，提示性文字都消失。

按钮标签

基本概念：与 <input type="button"> 类似，<button> 标签也可以用于创建按钮，但它提供了更多的灵活性和功能，也是实际开发过程中更加推荐的一种方法。

常用属性介绍：

type：定义按钮的类型，常见的值如下。默认值通常是 submit，但在某些浏览器中可能是 button。
- submit：按钮用于提交表单数据到服务器。
- reset：按钮用于重置表单数据到初始状态。
- button：按钮没有默认行为，通常用于触发JavaScript事件。
name：定义按钮的名称，用于在表单提交时标识按钮。
value：定义按钮的初始值，通常在表单提交时与按钮名称一起发送。
disabled：布尔属性，用于禁用按钮，使其不可点击。
form：指定按钮所属的表单。如果按钮在表单外部，可以通过此属性将其与特定表单关联。
autofocus：布尔属性，页面加载时自动聚焦到该按钮。
formaction：覆盖表单的 action 属性，指定按钮提交时的URL。
formmethod：覆盖表单的 method 属性，指定按钮提交时的HTTP方法（get或post）。
formenctype：覆盖表单的 enctype 属性，指定按钮提交时的数据编码类型。
formtarget：覆盖表单的 target 属性，指定按钮提交后在何处显示响应。
formnovalidate：布尔属性，覆盖表单的 novalidate 属性，指定按钮提交时不进行表单验证。

内联网页标签

基本概念：<iframe> 是 “Inline Frame” 的缩写，即内联框架。它允许在当前网页中嵌入一个独立的子页面，这个子页面可以拥有自己的 HTML 结构、样式和脚本，就像在一个页面中嵌套了另一个完整的页面。
语法格式：

<iframe src="嵌入页面的地址" width="宽度值" height="高度值">
  当浏览器不支持 iframe 时显示的内容
</iframe>

常用属性：
- src：指定要嵌入的 HTML 页面的 URL，这是 <iframe> 标签最关键的属性。
- width 和 height：用于设置 <iframe> 的宽度和高度，单位可以是像素（如 width="500"）或百分比（如 width="50%"）。
- frameborder：设置 <iframe> 的边框，值为 1 表示显示边框，值为 0 表示不显示边框。
- scrolling：控制 <iframe> 是否显示滚动条，取值可以是 yes（总是显示滚动条）、no（从不显示滚动条）、auto（根据内容自动显示滚动条）。
应用场景：
- 整合第三方内容：例如在网站中嵌入地图（如 Google 地图、百度地图）、视频（如 YouTube 视频、腾讯视频等），通过获取相应平台提供的嵌入代码（通常包含 <iframe> 标签），将其插入到自己的网页中。
- 页面布局：在一些复杂的页面布局中，可以使用 <iframe> 将不同功能模块的页面整合在一起，每个 <iframe> 显示一个独立的功能区域，便于管理和维护。
注意事项：使用 <iframe> 标签时需要注意跨域问题，由于浏览器的同源策略限制，不同源（协议、域名、端口号任意一个不同）的页面之间不能直接进行交互，这可能会影响到 <iframe> 与主页面之间的通信和数据获取。

前端开发工具VSCode基本介绍

基本介绍：VSCode是前端开发人员常用的一款开发工具，它能够自动生成HTML文件的基本结构，并且提供类型丰富的插件帮助前端开发人员进行编程和代码调试维护，因此推荐使用该工具进行前端开发。

VsCode推荐插件

可以在VsCode左侧的搜索框中搜索自己想要的插件，有一些插件需要重启VsCode之后才能使用。推荐的插件如下：

Chinese插件：将VsCode界面中的内容显示语言从英文变为中文。
Auto Rename Tag插件：通过双击成对标签中的一个，对其进行修改时，成对标签中的另一个标签也会自动进行相应的修改。
Open in Browser插件：编写好的HTML文件代码可以通过在IDE页面中右键菜单的方式直接打开，方便查看代码效果。但是，更推荐使用下面介绍的另一款插件Live Server。
Live Server插件：使用Open in Browser插件时，每次写完代码保存后，需要重新打开浏览器查看代码效果，比较麻烦。使用Live Server，只需代码保存完成后即可在浏览器中实时看到代码的运行效果，因此更推荐使用这个插件。
vscode icons插件：让不同后缀名的文件具有不同的图标。
Easy Less插件：将不能直接引入HTML文件中的LESS自动生成CSS文件。

VSCode快捷键

新建文件：Ctrl + N；
保存文件：Ctrl + S；
快速生成HTML文件的骨架标签：! + Tab；
放大/缩小页面：Ctrl + +/-；
快速复制一行：shift + Alt +↓；
选中多个相同的单词：ctrl + d；
添加多个光标：ctrl + Alt + ↑/↓；
查找替换：ctrl + h；
快速跳转到某一行：ctrl + g；
添加单行注释：ctrl + /；
添加多行注释：shift + Alt + a。

Live Server 插件端口修改

默认端口：当使用 Live Server 插件打卡一个网页时，使用的默认端口是 5500。

修改端口：可以在VsCode的扩展部分找到 Live Server，然后点开设置，在该扩展对应的 settings.json 文件中修改该扩展使用的端口号，如下图所示我将该插件的端口号修改为了 1314：

在这里插入图片描述
修改不了的情况：如果发现修改了 Live Server 的配套 settings.json 中的端口号，使用 Live Server 打开网页仍然显示之前的某个端口号，则是因为VsCode会给每个工作区设置一个默认端口号，且该端口号的默认优先级高于 Live Server 本身的端口号设置。如下所示，我们在VsCode的资源管理器中可以看到在 .vscode 目录下还有一个 setting.json 文件。