写点什么

前端面试实录 HTML 篇

作者:控心つcrazy
  • 2023-04-05
    广东
  • 本文字数:2468 字

    阅读完需:约 8 分钟

前端面试实录HTML篇

前言

系列首发于公众号『前端进阶圈』 ,更多精彩内容敬请关注公众号最新消息。

前端面试实录 HTML 篇

1. HTML5 有哪些更新?

  1. 引入了语义化标签:

  2. header: 头部元素

  3. section: 中间元素

  4. footer: 底部元素

  5. nav: 导航区域

  6. aside: 侧边栏区域

  7. article:内容元素

  8. process: 进度条

  9. bdo: 定义文字方向

  10. sub: 下标

  11. sup: 上标

  12. pre: 预格式化文本

  13. 媒体标签:

  14. audio: 音频标签

  15. video: 视频标签

  16. source: 格式源标签

  17. input 标签的扩展:

  18. 属性扩展:

  19. placeholder: 默认提示文本

  20. autofocus: 自动聚焦

  21. required: 必填项

  22. type 属性扩展:

  23. date: 日期选择框

  24. color: 颜色选择器

  25. button: 按钮

  26. radio: 单选框

  27. checkbox: 复选框

  28. range: 滑块

  29. history API:

  30. history.go(): 跳转某个页面(URL)/上个页面(-1)/下个页面(1)

  31. history.back(): 返回上个页面

  32. history.forward(): 跳转下个页面

  33. history.pushstate(): 添加 history

  34. history.replacestate(): 替换 history

  35. 数据存储:

  36. localStorage:永久性存储

  37. sessionStorage:会话存储

2. 对 HTML 语义化的理解?

  • 一句话:正确的标签做正确的事。

  • 优点:

  • 对机器友好:更便于解析和爬虫,有利于 SEO

  • 对开发者友好:增强了代码可读性,结构更加清晰,便于开发和维护

3. 行内元素有哪些?块级元素有哪些?空元素有哪些?

  • 行内元素:a,b,span,img,input,select,strong

  • 块级元素:div,ul,ol,li,dl,dt,dd,h1~h6,p

  • 空元素:(即没有内容的 HTML 元素,在开始标签中关闭的,也就是没有闭合标签)

  • <br><hr><img><input><link><meta><area><source>

4. iframe 的优缺点?

  • 定义:iframe 会创建包含另一个文档的内联框架,可将另一个 HTML 页面嵌入到页面中。

  • 优点:

  • 可用来加载速度较慢的内容(如广告)

  • 使用脚本并行下载

  • 实现跨子域通信

  • 缺点:

  • 会阻塞主页面的 onload 时间

  • 无法被一些搜索引擎识别到

  • 会产生较多页面,不便于管理

5. DOCYPE(文档类型) 的作用?

  • 定义:一种标准通过标记语言文档类型声明,本质就是告诉浏览器(解析器)以什么样的文档类型来解析文档。有不同的渲染模式,他们对 CSS 代码和 JavaScript 代码解析不同,必须写在文档的第一行。

  • 分类:(混杂模式,标准模式,准标准模式,超级标准模式)

  • CSS1Compat: 标准模式(strick mode):使用 W3C 的标准来解析渲染页面,在浏览器中,会以最高标准呈现页面

  • BackCompat: 怪异模式(也称混杂模式, Quick mode): 浏览器使用自己的模式来解析渲染页面,在当前模式中,页面会以一种比较宽松向后兼容的方式显示。

  • <!DOCTYPE html>:告诉浏览器使用 W3C 的标准来解析渲染页面,以最高的标准呈现页面。

6. src 与 href 的区别?

  • src 和 href 都是用来引用外部资源的

  • 区别:

  • src: 表示对资源的引用,所引用的内容会嵌入到当前标签所在位置中,也就是会将引用的资源下载应用到内容中。当浏览器解析到它的时候,会暂停其他资源的处理,直到该资源加载——编译——执行完毕。一般情况下 js 脚本放在页面的最底部

  • href: 表示超文本引用,指向一些网络资源,会建立当前站点建立链接关系。当浏览器解析到他们所引用的资源时,不会停止其他资源的处理,而是会并行下载。常用在 a, link 等标签上。

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

  • 字面含义:defer: 延迟 async: 异步

  • 普通情况:如果没有 deferasync,当浏览器遇到 js 脚本会立即加载——编译——执行,会阻塞后面的逻辑。<script src="example.js"></script>

  • 添加 deferasync

  • defer: 加载其他文档和 js 脚本会同时进行的,但在此过程中 js 脚本是不执行的,只加载。js 脚本的执行会在加载解析完所有的元素后才会执行。<script defer src="example.js"></script>

  • 有 async: 加载其他文档和 js 脚本会同时进行,但在此过程中,js 脚本会并行加载——编译——执行的。<script async src="example.js"></script>

  • 区别:

  • 在于 js 脚本加载完成后何时执行,defer 不会在加载后立即执行,而 async 会在加载后立即执行。defer 符合是最接近我们对于 js 脚本执行的理解

  • 如果有添加多个 defer 属性的 js 脚本,他们会按照加载顺序执行,而 async,他们只要加载完成后就会立刻执行

  • 相同点:

  • 在加载这块是相同的,都是异步加载的

8. 常用的 meta 标签的属性有哪些?

  • meta: 描述网页文档的属性,比如网页的作者,网页描述,关键词等


<!-- charset 文档的编码类型 --><meta charset="UTF-8" >
<!-- keywords 网页关键词 --><meta name="keywords" content="关键词" />
<!-- description 网页描述 --><meta name="description" content="页面描述内容" />
<!-- refresh, 页面重定向和刷新 --><meta http-equiv="refresh" content="0;url=" />
<!-- viewport 适配移动端,控制视口大小和比例 --><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
复制代码

9. tile 与 h1 的区别?b 与 strong 的区别?i 与 em 的区别?

  • titleh1 的区别:

  • title 属性更侧重于网站的信息,显示在网页标题上,告诉搜索引擎和用户此网站是做什么的。而 h1 显示在内容上,title 标签比 h1 标签更重要一些。

  • bstrong 的区别:

  • strong 标签有语义,起到加重语气及强调的地方,而 b 标签没有,b 标签只是简单的加粗标签

  • iem 的区别:

  • em 标签有语义,表示一般的强调文本,对搜索引擎更友好。而 i 标签仅仅表示样式上的斜体。

特殊字符描述:

  1. 问题标注 Q:(question)

  2. 答案标注 R:(result)

  3. 注意事项标准:A:(attention matters)

  4. 详情描述标注:D:(detail info)

  5. 总结标注:S:(summary)

  6. 分析标注:Ana:(analysis)

  7. 提示标注:T:(tips)

往期推荐:

最后:

  • 欢迎关注 『前端进阶圈』 公众号 ,一起探索学习前端技术......

  • 公众号回复 加群扫码, 即可加入前端交流学习群,一起快乐摸鱼和学习......

  • 公众号回复 加好友,即可添加为好友

发布于: 刚刚阅读数: 4
用户头像

还未添加个人签名 2021-10-17 加入

还未添加个人简介

评论

发布
暂无评论
前端面试实录HTML篇_html_控心つcrazy_InfoQ写作社区