HTML与CSS学习笔记(第四天)

本文深入解析HTML中的<a>元素,介绍如何使用href属性创建跨文件夹的超文本链接,探讨链接工作原理及浏览器处理流程。同时提供链接路径设置技巧,确保网站导航的高效性和准确性。

<a>元素用于创建指向另一个Web页面的超文本链接,<a>元素的内容就是链接文本。要通过href属性来指定链接的目标文件,可以链接到相同文件夹中的文件,也可以链接到其他文件夹中的文件。此外,文字或图像都可以用作链接的标签。
下面分析触发链接时浏览器的工作原理:
首先浏览器显示页面,如果遇到一个<a>元素,则会取这个元素的内容,把它显示为一个可单击的链接:链接文本会显示有下划线;
接着用户单击一个链接时,浏览器使用“href”属性来确定这个链接指向哪个页面。
例如:
在这里插入图片描述单击elixirs,浏览器链接至新页面:
在这里插入图片描述
单击detailed direcions,浏览器链接至另外一个新页面:
在这里插入图片描述
单击底部的Back to the Lounge回到初始页面。
链接至不同文件夹:
在这里插入图片描述
现在链接的目的HTML文件在顶级文件夹lounge的不同子文件夹内;
先讨论下行方向链接:
在这里插入图片描述
再分析上行方向链接:
在这里插入图片描述
在这里插入图片描述
Tips:
1、使用“…”可以链接到源文件上一层文件夹中的一个文件;如果你想上行两级文件夹,可以输入“…/…”。
2、用“/”字符分隔路径中的各个部分。
3、为网站选择的文件名和文件夹名中不要使用空格。
4、属性的写法:属性名+等于号+双引号括起来的属性值。
5、href:h+ref,超文本引用(hypertextreference),它可以指向各种各样的资源。

(1)普通用户端(全平台) 音乐播放核心体验: 个性化首页:基于 “听歌历史 + 收藏偏好” 展示 “推荐歌单(每日 30 首)、新歌速递、相似曲风推荐”,支持按 “场景(通勤 / 学习 / 运动)” 切换推荐维度。 播放页功能:支持 “无损音质切换、倍速播放(0.5x-2.0x)、定时关闭、歌词逐句滚动”,提供 “沉浸式全屏模式”(隐藏冗余控件,突出歌词专辑封面)。 多端同步:自动同步 “播放进度、收藏列表、歌单” 至所有登录设备(如手机暂停后,电脑端打开可继续播放)。 音乐发现管理: 智能搜索:支持 “歌曲名 / 歌手 / 歌词片段” 搜索,提供 “模糊匹配(如输入‘晴天’联想‘周杰伦 - 晴天’)、热门搜索词推荐”,结果按 “热度 / 匹配度” 排序。 歌单管理:创建 “公开 / 私有 / 加密” 歌单,支持 “批量添加歌曲、拖拽排序、一键分享到社交平台”,系统自动生成 “歌单封面(基于歌曲风格配色)”。 音乐分类浏览:按 “曲风(流行 / 摇滚 / 古典)、语言(国语 / 英语 / 日语)、年代(80 后经典 / 2023 新歌)” 分层浏览,每个分类页展示 “TOP50 榜单”。 社交互动功能: 动态广场:查看 “关注的用户 / 音乐人发布的动态(如‘分享新歌感受’)、好友正在听的歌曲”,支持 “点赞 / 评论 / 转发”,可直接点击动态中的歌曲播放。 听歌排行:个人页展示 “本周听歌 TOP10、累计听歌时长”,平台定期生成 “全球 / 好友榜”(如 “好友中你本周听歌时长排名第 3”)。 音乐圈:加入 “特定曲风圈子(如‘古典音乐爱好者’)”,参 “话题讨论(如‘你心中最经典的钢琴曲’)、线上歌单共创”。 (2)音乐人端(创作者中心) 作品管理: 音乐上传:支持 “无损音频(FLAC/WAV)+ 歌词文件(LRC)+ 专辑封面” 上传,填写 “歌曲信息
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值