Html 面试题

1、HTML5 新增那些标签?

（1）布局标签（语义化标签）

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

（2）视频标签(video)

（3）音频标签(audio)

（4）新的 API

音视频：audio 和 video 元素
绘图图形：canvas 元素
本地存储：localStorage，sessionStorage
多线程操作：Web Worker （Web Worker 是 HTML5 新特性，允许我们在 js 主线程之外开辟新线程，并将一段 js 脚本运行其中，它赋予了开发者利用 js 操作多线程的能力）

语义化的优点如下：

在没有 CSS 样式情况下也能够让页面呈现出清晰的结构
有利于 SEO 和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重
方便团队开发和维护，语义化更具可读性，遵循 W3C 标准的团队都遵循这个标准，可以减少差异化

2、常见的块元素、行内素以及行内块素，三者有何不同？

排列方式

类型	排列特性	示例元素
块级元素	独占父容器整行，垂直排列（即使宽度未占满也会换行）	`<div>`、`<h1>`、`<p>`、`<ul>`
行内元素	与其他行内元素水平排列，直到父容器宽度不足才会换行	`<span>`、`<a>`、`<strong>`
行内块元素	水平排列，但可设置宽高（类似块元素特性），元素间可能有默认空白缝隙	`<img>`、`<input>`、`<button>`

尺寸控制

类型	宽高设置	默认宽度规则	边距控制
块级元素	可直接设置宽高（`width`/`height`）	父容器宽度的 100%	四个方向（上下左右）外边距（`margin`）和内边距（`padding`）均有效
行内元素	宽高由内容决定，设置无效	内容实际宽度	仅水平方向（左右）外边距有效，垂直方向无效；内边距四个方向有效但不会撑大布局
行内块元素	可直接设置宽高，覆盖默认内容宽度	内容实际宽度	四个方向外边距和内边距均有效

嵌套规则与典型场景

类型	内容嵌套规则	适用场景
块级元素	可包含其他块级、行内或行内块元素（例外：文字类标签如`<p>`内不可嵌套块元素）	页面布局容器（如头部、侧边栏）、复杂内容区块
行内元素	仅能包含文本或其他行内元素（例外：`<a>`可嵌套块元素但需转换为块级模式）	文本修饰（如加粗、链接）、小型交互元素（如输入框）
行内块元素	可包含行内元素或文本，部分场景可嵌套块元素	图文混排（如图片按钮）、表单控件（如按钮、选择框）

常见问题与解决方案
1. 行内块元素间的空白缝隙
  原因：HTML 代码中的换行符或空格被解析为空白节点。
  解决：设置父元素font-size: 0，或使用负边距margin-left: -4px 。
2. 元素类型转换
  通过 CSS 的display属性实现：
css
```
.block {
  display: block;
} /* 转为块级 */
.inline {
  display: inline;
} /* 转为行内 */
.inline-block {
  display: inline-block;
} /* 转为行内块 */
```
1
2
3
4
5
6
7
8
9
1. 垂直对齐问题
  行内块元素默认基线对齐，导致垂直位置偏移。
  解决：设置vertical-align: middle或vertical-align: top 。
2. 高度塌陷问题 行内块元素的高度由其内容决定，父元素高度塌陷。解决：设置父元素overflow: hidden或display: table 。

3、HTML、XML、XHTML 它们之间有什么区别？

核心定位与用途

类型	定义	主要用途	关键特性
HTML	超文本标记语言（HyperText Markup Language）	描述网页内容结构和呈现方式（如段落、图片、链接）	- 预定义标签（如 `<p>`, `<img>`） - 关注数据的外观和显示
XML	可扩展标记语言（eXtensible Markup Language）	存储和传输结构化数据（如配置文件、API 数据交换）	- 自定义标签（如 `<product>`） - 关注数据的内容和语义
XHTML	可扩展超文本标记语言（eXtensible HyperText Markup Language）	以 XML 的严格语法重写 HTML，增强规范性和兼容性	- 继承 HTML 的标签库 - 强制 XML 语法规则（如标签闭合、小写）

语法规则对比

特性	HTML	XML	XHTML
标签闭合	允许省略闭合标签（如 `<br>`）	必须显式闭合（如 `<br/>`）	必须显式闭合（如 `<br/>`）
标签大小写	不敏感（`<DIV>` 等同 `<div>`）	敏感（自定义标签严格区分）	必须小写（如 `<div>`）
属性引号	可选（如 `width=200`）	必须加引号（如 `width="200"`）	必须加引号（如 `width="200"`）
错误处理	浏览器自动纠错	解析失败报错	严格解析，错误导致渲染终止
文档结构	允许松散结构	必须单根元素（如 `<root>`）	需完整声明（DOCTYPE 和命名空间）

设计目标与演进
1. HTML
  - 目标：快速构建可视化网页，早期版本（如 HTML4）语法宽松，允许开发者快速上手。
  - 问题：代码不规范导致跨浏览器兼容性问题，难以维护。
  - 演进：HTML5 引入语义化标签（如 <article>）和多媒体支持（如 <video>），成为现代 Web 开发主流。
