10个高频HTML面试题总结

JY1_Zh
138 阅读8分钟

1. 对块级元素、行内元素和行内块元素的理解

  1. 块级元素block

    • 特点：

      1. block 块级元素独占一行，垂直方向排列
      2. 在网页中一般通过块级元素对页面进行布局
      3. 高度、宽度、外边距以及内边距都可以控制
      4. 宽度默认是容器（父级宽度）的100%
      5. 是一个容器及盒子，里面可以放行内元素或者块级元素
      6. p 和 h 里面不能放块级元素

    • 常用元素：div、p、h1~h6、ul、ol、dl、form、table 等

  2. 行内元素inline

    • 特点：

      1. 行内元素（inline）会在一条直线上排列，都是同一行的，水平方向排列
      2. 行内元素主要用来包裹文字
      3. 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
      4. 行内元素只能容纳文本或者其他行内元素
      5. 高宽设置无效，但可以设置行高
      6. 默认宽度就是它本身内容的宽度
      7. 只可以设置水平方向的边距，垂直方向无效

    • 常用元素：span、a、i、em 等

  3. 行内块元素inline-block

    • 特点（同时具有块级元素和行内元素的特点）：

      1. 行内块元素（inline-block）和相邻行内(块)元素在一行上，但是之间会有空白缝隙。一行可以显示多个
      2. img 底下有空隙
      3. 默认宽度就是它本身内容的宽度
      4. 宽度、高度、行高、外边距以及内边距都可以控制

    • 与块级元素、行内元素的区别：

      • 与块级元素相比，主要区别在在于行内块元素在元素之后不添加换行符，因此该元素可以位于其他元素旁边
      • 与行内元素相比，主要区别在于行内块元素能够有效设置宽度和高度

    • 常用元素：img、input、select、td 等

2. src 和 href 的区别

src 和 href 都是 HTML 中特定元素的属性，都可以用来引用外部资源。两者区别是：

  1. src：指向的资源会被下载并嵌入到文档中当前标签所在的位置。通常用于 script、img、video、audio 等标签。当浏览器解析到使用 src 的元素时，会暂停其它资源的下载，直到 src 引用资源加载、编译、执行完毕。这也是建议将 js 脚本放在底部的原因。

  2. href：指向的网络资源会和当前元素或文档建立链接关系。通常用于 a、link 标签。当浏览器识别到 href 指向的资源时，就会并行下载资源，不会停止对当前文档的处理。这也是建议用 link 方式引入 CSS 而不用 import 的原因。

3. 对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

语义化的优点：

  • 为了在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构
  • 使标签有更加丰富的含义，方便开发与维护
  • 方便搜索引擎能识别页面结构，有利于 SEO
  • 方便其他设备解析（如移动设备、盲人阅读器等）

注意：这种语义化标准主要是针对 搜索引擎 的

4. script 标签中 defer 和 async 的区别

defer 和 async 都是 script 标签的两个可选属性。

相同点：

  1. 都使脚本文件异步执行。
  2. 都表示立即开始下载脚本，但不阻塞后续文档的加载，即加载脚本的过程与解析后面文档的过程同时进行。
  3. 都只对外部脚本文件有效。

不同点：

  1. 执行时间：defer 使脚本延迟到文档完全被解析和显示之后，触发 DOMContentLoaded 事件前执行。而 async 使脚本下载结束后立刻执行。
  2. 执行顺序：defer 是按照原本的顺序执行，而标记为 async 的脚本并不保证能按照它们出现的次序执行。因此如果 js 前后有依赖性，使用 async 可能会报错。

现代 Web 应用程序通常将所有JavaScript 引用放在页面底部。好处是页面在处理 JS 代码之前完全渲染页面，用户会感觉页面加载更快了，因为浏览器显示空白页面的时间短了。

