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等元素配合嵌套，所以不用担心放不了其他元素而受限制。

小结

篇幅原因，本文介绍到这，相信读者朋友还不过瘾，不着急，本篇当做引子，我们下篇继续。

---

更多文章第一时间接收，欢迎关注公众号：前端说书匠