属性

title

  1. <button title="123">下一页</button>
  2. <div title="123" >321</div>

hover 时显示一个当前网页最高层的标题显示
移动端开发并没有什么用，因为没有鼠标这种精准交互设备
但是可以用于无障碍，比如 VoiceOver
仅限于 button 等可交互标签，像 div、span、p 这种这种没什么语义的加了也不读
需要专门设置 aria-label 进行设置无障碍

accesskey

  1. // Chrome 下测试
  2. <div
  3.   accesskey="3"
  4.   onClick="this.style.color='red'"
  5. >
  6.   测试
  7. </div>

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey
image.png
可访问快捷键：可以用 Alt 加对应的 key 值，就可以访问其 onClick 事件（Chrome 浏览器）
实例：MDN 文档、twitter、facebook 等，按下 ‘/‘ 就可以搜索

srcset 和 sizes

  1. <img 
  2.   src="128px.jpg" 
  3.   srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w"
  4.   sizes="(max-width: 360px) calc(100vw-20px), 128px"

https://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/
不同屏幕下展示不同尺寸的图片，和 sizes 属性配合使用
比如让移动端上显示方形图，PC 端显示横图
image.png