HTML面试题1. 一个网页从开始请求到显示的过程 2. 常见的html5的面试问题 3. 新增的属性 4. 常用的方法

一个网页从开始请求到显示的过程

（1）在浏览器中输入网址，浏览器解析URL，浏览器检查缓存；
（2）发送至DNS服务器并获得域名对应的WEB服务器IP地址，将这IP地址缓存以便下次快速查询；
（3）与WEB服务器建立TCP连接，进行三次握手；
（4）浏览器向WEB服务器的IP地址发送相应的HTTP请求（请求行，请求头，请求体）；
（5）WEB服务器响应请求并返回指定URL的数据，
（6）浏览器下载数据后解析HTML,css,js源文件，浏览器解析 HTML 代码，按照其结构（标签嵌套关系）在内存中构建一个 DOM 树
(7)在解析 HTML 的过程中，如果遇到标签引用外部 CSS 文件或标签包含内联 CSS：获取这些 CSS 文件，浏览器会解析 CSS 代码，构建一个 CSSOM (CSS Object Model) 树。
(8)浏览器将 DOM 树和 CSSOM 树结合起来，创建一个 渲染树 (Render Tree)
(9)布局：浏览器根据渲染树和视口（Viewport）的大小，计算每个节点在屏幕上的精确位置和尺寸
(10)绘制：浏览器遍历渲染树，调用图形库（如 Skia）将每个节点绘制成屏幕上的实际像素。这个过程可能发生在多个图层上
(11)合成：浏览器将绘制好的各个图层按照正确的顺序（考虑 z-index 等）合并到一起，最终显示在屏幕上。现代浏览器会利用 GPU 进行合成加速，提高性能。

HTML5为什么只需要写`<!DOCTYPE HTML>`？

使浏览器进入标准模式，阻止进入混杂模式
让浏览器使用最新的HTML5标准来解析渲染页面

HTML5 新特性

分类	特性简述
语义标签	header, section, article 等结构清晰
多媒体	video, audio 标签直接播放
图形	canvas 与 SVG 绘图能力
表单	更丰富的输入类型和验证功能
存储	localStorage 和 sessionStorage
API	地理定位、拖拽、多线程、WebSocket

HTML中的Meta标签

语义化标签常用的

标签	含义	使用场景
`<header>`	页头部分	网站头部、模块头部
`<nav>`	导航菜单	主导航、侧边栏导航
`<main>`	页面主体	页面中唯一的主内容区域
`<section>`	章节	内容逻辑区块，如文章段落
`<article>`	独立内容	博文、评论、新闻块
`<aside>`	侧边内容	侧栏、广告、推荐内容
`<footer>`	页脚部分	页面底部或文章尾部
`<h1>`~`<h6>`	标题	不同层级的标题（越小等级越高）
`<figure>`	媒体对象	图像/图表配文字说明
`<figcaption>`	媒体说明	`<figure>` 中图像的文字解释
`<time>`	时间/日期	显示具体时间
`<mark>`	高亮文本	搜索关键词、重点标记
`<address>`	联系方式	作者或组织的联系地址

<body>
  <header>网站头部</header>
  <nav>导航栏</nav>
  <main>
    <section>
      <article>
        <h2>标题</h2>
        <p>正文内容</p>
      </article>
    </section>
    <aside>侧边栏</aside>
  </main>
  <footer>版权信息</footer>
</body>

常见的浏览器内核有哪些？

WebKit 和 Blink 是当前主流的浏览器内核，广泛用于现代浏览器，如 Safari、Chrome 和 Edge。
Gecko 是 Mozilla Firefox 使用的内核，专注于开源和隐私保护。
Trident 和 EdgeHTML 是旧版的浏览器内核，已经被新的技术（如 Blink）取代。

简述一下你对HTML语义化的理解。

指的是合理使用语义化的标签来创建页面结构，如header,footer,nav，从标签上即可以直观的知道这个标签的作用
（1）HTML语义化让页面的内容结构化，结构更清晰，利于开发和维护，而不是滥用div；
（2）即使在没有样式CSS的情况下也能以一种文档格式显示，并且是容易阅读的；
（3）搜索引擎的爬虫也依赖于HTML不同标签来确定不同的权重，有利于SEO；
（4）使阅读源代码的人更容易将网站分块，便于阅读。

为什么利用多个域名来存储网站资源会更有效

安全：资源独立缓存，避免冲突
方便: CDN缓存更方便，节省了cookie
快速：突破浏览器的并发链接限制，提升页面首屏渲染速度

浏览器页面由哪三层构成

结构层：HTML 构建文档结构
表示层：css 设置文档的表现效果
行为层： js和dom脚本实现文档行为

cookie、sessionStorage 和 localStorage 的区别。

特性/名称	`cookie`	`localStorage`	`sessionStorage`
存储大小限制	~4KB	~5MB	~5MB
生命周期	手动设置过期时间；默认是会话结束	永久保存（除非手动清除）	仅在当前标签页有效
浏览器发送行为	每次请求都会自动携带到服务器	不会发送	不会发送
可跨页面使用？	✅ 是	✅ 是（同源）	❌ 否（同一窗口页签内）
典型用途	登录状态、用户标识	用户设置、本地缓存	临时状态、表单草稿
安全性	容易被劫持（需配合 `HttpOnly` 和 `Secure`）	仅前端可访问	仅前端可访问

