二、HTML标签学习

二、HTML标签学习

1.1.1 标题标签

1. 场景:在新闻和文章的页面中,都离不开标题,用来突出显示文章主题
2. 代码：h系列标签

1级标题

2级标题

3级标题

4级标题

5级标题

6级标题

1. 语义:1~6级标题，重要程度依次递减
2. 特点：

• 文字都有加粗
• 文字都有变大，并且从h1 →h6文字逐渐减小
• 独占一行

1.1.2 小结

1. 标题标签一共有几个？分别表示什么含义？

• h1标签：一级标题
• h2标签：二级标题
• h3标签：三级标题
• h4标签：四级标题
• h5标签：五级标题
• h6标签：六级标题

1. 标题标签有哪些特点？

• 文字都有加粗
• 文字都有变大，但是从h1 → h6文字逐渐减小
• 独占一行

1.2.1 段落标签

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

我是一段文字

1. 语义：段落
2. 特点：

• 段落之间存在间隙
• 独占一行

1.2.2 小结

1. 段落变迁的标签名是？

• p标签

1. 段落标签有哪些特点？

• 段落之间存在间隙
• 独占一行

1.3.1 换行标签

1. 场景：让文字强制换行显示
2. 代码：
   
3. 语义：换行
4. 特点：

• 单标签
• 让文字强制换行

1.4.1 水平线标签

1. 场景：分割不同主题内容的水平线
2. 代码：
3. 语义：主题的分割转换
4. 特点：

• 单标签
• 在页面中显示一条水平线

2.1 文本格式化标签的介绍

1. 场景：需要让文字加粗、下划线、倾斜、删除线等效果
2. 代码：

1. 语义：突出重要的强调语境

2.2 标签语义化（了解）

1. 实际项目开发中选择标签的原则：标签语义化

• 即：根据语义选择对应正确的标签
• 如：需要写标题，就使用h系列标签
• 如：需要写段落，就使用p标签

1. 好处：

• 对人：好理解，好记忆
• 对机器:有利于机器解析,对搜索引擎(SEO)有帮助

1. 推荐：

• strong、 ins、 em、del，表示的强调语义更强烈！

3.1.1 图片标签的介绍

1. 场景：在网页中显示图片
2. 代码:

1. 特点：

• 单标签
• img标签需要展示对应的效果，需要借助标签的属性进行设置！

3.1.2 图片标签的介绍

1. 标签的完整结构图

1. 属性注意点

• 标签的属性写在开始标签内部
• 标签上可以同时存在多个属性
• 属性之间以空格隔开
• 标签名与属性之间必须以空格隔开
• 属性之间没有顺序之分

3.1.3 图片标签的alt属性

1. 属性名：alt
2. 属性值：替换文本

• 当图片加载失败时，才显示alt的文本
• 当图片加载成功时，不会显示alt的文本

3.1.4 图片标签的title属性

1. 属性名：title
2. 属性值:提示文本

• 当鼠标悬停时，才显示的文本

1. 注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

3.1.5 图片标签的width和height属性

1. 属性名:| width和height
2. 属性值：宽度和高度（数字）
3. 注意点：

• 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
• 如果同时设置了width和height两个，若设置不当此时图片可能会变形

3.2.1 路径的介绍

1. 场景：页面需要加载图片，需要先找到对应的图片
2. 类似于：生活中两个人，我去找你，需要路径才能找到
3. 同理:页面需要找到图片,也是需要通过路径才能找到
4. 路径可分为：

• 绝对路径（了解）
• 相对路径（常用）

3.2.2 绝对路径（了解）

1. 绝对路径：指目录下绝对位置，可直接到达目标位置，通常从盘符开始的路径
2. 例如：

• 盘符开头：D:\steam
• 完整的网络地址：