关于html:前端面试实录HTML篇

47次阅读

共计 3026 个字符，预计需要花费 8 分钟才能阅读完成。

前言

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

前端面试实录 HTML 篇

1. HTML5 有哪些更新？

  1. 引入了语义化标签：

    • header: 头部元素
    • section: 两头元素
    • footer: 底部元素
    • nav: 导航区域
    • aside: 侧边栏区域
    • article: 内容元素
    • process: 进度条
    • bdo: 定义文字方向
    • sub: 下标
    • sup: 上标
    • pre: 预格式化文本

  2. 媒体标签：

    • audio: 音频标签
    • video: 视频标签
    • source: 格局源标签

  3. input 标签的扩大：

    • 属性扩大：

      • placeholder: 默认提醒文本
      • autofocus: 主动聚焦
      • required: 必填项

    • type 属性扩大：

      • date: 日期抉择框
      • color: 色彩选择器
      • button: 按钮
      • radio: 单选框
      • checkbox: 复选框
      • range: 滑块

  4. history API:

    • history.go(): 跳转某个页面(URL)/ 上个页面(-1)/ 下个页面(1)
    • history.back(): 返回上个页面
    • history.forward(): 跳转下个页面
    • history.pushstate(): 增加 history 栈
    • history.replacestate(): 替换 history 栈

  5. 数据存储：

    • localStorage：永久性存储
    • sessionStorage：会话存储

2. 对 HTML 语义化的了解？

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

  • 长处：

    1. 对机器敌对：更便于解析和爬虫，有利于 SEO
    2. 对开发者敌对：加强了代码可读性，构造更加清晰，便于开发和保护

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 页面嵌入到页面中。

  • 长处：

    1. 可用来加载速度较慢的内容(如广告)
    2. 应用脚本并行下载
    3. 实现跨子域通信

  • 毛病：

    1. 会阻塞主页面的 onload 工夫
    2. 无奈被一些搜索引擎辨认到
    3. 会产生较多页面，不便于管理

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: 异步
  • 一般状况：如果没有 defer 或 async，当浏览器遇到 js 脚本会立刻加载——编译——执行，会阻塞前面的逻辑。
    <script src="example.js"></script>

  • 增加 defer 或 async：

    • 有 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 的区别？

  • title 与 h1 的区别：

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

  • b 与 strong 的区别：

    • strong 标签有语义，起到减轻语气及强调的中央，而 b 标签没有，b 标签只是简略的加粗标签

  • i 与 em 的区别：

    • 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)

    往期举荐：

  8. 热点面试题：浏览器和 Node 的宏工作和微工作？
  9. 这是你了解的 CSS 选择器权重吗？
  10. 热点面试题：JS 中 call, apply, bind 概念、用法、区别及实现？
  11. 热点面试题：罕用位运算办法？
  12. Vue 数据监听 Object.definedProperty()办法的实现
  13. 热点面试题：Virtual DOM 相干问题？
  14. 热点面试题：Array 中有哪些非破坏性办法？

  15. 热点面试题：协商缓存和强缓存的了解及区别？

    最初：

  16. 欢送关注『前端进阶圈』公众号，一起摸索学习前端技术 ……
  17. 公众号回复 加群 或 扫码, 即可退出前端交流学习群，一起高兴摸鱼和学习 ……
  18. 公众号回复 加好友，即可添加为好友

正文完
html
发表至： html
2023-04-05
 0
关于html:html表单标签大全
关于html:HTML知识点总结
关于html:第-39-题JS-数据类型有哪些
关于html:如何使用Promiserace-和-Promiseany