1 回顾
1.1 如何掌握一个 html 标签
- 标签的语义和功能。
- 标签具有的属性以及属性值的设置。
- 单标签还是双标签。
1.2 标签回顾
主体结构
html 根标签 双
head 页面头部，用于页面的设置 双
body 页面主体，内容部分写在body中 双
HEAD内的标签
meta 设置页面元信息，用于设置字符集编码 属性：charset,通常设置为 utf-8 单
title 页面标题
格式排版标签
h1~h6 一级标题到六级标题 双
hr 分隔 单
br 换行 单
p 段落 双
pre 原格式显示，用于显示代码 双
div 无语义标签 双
1.3 文档声明
<!doctype html>
告诉浏览器使用标准模式解析页面。
2 文本标签
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| em | 表示强调，通常表现为斜体字 | 双 | |
| strong | 表示强调（更强烈），通常表现为粗体字 | 双 | |
| del | 表示被删除的内容，表现为文字加删除线 | 双 | |
| ins | 表示新添加的内容，表现为文字加下划线 | 双 | |
| sub | 下标字 | 双 | |
| sup | 上标字 | 双 |
3 图片
3.1 img 标签
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| img | 引入图片 | src 属性： 指定图片的地址 alt 属性： 指定图片加载失败显示的文字 border 属性： 设置图片边框，值指定数字，自动加单位像素 width 属性： 设置图片显示宽度，指定指定数字，自动加单位像素 **height 属性：**设置图片的显示高度， 指定指定数字，自动加单位像素 | 单 |
图片如果值设置 width 和 height 中的一个，另外一个会根据图片的比例自动计算。
图片中，src 属性必须指定；alt 属性强烈建议指定。
3.2 常见的图片格式
GIF -- 最多支持256色,支持透明,支持多帧动画显示效果，扩展名通常是 .gif。
JPEG -- 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果，扩展名通常是 .jpg 或者 .jpeg。
PNG -- 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画，扩展名通常是 .png。
4 相对路径和绝对路径
4.1 绝对路径
使用完整的网络地址表示目标文件的路径.
一个完整的网络地址称之为 URL（统一资源定位符）。
一个图片或者其他资源只能通过网络地址访问到，就可以使用绝对路径（不论在自己的电脑还是其他电脑）。
https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
4.2 相对路径
根据源文件和目标文件的位置关系来指定的路径就是相对路径。
相对路径只能访问源文件所在的电脑山的图片或者其他资源
./ 当前文件夹（以源文件为中心）； 可以省略
../ 上一个文件夹（以源文件为中心）
../../ 上上个文件夹（以源文件为中心）
第一种情况： 目标文件在源文件的同级或者下级 ./开始或者直接开始
第二种情况： 目标文件在源文件的上级或者上上级 ../开始
4.3 HTML 中使用路径的场景
1. 页面中引入图片 用img标签
2. 页面中引入视频 用video标签
3. 页面中引入音频 用audio标签
4. 页面中引入任意类型的文件 iframe 标签
5. 页面中引入 css 文件 使用 link 标签
6. 页面中引入 js 文件 使用 script 标签
7. 超链接，指定要跳转到的页面
5 超链接和锚点
5.1 a 标签
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| a | 设置超链接；或者设置锚点 | href 属性： 设置要跳转到的目标文件的地址。 target 属性： 设置跳转到的文件在哪里打开 值: _self 默认值，表示在本窗口打开； _blank 表示在新窗口打开。 name 属性： 设置锚点，指定锚点的名字。 | 双 |
具有 href 属性的 a 是超链接。
具有 name 属性的 a 是锚点。
5.2 超链接
a 标签只有设置了 href 属性才是一个超链接。
① 跳转新的页面
<!--使用绝对路径 指定页面地址-->
<a href="https://new.qq.com/omn/20201201/20201201A0EFQZ00.html">来自青山绿水间的回响</a>
<!--使用相对路径指定页面地址-->
<a href="../02-图片标签/图片.html">朦朦相册</a>
页面就是 html 类型的文件。
② 跳转到其他类型的文件
href 的值指向了一个其他类型的文件（除了 html 类型以外的）
<a href="resouces/如何30岁之前走上人生巅峰.pdf">如何30岁之前走上人生巅峰pdf</a>
<br>
<a href="resouces/小乐老师的业余生活.jpg">小乐老师的业余生活 图片</a>
<br>
<a href="resouces/小乐老师的性福生活.mp4">小乐老师的性福生活 视频</a>
<br>
<a href="resouces/朦朦老师的私房照片.zip">朦朦老师的私房照片 压缩文件</a>
<br>
<a href="resouces/如何拥有百亿资产.docx">如何拥有百亿资产 word文档</a>
<br>
该类型的文件浏览器如果能够打开： 点击超链接就会跳转到该文件（浏览器将文件打开）。
该类型的文件浏览器如果无法打开：点击超链接，下载
③ 超链接其他功能
电子邮件链接： <a href="mailto:fuming@atguigu.com">写信给我</a>
电话 <a href="tel:10086">10086</a>
短信 <a href="sms:10086">发短息给我</a>
点击超链接，会打开计算机上的程序
④ href 的值是空的
给 a 标签设置了 href 属性，但是值是空的，点击超链接重新打开本页面。
<a href="">重新加载本页面</a>
5.3 锚点
通过锚点，可以跳转到页面中指定的某个位置
① 如何设置锚点
第一种方式： 使用 a 标签，给 a 标签指定 name 属性设置锚点名。
<a name="锚点名"></a>
第二种方式： 给任何一个标签，设置 id 属性，指定锚点名。那么这个标签就是锚点了。
<div id="锚点名"></div>
② 如何跳转到锚点
通过超链接来跳转到锚点（页面中指定的位置）
<!-- 跳到本页面内锚点名是 python 的锚点所在的位置-->
<a href="#python">超链接</a>
<!-- 跳到本页面的顶部 -->
<a href="#">返回顶部</a>
<!-- 跳转到 index.html 页面， 并且跳到内锚点名是 linux 的锚点位置 -->
<a href="index.html#linux">超链接</a>
