关于HTML5标签的基础知识
目录
前言
看网上视频写的HTML笔记
上一篇文章末写了标签的更基本内容这里接着写笔记
一、标签学习
1.标题标签
代码：h系列标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>语义：1~6级标题，重要程度依次递减
进入vscode：输入h1回车自动生成格式
特点：
- 文字都有加粗
- 文字都有变大，并且从h1->h6逐渐变小
- 独占一行
2.段落标签
代码：<p>我是一段文字</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>
<p>电吉他是现代科学技术的产物，从外型到音响都与传统的吉他有着明显的差别。琴体使用新硬木制成，配有音量、音高调节器(琴钮)以及颤音结构(摇杆)等装置。配合效果器的使用，电吉他有很强的表现力，在现代音乐中有很重要的位置。现在多用于歌曲伴奏。</p>
<p>1920至1930年间，有人试着将不同的pick-up 拾音器装在吉他上。 rowe-deamond公司第一个发明出可以夹在吉他音孔上的拾音器，但真正发展出“电吉他”的应属Gibson。早期“空心电吉他”只是将一个拾音器装在有着拱形面板</p>
</body>
</html>vscode中查看->自动换行:可以将上面很长的文字换行不至于像上面那样很长一截
特点：
- 段落之间有空隙
- 独占一行
3.换行标签：<br>
<!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>
<p>电吉他是现代科学技术的产物<br>从外型到音响都与传统的吉他有着明显的差别。琴体使用新硬木制成，配有音量、音高调节器(琴钮)以及颤音结构(摇杆)等装置。配合效果器的使用，电吉他有很强的表现力，在现代音乐中有很重要的位置。现在多用于歌曲伴奏。</p>
<p>1920至1930年间，有人试着将不同的pick-up 拾音器装在吉他上。 rowe-deamond公司第一个发明出可以夹在吉他音孔上的拾音器，但真正发展出“电吉他”的应属Gibson。早期“空心电吉他”只是将一个拾音器装在有着拱形面板</p>
</body>
</html>
4.水平线标签
代码：<hr>
特点：单标签，在页面中显示一条水平线。
<body>
<h1>文章标题</h1>
<hr>
<p>电吉他是现代科学技术的产物<br>从外型到音响都与传统的吉他有着明显的差别。琴体使用新硬木制成，配有音量、音高调节器(琴钮)以及颤音结构(摇杆)等装置。配合效果器的使用，电吉他有很强的表现力，在现代音乐中有很重要的位置。现在多用于歌曲伴奏。</p>
<p>1920至1930年间，有人试着将不同的pick-up 拾音器装在吉他上。 rowe-deamond公司第一个发明出可以夹在吉他音孔上的拾音器，但真正发展出“电吉他”的应属Gibson。早期“空心电吉他”只是将一个拾音器装在有着拱形面板</p>
</body>
二、文本格式化标签
1.介绍
场景：需要让文字加粗，下划线，倾斜，删除线等效果。
代码：
| 标签 | 说明 |
| b | 加粗 |
| u | 下划线 |
| i | 倾斜 |
| s | 删除线 |
| 标签 | 说明 |
| strong | 加粗 |
| ins | 下划线 |
| em | 倾斜 |
| del | 删除线 |
语义：下边突出重要性的强调语境
eg：
<b>加粗</b>
<br>
<strong>jiacu</strong>
可以看出<b>和<strong>视觉上没区别，只是strong更有强调语义。
2.图片标签
场景：网页中显示图片
代码：<img src=" " alt=" ">
特点：
- 单标签
- img标签需要展示对应的效果，需要借助标签的属性进行设置。
src属性：
- 目标图片的路径
- 注意点：当前网页和图片在同一文件夹中，路径直接写目标图片的名字即可。其余情况后面做介绍。
- 属性之间必须以空格隔开
- 属性之间没有顺序之分
<img src="电吉他.jfif">
这是在代码文件目录下。
- 图片标签的alt属性
属性名：alt
属性值：替换文本
（当图片加载失败时，才显示alt文本，成功时不会显示）
<body>
<img src="电吉他q.jfif" alt="elec guitar">
</body>
- 图片标签的title属性
属性名：title
属性值：提示文本
（当鼠标悬停时，才显示的文本）
注意点：title属性不仅仅可以用于图片标签
<body>
<img src="电吉他.jfif" alt="elec guitar" title="这是title文字鼠标悬停显示">
</body>
- width和height属性
属性名：width和height
<body>
<img src="image/guitar.jpeg">
</body>属性值：宽度和高度
注意点：
如果只设置width或height，图片等比例改变，都设置则变形。
3.路径
绝对路径（了解）：目录下的绝对位置，可直接达到目标位置，通常从盘符开始的路径。
相对路径（常用）：从当前文件（html）开始找目标文件（eg：gjf）的工程。
- 同级目录：way1：<img src="目标图片.gif"> way2:<img src="./目标图片.gif">
- 下级目录：目标文件在下级目录。<img src="images/目标图片.gif">
<body>
<img src="image/guitar.jpeg">
</body>3.上级目录：目标文件在上级目录 <img src="../目标图片.gif">
组合使用：
4.音频标签
代码：<audio src="./music.mp3" controls></audio>
常见属性：
| 属性名 | 功能 |
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（一些浏览器不支持） |
| loop | 循环播放 |
<body>
<audio src="./music.mp3" controls loop></audio>
</body>注意点： 音频标签支持三种格式：MP3，Wav，Ogg
5.视频标签
代码：<video src="./video.mp4" controls></video>
常见属性：
| 属性名 | 功能 |
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器中需配合muted实现静音播放） |
| loop | 循环播放 |
ps:若视频打不开，可能问题：video支持的音频流是mp4a，视频流是H264，你需要用格式工厂软件设置。
注意点：
视频目前支持三种格式：MP4，WebM，Ogg
三、链接标签
1.介绍
- 代码：<a href="./目标网页.html">超链接</a>
- 特点：双标签内部可以包裹内容，如果需要a标签点击之后去指定界面，需要设置a标签的href属性
<body> <a href="https://www.baidu.com/">跳转到百度</a> <br> <a href="./图片标签.html">跳吖</a> </body>当开发初期，不知道跳转地址时，href的值书写#（空链接）
2.target属性
- 属性名：target
- 属性值：目标网页的打开形式
| 取值 | 效果 |
| _self | 默认值，在当前窗口中跳转（覆盖原网页） |
| _blank | 在新窗口跳转（保留原网页） |
eg：<a href="https://www.baidu.com/" target="_blank">跳转到百度</a>