一、响应式图片srcset
<img
src="128px.jpg"
srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w"
sizes="(max-width: 360px) 340px, 128px"
/>
<img
src="128px.jpg"
srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w"
sizes="(max-width: 360px) calc(100vw - 20px), 128px"
/>
// srcset属性：宽度规格与sizes属性和屏幕密度有关联
// img元素的宽度规格为128时，加载128px.jpg
// img元素的宽度规格为256时，加载256px.jpg
// img元素的宽度规格为512时，加载512px.jpg
// 宽度规格 = sizes属性值 * 屏幕密度
//sizes属性：和媒体查询属性差不多，不是指图片的宽度，而是视区宽度，一般指屏幕宽度
(max-width: 360px) 340px, 128px：当视区宽度不大于360px时，图片的宽度限制为340px；其他情况下，使用128px
(max-width: 360px) calc(100vw - 20px), 128px：当视区宽度不大于360px时，图片的宽度限制为屏幕宽度减20px；其他情况下，使用128px
可以参考这些文章：
二、阻止事件向上传递
e.preventDefault();
e.stopPropagation();
三、span元素达到button元素可用键盘来访问
1.绑定点击事件
2.设置tabindex属性，使得元素在tab键切换的时候，可以获得焦点
3.使用role属性告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色，例如点击的按钮(role="button")，会让这个元素可点击
3.附加键盘事件，如keydown, 然后当回车或空格键的时候，触发click事件
4.如果是使用的a元素伪造按钮，同时含有链接，比方说"#"或"##"，需禁用默认的点击行为，通过event.preventDefault()或return false
<span id="btn" class="button" tabindex="0" role="button">按钮</span>
// 按tab键可以触发按钮点击事件
document.getElementById("btn").addEventListener("click", function (e) {
console.log("click Event");
});
document.getElementById("btn").addEventListener("keydown", function (e) {
console.log("keydown Event");
var code = e.which;
// 13 = 回车, 32 = 空格
if (code === 13 || code === 32) {
e.target.click();
}
});
四、文档与网站架构
1、header(页眉)
展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等
使用场景：位于页面顶部的一个大标题和或一个标志
2、nav(导航)
当前文档或其他文档中提供导航链接
使用场景：通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致
3、main(主内容)
应用的主体部分，主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成
使用场景：存放每个页面独有的内容，页面只能有一个，直接放在body元素中，可能包含article，section
4、footer(页脚)
一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息
使用场景：位于页面底部的狭长区域。页脚是放置公共信息(比如版权声明或联系方式)，一般使用较小字体，且通常为次要内容。还可以通过提供快速访问链接来进行
5、section()
文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题
6、aside()
和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响
使用场景：通常表现为侧边栏或者标注框
7、article()
文档、页面、应用或网站中的独立结构，可独立分配的或可复用的结构
使用场景：可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目
8、
当内容用现有的语义元素都不能很好对应，可以使用div(块级无语义元素)和span(内联的无语义元素)
