一、HTML标签学习

排版标签
1. 标题标签
2. 段落标签
3. 换行标签
4. 水平线标签
文本格式化标签
媒体标签
链接标签

1.标题标签

➢ 场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
➢ 代码：h系列标签
➢ 语义：1~6级标题，重要程度依次递减
在这里插入图片描述
➢ 特点：
• 文字都有加粗
• 文字都有变大，并且从h1 → h6文字逐渐减小
• 独占一行
➢ 注意点：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分

2.段落标签

➢ 场景：在新闻和文章的页面中，用于分段显示
➢ 代码：****

我是一段文字

➢ 语义：段落
➢ 特点：
• 段落之间存在间隙
• 独占一行
小结：➢ 段落标签的标签名是？
• p标签
➢ 段落标签有哪些特点？
• 段落之间存在间隙
• 独占一行

3.换行标签

➢ 场景：让文字强制换行显示
➢ 代码：**
**
➢ 语义：换行
➢ 特点：
• 单标签
• 让文字强制换行

4.水平线标签

➢ 场景：分割不同主题内容的水平线
➢ 代码：****

➢ 语义：主题的分割转换
➢ 特点：
• 单标签
• 在页面中显示一条水平线

2.文本格式化标签

在这里插入图片描述

3.媒体标签

1.图片标签

、属性名：src
属性值：目标图片的路径
注意点：
当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）

<body>
	<img src="./1.jpg" alt="" title="">
</body>

属性名：alt
属性值：替换文本
·当图片加载失败时，才显示alt的文本，成功时不会显示alt文本
在这里插入图片描述属性名：width和height
注意点：
~如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（图片不会变形）
~如果同时设置width和height两个，若设置不当此时图片可能会变形

2.路径标签

~场景：页面需要加载图片，需要找到对应得图片
~类似于：生活中两个人，我要去找你，需要通过一定路径才能找到
~路径分为：
→绝对路径（了解）
→相对路径（常用）
➢ 概念普及：
• 当前文件：当前的html网页
• 目标文件：要找到的图片
➢ 相对路径：从当前文件开始出发找目标文件的过程
➢ 相对路径分类：
• 同级目录
• 下级目录
• 上级目录
、

3.音频标签

在这里插入图片描述网页中插入音频使用audio标签
音频标签的属性：
~src：音频路径
~controls：音频控件
~autoplay：自动播放
~loop：循环播放

4.视频标签

在这里插入图片描述网页中插入视频使用video标签

4.链接标签

在这里插入图片描述如果需要实现点击之后，从一个页面跳转到另一个页面，需要链接标签：a标签。
通过href属性来设置a标签到底跳转到了那里。
通过target属性来设置跳转方式
~取值1：_self:在当前窗口中跳转
~取值2：_blank：在新窗口跳转

html|青训营笔记

文章目录