《HTML并不简单：Web前端开发精进秘籍》张鑫旭 笔记

target属性

有场景如下：

在线写作工具经常会有预览功能，点击“预览”按钮后，可以在新窗口查看预览效果，如何实现？

有方法如下：

<a href='preview.html' target='_blank'>预览<a>

这可以打开新窗口，但是若多次点击预览，就会打开多个窗口，不好。最好的效果是：最多只打开一个新窗口，第二次点击“预览”按钮的时候，自动刷新这个新窗口。

可以使用a的target属性实现。

在<a>元素中，只要target属性设为某个任意的固定值，则每次新窗口打开的时候，都只会在这个窗口创建。预览只会在唯一的窗口中不断刷新，不会出现打开多个窗口的情况。

<a href='preview.html' target='_preview'>预览<a>

作者例子：https://www.htmlapi.cn/2/1-4.html

其他支持target属性的元素也有类似的特性，例如本书后面介绍的<form>元素。

download属性

可以通过download属性下载图片，指定下载图片的名称：

<a href="xxxx" download="name.jpg">图片<a>

就不需要通过FileSaver.js这种库实现了。

但是，download属性不是万能的。

HTML5引入的download属性可以指示浏览器下载URL，而不是导航到它。这在创建一个链接来下载图片、文件等时非常有用。

然而，出于安全原因，download属性只对同源URL有效。也就是说，如果你尝试使用download属性来下载一个跨域的资源，浏览器将会忽略这个属性，并且像通常那样导航到URL，而不是下载它。

但是，如果浏览器无法打开或显示链接的资源（例如，资源是一个不被浏览器直接支持的文件类型），那么浏览器将会默认下载该资源，无论是否设置了download属性。

这就是为什么download属性并不是万能的，它的行为受到同源策略的限制，并且依赖于浏览器是否能够打开链接的资源。

ping属性

<a>元素还自带上报能力。只要设置了ping属性，当用户点击此链接元素的时候，浏览器就会自动发送一个POST请求给ping属性设置的地址。

<a href ping='/assets/example.jpg?action=click&id=button'>按钮<a>

作者演示链接：https://www.htmlapi.cn/2/1-6.html

ping请求的content-type是text/ping，包含了用户的User-Agent、浏览器和操作系统信息、目标来源地址等信息，非常方便开发人员追踪收集的数据。

优势：

• 无须JavaScript代码参与，网页功能异常也能上报，不依赖于页面的状态
• 不受浏览器刷新、跳转或关闭的影响，也不会阻塞页面后续行为，这一点和navigator.sendBeacon()方法类似，可以保证数据上报的准确性
• 支持跨域
• 不依赖于页面的状态

劣势：

• 只能支持点击行为的上报，如果是（重要元素）进入视区或者类似弹框显示的上报，则需要额外触发元素的click()行为
• 只能支持<a>元素和<area>元素
• 只能是POST请求
• 属于新特性，IE浏览器并不支持

适用的场景：

ping属性上报有其独到之处，可以用在需要精确知道数据但不需要交互反馈的场景中。

案例1：需要知道浏览量的页面：直接在列表的外面嵌套一层<a>元素，再将ping属性的值设为POST请求地址就可以

案例2：需要快速进行AB测试的场景：

对于同样两张广告图，各自有50%的概率显示，分别预埋ping属性，然后处理POST请求，就能快速知道哪张广告图的点击效果好，无须专门负责大数据的同事帮忙，前端工程师自己就能搞定这件事情，比较容易出绩效。
这是低成本的杠杆技能之一，同时由于使用成本低，日后技术策略调整也会非常方便。

referrerpolicy

前面的章节中曾提到rel="noreferrer"无法兼顾信息传播和隐私保护，而referrerpolicy属性是可以的。

在这里了解以下referrerpolicy支持的属性值及其含义：

Referrer-Policy - HTTP | MDN (mozilla.org)

面对外部链接，如何设置才能兼顾信息传播和隐私保护？
答：origin-when-cross-origin

<a href='https://www.bbb.com' referrerpolicy='origin-when-cross-origin'>外部链接<a>

这样，外部网站可以知道自己的访问来源是哪个网站，从而增加曝光和流量，同时因为只有域名信息，所以，不会暴露关于网站和用户的任何其他隐私信息，足够安全。

href细节

自动绝对地址

如何使用JavaScript代码将一个相对地址转换为绝对地址？

方法一：使用new URL()方法

const absUrl=new URL(url,[base]).href

设置base参数为你希望的域名，此时就会自动返回绝对地址.

方法二：使用<a>元素的href属性（<form>元素的action属性也行）​

我在https://cn.bing.com/打开的控制台。

当href属性值直接访问的时候，浏览器会自动将其转换为绝对地址，补全的域名是当前页面所在的域名地址。如果想要指定域名，可以使用<base>元素临时指定：

href兼容性好，不用担心解析报错。
newURL()若传入非法的url字符串会报错。

锚点定位

锚点定位的本质是页面滚动。href的属性值如果以“＃”开头，则点击此链接就会触发锚点定位。

<a href='#example'>案例</a>

点击“查看案例”字样的链接，浏览器会自动查询页面中有没有id属性值是’example’的元素。

如果有，则会通过改变滚动距离的方式，让该元素定位到浏览器的上边缘​；

如果没有，则不会有锚点定位，唯一的变化是浏览器的URL地址的hash值会变成example。

当href属性值是＃top的时候，点击该链接会让页面滚动到顶部，其效果等同于href="＃"，当然，如果页面中存在id="top"的元素，那么此时还是优先定位这个元素，而不是滚动到顶部。

<a href='#top'>案例</a>

无障碍访问

<a>元素自带多个无障碍访问特性，例如，能够使用Tab键聚焦，可以按回车键触发点击行为。这些无障碍访问行为的存在，全部都是因为有href属性。

一个链接元素，如果没有href属性，那么，这个元素是不能被键盘访问的，也不能匹配像：any-link这样的CSS选择器，此时，其行为表现本质上和<span>一样，就是个普通的内联元素。

当<a>元素被当作按钮使用的时候，href="javascript："看起来不参与任何行为，实际上保留了当前元素的可访问性，是不能删除的：

<a href="javascript:">删除</a>

为何base元素无人问津

<base>元素的影响太广泛了，除<meta>元素无法受到影响之外，其余任何与链接地址相关的HTML属性都会受到影响，包括在JavaScript代码中运行的Ajax请求地址。

如链接：https://www.htmlapi.cn/2/1-7.html

使用base很容易出现意料之外的状况，在不知名的地方设置了base，会在很多地方都生效，不好。

实现链接元素a的嵌套

<a>元素是无法嵌套<a>元素的，若嵌套会自动渲染为平行结构。

<a href="#a">外层链接<a href="#b">内层链接</a></a>

变为：

<a href="#a">外层链接</a> <a href="#b">内层链接</a>

然而我们确实会有需要链接嵌套的场景：点击外面是个人信息的链接描述，点击里面是书籍的链接描述。

如何实现？

答：<area>元素。

非嵌套元素，无法包裹文字或其他标签，作为链接出现时，只能覆盖在其他的元素上。

实现案例：https://www.htmlapi.cn/2/1-8.html

用area实现链接嵌套，再使用CSS让area元素绝对定位覆盖外面的span元素即可。

area的单独使用只能在Chrome浏览器，在Firefox和Safari浏览器下，area元素尚不能脱离map元素使用。

HTML5中＜area＞标签深入全面解析_area标签-CSDN博客

关于map的案例：https://www.htmlapi.cn/2/1-9.html