HTML并不简单:看似普通的元素上篇文聊到,HTML不是想象那么简单,大家平时缺少系统地了解,而在需要的时候不懂得怎么使
每个系列一本前端好书,帮你轻松学重点。
本系列来自阅文集团前端专家张鑫旭所编写的 《HTML并不简单》
上篇文聊到,HTML不是想象那么简单,大家平时缺少系统地了解,而在需要的时候不懂得怎么使用,那到底体现在哪里?
本篇介绍几个元素和相关特性,便知晓。
a元素
a
元素很常见,常用于链接跳转。但有几种场景,a
元素相关的知识能够发挥特别的效用。
锚点定位
锚点定位是a
元素的老牌功能了,但现在一些新晋开发伙伴可能不熟悉,比如,我们点击页面中一个引用链接,跳到另一个页面,不仅跳到页面,还要定位到相应位置,这样体验就好很多,不用再上下滚动去找,怎么实现呢?
很简单,设置href
属性的时候以#
开头即可,比如:
<a href="#example">去看案例</>
浏览器就会自动检测页面中id
为example
的元素,并且滚动到它的上边缘。
当然,除了锚点,它还有个有用的细节,就是如果写成下面这样:
<a href="#top">返回顶部</>
点击的时候页面会回滚到顶部,就不用我们自己去写scroll
之类的方法了,是不是很方便?
登录刷新
有一种常见的需求场景,A页面需要用户登录,登录操作在B页面进行,会有点击A页面跳转到新开B页面的行为,在登录完成后,正常来讲,得更新用户信息,但此时A页面并不会进行重新请求,因为难以得知登录完成这样一个状态变化,而往往我们希望达到这样的效果。
用什么方法呢?
你可能想用visibilitychange
事件,可能也想到postMessage
跨页面通信,但这些方案都需要额外的成本,增加了复杂度,有一种更简单高效的方法。
只需要给A页面的a
链接添加rel=“opener”
,跳转登录成功后,在B页面执行如下代码:
window.opener.location.reload();
原页面就会自行重载,这样就会重新请求用户信息了,又get到一个妙招!
追踪来源
再看另一个场景,有时候,我们想追踪用户的来源,知道他是从哪个页面点击跳转来的,以便在此基础上进行引流优化,如果是项目内就好办,我们做路由的记录或者监听即可,但如果跨项目,就不太好办,好像没有一个专门的API能帮助记录。
但其实是有的,它就是 document.referer
,在用于跳转的a
元素没有设置noreferer
的情况下,此属性可以拿到进入当前页面的前一个页面路径。很多知名站点,如百度、谷歌就是通过document.referer
记录PV数据的。
另外,此属性还能帮助实现简单的返回功能,相信你也想到了,不再赘述。
点击下载
通常情况,遇到下载功能,你会怎么实现?
可能会想借助三方工具,比如:FileSaver.js
,但其实非必要,浏览器内置了下载的能力,就是a
元素的download
属性,直接给a
元素加上download
属性,就代表告诉浏览器,当前点击行为的意图不是打开预览,而是下载,如果想自定义下载的文件名,给download
赋值即可。像下面这样:
<a href="example.jpg" download="下载的图片.jpg">下载</a>
但有一点要注意,如果涉及跨域资源,这种情况还比较常见,静态资源和网站代码不是存在一个服务器,那么就需要在服务端配置Content-Disposition
值为attachment
,才能顺利下载。
重识列表
大家平时最常用的列表是ol、ul
,分别代表有序列表和无序列表。
无序列表
但除ul
之外,还有一个元素能用作无序列表,就是menu
。
两者的语法和默认样式一致,区别在于语义,menu
适合用在交互性列表,ul
适合用在陈述性列表。
比如,列表项中有链接或者按钮,就可用menu
,否则就用ul
。
于是,在看到下面这段代码时,是不是比每天看到一堆ul
清爽多了?
<menu>
<li><button>复制</button></li>
<li><button>粘贴</button></li>
<li><button>剪切</button></li>
</menu>
有序列表属性
有序列表通常都有自己的编号,比如:1、2、3,如果想修改,我们会用CSS的list-style-type
属性做设置,但还有另一种方式,就是使用HTML自己的属性,分别是ol
元素的type、start
属性和li
元素的value
属性。
比如,当我们想让有序列表类型为大写字母,可以这样写:
<ol type="A">
<li>项目</li>
<li>项目</li>
</ol>
想让它从第三个字母,而不是第一个字母开始,可以这样写:
<ol type="A" start="3">
<li>项目</li>
<li>项目</li>
</ol>
也可以这样写:
<ol type="A">
<li value="3">项目</li>
<li>项目</li>
</ol>
以上两种写法,都会渲染出C、D、E这样排列的一组列表。
除此之外,如果你想改变序号的排列顺序,让序号倒着排,可以设置reversed>
属性。比如这样:
<ol reversed>
<li>项目</li>
<li>项目</li>
<li>项目</li>
</ol>
列表的顺序就变成3、2、1。
定义列表
什么是定义列表,可能很多人不知道,或者久了不用没印象了。直接看代码。
<dl>
<dt>html</dt>
<dd>超文本标记语言</dd>
<dt>css</dt>
<dd>层叠样式表</dd>
<dt>javascript</dt>
<dd>脚本语言</dd>
</dl>
代码比较容易理解,就是“术语”跟“解释”的一个组合,这种情况,很多人平时习惯用div
和p
元素,或者统一使用ul
结合div
之类。
但是有专门的元素可用干嘛不用呢?
当然,它不止能包裹dt
和dd
,还能跟p
元素,div
等元素配合嵌套,所以不用担心放不了其他元素而受限制。
小结
篇幅原因,本文介绍到这,相信读者朋友还不过瘾,不着急,本篇当做引子,我们下篇继续。
转载自:https://juejin.cn/post/7419297143787831306