1 HTML 定义
HTML 超文本标记语言一一 Hyper Text Markup Language。
超文本是什么？ 链接
标记是什么？ 标记也叫标签，带尖括号的文本
2 标签语法
- 标签成对出现，中间包裹内容
- <>里面放英文字母（标签名）
- 结束标签比开始标签多 /
- 双标签：成对出现 的标签
- 单标签只有开始标签，没有结束标签，比如：<br>：换行 <hr>：水平线
3 HTML 基本骨架
HTML 基本骨架是 网页模板
VSCode快速生成骨架：在HTML文件（.html）中，！(英文)配合Enter／Tab键
- html：整个网页
- head：网页头部，存放给浏览器看的代码，例如CSS
- body：网页主体，存放给用户看的代码，例如图片、文字
- title：网页标题
4 标签的关系
作用：明确代码的书写位置
- 父子关系（嵌套关系）
- 兄弟关系（并列关系）
比如外边的框和手机的图片就是父子关系； 手机的图片和名字就是兄弟关系
5 标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
例子：
标签名：h1 - h6 双标签
<!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>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>运行结果：
经验：h1标签在一个网页中 只能用一次，用来放 新闻标题 或 网页的logo
6 段落标签
一般用在新闻段落、文章段落、产品描述信息等等。
标签名：p （双标签）
显示特点：独占一行、段落之间存在间隙
<!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>
<h1>一级标题</h1>
<p>Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用（SPA）提供驱动。</p>
<p>Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用（SPA）提供驱动。</p>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>效果：
7 换行和水平线标签 单标签
- 换行：<br>
- 水平线：<hr>
<!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>
第一行内容
<br>
<br>
第二行内容
<hr>
</body>
</html>运行结果：
8 文本格式化标签
作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。
<!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>
<strong>strong 加粗</strong>
<em>em 倾斜</em>
<ins>ins 下划线</ins>
<del>del 删除线</del>
</body>
</html>运行结果：
不会换行
9 图像标签
作用：在网页中插入图片
标签名：<img src="图片的 URL">
标签属性：
<!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>
<img src="./20250609204549.jpg" alt="此图片无法显示" title="蓝蓝的天空">
</body>
</html>10 路径
- 相对路径：从当前文件位置出发查找目标文件
- 绝对路径：从盘符出发查找目标文件
10.1 相对路径
/ 表示进入某个文件夹里面
．表示当前文件所在文件夹
../ 表示进入当前的上一级文件夹
../../ 表示进入当前文件夹的上上一级文件夹
<!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>
<img src="./1.jpg" alt="此图片无法显示">
<img src="./img/6.jpg" alt="">
<!-- ../ 进入了上一级文件夹 -->
<img src="../HTML_img/4.jpg" alt="">
</body>
</html>10.2 绝对路径
绝对路径的应用场景：友情链接
正反路径写法都可以
<!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>
<img src="D:\Code\HTML_img\4.jpg" alt="">
<img src="D:/Code/HTML_img/4.jpg" alt="">
<!-- 可以复制网上在线的图片链接，不用下载图片 -->
<img src="https://csdnimg.cn/release/mpfev3/mp_v3/logo-dIbdY6cU.png" alt="">
</body>
</html>运行结果
11 超链接
<a href="https://www.baidu.com">跳转到百度</a>
添加属性：target="_blank" 可以让跳转的页面在一个新的网页下打开
经验：开发初期，不知道超链接要跳转的地址，href 属性值写 #，它是空链接，不会跳转
<!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>
<!-- target="_blank" 新窗口跳转页面 -->
<a href="https://blog.csdn.net/qq_56808981?type=blog" target="_blank">跳转到作者 CSDN 主页</a>
<a href="./1.jpg" target="_blank">跳转到本地的一张图片</a>
</body>
</html>12 音频标签
<audio src="音频的URL"></audio>
在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词
13 视频标签
<video src="视频的URL"></video>
参考链接：
03-标签语法_哔哩哔哩_bilibili
04-HTML基本骨架_哔哩哔哩_bilibili
05-标签的关系_哔哩哔哩_bilibili
07-排版标签-标题和段落_哔哩哔哩_bilibili
09-文本格式化标签_哔哩哔哩_bilibili
10-图像标签_哔哩哔哩_bilibili
11-路径-相对和绝对_哔哩哔哩_bilibili
12-超链接标签_哔哩哔哩_bilibili
13-多媒体标签-音频和视频_哔哩哔哩_bilibili