[mozilla]web-developer-basics.md

html元素应该从语义方向去考虑使用，而不是样式方向。 比如em、strong其实是为了强调，而不是为了斜体、粗体而添加。

另外，还要考虑非视觉的效果，比如screen reader、SEO等，所以还是尽量使用HTML的各种标记的特征，如h1、p、nav等，不要想当然的用div+CSS就能搞定一切，虽然视觉上看来是没有区别的。

自适应屏幕宽度的图片

.img-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 以宽度来计算 */
    height: 0;
    img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
 }