HTML 相关-这事不好办法可以靠靠靠看看

89 阅读1分钟
  1. 语义化

    • 概念: 用正确的标签做正确的事情, 相较于全用div, 页面头部标签使用header, 导航使用nav, 主要区域使用main, 侧边使用aside, 底部使用footer.
    • 优点:
      1. 对机器友好: 有利于搜索引擎爬取
      2. 对开发者友好: 增强了代码可读性,能清晰看出页面的结构, 便于开发与维护
  2. DOCTYPE(⽂档类型) 的作⽤

    • 概念: HTML的文档类型声明
    • 用处: 告诉浏览器应该以什么样的文档类型来解析, 如html或xhtml
  3. meta 标签

    • 概念: 描述网页文档的属性, 属性由name和content来定义
    • 常用:
      1. HTML文档的编码类型: charset="UTF-8"
      2. 适配移动端: name=viewport content="width=device-width, ...."
  4. script中的defer和async区别

    • 出现场景: HTML页面加载碰到script脚本的时候, 会先加载完脚本, 然后加载后续的页面, 这样会导致两个问题:
      1. 阻塞页面: 脚本加载完之前看不到后续页面,一直在这等待
      2. 脚本无法访问到他后面的元素,即无法给他们添加处理程序
    • defer和async
      1. 相同点: 异步加载, 不阻塞页面
      2. 不同点: defer是在DOMContentLoaded(指浏览器已完全加载 HTML,并构建了DOM树)之前完成.async是一个完全独立的脚本, 与其他脚本以及DOMContentLoaded不会彼此等待.
  5. HTML5的一些新特性

    1. 语义化标签: 如header, nav, footer, section, aside, main等.
    2. audio: 音频
      • controls: 控制面板
      • autoplay: 自动播放
      • loop='true' 循环播放
      <audio src='' controls autoplay loop='true'></audio>
      
    3. web存储
      • localstorage
      • sessionStorage