基础认知
HTML标签的结构
<strong>文字变粗</strong>
＜开始标签＞内容＜结束标签＞
结构说明：
- 标签由<、>、1、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名。
- 常见标签由两部分组成，我们称之为双标签前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。
- 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
HTML标签学习
排版标签
标题标签
<h>系列标签(<h1><h2><h3>...)
语义：1~6级标题，重要程度依次递减
特点:文字加粗变大，并且独占一行
段落标签
场景：在新闻和文章的页面中，用于分段显示
代码：
<p>我是一段文字</p>
语义：段落
特点：段落之间存在间隙，独占一行
换行标签
<br>
水平线标签
<hr>
文本格式化标签
场景：需要让文字加粗、下划线、倾斜、删除线等效果
有利于机器解析，对搜索引擎(SEO) 有帮助
图片标签
场景：在网页中显示图片
代码：<img src="./ 1.jpg" alt="替换文本 " title="鼠标悬停时显示的文本">
sre，title与alt间都有空格
特点：单标签，img标签需要展示对应的效果，需要借助标签的属性进行设置!
注意点:
标签的属性写在开始标签内部
标签上可以同时存在多个属性
属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分
属性名：src
属性值：目标图片的路径
注意点：当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
属性名:alt
属性值:如果图片加载出错，显示的替换图片的文本
注意点:如果图片正常不会显示文本
属性名:title
属性值:鼠标悬停时显示的文字
注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签
属性名:width和height
属性值：宽度和高度（数字）
注意点：
如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
如果同时设置了width和height两个，若设置不当此时图片可能会变形
路径
相对路径(常用)
从当前文件开始出发找目标文件的过程
同级目录
"./"表当前层级
假设目标文件与当前文件在同一级目录
<img src="目标图片.gif">或者<img src="./目标图片.gif">
下级目录
<img src="./文件夹/目标图片.gif">
上级目录
"../"返回上一级目录
<img src="../目标图片.gif">
绝对路径
从盘符开始(C:/1.jpg)
音频标签
<audio src="./music.mp3"controls></audio>
常见属性：
注意点：
音频标签目前支持三种格式：MP3、Wav、Ogg
视频标签
<video src="./video.mp4”controls></video>
常见属性：
注意点：
视频标签目前支持三种格式：MP4、WebM、Ogg
链接标签
场景：点击之后，从一个页面跳转到另一个页面
称呼：a标签、超链接、锚链接
代码：<a href="./目标网页.html>替换文字</a>
特点：双标签，内部可以包裹内容，如果需要a标签点击之后去指定页面，需要设置a标签的href属性
类似于这是一个超链接
属性名:target
属性值：目标网页的打开形式
取值:
- _self 默认值，在当前窗口中跳转 （覆盖原网页）
- _blank 在新窗口中跳转 （保留原网页）
<a href="https://www.baidu.com/"target="_blank">百度一下</a>