2. XML
  - 目标：实现跨平台数据交换，独立于软件和硬件。
  - 应用：常见于配置文件（如 Android 布局）、RSS 订阅、Web Service 数据格式（如 SOAP）。
3. XHTML
  - 起源：W3C 为规范 HTML 松散性，将 XML 语法引入 HTML，推出 XHTML 1.0/1.1。
  - 特点：强制严格语法（如属性值必须小写），提升代码可维护性和机器可读性。
  - 现状：XHTML 2.0 因过度复杂被放弃，HTML5 成为替代方案，但 XHTML 的严格性仍被部分项目采用。

典型代码示例

HTML（宽松语法）

html

<!DOCTYPE html>
<html>
  <body>
    <p>
      这是一个段落
      <img src="image.jpg" />
    </p>
  </body>
</html>

XML（自定义数据结构）

xml

<bookstore>
  <book category="编程">
    <title>JavaScript 高级程序设计</title>
    <author>Nicholas C. Zakas</author>
    <price>89.00</price>
  </book>
</bookstore>

XHTML（严格语法）

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <p>这是一个段落</p>
    <img src="image.jpg" alt="示例图片" />
  </body>
</html>

4、DOCTYPE(⽂档类型) 的作⽤

Doctype 是 HTML5 的文档声明，通过它可以告诉浏览器，使用哪一个 HTML 版本标准解析文档。在浏览器发展的过程中，HTML 出现过很多版本，不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的 bug，所以文档声明是必须的。

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

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

存储时间与生命周期

类型	有效期	触发失效的条件
Cookie	可设置过期时间（`Expires`/`Max-Age`），默认关闭浏览器后失效。	浏览器关闭（未设过期时间）或达到预设的过期时间。
localStorage	永久存储，除非手动删除或用户清除浏览器缓存。	用户主动调用 `localStorage.clear()` 或浏览器隐私设置清除。
sessionStorage	会话级存储，仅在当前浏览器标签页有效。	关闭标签页或浏览器窗口。

存储容量与数据格式

类型	容量限制	数据格式
Cookie	单个约 4KB，同域名下最多 20-50 个。	仅支持字符串，需手动编码/解码（如 `encodeURIComponent`）。
localStorage	约 5-10MB（不同浏览器差异）。	支持字符串，复杂数据需序列化（如 `JSON.stringify`）。
sessionStorage	同 `localStorage`。	同 `localStorage`。

通信方式与服务端交互

类型	是否随 HTTP 请求发送	服务端控制
Cookie	是，自动携带在请求头（`Cookie`）。	服务器通过 `Set-Cookie` 响应头设置，客户端通过 `document.cookie` 读写。
localStorage	否，纯客户端存储。	完全由前端控制，通过 `setItem`/`getItem` 等 API 操作。
sessionStorage	否，同 `localStorage`。	同 `localStorage`。

作用域与共享规则

类型	作用域	跨窗口/标签页共享
Cookie	同域名下所有页面共享，可通过 `domain` 和 `path` 限定范围。	支持跨窗口共享。
localStorage	同源策略（协议+域名+端口一致）下的所有页面共享。	支持跨窗口共享。
sessionStorage	仅限当前浏览器标签页，不同标签页即使同源也不共享。	不支持。

安全性对比

类型	安全风险	防护措施
Cookie	易受 XSS 和 CSRF 攻击，可能泄露会话标识。	设置 `HttpOnly`（禁止 JS 访问）、`Secure`（仅 HTTPS 传输）、`SameSite` 属性。
localStorage	易受 XSS 攻击，数据可能被恶意脚本窃取。	避免存储敏感信息，加密关键数据。
sessionStorage	同 `localStorage`，但数据生命周期更短。	同 `localStorage`。

应用场景

类型	典型使用场景
Cookie	用户身份验证（如 Session ID）、跟踪用户行为（广告分析）、保存小型服务端交互数据。
localStorage	持久化存储用户偏好（如主题、语言）、离线缓存（如静态资源）、购物车状态。
sessionStorage	临时保存表单填写进度、单页应用（SPA）的页面状态、防止重复提交。

总结对比表

特性	Cookie	localStorage	sessionStorage
存储时间	可设置过期时间或会话级	永久存储	会话级（标签页关闭失效）
容量	~4KB	5-10MB	5-10MB
通信方式	自动携带在 HTTP 请求头	不参与通信	不参与通信
作用域	同域名下共享	同源策略共享	仅当前标签页共享
安全性	中（需额外设置防护）	低（易受 XSS）	低（易受 XSS）
API 便捷性	手动字符串操作	封装 `setItem`/`getItem`	同 `localStorage`

操作建议

敏感数据：优先使用服务端 Session + Cookie（HttpOnly）组合，避免前端存储敏感信息。
性能优化：大容量非敏感数据（如用户配置）使用 localStorage 减少 HTTP 请求。
临时状态：表单步骤或页面刷新恢复使用 sessionStorage，避免数据跨标签泄露。

