面试八股---HTML

面试八股

1、HTML

1.1 src和href的区别

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

核心区别在于 href 关联的资源（主要是 CSS）是用于描述页面外观的，浏览器可以先生成内容再应用样式，因此可以并行下载不阻塞渲染。

而 src 嵌入的资源（脚本、图片、iframe）是页面内容或行为本身的一部分，其加载和执行/渲染直接影响页面的结构和显示，因此浏览器需要等待它们完成以确保页面正确构建和显示，这通常涉及到暂停解析或阻塞渲染直到资源可用。

1.2 html语义化的理解

HTML语义化强调根据内容的功能和意义选择合适的标签

（1）提升代码可读性和可维护性

语义化标签使代码更直观，便于开发者快速理解页面的结构和功能。
在团队协作中，语义化代码可以减少沟通成本，降低维护难度。

（2）优化搜索引擎优化（SEO）

搜索引擎爬虫通过分析HTML标签来理解页面内容。例如，使用 <article> 标签包装文章内容，能让搜索引擎明确知道这是文章，而不是广告或导航部分。
语义化标签帮助爬虫更准确地抓取和索引页面内容，从而提升网页在搜索结果中的排名。

1.3 DOCTYPE(⽂档类型) 的作⽤

<!DOCTYPE html>

告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档

<!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5 标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，我们需要避免此类情况发生。

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

CSS1Compat：标准模式，默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
BackCompat：怪异模式(混杂模式)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

区分：网页中的DTD，直接影响到使用的是严格模式还是混杂模式，可以说DTD的使用与这两种方式的区别息息相关。有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式

1.4 script标签中defer和async的区别

他们都是异步加载外部的JS脚本文件，它们都不会阻塞页面的解析

属性	下载方式	执行时机	执行顺序	是否阻塞页面解析
`defer`	异步下载	页面解析完成后，DOMContentLoaded事件之前	按照脚本在文档中的顺序	不阻塞
`async`	异步下载	脚本下载完成后立即执行	取决于下载速度，无固定顺序	不阻塞

总结：

**执行顺序：**多个带async属性的标签，不能保证加载的顺序(取决于下载速度，无固定顺序)；多个带defer属性的标签，按照加载顺序执行；
脚本是否并行执行：

async属性：脚本下载和 HTML 解析同时进行，一旦下载好，不管 HTML 解析到哪了，都会阻断并立刻执行脚本。

defer属性:加载后续文档的过程和 JS 脚本的加载(此时仅加载不执行)是并行进行的(异步)，JS 脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded 事件触发执行之前。

1.5 常用的meta标签

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等

 <meta charset="UTF-8">

用来描述HTML文档的编码类型

<meta name="keywords" content="关键词" />

keywords，页面关键词：

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

description，页面描述：

<meta http-equiv="refresh" content="0;url=" />

refresh，页面重定向和刷新：

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

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

其中，content 参数有以下几种：

