本文介绍HTML5摆放标签的知识点。
目录
1. HTML概念
2. HTML骨架
3. 标签的关系
4. 标题标签
5. 段落标签
6. 换行和水平线
7. 文本格式化标签
8. 图像标签
图像 - 属性
9. 路径
相对路径
绝对路径
10. 超链接标签
11. 音频标签
12. 视频标签
1. HTML概念
HTML 超文本标记语言
超文本 —— 链接
标记 —— 标签、带尖括号的文本
标签成对出现 开始标签和结束标签
< >XX</ >
绝大部分都是双标签，但也有单标签：
<br> 换行
<hr> 水平线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<strong>文本内容</strong>
<hr>
</body>
</html>2. HTML骨架
HTML基本骨架是网页模板
html 是整个网页
head 是网页头部，存放给浏览器看的代码
body 是网页主体，存放给用户看的代码
title 是网页标题
快速生成HTML骨架：英文 ! + Enter / Tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
</head>
<body>
给用户看的
</body>
</html>3. 标签的关系
明确代码的书写位置
有两种关系：父子 / 嵌套、兄弟 / 并列
<html>
<head></head>
<body>
</body>
</html>4. 标题标签
标签名：h1 ~ h6 双标签
文字加粗，字号逐渐减小、自占一行
h1 一般只用一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
5. 段落标签
标签名：p 双标签
独占一行、段落之间存在间隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAA AAAAAAA AAAAAAAA AAAAAAAAAA AA。</p>
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAA AAAAAAA AAAAAAAA AAAAAAAAAA AA。</p>
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAA AAAAAAA AAAAAAAA AAAAAAAAAA AA。</p>
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAA AAAAAAA AAAAAAAA AAAAAAAAAA AA。</p>
</body>
</html>
6. 换行和水平线
换行 br 和水平线 hr 都是单标签
<body>
文本1
<br>
文本2
<!-- 如果没有br，仅敲换行键实际网页中是没有换行效果的 -->
<hr>
文本3
<hr>
</body>7. 文本格式化标签
包括：
加粗 strong
倾斜 em
下划线 ins
删除线 del
不会换行，若没有br则都在一行显示
<body>
<strong> strong 加粗 </strong>
<br>
<em> em 倾斜 </em>
<br>
<ins> ins 下划线 </ins>
<br>
<del> del 删除线</del>
</body>
8. 图像标签
在网页中插入图片
img 是单标签
<img src = " 图片的URL ">src 指定图片的位置和名称
图片和html最好放到同一路径下
图像 - 属性
1. alt 替换文本
图片无法显示时出现的文字
2. title 提示文本
鼠标悬停时显示的文字
9. 路径
路径是指在查找文件时，从起点到终点经历的路线
分类
相对路径
从当前文件位置出发查找目标文件
/ 代表进入某文件夹
如 images/ 是进入image文件夹
. 表示当前文件所在文件夹 ./
.. 表示当前文件夹的上一级 ../
绝对路径
从盘符出发查找目标文件
windows电脑是从盘符出发
Mac是从根目录出发
以windows为例
<body>
<!-- 绝对路径 -->
<img src="D:\5.webp">
<img src="D:/5.webp">
<!-- / 和 \ 都行-->
<!-- 链接百度图片 -->
<img src="https://search-operate.cdn.bcebos.com/7e85570b817e17e8f3ae93134cc78451.gif">
</body>绝对路径应用：友情链接
在本页面放一些其他网页的原链接
10. 超链接标签
a 双标签 中间可以加文字
href 属性是跳转地址
输入a 有提示文字直接回车即可
<body>
<a href="http://baidu.com">跳转到百度</a>
</body>还可以跳到自己的文件
复制要跳的文件的相对地址
<a href="01-标签的写法.html">01-标签的写法</a>若要打开一个新的页面
<body>
<a href="http://baidu.com" target="_blank">跳转到百度</a>
<a href="01-标签的写法.html" target="_blank">01-标签的写法</a>
</body>开发初期不知道跳转的地址，href写：# 表示空链接
<!-- 空链接 -->
<a href="#">空链接</a>11. 音频标签
audio 双标签
src 保存音频的URL 支持MP3 Ogg Wav
controls 属性显示音频控制面板 点击后还能播放
loop 循环播放
autoplay 自动播放 一般浏览器都禁用
注：属性名和属性值一样时，只写一遍就行
<audio src="./XXXX/XXX.mps" controls loop autoplay></audio>12. 视频标签
video 双标签
src 保存音频的URL 支持MP4 WebM Ogg
controls 属性显示音频控制面板 点击后还能播放
loop 循环播放
muted 静音播放
autoplay 自动播放 一般浏览器支持在静音状态下自动播放
注：如果没有静音就不能自动播放
<video src="./XX/XX.MP4" controls loop muted autoplay></video>本文介绍HTML5摆放标签的知识点。
![[oeasy]python074_ai辅助编程_水果程序_fruits_apple_banana_加法_python之禅](https://i-blog.csdnimg.cn/img_convert/a01c94956055f2a653cf2fdd2104cc8a.png)
