HTML面试题

一.什么是HTML/HTML概述

html是一门超文本标记语言而不是编程语言,其中包括诸多标签用于构建基本的网页,浏览器可以通过其内核区解析这些标签,将页面展示出来

二.HTML的基本机构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.1  <!DOCTYPE html>

<!DOCTYPE html>表示当前页面用HTML5版本来显示网页,它不是一个HTML标签,它是一个文档类型声明标签,如果不写，则进入混杂模式

• 严格模式（标准模式）：以w3c标准解析代码
• 混杂模式（怪异模式）：浏览器用自己的方式解析代码，混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作
• HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的方法，实现时，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。

2.2  HTML标签

lang="en"是HTML标签中的属性, 规定了元素内容所用的语言是英语，基本所有主流浏览器都支持lang属性，因为可以帮助搜索引擎更快的解析网页内容；lang="zh-CN"则规定了元素内容所用的语言是中文

2.3  meta 标签

meta标签的常用属性和作用

charset(属性)

charset是字符集的意思，一般值为“UTF-8”被称为“万国码”，是计算机的二进制语言规则,这个属性是必须设置的，不然页面会乱码

name="keywords"

主要用于向搜索引擎提供网页的关键词信息,会依赖此标签来理解网页内容，辅助排名。

因为技术的提升和滥用问题,基本已经弃用了

name="description" content="页面描述内容"

是 HTML 中最重要的 SEO 元标签之一，它定义了网页的简短摘要,通常会将此描述显示在搜索结果页的标题下方

http-equiv="refresh" content="0; url="

<meta http-equiv="refresh"> 是一个用于页面自动刷新或重定向的HTML元标签，它通过模拟HTTP头的方式控制浏览器行为。

<meta http-equiv="refresh" content="5">
//每5秒刷新当前页面
//适用于需要实时更新的页面（如监控仪表盘）

<meta http-equiv="refresh" content="0;url=https://example.com">
//立即跳转(0秒)到指定URL

三.关于HTML语义化

3.1HTML语义化是什么

HTML语义化是指使用恰当的标签来准确表达内容的含义和结构

3.2HTML语义化有哪些好处

1. 在没有css的情况下也能展示文档的结构
2. 对开发者友好,让人更容易读懂，利于代码可读性
3. 对机器友好，让搜索引擎更容易读懂，利于seo

3.3HTML语义化标签有哪些

文档结构标签

• <header>  头部标签
• <article>    内容标签
• <section>  定义文档某个区域
• <aside>     侧边标签
• <footer>     底部标签

文本内容标签

• <h1>-<h6>：标题层级
• <p>：段落
• <blockquote>：块引用
• <cite>：引用来源
• <time>：时间日期

功能语义标签

• <nav>        导航标签
• <figure>/<figcaption>：图表及其说明
• <address>：联系信息
• <mark>：突出显示文本

四.HTML5有哪些新增

4.1语义化标签

• <header>  头部标签
• <nav>        导航标签
• <article>    内容标签
• <section>  定义文档某个区域
• <aside>     侧边标签
• <footer>     底部标签

4.2表单增强

新的输入类型

<input type="email"> <input type="url">
<input type="number"> <input type="range">
<input type="date"> <input type="time">
<input type="color"> <input type="search">

4.3多媒体支持

• <video>   视频标签
• <audio>   音频标签

4.4API增强

Web Storage：

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

地理定位

navigator.geolocation.getCurrentPosition()

拖放API：

<div draggable="true"></div>

Web Workers：

const worker = new Worker('worker.js');

WebSocket：

WebSocket 是 HTML5 引入的一种全双工通信协议

const socket = new WebSocket('ws://example.com');

History API：

History API 是 HTML5 的重要组成部分，它提供了对浏览器会话历史记录的编程访问能力，使单页应用（SPA）能够在不刷新页面的情况下修改 URL 并管理导航状态。

history.pushState()

4.5DOM查询增强

选择器API：

document.querySelector()
document.querySelectorAll()

classList API：

element.classList.add()
element.classList.remove()
element.classList.toggle()

五.script标签的defer和async

5.1什么是defer

defer 是 HTML <script> 标签的一个属性，用于控制脚本的加载和执行时机，优化页面性能。

• 延迟脚本执行：脚本会异步下载，但等到 HTML 解析完成（DOM 就绪）后再按顺序执行。

• 不阻塞 DOM 渲染：浏览器会继续解析 HTML，不会因脚本加载而停顿。

<script src="app.js" defer></script>

5.2.没有defer和有defer有什么区别

<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>

没有defer执行顺序：

1. 浏览器遇到第一个 <script> 标签时，会停止HTML解析

2. 同步下载并立即执行 script1.js

3. 执行完成后，继续解析HTML

4. 遇到第二个 <script>，再次停止解析，下载并执行 script2.js

5. 同样处理 script3.js

• 阻塞DOM渲染：页面在脚本加载/执行期间会"卡住"

