二、HTML标签学习
1.1.1 标题标签
- 场景:在新闻和文章的页面中,都离不开标题,用来突出显示文章主题
- 代码：h系列标签
1级标题
2级标题
3级标题
4级标题
5级标题
6级标题
- 语义:1~6级标题，重要程度依次递减
- 特点：
- 文字都有加粗
- 文字都有变大，并且从h1 →h6文字逐渐减小
- 独占一行
1.1.2 小结
- 标题标签一共有几个？分别表示什么含义？
- h1标签：一级标题
- h2标签：二级标题
- h3标签：三级标题
- h4标签：四级标题
- h5标签：五级标题
- h6标签：六级标题
- 标题标签有哪些特点？
- 文字都有加粗
- 文字都有变大，但是从h1 → h6文字逐渐减小
- 独占一行
1.2.1 段落标签
- 场景：在新闻和文章的页面中，用于分段显示
- 代码：
我是一段文字
- 语义：段落
- 特点：
- 段落之间存在间隙
- 独占一行
1.2.2 小结
- 段落变迁的标签名是？
- p标签
- 段落标签有哪些特点？
- 段落之间存在间隙
- 独占一行
1.3.1 换行标签
- 场景：让文字强制换行显示
- 代码：
- 语义：换行
- 特点：
- 单标签
- 让文字强制换行
1.4.1 水平线标签
- 场景：分割不同主题内容的水平线
- 代码：
- 语义：主题的分割转换
- 特点：
- 单标签
- 在页面中显示一条水平线
2.1 文本格式化标签的介绍
- 场景：需要让文字加粗、下划线、倾斜、
删除线等效果 - 代码：
| 标签 | 说明 |
|---|---|
| b | 加粗 |
| u | 下划线 |
| i | 倾斜 |
| s | 删除线 |
| 标签 | 说明 |
|---|---|
| stong | 加粗 |
| ins | 下划线 |
| em | 倾斜 |
| del | 删除线 |
- 语义：突出重要的强调语境
2.2 标签语义化（了解）
- 实际项目开发中选择标签的原则：标签语义化
- 即：根据语义选择对应正确的标签
- 如：需要写标题，就使用h系列标签
- 如：需要写段落，就使用p标签
- 好处：
- 对人：好理解，好记忆
- 对机器:有利于机器解析,对搜索引擎(SEO)有帮助
- 推荐：
- strong、 ins、 em、del，表示的强调语义更强烈！
3.1.1 图片标签的介绍
- 场景：在网页中显示图片
- 代码:
- 特点：
- 单标签
- img标签需要展示对应的效果，需要借助标签的属性进行设置！
3.1.2 图片标签的介绍
- 标签的完整结构图
- 属性注意点
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
3.1.3 图片标签的alt属性
- 属性名：alt
- 属性值：替换文本
- 当图片加载失败时，才显示alt的文本
- 当图片加载成功时，不会显示alt的文本
3.1.4 图片标签的title属性
- 属性名：title
- 属性值:提示文本
- 当鼠标悬停时，才显示的文本
- 注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签
3.1.5 图片标签的width和height属性
- 属性名:| width和height
- 属性值：宽度和高度（数字）
- 注意点：
- 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
- 如果同时设置了width和height两个，若设置不当此时图片可能会变形
3.2.1 路径的介绍
- 场景：页面需要加载图片，需要先找到对应的图片
- 类似于：生活中两个人，我去找你，需要路径才能找到
- 同理:页面需要找到图片,也是需要通过路径才能找到
- 路径可分为：
- 绝对路径（了解）
- 相对路径（常用）
3.2.2 绝对路径（了解）
- 绝对路径：指目录下绝对位置，可直接到达目标位置，通常从盘符开始的路径
- 例如：
- 盘符开头：D:\steam
- 完整的网络地址：
)
