2023 最新前端面试题 （HTML 篇）

1. src 和 href 的区别

src 用于替换当前元素（引入），href 用于在当前文档和引用资源之间确立联系（引用）

（1）src（source）

指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；

在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。

<script src =”js.js”></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。

（2）href（Hypertext Reference）

指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果在文档中添加

<link href=”common.css” rel=”stylesheet”/>

那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使用 link 方式来加载 css，而不是使用 @import 方式。

2. @import 和 link 区别

同：都为外部引用 CSS 的方式

异：

1. link 还能定义 RSS 等其他事务；@import 只能加载 CSS；
2. link 在页面载入时同时加载；@import 需要页面完全加入之后加载；
3. link 无兼容问题；@import 在 CSS 2.1 提出，低版本不支持；
4. link 支持使用 JS 控制 DOM 区改变样式，@import 不支持

推荐文章： link 和 @import 区别

3. 对 HTML 语义化的理解

通俗来讲就是用正确的标签做正确的事情。

包括 内容语义化（内容结构化） 和 代码语义化（选择合适的标签）。

语义化的优点：

1. 样式丢失时候还能让页面呈现清晰的结构
2. 读屏软件，根据文章可以自动生成目录
3. 有利于SEO
4. 对开发者友好，增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

常见的语义化标签：

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

4. DOCTYPE(文档类型 - document type) 的作⽤，严格模式与混杂模式如何区分？它们有何意义?

DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明；

它的作用是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚至 JavaScript 脚本的解析；

它必须声明在HTML文档的第一行。

浏览器渲染页面的两种模式（可通过document.compatMode获取）：

• CSS1Compat：标准模式（Strick mode），默认模式，浏览器