(二).html文本标签，图片，路径，超链接，锚点相关知识

Day02 HTML 课堂笔记

注意点：语义标签的目的就是为了给搜索引擎看，不在乎其具体表现形式

1 文本标签

标签名	语义和功能	属性	单标签还是双标签
em	表示强调，默认表现为斜体字		双标签
strong	表示强调，默认表现为粗体字		双标签
del	表示删除的内容		双标签
ins	表示增加的内容		双标签
sub	表示下标字		双标签
sup	表示上标字		双标签
span	没有语义的文本标签		双标签

<!--一下文本标签  作为了解-->
<cite>    		用于引证、举例、(标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题)通常为斜体字
<dfn> 	  		定义一个定义项目
<code> 	  		定义计算机代码文本
<samp>    		定义样式文本 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少情况下，才使用这个标签。
<kbd>     		定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<abbr>    		定义缩写 配合title属性  (IE6以上)
<bdo>     		来覆盖默认的文本方向 dir属性 值: lrt  rtl
<var>     		定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<small>   		标签定义小型文本（和旁注）
<b>       		粗体字标签 根据 HTML 5 的规范，<b> 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。
<i>       		斜体字标签 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。
<u>       		下划线字体标签 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。 请尽量避免使用 <u> 为文本加下划线，用户会把它混淆为一个超链接。
<q>       		签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。(小段文字)
<blockquote> 	标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。(大段文字) (块状元素)
<address>    	定义地址 通常为斜体 (注意非通讯地址)  块状元素
<font>     		H5已删除 字体标签，可以通过标签的属性指定文字的大小、颜色及字体等信息
<tt>       		H5已删除 打字机文字
<big>      		H5已删除 大型字体标签
<strike>   		H5已删除 添加删除线
<acronym>  		H5已删除 首字母缩写 请使用<abbr>代替

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 超链接

① 跳转新的页面

<a href="https://www.baidu.com" >百度</a>
<a href="../03-相对路径练习/pages/index.html">相对路径的练习</a>

② 跳转到其他类型的文件

<a href="./resouces/小乐老师的业余生活.jpg">图片：小乐老师的业余生活</a> <br>
<a href="./resouces/小乐老师的性福生活.mp4">视频：小乐老师的性福生活</a> <br>
<a href="./resouces/如何30岁之前走上人生巅峰.pdf">pdf：如何30岁之前走上人生巅峰</a> <br>	
<a href="./resouces/如何拥有百亿资产.docx">word文档：如何拥有百亿资产</a> <br>	
<a href="./resouces/小乐老师的私房照片.7z">压缩文件：小乐老师的私房照片</a>

总结：

1、如果超链接的目标文件是浏览器可以打开的文件类型，点击超链接则打开文件
2、如果超链接的目标文件是浏览器无法打开的文件类型，点击超链接则下载文件

③ 超链接的其他特殊功能

<a href="mailto:xxx@qq.com">发邮件</a> <br>
<a href="tel:18551002222">打电话</a> <br>
<a href="sms:18551002222">发短信</a>

④ href 的值是空的

<a href="">href值为空，页面刷新</a>

⑤超链接地址不存在

地址不存在会报404错

4.3 锚点

① 如何设置锚点

1、给标签设置id属性，该标签就会变成锚点，id的属性值就是锚点名
2、任何标签都可以设置id属性，id属性值不能相同

② 如何跳转到锚点

<!-- 跳转到本页面的指定的锚点 -->
<a href="#锚点名"></a>
<!-- 跳转到页面的顶部 仅添加#，不写锚点名即可-->
<a href="#"></a>
<!-- 跳转到其他页面的指定锚点-->
<a href="页面地址#锚点名"></a>