HTML视频标签
HTML视频标签视频标签的介绍场景：在页面中插入视频
代码：
1<video src="./video.mp4" controls></video>
常见属性：
属性名
功能
src
视频的路径
controls
显示播放的控件
autoplay
自动播放（谷歌浏览器中需要配合muted实现静音自动播放）
loop
循环播放
注意点：
视频标签目前支持三种格式：
MP4
WebM
Ogg
Mkv格式其实也可以哈哈哈
代码示例1234567891011121314<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" ...
HTML音频标签
HTML音频标签音频标签的介绍场景：在页面中插入音频
代码：
1<audio src="./music.mp3" controls></audio>
常见属性：
属性名
功能
src
音频的路径
controls
显示播放的控件
autoplay
自动播放（部分浏览器不支持）
loop
循环播放
注意点：
音频标签目前支持这几种格式：
MP3
Wav
Ogg
当然网易云的flac也支持^v^
代码标签123456789101112<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w ...
HTML路径
HTML路径路径的介绍场景：页面需要加载图片，需要先找到对应的图片
类似于：生活中两个人，我要去找你，需要通过一定的路径才能找到！
同理：页面需要找到图片，也是需要通过路径才能找到
路径可分为：
绝对路径（不常用）
相对路径（常用）
绝对路径绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
相对路径同级目录同级目录：当前文件和目标文件在同一目录中
代码步骤：直接写目标文件的名字即可
方法一：
1<img src="目标图片.png">
方法二：
1<img src="./目标图片.png">
下级目录下级目录：目标文件在下级目录中
代码步骤：
先写文件夹名字+/+目标文件的名字
1<img src="images/目标图片.png">
上级目录上级目录：目标文件在上级目录中
代码步骤：
先写../+目标文件夹名+目标文件的名字
1<img src="../images/目标图片.png">
HTML图片
HTML图片图片标签的介绍场景：在网页中显示图片
代码：
1<img src="" alt="">
特点：
单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置！
属性注意点：
标签的属性写在开始标签内部
标签上可以同事存在多个属性
属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分
图片标签的src属性属性名：src
属性值：目标图片的路径
注意点：当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
123<body> <img src="./1.jpg" alt="" title=""></body>
图片标签的alt属性属性名：alt
属性值：替换文本
当图片加载失败时，才显示alt文本
当图片加载成功时，不会显示alt的文本
123<body> <img src="./错的路径图片会加载失败.jpg" al ...
HTML文本格式化标签
HTML文本格式化标签文本格式化标签的介绍场景：需要让文字加粗、下划线、倾斜、删除线等效果
代码：
标签
说明
b
加粗
u
下划线
i
倾斜
s
删除线
标签
说明
strong
加粗
ins
下划线
em
倾斜
del
删除线
语义：突出重要性的强调语境
HTML换行和水平线标签
HTML换行和水平线标签换行标签场景：让文字强制换行显示
代码：
1<br>
语义：换行
特点：
单标签
让文字强制换行
水平线标签场景：分割不同主体内容的水平线
代码：
1<hr>
语义：主题的分割转换
特点：
单标签
在页面中显示一条水平线
HTML标题和段落
HTML标题和段落标题标签场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
代码：h系列标签
123456<h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6>
语义：1~6级标题，重要程度依次递减
特点：
文字都有加粗
文字都有变大，并且从h1~h6逐渐减小
独占一行
段落标签场景：在新闻和文章的页面中，用于分段显示
代码：
1<p>我是一段文字</p>
语义：段落
特点：
段落之间存在间隙
独占一行
HTML标签的组成和关系
HTML标签的组成和关系标签的结构：1<strong>文字要变粗</strong>
结构说明：
标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
常见标签由两部分组成，我们称为双标签，前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
少数标签由一部分组成，我们称为单独标签。自成一体，无法包裹内容
HTML标签与标签之间的关系：父子关系（嵌套关系）
123<head> <title></title></head>
兄弟关系（并列关系）
12<head></head><body></body>
HTML注释
HTML注释什么是注释顾名思义，给人看的代码解释性文字。
注释的作用和写法注释的作用：
为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
浏览器执行代码时会忽略所有的注释
注释的快捷键：
在VS Code中：ctrl + /
12345678910111213<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页的标题</title></head><body> ...
HTML页面固定结构
HTML页面固定结构网页类似于一篇文章：
每一页文章内容是有固定的结构的，如：开头、正文、落款等……
网页中也是存在固定的结构的，如：整体、头部、标题、主体
网页中的固定结构是要通过特定的HTML标签进行描述的
12345678<html> <head> <title>网页的标题</title> </head> <body> 网页的主体内容 </body></html>
由以上代码片段可以看出：
html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题
在VS Code中可以通过输入一个!后通过提示快速补全HTML骨架代码
123456789101112<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l ...