6、网站 TDK 三大标签以及 SEO 优化

TDK 是网站标题（title）、描述（description）、关键词（keywords）这三者的英文首字母缩写，主要用来对当前网页进行总结和概况。

在 SEO 界，标题、描述、关键词通常也被称为三大标签。

7、img 标签的 title 属性与 alt 属性的区别是什么？

核心用途差异

属性	核心作用	适用场景
`alt`	替代文本：当图片无法加载时显示替代内容，帮助视障用户和搜索引擎理解图片语义。	- 图片加载失败时显示文字描述 - 屏幕阅读器读取内容 - SEO 优化关键字段
`title`	提示信息：用户鼠标悬停时显示工具提示（Tooltip），提供额外非必要信息。	- 补充图片的附加说明（如拍摄时间、版权信息） - 增强用户体验（如交互提示）

显示机制与浏览器行为
1. alt 的显示规则
  - 仅在图片加载失败、禁用图片或使用屏幕阅读器时显示。
  - 例外：早期 IE 浏览器会将 alt 作为工具提示显示，但现代浏览器（Chrome、Firefox 等）已修正此行为。
2. title 的显示规则
  - 鼠标悬停在图片上时显示工具提示，与图片是否加载成功无关。
  - 部分浏览器对过长内容截断处理（如 Firefox 仅显示前 60 个字符）。
必要性及语法规范

属性	是否必需	语法规范	示例
`alt`	必需	- 长度建议 ≤ 100 个英文字符 - 装饰性图片可设为空值 `alt=""` - 禁止包含 HTML 标签	`<img src="cat.jpg" alt="一只橘猫趴在沙发上">`
`title`	可选	- 无严格长度限制，但建议简洁 - 可包含补充性信息（如来源、作者）	`<img src="landscape.jpg" alt="雪山湖泊" title="摄于2025年西藏纳木错">`

对 SEO 和可访问性的影响
1. SEO 优化
  - alt：搜索引擎通过 alt 文本理解图片内容，直接影响图片搜索排名。需包含关键词但避免堆砌（如 alt="2025款智能手表外观图"）。
  - title：对 SEO 无直接影响，但用户体验提升可能间接降低跳出率。
2. 可访问性（A11y）
  - alt：视障用户依赖屏幕阅读器读取 alt 内容，需准确描述图片核心信息。装饰性图片应设为 alt="" 以避免干扰。
  - title：部分辅助工具（如屏幕阅读器）可能忽略 title，因此关键信息不应仅依赖 title 。
开发建议与常见错误
1. 推荐实践
  - 同时使用：为关键图片同时设置 alt 和 title，但内容避免重复（如 alt 描述功能，title 补充技术参数）。
  - 语义化优先：alt 应简洁明确（如 alt="用户登录按钮"），而非堆砌关键词（如 alt="按钮登录用户"）。
2. 常见错误
  - 错误 1：装饰性图片未设置 alt=""，导致屏幕阅读器朗读冗余信息。
  - 错误 2：将 title 作为 alt 的替代品，忽视视障用户和 SEO 需求。
浏览器兼容性对比

浏览器	`alt` 显示行为	`title` 显示行为
Chrome 120+	仅图片加载失败时显示替代文本	悬停时显示完整工具提示
Firefox 125+	同 Chrome	截断超过 60 字符的内容
Safari 18+	同 Chrome	支持长文本，无截断
IE 11	替代文本作为工具提示显示（已淘汰）	优先显示 `title`，无 `title` 时显示 `alt`

总结

alt 和 title 是 <img> 标签中互补但功能迥异的属性：

alt 是必要的语义化属性，核心服务于可访问性和 SEO。
title 是可选的交互属性，用于提供额外信息以增强用户体验。
开发时应遵循语义化原则，避免混淆两者用途，确保兼顾功能与合规性。

8、src 和 href 的区别？

src 和 href 都是 HTML 中特定素的属性，都可以用来引入外部的资源。两者区别如下：

src：全称 source，它通常用于 img、video、audio、script 素，通过 src 指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求 src 资源时，它会将资源下载并应用到文档内，比如说：js 脚本、img 图片、frame 等素。当浏览器解析到该素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将 js 脚本放在底部而不是头部的原因。
href：全称 hyper reference，意味着超链接，指向网络资源，当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理，通常用于 a、link 素。

Html 面试题 ​

1、HTML5 新增那些标签? ​

2、常见的块元素、行内素以及行内块素，三者有何不同？ ​

3、HTML、XML、XHTML 它们之间有什么区别？ ​

4、DOCTYPE(⽂档类型) 的作⽤ ​

5、localStorage、sessionStorage、cookie 三者区别？ ​

6、网站 TDK 三大标签以及 SEO 优化 ​

7、img 标签的 title 属性与 alt 属性的区别是什么？ ​

8、src 和 href 的区别？ ​