Web学习笔记-HTML

Web学习笔记-HTML
笔记内容转载自 AcWing 的 Web 应用课讲义，课程链接：AcWing Web 应用课。

MDN 官方文档：MDN Web Docs。
CONTENTS
1. VS Code环境配置

（1）Live Server
由于一般写网站时都是部署在 Linux 上，该插件可以模拟一个终端，相当于模拟了一个真正的开发环境（后端）。

（2）Auto Rename Tag
当修改 HTML 标签时，自动修改对应的标签对。

（3）自动格式化
在 Setting-Text Editor-Formatting 中勾选 Format On Save，这样保存代码的时候会自动格式化代码。

2. HTML基础标签

 2.1 HTML文件结构

HTML 的所有标签为树形结构，一般都有一个开始标签和一个结束标签，开始标签和结束标签之间的标签就是子节点，同级的标签就是兄弟节点，例如：
```
DOCTYPE html>

<html lang="zh-CN">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Web Application Lessontitle>
head>

<body>
 <h1>First Classh1>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
```
（1）标签
表示一个HTML文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。

（2）标签：
规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。

（3）标签：
表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。

（4）</code> 标签： 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。 （5）<code><meta></code> 标签： 表示那些不能由其它 HTML 元相关（meta-related）元素（<code><base></code>、<code><link></code>、<code><script></code>、<code><style></code> 或 <code><title></code>）之一表示的任何元数据信息。 常见属性： <ul><li><code>charset</code>：这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的 <code>utf-8</code>。</li><li><code>name</code>：<code>name</code> 和 <code>content</code> 属性可以一起使用，以 <code>名 - 值</code> 对的方式给文档提供元数据，其中 <code>name</code> 作为元数据的名称，<code>content</code> 作为元数据的值。</li></ul> （6）<code>link</code> 标签： 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标 <code><icon></code>，例如： <pre data-index="1" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><link rel="icon" href="/Web Application Lesson/images/logo.png"> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> （7）<code></code>： HTML 中只有多行注释，没有单行注释。 综合示例如下： <pre data-index="2" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="This is the description of web page."> <meta name="keywords" content="This is the keywords when searching."> <title>Web Application Lesson</title> <link rel="icon" href="/Web Application Lesson/images/logo.png"> </head> <body> <h1>First Class</h1>  </body> </html> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li></ul></pre> <h3><a name="t4"></a><a id="22__105"></a>2.2 文本标签</h3> 文本标签虽然很多，但大部分可看成是预定好样式的 <code><div></code> 和 <code></code>。 （1）<code><div></code> 标签： <code><div></code> 元素（或 HTML 文档分区元素）是一个通用型的流内容容器，在不使用 CSS 的情况下，其对内容或布局没有任何影响。其他块级标签例如：<code><h1>, , <pre>, <ul>, <ol>, <table></code>。方便后续为某一块内容设置样式，且在 JS 中可以对各个 <code>div</code> 进行操作。即在逻辑上将某一块代码归为一类。 （2）<code></code> 标签： <code></code> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类 <code>class</code> 或者 <code>id</code> 属性），或者这些元素有着共同的属性，比如 <code>lang</code>。应该在没有其他合适的语义元素时才使用它。<code></code> 与 <code><div></code> 元素很相似，但 <code><div></code> 是一个块元素而 <code></code> 则是行内元素。其他内联标签例如：<code>, , <del>, <ins>, <td>, <a></code>。 （3）<code><h1> - <h6></code> 标签： HTML 标题（Heading）元素呈现了六个不同的级别的标题，<code><h1></code> 级别最高，而 <code><h6></code> 级别最低。 （4）<code></code> 标签： <code></code> 元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<code></code> 是块级元素。 （5）<code><pre></code> 标签： <code><pre></code> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。（紧跟在 <code><pre></code> 开始标签后的换行符也会被省略） （6）<code> </code> 标签： <code> </code> 元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。 （7）<code><hr></code> 标签： <code><hr></code> 元素表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。 在 HTML 的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。所以如果想画一条横线，请使用适当的 <code>CSS</code> 样式来修饰。 （8）<code></code> 标签： <code></code> 元素用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。 （9）<code></code> 标签： HTML 提醒注意（Bring Attention To）元素 <code></code> 用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 <code></code> 元素用于显示粗体文字；替代方案是使用 <code>CSS</code> 中的 <code>font-weight</code> 属性来创建粗体文字。 （10）<code><del></code> 标签： <code><del></code> 元素表示一些被从文档中删除的文字内容，显示效果为在文字内容中间划一道横线。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。<code><ins></code> 标签的作用恰恰于此相反：表示文档中添加的内容。 （11）<code><ins></code> 标签： <code><ins></code> 元素定义已经被插入文档中的文本，显示效果为在文字内容底部划一道横线。 <h3><a name="t5"></a><a id="23__143"></a>2.3 图片</h3> <code><img></code> 元素将一份图像嵌入文档。默认为行内元素，即 <code>display: inline</code>。 （1）<code>src</code> 属性： 该属性是必须的，它包含了你想嵌入的图片的文件路径。 （2）<code>alt</code> 属性： 该属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它十分有用。屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。或者如果由于某种原因无法加载图像，普通浏览器也会在页面上显示 <code>alt</code> 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。 （3）<code>height</code> 属性： 图像的高度，在 HTML5 中的单位是 <code>CSS</code> 像素，在 HTML4 中既可以是像素也可以是百分比。可以只指定 <code>width</code> 和 <code>height</code> 中的一个值，浏览器会根据原始图像比例进行缩放。 （4）<code>width</code> 属性： 图像的宽度，在 HTML5 中的单位是 <code>CSS</code> 像素，在 HTML4 中既可以是像素也可以是百分比。 <h3><a name="t6"></a><a id="24__159"></a>2.4 音频与视频</h3> （1）<code><audio></code> 标签： <code><audio></code> 元素用于在文档中嵌入音频内容。<code><audio></code> 元素可以包含一个或多个音频资源，这些音频资源可以使用 <code>src</code> 属性或者 <code><source></code> 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 <code>MediaStream</code> 将这个元素用于流式媒体。 <ul><li>使用 <code>src</code> 属性播放：</li></ul> <pre data-index="3" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><audio controls src="/Web Application Lesson/audios/bgm.mp3"> Your browser does not support this audio element. </audio> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <ul><li><code><audio></code> 与多个 <code><source></code> 元素： 这个例子包含了多个 <code><source></code> 元素。如果能够播放的话，浏览器就会试图去加载第一个 <code>source</code> 元素；如果不行，那就退而求其次去加载第二个。</li></ul> <pre data-index="4" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><audio controls> <source src="/Web Application Lesson/audios/bgm1.mp3" type="audio/mpeg"> <source src="/Web Application Lesson/audios/bgm2.mp3" type="audio/mpeg"> Your browser does not support this audio element. </audio> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> （2）<code><video></code> 标签： <code><video></code> 元素用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <code><video></code> 标签用于音频内容，但是 <code><audio></code> 元素可能在用户体验上更合适。该标签的使用方法与 <code><audio></code> 相同。 <pre data-index="5" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><video controls width="800" src="/Web Application Lesson/videos/mv.mp4"> Your browser does not support embedded videos. </video> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <h3><a name="t7"></a><a id="25__189"></a>2.5 超链接</h3> <code><a></code> 元素（或称锚元素）可以通过它的 <code>href</code> 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<code><a></code> 中的内容应该指明链接的意图。如果存在 <code>href</code> 属性，当 <code><a></code> 元素聚焦时按下回车键就会激活它。如果点击链接打开新标签页面需要加入属性：<code>target="_blank"</code>。 <pre data-index="6" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><a href="https://www.baidu.com" target="_blank">Baidu</a> <a href="https://www.acwing.com" target="_blank"> <img height="200" src="/Web Application Lesson/images/logo.png" alt="logo"> </a> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <h3><a name="t8"></a><a id="26__201"></a>2.6 表单</h3> （1）<code><form></code> 标签： <code><form></code> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。其常用的属性介绍如下： <ul><li><code>action</code>：处理表单提交的 URL，就是想让表单提交到的地址。</li><li><code>method</code>：浏览器提交表单使用的 HTTP 请求方式，若为 <code>"get"</code> 表单数据会附加在 <code>action</code> 属性的 URL 中，并以 <code>'?'</code> 作为分隔符；若为 <code>"post"</code> 表单数据会包含在表单体内然后发送给服务器。</li></ul> （2）<code><input></code> 标签： <code><input></code> 元素表示一个用来填写内容的输入框，常见类型有： <ul><li><code><input type="text"></code>：创建基础的单行文本框。</li><li><code><input type="number"></code>：用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头，让用户可以使用鼠标增加和减少输入的值，或者只需用指尖敲击即可。</li><li><code><input type="email"></code>：带有 <code>email</code>（电子邮箱）类型标记的输入框元素（<code><input></code>）能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了 <code>multiple</code> 属性，用户还可以输入多个电子邮箱地址。在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址（非空值且符合电子邮箱地址格式）<code>CSS</code> 伪标签 <code>:valid</code> 和 <code>:invalid</code> 能够在校验后自动应用。</li><li><code><input type="password"></code>：<code><input></code> 元素里有一种叫做 <code>password</code> 的值，给我们一个方法让用户更加安全的输入密码。这个元素是作为一行纯文本编辑器控件呈现的，其中文本被遮蔽以致于无法读取，通常通过用诸如星号（<code>*</code>）或点（<code>•</code>）等符号替换每个字符来实现。这个符号会根据用户的浏览器和操作系统来具体显示哪个。</li><li><code><input type="radio"></code>：<code><input></code> 的 <code>radio</code> 类型元素默认渲染为小型圆圈图表，填充即为激活，类似于复选框（checkbox）类型。单选按钮允许你选择单一的值（<code>value</code> 属性）来提交表单。<code>name</code> 属性相同的为一组 <code>radio</code>，提交表单时的数据为 <code>name=value</code> 形式。</li><li><code><input type="checkbox"></code>：复选框，如果添加 <code>checked</code> 属性表示该复选框是否被默认选中（当页面加载时），当表单被提交时，只有当前被选中的复选框的 <code>value</code> 属性的值会被提交给服务器。</li></ul> 常用属性有： <ul><li><code>name</code>：名称，提交表单时以 <code>name=value</code> 的形式提交</li><li><code>id</code>：唯一ID</li><li><code>maxlength</code>：最大长度</li><li><code>minlength</code>：最小长度</li><li><code>required</code>：是否必填</li><li><code>placeholder</code>：当表单控件为空时，控件中显示的内容</li></ul> 综合示例如下： <pre data-index="7" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><form> <label for="username">账号：</label> <input type="text" name="username" id="username" placeholder="Please input username"> <br> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="Please input password"> <br> <label for="email">邮箱：</label> <input type="email" name="email" id="email"> <br> <label for="age">年龄：</label> <input type="number" name="age" id="age"> <br> <label for="cpp">C++</label> <input type="radio" name="lang" value="cpp" id="cpp"> <label for="java">Java</label> <input type="radio" name="lang" value="java" id="java"> <label for="py">Python</label> <input type="radio" name="lang" value="py" id="py"> <br> </form> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li></ul></pre> （3）<code><textarea></code> 标签： <code><textarea></code> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。参数 <code>rows</code> 指定初始的行数，<code>cols</code> 指定初始的列数。 <pre data-index="8" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><label for="feedback"></label> <textarea name="feedback" id="feedback" cols="50" rows="10"></textarea> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> （4）<code><select></code> 与 <code><option></code> 标签： <code><select></code> 元素表示一个提供选项菜单的控件。 <pre data-index="9" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><label for="pet_select">选择宠物：</label> <select name="pet_select" id="pet_select"> <option value="Cat">Cat</option> <option selected value="Dog">Dog</option> <option value="Fish">Fish</option> <option value="Bird">Bird</option> </select> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> （5）<code><button></code> 标签： <code><button></code> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。默认情况下，HTML 按钮的显示样式接近于 <code>user agent</code> 所在的宿主系统平台（用户操作系统）的按钮，但你可以使用 <code>CSS</code> 来改变按钮的样貌。 <pre data-index="10" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><button type="subimt">Submit</button> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h3><a name="t9"></a><a id="27__288"></a>2.7 列表</h3> （1）<code><ul></code> 与 <code><li></code> 标签： <code><ul></code> 元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表，通常渲染为一个用小点或者小圆圈表示的列表。 <pre data-index="11" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> （2）<code><ol></code> 与 <code><li></code> 标签： <code><ol></code> 元素表示有序列表，通常渲染为一个带编号的列表。 <pre data-index="12" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> （3）<code><dl></code>、<code><dt></code> 与 <code><dd></code> 标签： <code><dl></code> 元素（或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据（键-值对列表）。 <pre data-index="13" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><dl> <dt>Name</dt> <dd>Godzilla</dd> <dt>Born</dt> <dd>1952</dd> <dt>Birthplace</dt> <dd>Japan</dd> <dt>Color</dt> <dd>Green</dd> <dd>Orange</dd> </dl> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li></ul></pre> <h3><a name="t10"></a><a id="28__329"></a>2.8 表格</h3> （1）<code><table></code> 标签： <code>table</code> 元素表示表格数据，即通过二维数据表表示的信息。 （2）<code><thead></code> 标签： <code><thead></code> 元素定义了一组定义表格的列头的行。 （3）<code><tbody></code> 标签： <code><tbody></code> 元素定义一组数据行。 （4）<code><tr></code> 标签： <code><tr></code> 元素定义表格中的行。同一行可同时出现 <code><td></code> 和 <code><th></code> 元素。 （5）<code><th></code> 标签： <code><th></code> 元素定义表格内的表头单元格。 （6）<code><td></code> 标签： <code><td></code> 元素定义了一个包含数据的表格单元格。 （7）<code><caption></code> 标签： <code><caption></code> 元素（or HTML 表格标题元素）展示一个表格的标题，它常常作为 <code><table></code> 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被 <code>CSS</code> 样式化，所以，它同样可以出现在相对于表格的任意位置。 综合示例： <pre data-index="14" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><table> <caption>My Table</caption> <thead> <tr> <th>name</th> <th>score</th> </tr> </thead> <tbody> <tr> <td>Alice</td> <td>80</td> </tr> <tr> <td>Bob</td> <td>70</td> </tbody> </table> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li></ul></pre> <h3><a name="t11"></a><a id="29__375"></a>2.9 语义标签</h3> <img src="https://1000bd.com/contentImg/2024/04/27/64f708c2eb4bfa35.png" alt=""> （1）<code><header></code>： <code><header></code> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。 （2）<code><nav></code>： <code><nav></code> 元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。 （3）<code><section></code>： <code><section></code> 元素表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。 （4）<code><figure></code>： <code><figure></code> 元素代表一段独立的内容，经常与说明（caption）<code><figcaption></code> 配合使用，并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。 （5）<code><figcaption></code>： <code><figcaption></code> 元素是与其相关联的图片的说明/标题，用于描述其父节点 <code><figure></code> 元素里的其他数据。这意味着 <code><figcaption></code> 在 <code><figure></code> 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。 （6）<code><article></code>： <code><article></code> 元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，例如它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。 （7）<code><aside></code>： <code><aside></code> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。 （8）<code><footer></code>： <code><footer></code> 元素表示最近一个章节内容或者根节点（sectioning root）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。 综合示例： <pre data-index="15" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><body> <header> <h1>Header</h1> <nav> <h2>Content</h2> <ul> <li><a href="https://www.baidu.com" target="_blank">Baidu</a></li> <li><a href="https://www.bilibili.com" target="_blank">Bilibili</a></li> <li><a href="https://www.acwing.com" target="_blank">AcWing</a></li> </ul> </nav> </header> <hr> <section> <h2>Image</h2> <figure> <img width="300" src="/Web Application Lesson/images/image1.png" alt="image1"> <figcaption>image1</figcaption> <img width="300" src="/Web Application Lesson/images/logo.png" alt="image2"> <figcaption>image2</figcaption> </figure> </section> <hr> <section> <h2>Article</h2> <article> <h3>Article1</h3> <p>paragraph1</p> <p>paragraph2</p> </article> <article> <h3>Article2</h3> <p>paragraph1</p> <p>paragraph2</p> </article> </section> <hr> <footer> ©2018-2022 AsanoSaki 版权所有 </footer> </body> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li></ul></pre> <h3><a name="t12"></a><a id="210__455"></a>2.10 特殊符号</h3> <ul><li><code><</code>：<，小于号或显示标记；</li><li><code>></code>：>，大于号或显示标记；</li><li><code>&</code>：&，可用于显示其它特殊字符；</li><li><code>"</code>："，引号；</li><li><code>®</code>：®，已注册；</li><li><code>©</code>：©，版权；</li><li><code>™</code>：™，商标；</li><li><code> </code>：空格。</li></ul> </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/1511388">webpack5基础--08_处理字体图标资源</a> <a href="/Article/Index/927382">【C++类和对象】定义 | 封装 | 访问限定符 | 作用域 | 对象模型 | this指针</a> <a href="/Article/Index/1086923">Python常用信号处理函数之pysptk</a> <a href="/Article/Index/831803">【react】父组件获取子组件实例对象/方法</a> <a href="/Article/Index/1120072">ly-tab插件动态更改高度进行多端适配</a> <a href="/Article/Index/1568226">【JAVA】一文掌握Java并发编程</a> <a href="/Article/Index/1264561">【webrtc】接收/发送的rtp包、编解码的VCM包、CopyOnWriteBuffer</a> <a href="/Article/Index/1499938">深度学习？？？？？？？？</a> <a href="/Article/Index/1376524">Java进阶篇--可重入锁 & 不可重入锁</a> <a href="/Article/Index/1028612">jsp公交查询系统Myeclipse开发mysql数据库web结构java编程计算机网页项目</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/m0_51755720/article/details/127744809 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

CONTENTS

1. VS Code环境配置

2. HTML基础标签

2.1 HTML文件结构