width viewport ：宽度(数值/device-width)
height viewport ：高度(数值/device-height)
initial-scale ：初始缩放比例
maximum-scale ：最大缩放比例
minimum-scale ：最小缩放比例
user-scalable ：是否允许用户缩放(yes/no）

搜索引擎索引方式：

<meta name="robots" content="index,follow" />

其中，content 参数有以下几种：

all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。

1.6 HTML5有哪些更新

1. 语义化标签

header：定义文档的页眉（头部）；
nav：定义导航链接的部分；
footer：定义文档或节的页脚（底部）；
article：定义文章内容；
section：定义文档中的节（section、区段）；
aside：定义其所处内容之外的内容（侧边）；

2. 媒体标签

audio:音频
- controls 控制面板
- autoplay 自动播放
- loop=‘true’ 循环播放
video视频
- poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定。
- controls 控制面板
- width
- height
source标签：兼容不同的浏览器，可以通过source来指定视频源。

3. 表单

表单类型：email、number、url、range
**表单属性：**placeholder、autofocus、required、pattern
表单属性：
- oninput 每当input里的输入框内容发生变化都会触发此事件。
- oninvalid 当验证不通过时触发此事件。

4.进度条、度量器:

progress：meter属性：用来显示剩余容量或剩余库存

meter属性：用来显示剩余容量或剩余库存

5.DOM查询操作：

document.querySelector()
document.querySelectorAll()

它们选择的对象可以是标签，可以是类(需要加点)，可以是ID(需要加#)

6. Web存储

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

7. 其他

拖放：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。设置元素可拖放：
画布（canvas ）： canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
SVG：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准
地理定位：Geolocation（地理定位）用于定位用户的位置。‘

1.7 img的srcset属性的作⽤？

srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片。

1.8 行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素有：a b span img input select strong；
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；

空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；

1.9 对 web worker 的理解

JavaScript 是单线程的，这意味着所有任务都在主线程上执行。如果遇到计算密集型任务（如大数据处理、复杂算法等），主线程可能会被阻塞，导致页面卡顿甚至无响应。为了解决这个问题，HTML5 引入了 Web Worker 技术，它允许在后台线程中执行脚本，从而避免阻塞用户界面12。简单来说，Web Worker 为 JavaScript 创造了多线程环境，主线程可以创建 Worker 线程，将任务分配给 Worker 运行。Worker 线程在后台运行，主线程和 Worker 线程互不干扰，直到 Worker 完成任务并将结果返回给主线程

1.10 HTML5的离线储存怎么使用，它的工作原理是什么

Web 应用程序在没有网络连接的情况下继续运行，从而提高用户体验和应用的可用性。

Service Worker 是 HTML5 引入的一种运行在浏览器后台的脚本，可以拦截网络请求并缓存资源，从而实现离线访问。

拦截请求：Service Worker 可以拦截页面的所有网络请求。
缓存资源：使用 Cache API 将资源缓存到本地。
离线访问：当用户离线时，Service Worker 从缓存中返回资源。

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

strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单加粗标签。
title属性只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响
i内容展示为斜体，em表示强调的文本

1.12 iframe 有那些优点和缺点？

创建包含另外一个文档的内联框架（即行内框架）

优点：

用来加载速度较慢的内容（如广告）
可以使脚本可以并行下载
可以实现跨子域通信

缺点：

iframe 会阻塞主页面的 onload 事件
无法被一些搜索引擎索识别
会产生很多页面，不容易管理

1.13 label 的作用是什么？如何使用

label标签来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上，还可以提供文本标签。

<label for="mobile">Number:</label>
<input type="text" id="mobile"/><label>Date:<input type="text"/></label>

1.14 Canvas和SVG的区别

（1）绘图方式

Canvas
基于像素绘制，通过 JavaScript API 控制每个像素点的颜色和位置。适合需要频繁重绘的场景，如动画、游戏等。
SVG
基于矢量绘制，通过 XML 标签描述图形。例如，一个圆形可以通过 <circle> 标签定义。适合需要清晰缩放的图形，如图标、图表等。

（2）DOM 支持

Canvas
绘制后的图形是静态的像素图，无法直接绑定事件或修改样式。如果需要交互，必须通过 JavaScript 重新绘制。
SVG
每个 SVG 图形元素都是 DOM 节点，可以直接绑定事件（如点击、悬停），也可以通过 CSS 或 JavaScript 动态修改样式。

（3）缩放与清晰度

Canvas
放大后可能失真，因为它是基于像素绘制的，类似于位图。适合不需要频繁缩放的动态场景58。
SVG
可以无限缩放而不失真，因为它是基于矢量的。适合需要高分辨率显示的场景，如图标、地图等。

（4）性能表现

Canvas
在处理大量图形或复杂动画时性能更优，因为它是直接操作像素，避免了 DOM 操作的开销。
SVG
在图形较少且需要交互的场景中性能更优，但大量图形或复杂动画可能导致性能下降。

1.15 head 标签有什么作用，其中什么标签必不可少？

标签用于定义文档的头部，它是所有头部元素的容器。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

其中定义文档的标题，它是 head 部分中唯一必需的元素。

1.16 浏览器乱码的原因是什么？如何解决？

产生乱码的原因：

核心问题在于编码不统一。无论是网页文件本身、HTML声明、数据库存储，还是浏览器识别，只要其中任意两个环节的编码不一致（比如一个是GBK，另一个是UTF-8），就可能导致乱码。

解决办法：

统一编码： 确保从编辑器、HTML声明、数据库到传输的整个流程都使用同一种编码（推荐UTF-8）。
转码处理： 如果编码不一致是客观存在的，需要在程序层面进行编码转换。
手动调整： 如果浏览器显示乱码，可以手动在浏览器设置中切换编码格式。

1.17 渐进增强和优雅降级之间的区别

1）渐进增强（progressive enhancement）：先确保网站在所有浏览器中都能提供最基本的内容和功能。再针对支持更高级功能的浏览器逐步添加增强的视觉效果和交互功能。

（2）优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容

渐进增强和优雅降级都是处理浏览器兼容性的有效策略，但它们的设计思路和侧重点不同。渐进增强更注重“从基础到增强”，适合需要长期维护和扩展的项目；而优雅降级更注重“从复杂到简化”，适合目标用户主要使用现代浏览器的情况。根据项目需求选择合适的策略，可以更好地平衡用户体验和开发效率。