简介
- 说明
-
. 锚点 anchor，用来记录位置；后来发展为超链接内容导航. 行盒 inline. 可以包含其它标签，但不可以嵌套 <a>. 必须有可识别的文字或其它内容，如图片，不能是空标签. 更多信息，请参考 MDN - <a>
超链接示意图 <a href="" target=""> discernible text </a>
1. href：链接的目标URL类别 说明 内部页面 about.html
./about.html
./team/about.html
../team/about.html外部页面 https://www.baidu.com 内部页面锚点 about.html#id 外部页面锚点 https://www.baidu.com#about 普通文件 /utils/file/附件9-关于印发《广州新华学院本科教学运行管理规定》的通知.pdf 图片 .jpg
./imgs/81.jpeg音频 ./utils/music/AvaMax-OMGWhat'sHappening.ogg 视频 ./utils/video/alizee.mp4 2. target：打开目标URL的位置类别 说明 _self 当前页面加载；默认 _blank 新窗口打开；使用较多 _parent 加载到当前框架的父框架；如果没有，同_self _top 加载进入当前框架顶层/祖先；如果没有，同_self 注意相对路径和绝对路径的使用还可以指定打开位置为<iframe>
锚点跳转
- 说明
-
. 在页面某个位置标记一个锚点，单击超链接时，跳转到该位置. 页面返回时不能直接退出当前页面，需要逐级返回；后期多使用 js 实现跳转
[] 办公文档的锚点在哪里？
- 基本过程
-
1. 定义锚点：使用 id 属性为目标元素定义一个锚点；W3C规范仅仅允许使用 id 标记锚点，不能使用类
<div id='cont'> 我是目标元素 </div>
2. 在 <a> 的 href 属性中，使用 # 识别锚点<a href="#cont"> 跳转到目标元素 </a>
- [] 个人网站 - 请使用但不局限于这些标签：<div> <html> <a> <nav> <p> <h1>
-
创建文件夹 Demo 为H5项目，使用 Vs Code打开创建主页文件 index.html，按!快速生成 H5 架构在主页<body>区，使用普通方法或快速编辑 a[href=#nav$]{item$}*5 创建5个超链接在超链接下面使用快速编辑 (p[id=nav$]>lorem100)*5 创建5个段落作为锚点|目标资源；注意 id 和 href 要保持对应使用 live server 查看锚点跳转效果
[] 如何实现返回顶部？
[] 如何高亮提示当前锚点？
[] 如何不遮盖导航区？
[] 如何丝滑跳转？
页面跳转
- 说明
- . 页面之间的跳转
- . 根据页面是否属于同一个网站，又可以分：站内跳转和站外跳转
- 站内跳转
-
同一个网站内部页面之间的跳转，多使用相对路径
<a href="./greeting.html"> 目标页面 </a>
也可以转跳转到站内其它页面的某个锚点<a href="./blog.html#cont"> 目标页面某个元素 </a>
- 站外跳转
-
跳转到其它网站页面或页面内某个锚点，建议使用完整网络协议
<a href="https://www.baidu.com"> 百度 </a> <a href="https://www.baidu.com#bike"> 百度百科 </a>
也可以不指定网络协议，由系统自行判断；不建议，部分测试平台会告警<a href="//www.baidu.com"> www.baidu.com </a>
几个特殊页面 类别 说明 / 当前页面所在网站根页面 . 当前页面所在目录根页面 # 当前页面；不重新加载 空 当前页面；会重新加载 javascript:; 不跳转
改善
- 样式初始化
-
. 为保证风格统一，通常覆盖 <a> 的默认样式，重新设计；请参考 normalize.css、reset.css 两个专业网站. 系统提供了4个默认的样式伪类，必须按照一定的顺序定义和使用；详细信息，请参考 伪类1. 全局初始化 - 简单粗暴型、偷懒性
* { margin: 0; padding: 0; box-sizing: border-box; }2. 特定元素初始化 - 专一性a { text-decoration: none; color: inherit; font: inherit; } - 改善用户体验
-
1. 提示用户：添加 title 属性，鼠标移入后，给出提示，完善用户体验
<a href="" target="" title="点击查看更多推荐">更多 </a>
2. 高亮目标：使用 CSS 目标选择器 :target 高亮当前跳转到的锚点|目标el:target { color: #f40; }3. 丝滑滚动：为 <html> [CSS为元素的滚动容器]指定 滚动行为 - scroll behavior 为丝滑滚动 smooth，控制整个页面的滚动行为[] 为什么不是给 <body> 指定行为？
html { scroll-behavior: smooth; }4. 保留导航：使用 CSS 为元素的滚动容器指定滚动填充 scroll-padding-top 为导航区的高度；并借助定位 position 使得导航留在屏幕上html { scroll-padding-top: 100px; }5. 默认打开位置：在 <head>区加上 <base target=""> 指定默认打开方式，适合大量 <a> 的情况<base target="_blank">
- 也借助 JavaScript 实现更多改善
其它应用
- 内容预览
-
. 查看/预览资源|文件的内容；可以是普通文档txt、OA文档、多媒体资源，如图片、音频、视频. 需要使用CSS特别处理<a>，如：修改display，隐藏文字、设置大小、添加背景1. 图片
<a href="./alizee.jpg" title="点击查看大图" target="_blank">图片预览</a>
2. 音乐<a href="./Alizee-La Isla Bonita.mp3" title="点击播放音乐" target="_blank">音乐预览</a>
3. 视频<a href="../video/alizee.mp4" title="点击播放视频" target="_blank">视频预览</a>
4. 文件<a href="./进度表.pdf">进度表.pdf</a>
<a href="./course.json">课程表.json</a>
<a href="./dom.css">base.css</a>
- 下载文件
-
. 指定download属性. 如果系统识别不了href提供的资源，就会触发下载. 默认情况下，浏览器以预览的方式打开链接；如果仅仅提供下载链接，应显式的指定download属性
<a href='./Snipaste-1.16.2-x64.rar' title="单击下载" download> 截图工具Snipaste </a>
- 拨打电话
-
. 移动端使用比较方便. 桌面端需要系统支持的设备；通过扫码或PIN完成配对后才可以使用
<a href='tel:13707735481'> Make a call </a>
- 发送邮件
-
. 需要特定环境的支持，如需要安装outlook等邮件系统. 多用于企业级
<a href='mailTo:1942194789@qq.com'> Sending a mail </a>
总结
- 作用
-
页面跳转、锚点跳转内容预览、下载
- 应用
-
返回顶部单击页面LOGO打开主页打开百度首页预览图片、音频、视频预览文件，如word、css、js、pdf等等下载资源
- 初识CSS
-
CSS文件的创建、引入/使用初始化CSS选择器：通配符选择器 *；标签选择器 p、a；目标选择器 :target；鼠标悬停选择器 :hover样式： 字体 font；文本装饰 text-decoration；颜色 color；行高 line-height；滚动行为 scroll-behavior
-
指定滚动模式 scroll-behavior使用选择器 :hover 高亮超链接使用选择器 :target 设置锚点指定滚动填充 scroll-padding-top
作业