web

web的标准是什么

一系列标准的集合
（1）结构化标准语言
（2）表现标准语言
（3）行为标准语言

web标准诞生的原因

解决因浏览器版本不同、软硬件设备不同导致的需多版本开发的问题。

form

如何关闭自动完成功能：
form 或下面某个 input 设置为 autocomplete = off。

W3C

W3C对web标准提出规范化的要求

标签字母要小写
标签要闭合
标签不许随便嵌套

好处

对SEO有帮助
提升搜索引擎对页面的抓取效率

script、script async 和 script defer 的区别

<script src="script.js"></script>         <!-- 默认，同步加载，同步执行 -->
<script src="script.js" async></script>   <!-- 异步加载，立即执行 -->
<script src="script.js" defer></script>   <!-- 异步加载，DOMContentLoaded 前执行 -->

📊 对比表格：

特性	`<script>`	`<script async>`	`<script defer>`
是否异步加载	❌ 否（同步）	✅ 是	✅ 是
是否阻塞渲染	✅ 是（阻塞 HTML 解析）	❌ 否（不会阻塞）	❌ 否（不会阻塞）
脚本执行顺序	按写入顺序执行	谁先加载完谁先执行	按写入顺序执行
执行时机	立即执行	加载完立刻执行（可能早于 DOM 构建完毕）	等 DOM 构建完毕后执行（在 `DOMContentLoaded` 之前）

🧠 通俗解释：

<script>

默认是同步加载 + 同步执行
在加载和执行脚本时，浏览器会暂停解析 HTML
❗ 可能阻塞页面加载

<script async>

是异步加载，但加载完成后立即执行
不保证执行顺序
适合不依赖其他脚本的独立脚本（如统计、广告）

<script defer>

也是异步加载
等 DOM 构建完毕后再顺序执行
最推荐的方式之一，适合放在 <head> 中而不阻塞 HTML 渲染

假设有以下 HTML：

<script src="a.js"></script>
<script src="b.js" async></script>
<script src="c.js" defer></script>

a.js 会立即加载并执行（阻塞后续 HTML）
b.js 会并行加载，加载完立刻执行（可能在 a.js 前或后执行）
c.js 会并行加载，但等 HTML 解析完再按顺序执行

SEO（搜索引擎优化：Search Engine Optimization）

1. 站内优化（On-page SEO）：

关键词优化：选择合适的关键词并在页面标题、描述、内容中合理使用。
优化标题和描述：确保每个页面都有独特、包含关键词的标题和元描述。
内容优化：提供有价值、原创且相关的内容。
URL结构：保持 URL 简洁，包含关键词。
内部链接：通过内部链接提升页面权重。

2. 站外优化（Off-page SEO）：

外链建设：通过其他网站链接到你的网站，提升权威性。
社交媒体信号：增加社交媒体上的互动和分享，间接提升排名。

3. 技术优化（Technical SEO）：

提升网站速度：确保网站加载快速，提高用户体验。
HTTPS加密：使用 SSL 加密，提升网站安全性。
网站结构优化：确保网站结构清晰，易于搜索引擎爬取。

4. 本地 SEO（Local SEO）：

Google 我的商家：注册并优化本地商家信息。
本地关键词：使用特定区域的关键词，提升本地搜索排名。

什么是渐进式渲染

不是等全部资源都加载完才显示页面，而是边加载边显示，用户先看到再交互，不卡白屏。

🧩 常见的渐进式渲染策略：

渐进方式	说明
HTML 分块传输	使用 `Transfer-Encoding: chunked`，服务器先发送 HTML 主结构，后续再发送片段
图片懒加载（Lazy Load）	图片不在首屏时延迟加载（`loading="lazy"`）
骨架屏 Skeleton Screen	页面加载前显示“灰色骨架”，避免白屏
渐进式图片加载	先加载模糊的小图，后替换成高清大图
服务端流式渲染 SSR Streaming	Next.js 等框架支持的“边渲染边发送 HTML”，不等全部完成就返回部分 HTML
占位符组件	用 Spinner、Loading 替代真实组件，数据加载后再替换

块级元素和行级元素

常见块级元素：

<div>
<p>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<section>
<article>
<header>
<footer>
<main>
<ul>, <ol>, <li>
<form>
<table>
<header>, <footer>, <nav>

特点：

占据一整行：块级元素会自动换行，并占满父元素的整个宽度。
可以设置宽高：你可以对块级元素设置 width 和 height。
一般用于结构化布局。

常见行级元素：

<span>
<a>
<strong>
<em>
<b>
<i>
<img>
<abbr>
<code>
<label>
<q>

特点：

不占满一整行：行级元素不会强制换行，而是与其他元素在同一行内显示。
无法设置宽高：行级元素的宽度和高度由其内容决定，不能通过 width 或 height 来改变。
一般用于文本内的样式或内容细节。

iframe 有哪些优点和缺点