5. HTML5 新特性

  1. 语义化标签

    标签意义
    header表示网页的头部（页眉）
    nav表示网页中的导航
    main表示网页的主体部分(一个页面中只会有一个main)
    article表示一个独立的文章
    section表示一个独立的区块，上边的标签都不能表示时使用section
    aside和主体相关的其他内容（侧边栏）
    footer表示网页的底部（页脚）
    figurefigure 规定自包含内容，比如图示、图表、照片、代码清单等。
    figcaptionfigcaption 定义 figure 元素的标题。

  2. 媒体标签

    • 音频 audio
      • autoplay: autoplay; 音频就绪自动播放
      • controls: controls; 显示播放控件
      • loop: loop; 循环播放
      • src: url; 音频 url 地址
    • 视频 video
      • autoplay: autoplay; 视频就绪自动播放
      • controls: controls; 显示播放控件
      • width & height: 像素; 设置播放器宽度 & 高度
      • loop: loop; 循环播放
      • src: url; 视频 url 地址
      • poster: Imgurl; 加载等待的画面图片
      • muted: muted; 静音播放

  3. input 表单 type 和属性

    • 输入类型 type 属性值

      • color：颜色
      • number: 数字
      • range：范围
      • date：日期
      • datetime：日期和时间
      • time：时间
      • month：月份和年份
      • week：周和年
      • email：电子邮件地址
      • search：搜索
      • tel：电话号码
      • url：URL 地址

    • 表单属性

      • required: required; 表单拥有该属性表示其内容不能为空，必填
      • placeholder: 提示文本; 表单是提示信息，存在默认值将不显示
      • autofocus: autofocus; 自动聚焦属性，页面加载完成自动聚焦到指定表单
      • autocomplete: off/on; 浏览器基于之前键入过的值，显示出在字段中填写的选项
      • multiple: multiple; 可以多选文件提交

  4. Web 存储

    1. localStorage：存储没有截止日期的数据
    2. sessionStorage：针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

  5. 画布 Canvas

    1. canvas 元素使用 JavaScript 在网页上绘制图像
    2. 画布是一个矩形区域，可以控制其每一像素
    3. canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

  6. SVG（Scalable Vector Graphics，可伸缩矢量图形）

    1. 用于定义用于网络的基于矢量的图形
    2. 使用 XML 格式定义图形
    3. 图像在放大或改变尺寸的情况下其图形质量不会有损失
    4. 是万维网联盟的标准

  7. 其他

    • 拖放（Drag 和 Drop）
    • 地理定位（Geolocation）
    • 通信协议（websocket）
    • ...

6. DOCTYPE(文档类型)的作用

DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器应该以什么样（html 或 xhtml）的文档类型定义来解析文档。它必须声明在HTML⽂档的第⼀⾏。

7. 常用的 meta 标签

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性。常用的 meta 标签有：

  1. charset：用来描述 HTML 文档的编码类型

    <meta charset="UTF-8" >

  2. keywords，页面关键词

    <meta name="keywords" content="关键词k1、k2" >

  3. description：页面描述

    <meta name="description" content="描述内容" >

  4. viewport：适配移动端，可以控制视口的大小和比例

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

8. 说一下 web worker

当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。

Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。

9. Canvas 和 SVG 的区别

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。

SVG：可伸缩矢量图形，是一种使用 XML 描述 2D 图形的语言。它基于XML，则意味着 SVG DOM 中的每个元素都是可用的。我们可以为任一元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形都被视为对象，如果对象的属性发生变化，则浏览器就自动重现图形。

Canvas：画布，通过 JavaScript 绘制 2D 图形。Canvas 是逐像素进行渲染的，如果其位置发生变化，则会重新绘制。

Canvas 与 SVG 的比较：

  • Canvas

    • 依赖分辨率
    • 不支持事件处理器
    • 弱的文本渲染能力
    • 能够以 .png 或 .jpg 格式保存结果图像
    • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

  • SVG

    • 不依赖分辨率
    • 支持事件处理器
    • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
    • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
    • 不适合游戏应用

10. title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

  • title 属性表示网页的标题，h1 标签则表示层次明确的页面内容标题，对页面信息抓取有很大影响。
  • b 和 strong 都能够使文本加粗。不同的是 strong 把文本定义为语气更强的强调的内容，而 b 标签没有。
  • i 和 em 都能够使文本斜体。不同的是 em 把文本定义为强调的内容，而 i 标签没有。

参考链接

  1. 「2021」高频前端面试题汇总之HTML篇
  2. 2022高频前端面试题——HTML篇
  3. w3school在线教程
avatar
文章
阅读
粉丝