前端面试--HTML篇章

最新推荐文章于 2024-06-04 17:00:24 发布

秃头007号robot

最新推荐文章于 2024-06-04 17:00:24 发布

阅读量235

点赞数

分类专栏：前端文章标签：前端 html 面试

本文链接：https://blog.youkuaiyun.com/m0_51123132/article/details/125149659

版权

前端专栏收录该内容

22 篇文章

订阅专栏

本文主要探讨前端面试中常见的HTML相关问题，包括src与href的区别、HTML语义化理解、HTML5新特性、script标签的defer和async属性、元素分类、head标签作用、meta标签、canvas与svg对比、WebWorker的应用以及DOCTYPE的作用。通过这些知识点，帮助开发者更好地理解和准备HTML相关的面试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端面试–HTML篇章

一、高频面试题

1、src和href的区别

src英文全称也就是source，指的是指向的外部资源的位置，在请求src资源时会把外部资源下载到当前文档，嵌入到当前标签内,浏览器解析到时会暂停文档内其他资源的下载和处理，直到src资源加载、编译、执行完

<script src="dd.js"></script>

href英文全称是hypertext reference也就是超文本引用，指向网络资源所处的位置，建立和当前元素之间的链接

使用href在进行资源下载时不会停止对当前文档的处理，采取并行下载方式，比如

<link href="common.css" rel="stylesheet">

2、对html语义化的理解

所谓的语义化就是用适当的html标签来划分页面的内容，比如页面的头部区域用head标签、尾部就用footer标签，使用语义化的标签编写页面可读性强。不仅便于团队维护和开发，也使得seo也就是搜索引擎优化的效果更好，有助于爬虫能抓取更多的有效信息

3、说说对html5的理解

html5是一种跨平台的、可以运行在不同硬件上的最新html标准，拥有丰富的语义化元素和新的API、表单控件和强大的图像支持（canvas svg）。

新的语义元素比如header footer article section nav aside等

新的api比如客户端存储数据的新方法–localStorage sessionStorage

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

这两个属性都是异步加载外部的js脚本，不会阻塞页面的解析

async适合第三方脚本、defer适合与dom关联的脚本

区别：

执行顺序：多个带defer的标签按顺序进行执行，多个带async的标签不能保证文件加载顺序
脚本是否并行执行：defer属性，需要等文档所有元素都加载完才执行js脚本，而async属性对后续文档的加载和执行、js脚本的加载和执行都是并行也就是异步执行

5、行内元素、块级元素、空元素都有哪些？

块级元素：div ul li ol dl dt dd h1-h6 p

行内元素：a b span img input select strong

空元素：br hr img input link meta

6、head标签的作用

head标签用于定义文档的头部，可以包含base link meta script style title（head唯一必需的元素）等标签

head描述文档的各种属性和信息，内部的信息一般不会作为真正的内容展示给读者

7、常用的meta标签有哪些（不同属性）？

<meta charset="utf-8">
//描述html的编码类型
<meta name="keywords" content="关键词">
//页面关键词    
<meta name="description" content="页面描述内容">
//页面描述
<meta http-equiv="refresh" content="0;url=">
//页面重定向和刷新
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
//适配移动端，控制视口的大小和比例
<meta name="robots" content="index,follow">
//搜索引擎的索引方式 index--文件将被检索；follow--页面上的链接可以被查询

8、canvas和svg的区别

svg也就是可缩放矢量图形，svg中每个被绘制的图形都可以看作是一个对象，svg对象属性变化也就会发生图形的自动重现,它不依赖分辨率、支持事件处理器、适用于谷歌地图等带有大型渲染区域的应用程序，不适合在游戏开发中应用，复杂度高会减慢渲染速度；canvas也就是画布，用js来绘制2D图形，逐个像素进行渲染，一旦位置发生改变就会重新进行绘制，它依赖分辨率、不支持事件处理器、文本渲染能力弱、可以以.jpg .png等格式保存图像，适合图像密集型游戏的开发场景，其中许多图形对象都会频繁进行重绘

9、说一下webworker

webworker是一个比较新的web api，可以为js创建一个多线程环境，允许主线程创建worker线程；在主线程在浏览器运行的同时，把一些密集型计算(加密解密算法渲染复杂的canvas 复杂数据的检索、排序、过滤)和高耗时的任务放到后台的worker线程运行,通过postMessage将结果传给主线程，这样在进行复杂操作时就不会阻塞主线程

