(二).html文本标签，图片，路径，超链接，锚点相关知识
Day02 HTML 课堂笔记
注意点：语义标签的目的就是为了给搜索引擎看，不在乎其具体表现形式
1 文本标签
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| em | 表示强调，默认表现为斜体字 | 双标签 | |
| strong | 表示强调，默认表现为粗体字 | 双标签 | |
| del | 表示删除的内容 | 双标签 | |
| ins | 表示增加的内容 | 双标签 | |
| sub | 表示下标字 | 双标签 | |
| sup | 表示上标字 | 双标签 | |
| span | 没有语义的文本标签 | 双标签 |
用于引证、举例、(标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题)通常为斜体字
定义一个定义项目
定义计算机代码文本
定义样式文本 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少情况下，才使用这个标签。
定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
定义缩写 配合title属性 (IE6以上)
来覆盖默认的文本方向 dir属性 值: lrt rtl
定义变量。您可以将此标签与 及 标签配合使用。
标签定义小型文本（和旁注）
粗体字标签 根据 HTML 5 的规范， 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。
斜体字标签 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。
下划线字体标签 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。 请尽量避免使用 为文本加下划线，用户会把它混淆为一个超链接。
签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。(小段文字)
标签定义摘自另一个源的块引用。浏览器通常会对 元素进行缩进。(大段文字) (块状元素)
定义地址 通常为斜体 (注意非通讯地址) 块状元素
H5已删除 字体标签，可以通过标签的属性指定文字的大小、颜色及字体等信息
H5已删除 打字机文字
H5已删除 大型字体标签
H5已删除 添加删除线
H5已删除 首字母缩写 请使用代替
2 图片
2.1 img 标签
标签名
语义和功能
属性
单标签还是双标签
img
在页面中插入图片
src：设置图片的地址
alt：设置图片的替代文字
width：设置图片的宽度
height：设置图片的高度
单标签
总结：
1. alt属性设置图片的替代文字，当图片无法正常加载，会显示替代文字
2. 设置图片尺寸，只设置height或者width时，另一个属性会按比例缩放
2.2 常见的图片格式
jpg/jpeg 有损压缩，不支持透明
png 无损压缩，支持透明
gif 支持透明，支持动画
3 相对路径和绝对路径
当前文件：代码所在文件
目标文件：代码要引入的文件
3.1 绝对路径
1、绝对路径指的是文件的绝对地址，与当前文件所在的位置无关
2、前端中使用的绝对地址是文件在网络中的位置，也称为URL（统一资源定位符）
3、目标文件无论与当前文件是否在一台计算机中，都可以通过绝对路径访问
注意：文件想要被网络访问，该计算机需要部署web服务器
绝对路径示例：https://pics6.baidu.com/feed/d.jpeg
3.2 相对路径
1、目标文件相对于当前文件，处在什么位置
2、目标文件在当前文件的同级目录或者下一级目录
./ 当前目录
./ 可以省略
3、目标文件在当前文件的上级更上级或者必须通过上级才能访问到
../ 表示上一级目录 ../../ 表示上两级目录 以此类推
3.3 HTML 中使用路径的场景
1、使用 img标签引入图片文件
2、使用 video标签引入视频文件
3、使用 audio标签引入音频文件
4、使用 iframe标签引入多种类型文件
5、使用 script标签引入 js文件
6、使用 a标签关联目标文件
7、使用 link标签关联 css文件
4 超链接和锚点
4.1 a 标签
标签名
语义和功能
属性
单标签还是双标签
a
设置超链接
href：设置目标文件的地址
target：设置目标文件在哪个窗口打开：_self：（默认值）本窗口，_blank：新窗口
双标签
总结：
1、a 标签只有在设置了 href属性才能成为超链接
2、target 属性的默认值是 _self，目标文件会在本窗口打开，
target 属性设置为 _blank，目标文件在新窗口打开
4.2 超链接
① 跳转新的页面
百度
相对路径的练习
② 跳转到其他类型的文件
图片：小乐老师的业余生活
视频：小乐老师的性福生活
pdf：如何30岁之前走上人生巅峰
word文档：如何拥有百亿资产
压缩文件：小乐老师的私房照片
总结：
1、如果超链接的目标文件是浏览器可以打开的文件类型，点击超链接则打开文件
2、如果超链接的目标文件是浏览器无法打开的文件类型，点击超链接则下载文件
③ 超链接的其他特殊功能
发邮件
打电话
发短信
④ href 的值是空的
href值为空，页面刷新
⑤超链接地址不存在
地址不存在会报404错
4.3 锚点
① 如何设置锚点
1、给标签设置id属性，该标签就会变成锚点，id的属性值就是锚点名
2、任何标签都可以设置id属性，id属性值不能相同
② 如何跳转到锚点
