HTML-超链接锚点笔记

超链接-锚点

一 文本标签

标签名	语义和功能	属性	单or双
em	表示强调，斜体字		双
stong	表示强调，语气更强烈，粗体字		双
ins	表示新添加的内容，添加下划线		双
del	表示删除的内容，添加删除线		双
sub	下标字		双
sup	上标字		双

二 图片

1 img标签

标签名	语义和功能	属性	单or双
img	在页面中显示图片	src属性：指定图片的地址。 alt属性：指定图片的代替文字。 width属性：设置图片的宽度。 height属性：设置图片的高度。 border属性：设置图片边框的宽度	单

注意：

1.alt除了可以指定图片的代替文字（图片加载失败），还可有利于搜索引擎准确抓取到图片，该属性要加。

2.width和height属性如果只指定一个，另一个会根据图片比例自动计算，所以如果同时设置宽高一定注意图片比例。

2 常见的图片格式

jpg
png
gif

三 相对路径和绝对路径

1 绝对路径

前端中使用的绝对路径，就是文件在网络中的绝对地址。

http://image.baidu.com/images/pc_34124123123/im123123123.jpg

2 相对路径

./		表示当前文件夹（写代码的文件所在的文件夹）， 可以省略。 用于目标文件在同级或者下级

../		表示上一级文件夹（写代码的文件的上一级文件夹）。 用于目标文件在上级或者更上级
		../../ 表示上两级
		../../../ 表示上三级

3 HTML中使用路径的场景

使用 img 标签加载图片文件
使用 audio 标签加载音频文件
使用 vidoe 标签加载视频文件
使用 iframe 标签加载其他 html 文件
a 标签设置超链接地址
使用 link 标签引入 css 文件
使用 script 标签引入 js 文件

四 超链接和锚点

1 a标签

标签名	语义和功能	属性	单or 双
a	超链接	herf属性： 设置目标文件的地址。 **target属性：**设置目标文件在本窗口还是新窗口打开。值：_blank(新窗口)、_self(默认，本窗口)。 name属性：用于指定锚点名。	双

注意：

只有设置了herf属性的a标签才能被称为超链接。

2 超链接

① 跳转新的页面

页面就是 html 类型的文件。

<!--使用绝对路径指定目标文件地址-->
<a href="https://news.163.com/21/0227/12/G3RFGNPG000189FH.html">一篇新闻</a>

<!--使用相对路径指定目标文件-->
<a href="../02-图片标签/01-图片标签.html">图片</a>

② 跳转到其他类型的文件

<a href="images/芳芳.jpg" target="_blank">芳芳的自拍照</a>
<br>
<a href="../../Day02_HTML课堂笔记.md">markdown文件</a>
<br>
<a href="resouces/如何30岁之前走上人生巅峰.pdf">如何30岁之前走上人生巅峰</a>
<br>
<a href="resouces/如何拥有百亿资产.docx">如何拥有百亿资产</a>
<br>
<a href="resouces/小乐老师的私房照片.7z">小乐老师的私房照片</a>
<br>
<a href="resouces/小乐老师的性福生活.mp4">小乐老师的性福生活</a>

超链接的目标文件可以是任何类型的文件。

如果目标文件的类型浏览器可以打开，一点击超链接，浏览器就打开该文件（如：html、图片、markdown格式、视频、音频、文本文档等）

如果目标文件的类型，浏览器无法打开，一点击超链接，直接下载文件。（如：exe 文件、压缩文件、word 文件等）

③ 超链接其他功能

<a href="mailto:fmuncle@163.com">发邮件给我</a>
<br>
<a href="tel:18618176338">打电话给我</a>
<br>
<a href="sms:18618176338">发短信给我</a>

④ href 的值是空的

<a href=""></a>

如果 href 属性的值是空的，超链接的目标文件是自己（当前的文件）。点击超链接会把本页面再打开一遍。

五 锚点

① 如何设置锚点

第一种方式：使用a标签设置锚点：

<a name=“锚点名”></a>

第二种方式： 标签通过 id 属性设置锚点名：

任何标签通过设置 id 都可以作为锚点！

<div id="page01">
	内容...
</div>

<h2 id="section"></h2>

② 如何跳转到锚点

超链接可以跳转到指定的锚点。

<!--跳转到本页面指定的锚点-->
<a href="#锚点名">超链接</a>

<!--跳转到其他页面指定的锚点-->
<a herf="页面地址#锚点名">超链接</a>

<!--跳转到空锚点，导致返回页面顶部-->
<a href="#">超链接</a>