HTML骨架
在VScode 中新建文件并将文件后缀名改为.html，在文档中输入!(英文状态下)，并点击Enter键，即可出现框架，并在body中输入内容。例如此代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是我的第一个title。</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>代码解析：
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
HTML注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
快捷键：Ctrl+/ 即<!-- -->
<!-- 这是注释 -->标签组成及其关系
标签的结构图
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 具有开始和结束标签的通常被称为双标签，否则被称为单标签。
注：在VScode中只需输入标签名称（如p、strong等），点击回车键，即可出现双（单）标签。
HTML基础标签
一、标题
标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
标题独占一行且加粗显示。
<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>二、段落
段落是通过 <p> 标签定义的。
注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）
<p>这是一个段落 </p>
<p>这是另一个段落</p>三、水平线
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>四、换行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：。
<br>为单标签，在很多情况下，也可写作<br/>。
<p>这个<br>段落<br>演示了分行的效果</p>五、文本格式化
HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体
这些HTML标签被称为格式化标签。
| 标签 | 标签 | 说明 |
| b | strong | 加粗 |
| u | ins | 下划线 |
| i | em | 倾斜 |
| s | del | 删除线 |
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而，这些标签的含义是不同的：<b> 与<i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。
现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>先吃点再说的文档</title>
</head>
<body>
<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
</body>
</html>六、图像
在 HTML 中，图像由<img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
同一个标签中的各属性用空格间隔。
源属性（src）
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。地址可以写绝对路径和相对路径，大多数情况下推荐使用相对路径。
<img src="url" alt="some_text">Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
设置图像的宽度与高度
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
属性值默认单位为像素。注：若只指定宽度或高度中的一种，图片会根据原图片等比例缩放。
加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片。
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">七、音频
需要在页面中插入音频时，使用audio标签。
<audio src="./music.mp3" controls></audio>常见属性：
| 属性名 | 功能 |
| src | 音频的路径 |
| ccontrols | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | x |
注意：音频标签目前支持三种格式MP3、Wav、Ogg
八、视频
需要在页面中插入视频时，使用video标签。
<video src="./vedio.mp4" controls></video>常见属性：
| 属性名 | 功能 |
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器中需配合muted实现静音播放） |
| loop | 循环播放 |
注意：视频标签目前支持MP4、WebM、Ogg
九、超链接
HTML使用标签 <a> 来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签 <a> 中使用了 href 属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。
注：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
链接语法
<a> 元素：创建链接的主要HTML元素是<a>（锚）元素。<a>元素具有以下属性：
- href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
- target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接且为默认值）。
- title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
- rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。
提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
文本链接：最常见的链接类型是文本链接，它使用 <a> 元素将一段文本转化为可点击的链接，例如：
<a href="https://www.example.com">访问示例网站</a>图像链接：还可以使用图像作为链接。在这种情况下，<a> 元素包围着 <img> 元素。例如：
<a href="https://www.example.com">
<img src="example.jpg" alt="示例图片">
</a>下载链接：如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：
<a href="document.pdf" download>下载文档</a>空链接：用‘#’表示
<a href='#'></a>以上我总结的HTML的基础认知，欢迎指正和补充。
228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
