前端八股笔记

HTML

src和href的区别

src 是用来替换当前标签的内容（下载资源并执行），遇到时会暂停其他资源下载并等待加载执行完成。例：引入 JS 脚本、图片、frame 等，通常将js脚本放在底部
href 是用来建立当前文档与资源之间的“链接关系”，并行下载，不会阻塞页面解析

HTML语义化：

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护

<header></header>  头部<nav></nav>  导航栏<section></section>  区块（有语义化的div）<main></main>  主要区域<article></article>  主要内容<aside></aside>  侧边栏<footer></footer>  底部

script标签中defer和async的区别

• 不带 defer 或 async（默认情况）
  • 浏览器一读到 script 标签就会立刻去下载并执行 JS 脚本。
  • 在执行脚本时会阻塞 HTML 的继续解析。
  • 所以传统 <script> 标签最好放在 HTML 的底部。
• 带 defer 属性
  • 脚本异步下载，不阻塞 HTML 解析。
  • 等 HTML 文档解析完毕后，按顺序依次执行所有带 defer 的脚本。
  • DOMContentLoaded 事件会等到所有 defer 脚本执行完后再触发。
• 带 async 属性
  • 脚本异步下载，不阻塞 HTML 解析
  • 一下载完就立即执行，执行顺序不确定。
  • 多个 async 脚本可能乱序执行，不适合有先后依赖关系的脚本。
  • 常用于广告、统计等与主逻辑无关的脚本

HTML5有哪些更新？

（1）新增语义化标签：nav、header、footer、aside、section、article
（2）音频、视频标签：audio、video
（3）数据存储：localStorage、sessionStorage
（4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议）
（5）input标签新增属性：placeholder、autocomplete、autofocus、required
（6）history API：go、forward、back、pushstate

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素：b span img input select strong
块级元素：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p
空元素（即没有内容的HTML元素，无闭合标签）：
常见的：<br>、<hr>、<img>、<input>、<link>、<meta>
少见的：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>

CSS

参考：语雀文档