简介
. inline
. 实现页面内部/锚点、页面之间之前的跳转
语法
<a href="" target=""> text </a>
href:链接的目标URL;可以是锚点URL相对路径URL绝对路径URL;除了传统的H5页面外,还可以是:普通文件、图片、视频等;如果使用js实现跳转,应指定href为空:javascript:;
target:打开目标URL的位置;选项如下:
类别 说明
_self 当前页面加载;默认
_blank 新窗口打开;使用较多
_parent 加载到当前框架的父框架;如果没有,同_self
_top 加载进入当前框架顶层/祖先;如果没有,同_self
. 除此之外,target还可以是内联框架<iframe>。更多信息,请参考<iframe>
样式初始化
. 为保证风格统一,通常覆盖<a>的默认样式,重新设计
. 以下各例均使用初始化样式
a {
    text-decoration: none;
    color: inherit;
    font: inherit;
}
锚点跳转
. 跳转到当前页面内部或其它页面内部某个元素位置
. 定义:在目标元素中,使用 id 属性定义一个锚点
. 使用:在<a>的href属性中,使用 # 标识一个锚点
. 页面返回时不能直接退出当前页面;后期多使用js实现跳转
[] 锚点跳转
1. 定义锚点:利用id给目标元素添加锚点
<div id='cont'>目标元素</div>
2. 用#为<a>的href属性指定目标锚点
<a href="#cont"> 跳转去目标元素 </a>
3.特别的,仅仅指定#或为空可以返回当前页面;多用于页面logo部分
<a href=""> 返回顶部 </a>
<a href="#"> 返回顶部 </a>
4. 可以指定空动作,不跳转
<a href="javascript:;"> 不跳转 </a>
[] 综合练习-个人网站
[阶段1] 基本功能
1. 创建项目,并创建必要的资源,如主页文件、CSS文件夹
2. 在主页内准备若干段<h2>和<p>作为目标元素,并为<h2>添加id属性作为锚点
3. 创建超链接<a>,设置href属性为对应目标内容的锚点,使用#
4. 使用live server查看锚点跳转效果;并检查可能出现的问题
[阶段2] 改善用户体验
高亮当前跳转到的目标:target
丝滑滚动scroll-behavior
页面跳转
. 页面之间的跳转
. 根据页面是否属于同一个网站,又可以分:站内跳转和站外跳转
[] 站内跳转:同一个网站内部页面之间的跳转,多使用相对路径 ;也可以转跳转到站内其它页面的某个锚点
<a href="./greeting.html"> 目标页面 </a>
<a href="./blog.html#cont"> 目标页面某个元素 </a>
[] 站外跳转:跳转到其它网站的页面,多使用绝对路径 ;可以不指定网络协议,由系统自行判断;也可以跳转到站外其它页面的某个锚点[应用较少]
<a href="https://www.baidu.com"> www.baidu.com </a>
<a href="//www.baidu.com"> www.baidu.com </a>
[] 综合练习-个人网站
[阶段3] 拓展功能
跳转到百度主页或其它网页
内容预览
. 查看/预览文件的内容;可以是普通文档txt、OA文档、多媒体资源,如图片、音频、视频
. 添加title属性,完善用户体验
[] 图片
<a href="./alizee.jpg" title="点击查看" target="_blank"></a>
[] 音乐
<a href="./Alizee-La Isla Bonita.mp3" title="点击播放" target="_blank"></a>
[] 视频
<a href="../video/alizee.mp4" title="点击播放">
    <video poster='./alizee.jpg' title="点击播放" target="_blank"></video>
</a>
[] 其它类型文件
课程表原始数据[json]
<a href="./course.json" target="_blank">课程表原始数据[json]</a>
样式文件[CSS]
<a href="./dom.css" target="_blank">样式文件[CSS]</a>
其它应用
下载文件
. 指定download属性
. 如果系统识别不了href提供的资源,就会触发下载
. 默认情况下,浏览器以预览的方式打开链接;如果仅仅提供下载链接,应显式的指定download属性
单击下载截图工具Snipaste
<a href='./Snipaste-1.16.2-x64.rar' title="单击下载" download> 截图工具Snipaste </a>
发送邮件
. 需要特定环境的支持,如需要安装outlook等邮件系统
. 多用于企业级
Sending a mail
<a href='mailTo:1942194789@qq.com'> Sending a mail </a>
拨打电话
. 移动端使用比较方便
. 桌面端需要系统支持的设备;通过扫码或PIN完成配对后才可以使用
Make a call
<a href='tel:13707735481'>Make a call</a>
总结
<a>的各种使用
1. 返回顶部
2. 单击页面LOGO打开主页
3. 打开百度首页
4. 预览图片
5. 预览音频
6. 预览视频
7. 预览文件,如word、css、js、pdf等等
8. 下载资源
1. <a>必须有可识别的文字,否则会警告;link MUST have discernible text;所以,使用背景图片自定义超链接的时候,通过文本缩进text-indent把必须的文本挪出去
2. 可以包含其它tag,但不可以嵌套<a>
3. 在<head>区加上<base target="">指定默认打开方式
4. 指定scroll-behavior: smooth;实现平滑滚动
5. 使用选择器:target设置目标锚点样式
作业
内容
. 合理使用<a>实现个人网站,分别完善页面的统一打开方式、平滑滚动、目标样式等措施
. 学完第一部分内容后再提交
要求
1. 应体现<a>的不同用法
2. 完整项目以学号+姓名的格式打包后提交到课堂派,如202300001069张树彬.rar
3. 压缩类型不限
4. 未按要求提交视为无效作业,不得分