前端面试--HTML篇章

最新推荐文章于 2023-02-25 22:09:36 发布

秃头007号robot

最新推荐文章于 2023-02-25 22:09:36 发布

阅读量175

点赞数

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

本文链接：https://blog.csdn.net/m0_51123132/article/details/125149659

版权

前端面试–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