HTML并不简单读书笔记-2

第二章

a元素

最简单的a标签，点击后跳转到对应的页面，再加上herf属性

<a href="http://www.w3school.com.cn">W3School</a>

rel属性

浏览器支持30多个rel属性

下面介绍重点关注的值

rel=“nofollow”

这是seo的常用策略，告诉搜索引擎不要追踪这个链接。
在以下两种情況下需要设置 rel=nofollow":

• 目标页面显示的均是无效信息,或者含有敏感信息;
• 目标页面属于外站,不希望共享权重。

对于第二点，一个权重很高的网站，直接外链一个不高的中小网站，那么有概率权重被提高

noopener,opener

比如说下面的场景，有一个登陆按钮。点击后跳转到新窗口登陆，登陆成功之后通知主页面自动刷新。
1可以使用visibilitychange 事件
visibilitychange 介绍
2可以使用postMessage进行通信
但是这样都会增加学习成本和上手难度，下面是使用html实现轻松简单的一个实现方式

<a rel="opener" href="http://www.ctrip.com.cn/">登陆</a>
// 只有登陆成功之后再执行下面的代码
window.opener.location.reload(); //执行刷新

但是这样会有安全的问题，在以前的时候，target="_blank"会默认开放opener
大家可以点击链接看一下
在2021年之后，浏览器更新了他的策略，不会默认开放这个opener了，但是以前的浏览器还是会有这个缺陷。所以，切记，在跳转的时候,对于不信任的网站还是要设置rel=“noopener”。

noreferrer

了解referrer：document.referrer可以返回当前页面的来源地址，很多分析网站都是用这个api来统计pv的。如果用户从地址栏直接输入，或者设置成noreferrer就会说空字符串。
当然，也可以用referref来实现一些简单的功能。
比如右上角的返回的功能，如果用户通过分享链接第一次进入，那么他的不应该是返回，而是回到主页。
那什么时候应该用referref呢，
对于本站的链接都要加referref，这样不会影响pv统计。对于外站链接，全部设置noreferref，因为url地址中包含大量的信息或者隐私信息。
但是对于一些社交的网站，可以不需要设置，因为他们更看重的是传播和浏览量
上面这两种说是有矛盾的，难道社交网站就不考虑用户的隐私么？所以后来浏览器开发商遵循支持一个新的属性referrerpolicy。
最后这个属性有时候还可以解决图片防盗链的问题。

relList

rel是少数的支持空格写法的属性

<a rel="noopener noreferrer" href="http://www.ctrip.com.cn/">xxxxx</a>

target

有这样的场景，点击预览按钮后，在新窗口查看预览效果

<a href="http://www.ctrip.com.cn/" target="_blank">Cheap Flights</a>

但是这样有个问题，如果点击了5次，就会打开这样的5个窗口。如果设置成preview，只有第一次打开窗口，剩下的都在这个窗口创建。

<a href="http://www.ctrip.com.cn/" target="_preview">Cheap Flights</a>

体验地址

download属性

这个属性基本上都用过
体验地址

ping属性

a元素自带的上报能力

<a href="http://www.ctrip.com.cn/"  ping="/test">上报</a>

点击元素后，会给/test自动发一个post请求。ping属性有独到的地方，可以用在需要精确的知道数据但不需要交互反馈的地方使用。比如展示作品的列表页面展示呗观看的次数，可以用到。直接在列表的页面上加一层a标签，在设置ping属性。

href属性

当href属性值直接访问的时候，浏览器会自动转为绝对地址

描点定位

<a href=“#example" >案例</a>

当href是#的时候，会自动匹配id为example。特殊的点，当是#top的时候，点击链接会自动跳转到页面顶部(等同于#),前提是没有id为example的。
无障碍访问。比如tab聚焦，回车的按键，都是依赖href属性。如果不设置href，那么他将与span的本质是一样的，所以当a标签作为按钮的时候，要设置

<a href=“javascript:">按钮</a>

area元素

area与a元素在很多属性上都是通用的。他的区别如下
1.一些浏览器上area必须和map一起使用，map元素的生效又离不开img元素。
2.多出的元素属性，shape和coords

<img src="/i/photo/life.png" alt="Life" usemap="#lifemap" width="650" height="451">

<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="/demo/map/airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="/demo/map/iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="/demo/map/coffee.html">
</map>

重新认识列表元素

ul和menu

最新想到的是ul元素，除此之外，还有他的替代品menu。
有一个很简单的方法判断使用menu还是ul，即如果li元素列表中是链接或者是按钮，就使用menu，否则使用ul元素

ol

有序列表ol，ol包含几个特殊的属性

定义列表

dl，dt，dd
定义列表又一个非常显著的特点，自由。在于dl元素可以包含任意数量的dt和dd元素，可以在任意的块级元素相邻和嵌套。
语义的使用
定义列表适合在对术语进行定义和解释的场景中，例如技术文档的语法和参数的罗列与说明。