优点：

嵌套外部内容：
- 可以轻松嵌入其他网站或网页内容，比如广告、视频、地图等。
隔离性：
- iframe 中的内容与主页面隔离，提供了独立的环境，这有助于避免主页面和嵌入页面的 CSS、JavaScript 等冲突。
增强页面功能：
- 可以在不刷新整个页面的情况下嵌入动态内容，增强用户体验。例如，可以用 iframe 嵌入视频播放器、聊天框等。
减少页面负载：
- 使用 iframe 加载外部页面，可以将外部资源和主页面的加载分开，减轻主页面的负担。

缺点：

影响性能：
- 嵌入多个 iframe 可能增加浏览器的资源消耗，导致页面加载变慢，尤其是当每个 iframe 加载的内容较多时。
SEO 不友好：
- 搜索引擎通常不会索引 iframe 中的内容，这可能影响页面的 SEO（搜索引擎优化）表现。
跨域问题：
- 由于安全性原因，浏览器限制了 iframe 内的脚本与主页面脚本的交互，跨域时尤其需要特别处理（如使用 postMessage）。
布局问题：
- 在某些情况下，iframe 可能对布局产生影响，需要特别注意 iframe 的大小和滚动条等问题。

Label

作用：

label标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

🔹 方式 1：使用 `for` 属性（推荐）

<label for="email">邮箱：</label>
<input type="email" id="email" name="email">

✔️ 点击“邮箱：” 会自动聚焦到输入框。

for="email" 表示这个 label 是给 id 为 "email" 的控件用的。

🔹 方式 2：嵌套表单控件

<label>
  用户名：
  <input type="text" name="username">
</label>

✔️ 控件在标签内部时，不需要 for，浏览器会自动关联。

`input`新增的类型及属性

新增的 `<input>` 类型（type）

类型（type）	功能描述
`email`	只能输入邮箱格式（会自动验证）
`url`	输入 URL 地址
`tel`	电话号码（无验证）
`search`	搜索框样式（有清除按钮等）
`number`	数字输入，可加减按钮
`range`	滑块选择范围（0~100）
`date`	选择日期（年月日）
`time`	选择时间（时分）
`datetime-local`	日期+时间（无时区）
`month`	选择年月
`week`	选择某年第几周
`color`	颜色选择器

🔎 示例：

<input type="email" placeholder="请输入邮箱">
<input type="date">
<input type="range" min="0" max="100">
<input type="color">

🧩 新增的 `<input>` 属性（HTML5）

属性	功能说明
`required`	表示该字段必填
`autocomplete`	自动补全（如关闭输入建议）
`autofocus`	页面加载后自动聚焦
`placeholder`	输入框内的提示信息
`pattern`	正则表达式校验输入格式
`min` / `max`	最小/最大值（数字/日期类）
`step`	步进值（用于 number / range）
`multiple`	支持多个输入（如多个文件、多邮箱）
`form`	指定属于哪个 `<form>` 表单
`list`	配合 `<datalist>` 实现自动建议

🔎 示例：

<input type="number" min="1" max="10" step="2">
<input type="email" required>
<input type="text" pattern="[A-Za-z]+" placeholder="请输入字母">

viewport

<meta name="viewport"> 是移动端网页开发中非常关键的标签，用于控制网页在移动设备上的缩放与布局行为。正确设置 viewport 可以让你的网页在手机上显示得更合理，避免缩放、字体变小等问题。
解决问题：
（1）页面太宽 → 被压缩缩放显示 : 控制页面布局宽度 , 适配不同屏幕
（2）字太小，用户体验差 : 控制缩放比例 , 提升用户体验

图片懒加载

图片懒加载（Lazy Loading） 是一种优化网页加载速度的技术，只有当图片即将进入视口（用户的可见区域）时，才会加载该图片，从而减少页面初始加载时的资源请求，提升页面加载性能，尤其对于图片较多的页面非常有效。

在 HTML 中，懒加载可以通过以下几种方法实现：

原生懒加载（HTML loading 属性）

从 HTML5 开始，浏览器支持原生的懒加载功能。只需要在 <img> 标签中添加 loading="lazy" 属性，浏览器就会在图片进入视口时加载它。

html
复制编辑
<img src="image.jpg" alt="Example Image" loading="lazy">

优点：

简单，浏览器原生支持，不需要额外的 JavaScript 库。
性能提升显著，尤其对于长页面或图片较多的网页。

支持的浏览器：

大多数现代浏览器（如 Chrome、Firefox、Edge）都已支持 loading="lazy" 属性。
但一些老旧浏览器可能不支持该属性。

行内元素转为块级元素

display: block;

这是最直接的方法，将元素完全转变为块级元素。

效果：

元素会 独占一行，前后会换行。
可以设置元素的 width 和 height 属性
可以设置 margin (包括 margin-top 和 margin-bottom) 和 padding (所有方向都有效)。
宽度默认为其父容器的 100% (除非设置了具体的 width)。

display: inline-block;

这种方法让元素在行为上像块级元素（可以设置宽高、内外边距），但在布局上仍然像行内元素（不会独占一行，可以和其他元素并排显示）。