//简单案例
//class.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let worker1 = new Worker("worker1.js");
        let worker2 = new Worker("worker2.js");
        let worker3 = new Worker("worker3.js");
        worker1.onmessage = e => {
            console.log(e.data);
        }
        worker2.onmessage = e => {
            console.log(e.data);
        }
        worker3.onmessage = e => {
            console.log(e.data);
        }
    </script>

</body>

</html>

//worker1.js
function fb(n){
    if(n==1 || n==2){
        return 1;
    }
    return fb(n-1)+fb(n-2);
}
console.time('fb执行时间1');
let result = fb(43);
console.timeEnd('fb执行时间1');
self.postMessage('worker1')
//worker2.js
function fb(n){
    if(n==1 || n==2){
        return 1;
    }
    return fb(n-1)+fb(n-2);
}
console.time('fb执行时间2');
let result = fb(43);
console.timeEnd('fb执行时间2');
self.postMessage('worker2')
//worker1.js
function fb(n){
    if(n==1 || n==2){
        return 1;
    }
    return fb(n-1)+fb(n-2);
}
console.time('fb执行时间3');
let result = fb(43);
console.timeEnd('fb执行时间3');
self.postMessage('worker3')
//fb执行时间1: 4044.559814453125 ms
//class.html:17 worker1
//worker2.js:9 fb执行时间2: 4053.31298828125 ms
//class.html:20 worker2
//worker3.js:9 fb执行时间3: 4064.26806640625 ms
//class.html:23 worker3

webworker的最佳使用场景

射线追踪（追踪光线的路径作为像素生成图片进行渲染）

Oliver’s JS Raytracer (nerget.com)

解析远程图片获取图片的base64

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Canvas to base64</title>
</head>
<body>
  <script>
    function loadImageAsync(url) {
      if (typeof url !== 'string') {
        return Promise.reject(new TypeError('must specify a string'));
      }

      return new Promise(function(resolve, reject) {
        const image = new Image();
        // 允许 canvas 跨域加载图片
        image.crossOrigin="anonymous";
        image.onload = function() {
          const $canvas = document.createElement('canvas');
          const ctx = $canvas.getContext('2d');
          const width = this.width;
          const height = this.height;
          let imageData;
          
          $canvas.width = width;
          $canvas.height = height;
          ctx.drawImage(image, 0, 0, width, height);
          imageData = ctx.getImageData(0, 0, $canvas.width, $canvas.height);
          resolve({image, imageData});
        };

        image.onerror = function() {
          reject(new Error('Could not load image at ' + url));
        };

        image.src = url;
      });
    }
    
    function blobToDataURL(blob) {
      return new Promise((fulfill, reject) => {
        let reader = new FileReader();
        reader.onerror = reject;
        reader.onload = (e) => fulfill(reader.result);
        reader.readAsDataURL(blob);
      })
    }

    document.addEventListener("DOMContentLoaded", function () {
      loadImageAsync('https://cdn-images-1.medium.com/max/1600/1*4lHHyfEhVB0LnQ3HlhSs8g.png')
        .then(function (image) {
          // jpeg-web-worker.js https://github.com/kentmw/jpeg-web-worker
          const worker = new Worker('jpeg-web-worker.js');
          worker.postMessage({
            image: image.imageData,
            quality: 50
          });
          worker.onmessage = function(e) {
            // e.data is the imageData of the jpeg. {data: U8IntArray, height: int, width: int}
            // you can still convert the jpeg imageData into a blog like this:
            const blob = new Blob( [e.data.data], {type: 'image/png'} );
            blobToDataURL(blob).then((imageURL) => {
              console.log('imageUrl:', imageURL);
            })
          }
        })
        .catch(function (err) {
          console.log('Error：', err.message);
        });
    });
  </script>
</body>
</html>

10、DOCTYPE文档类型的作用

必须放在文档的第一行，是一个告诉浏览器当前html版本的指令。html布局引擎会检查doctype的类型决定使用标准模式还是兼容模式对文档进行渲染。标准模式下浏览器使用w3c标准解析页面，混杂（兼容）模式下以一种宽松的向后的兼容模式渲染页面