前端面试准备学习记录 — HTML篇

HTML篇

1. href会异步加载css，而@import会在页面加载完成后才开始加载，会出现页面初始无样式也就是白屏问题。

2. 使用src引入文件时，浏览器会先暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕

3. src同步加载执行，href异步加载执行

4. 语义化的优点，对机器友好、有利于SEO（搜索引擎优化）

5. DOCTYPE（文档类型）的作用：告诉浏览器应该以什么样的（HTML、xhtml）文档类型来定义解析文档

   DOCTYPE与：使用后者浏览器会进入标准模式，使用HTML5来渲染页面，不使用浏览器会进入混杂模式

6. DOCTYPE是用来声明文档类型和DTD规范的，一个主要用途为验证文件的合法性，DTD是一系列语法规范，用来定义XML或（X）HTML的文件类型

7. script标签中defer和async的区别：

   • 相同点：都是去异步加载外部的JS脚本，都不会阻塞页面的解析
   • 不同点：defer属性需要等到页面加载完成之后再执行外部JS文件，而async在加载完JS文件后就会执行
   • 执行顺序：多个带defer属性的标签，按照加载顺序执行；多个带async属性的标签，不能保证加载顺序

8. 常用的meta标签：name、content，用来描述网页文档的属性，如网页的作者、网页描述、关键词

9. HTML5相关更新

   • 语义化标签（header、nav、footer、article、section、aside）
   • 媒体标签（audio、video、source（用于指定视频源））
   • 表单：placeholeder：提示信息；autofocus：自动获取焦点；pattern：正则
   • 进度条、度量器
   • DOM查询：doucument.querySeletor（）、doucument.querySeletorAll（）
   • Web存储：localStorage、sessionStorage
   • 拖放、画布

10. img的srcset属性：实现响应式图片，在一定宽度或像素密度的情况下，加载不同的图片

11. 块级元素：div、ul、ol、li、dl dt dd h1~h6 p

    行内元素：span img input

12. web worker：HTML页面中执行脚本时，页面状态不可响应，执行完成才可响应，运行在后台的JS脚本，不影响页面的性能，通过postMessage传到主线程

13. 离线缓存：用户未连网时，可以正常访问站点或应用，在连网时，更新用户机器上的缓存文件。会新建一个.appcache文件，在其中储存相关的数据。

    使用方法：创建一个和HTML文件同名的manifest文件，在页面头部加入manifest属性。

    更新缓存方法：更新manifest文件、通过JS操作、清除浏览器缓存

14. title与h1：前者知识表示是一个标题，后者为有层次的标题，对页面信息的抓取有很大影响

    b与storage：前者只是加粗，后者有语义化

    i与em：前者内容展示为斜体，em表示强调的文本

15. iframe：会创建包含另外一个文档的内联框架，用来加载速度慢的广告，脚本并行下载，跨子域通信

16. 当用户选择lable标签时，浏览器会自动将焦点转到和lable标签相关的表单控件上

17. SVG：XML描述的2D图形语言，每个图形均为对象，属性改变，浏览器自动重现图形

    Canvas：通过JS绘制的2D图形，逐像素渲染，位置改变，重新绘制

18. head标签定义文档的头部，是所有头部文档的容器，title定义文档的标题，是head部分中唯一必须的元素

19. 渐进增强：保证低版本浏览器的情况下，然后在慢慢升级，提升用户体验、交互等方面

    优雅降级：一开始就做个高端的，然后针对低版本；浏览器进行兼容