• 严格顺序执行：script1 → script2 → script3

• 脚本执行时DOM可能不完整：如果脚本操作DOM，可能出错

有defer执行顺序：

1. 浏览器异步下载所有带defer的脚本（并行下载）

2. 继续解析HTML，不阻塞页面渲染

3. 当DOM完全解析完成（DOMContentLoaded事件前）

4. 按文档顺序执行脚本：script1.js → script2.js → script3.js

• 不阻塞渲染：页面可以流畅加载

• 保持执行顺序：即使script2下载更快，也会等script1执行完

• DOM已就绪：执行时整个DOM树已构建完成

5.3什么是async

async 是 <script> 标签的一个布尔属性，用于控制脚本的加载和执行行为，是现代Web性能优化的重要工具之一。

基本作用

• 异步加载：脚本会与HTML解析并行下载，不阻塞页面渲染

• 执行时机：脚本下载完成后立即执行，无论HTML是否解析完成

• 并行下载: 多个async脚本并行下载,谁先下载好先执行谁

• 执行特点:只对外部脚本有效(src属性)

5.4defer和asyne的对比

特性	async	defer
加载	异步，不阻塞HTML解析	异步，不阻塞HTML解析
执行时机	下载完立即执行	DOM解析完成后按顺序执行
执行顺序	不保证（先下载完先执行）	严格按文档顺序执行
DOM就绪	执行时DOM可能不完整	执行时DOM已完整构建

注意:script标签是先执行到哪个,哪个开始下载,所以标签并没有优先级,

六.iframe标签

6.1  iframe是什么

用于在当前网页中嵌入另一个独立的 HTML 文档,它创建了一个嵌套的浏览上下文，允许在一个页面中加载并显示另一个页面的内容。

<iframe src="https://example.com" width="600" height="400"></iframe>

6.2  iframe有哪些优缺点

优点

1. 隔离性：嵌入的内容不会影响父页面的 JavaScript 和 CSS。

2. 跨域支持：可以加载不同域名的页面（受浏览器同源策略限制）。

3. 模块化：适合嵌入独立功能（如支付页面、登录窗口）。

 缺点

1. SEO 不友好：搜索引擎可能不会抓取 iframe 里的内容。

2. 性能开销：每个 iframe 都是一个独立的文档，占用额外内存和 CPU。

3. 安全性风险：

   • XSS 攻击：恶意 iframe 可能执行钓鱼攻击。

   • 点击劫持（Clickjacking）：攻击者可能用透明 iframe 覆盖按钮诱导用户点击。

4. 移动端适配问题：某些网站可能禁止 iframe 嵌入（如 X-Frame-Options: DENY）。

七.web worker

7.1 web worker是什么

Web Worker 是浏览器提供的 JavaScript 多线程 技术，允许在后台线程中运行脚本，避免阻塞主线程（UI 线程），从而提升网页性能和响应速度。

7.2 为什么使用web worker

jacascript  是单线程的,所有任务(DOM操作,计算,网络请求等)都在主线程运行,如果遇到复杂的计算,会导致页面卡顿

7.3 web worker有什么特点

web worker的基础使用可以看这个例子Web Worker 的基础用法-优快云博客

• 后台运行 CPU 密集型任务，不阻塞页面渲染。

• 并行计算，提高性能（如加密、数据分析）。

• 长时间运行的任务（如日志处理、轮询服务）。

八.渐进增强和优雅降级的区别

渐进增强

• 渐进增强是针对低版本浏览器也能保证基础功能，然后对高级浏览器改进追加功能；

优雅降级

• 优雅降级是一开始构建完整功能，再对低版本进行兼容

九.HTML5的离线存储

HTML5的离线存储指的是没有网络连接的时候，可以正常访问应用，与网络连接时更新缓存文件

使用:

• 在 cache.manifest 文件中编写需要离线存储的资源：

<html lang="en" manifest="index.manifest">

• 在离线状态时，操作 window.applicationCache 进行离线缓存的操作。

• 如何清除缓存：更新 manifest 文件，通过 javascript 操作，清除浏览器缓存

十.如何做好SEO

• 语义化元素
• title和meta标签描述页面内容
• logo使用a标签加背景图

十一.b和strong，i和em的区别

• strong是有语义的，起到加强语气的效果，遇到阅读器会重读，即为了强调而加粗
• em起到强调文本的作用

十二.img的srcset作用？alt和title的区别

• 响应式页面中经常用到根据屏幕密度设置不同的图片
• 这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片
• alt是图片失效的时候的备用图片地址，title是图片标题

十三.canvas和svg的区别

• canvas是画布，适合图形密集型的游戏，不支持事件处理，
• svg是矢量图，不依赖分辨率，不适合游戏，适合大型渲染区域（地图），支持事件处理

十四.src和href的区别

• src是引入外部资源下载到文档，会暂停其他资源的下载
• href是链接外部资源，不会暂停其他资源的下载