HTML面试题

一、基础结构

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1.<!DOCTYPE html>

声明文档类型，如果没有的话会进入怪异模式（向后兼容早期浏览器版本）

2.<html lang="en">...</html>

浏览器根元素，en表示为英文，中文为zh-CN

3.<head></head>

网页头部信息，包含一些对网页的描述性信息，这些内容通常不会直接显示在页面上，但对 SEO 和浏览器行为非常重要。

3.1. <meta charset="UTF-8">

按照UTF-8字符编码

3.2`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

设置移动端视口（viewport），让网页适配移动设备；

width=device-width：告诉手机以设备实际宽度为视口宽度；

initial-scale=1.0：初始缩放比例为 1，即不缩放；

width:视口的宽度，height：视口的高度，initial-scale:页面初始加载时缩放的比例

3.3`<title>Document</title>`

显示在浏览器标签上，易于seo

二、html5新特性

1.声明方式的修改

2.更多的语义化标签

header （网页头部）
footer （网页尾部）
aside （侧边栏）
section （内容区域块）

3.新的input表单输入类型与属性

复制代码

// 邮箱
<input type="email">
<input type="submit">
// 数值输入
<input type="number" min="9" max="12">
<!--限制输入的数值范围在9-12之间，包括9和12-->
<input type="submit">
//文件导入(multiple为上传多个文件)
<input type="file" id="myFile" multiple>
// 占位符
<input type="text" placeholder="请输入文字">

4.视频和音频

视频

方法：play(),pause(),load(),分别是播放，停止，加载方法

复制代码

   <video src="xxx.ogg"></video>

音频

方法：play(),pause(),load(),分别是播放，停止，加载方法

复制代码

   <audio controls>
       <source src="xxx.mp3">
       <source src="xxx.Wav">
   </audio>

5.Canvas和SVG

Canvas：基于像素的，依赖于屏幕分辨率，放大时可能会失真；性能更好，因为直接操作于像素，不需要维护对象模型；需要手动实现交互；适用于游戏等高性能动态

SVG：基于XML矢量图形，放大不会失真，可以直接挂载监听器进行交互，适用于图标等

6.地理位置Api（Geolocation API）

允许网站和应用程序通过用户的设备获取其地理位置信息getCurrentPosition()

7.拖放api

复制代码

//draggable设置是否可以拖拽
<div draggable="true">可拖动的元素</div>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

// 拖动开始时
draggable.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', '拖动的数据');
  console.log('拖动开始');
});

// 拖动结束时
draggable.addEventListener('dragend', function(event) {
  console.log('拖动结束');
});

// 元素进入放置目标区域时
droppable.addEventListener('dragenter', function(event) {
  event.preventDefault();
  droppable.classList.add('over');
});

8.webworker

html5提供的一种多线程解决方案，允许在浏览器中运行后台线程，从而实现复杂的计算任务而不会阻塞主线程,一般用于计算复杂的数据任务

注意：

创建和销毁会有性能消耗，不适合频繁创建和销毁

Worker 构造函数需要一个脚本文件路径，该路径必须与主线程的脚本文件同源

复制代码

// Worker 线程的逻辑
self.onmessage = function(event) {
  // 接收主线程发送的消息
  const data = event.data;
  console.log("Worker 接收到数据：", data);

  // 执行一些复杂的计算任务
  const result = data * 2;

  // 将结果发送回主线程
  self.postMessage(result);
};

// 创建一个新的 Web Worker
const worker = new Worker('worker.js');

// 向 Worker 发送消息
worker.postMessage(10);

// 监听 Worker 发送回来的消息
worker.onmessage = function(event) {
  console.log("主线程接收到结果：", event.data);
};

// 可选：终止 Worker
// worker.terminate();
//可以用onerror监听错误

9.webstorge

帮助解决cookie本地存储

localstorage：存在本地存储，每个域名最多5MB，需要手动清除，无法跨域，一般用于存储用户偏好、主题设置

sessionstorage：存在会话存储中，每个域名最多5MB，浏览器关闭之后就消失，无法跨域，一般用于存储临时数据，购物车数据等

Cookie：存在浏览器Cookie中，每个域名最多20个，每个最大4kb，生命周期由 Expires 或 Max-Age 属性决定，没设置过期时间那就为临时cookie，浏览器关闭后消失，每次请求都会自动发送，可以通过设置 HttpOnly 属性防止 JavaScript 访问 Cookie，可以通过设置 Secure 属性确保 Cookie 只在 HTTPS 连接下发送，可以通过设置 Domain 属性实现跨子域共享，但不能跨顶级域共享。

10.websoket

WebSocket 是一种网络通信协议，它提供了一种在单个 TCP 连接上进行全双工通信的方式。WebSocket 允许服务器和客户端之间进行实时、双向的通信，而无需像传统的 HTTP 请求那样频繁地打开和关闭连接。WebSocket 在前端开发中被广泛用于实现实时功能，例如聊天应用、在线游戏、实时数据更新等

三、

1.元素

块级元素：div、h1~h6(标题标签)、p(段落标签)、ul、ol、li、（canvas）

行内元素：a、span、strong/b [加粗]、em/i [倾斜]、del/s [删除]、ins/u [下划线]

行内块元素：img、input、td

可以通过display改变：

block：将元素显示为块级元素。
inline：将元素显示为行级元素。
inline-block：将元素显示为行内块级元素。
none：隐藏元素，元素不会在页面中显示，也不占据空间

2.script

以下是 .script、<script async> 和 <script defer> 之间的区别，以表格形式展示：

|--------------|-----------------------------------|---------------------------------------|----------------------------|
| 特性/属性 | .script（内联脚本或无特殊属性的脚本） | <script async> | <script defer> |
| 加载方式 | 阻塞 HTML 解析直到脚本加载并执行完毕。 | 脚本并行加载，加载完成后立即执行，不等待HTML解析完成。 | 脚本并行加载，但会在HTML解析完成后执行。 |
| 执行顺序 | 当遇到脚本标签时立即执行。 | 执行顺序不可控，哪个先加载完就先执行哪个。 | 按照它们在文档中的顺序执行。 |
| 适用场景 | 小型脚本或者需要在页面渲染前必须执行的脚本。 | 适用于独立于其他脚本和页面内容加载的第三方脚本等。 | 适用于所有脚本都需要按顺序执行的情况。 |
| DOM 元素访问 | 可以直接操作当前已加载的DOM元素。 | 由于脚本可能在HTML完全加载之前执行，因此访问某些DOM元素可能会失败。 | 因为脚本在HTML解析后执行，可以安全地访问DOM。 |
| 使用位置 | 通常放在<head>中或者靠近</body>结束标签之前。 | 适合放置在<head>中，因为不会阻塞HTML内容的显示。 | 适合放置在<head>中，保证脚本最后执行。 |

3.iframe

✅ 优点：

可以嵌入外部网页内容，实现模块化开发；
内容独立，不会与主页面的 CSS 或 JS 冲突；
支持跨域加载资源；
可用于展示广告、地图、视频等第三方内容。

❌ 缺点：

影响页面加载速度，增加 HTTP 请求；
对 SEO 不友好，搜索引擎不易抓取 iframe 中的内容；
占用更多内存资源；
在移动端适配困难；
存在一定的安全隐患（如点击劫持）

4.说一下img的srcset作用？alt和title的区别?

这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片
alt是图片失效的时候的备用图片地址，title是图片标题

5.说一下src和href的区别？

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

6.前端页面由哪三层构成?

分别由html,css与js构成
html结构层

- 组成页面的基本结构

css表示层

- 为页面添加丰富的样式

js行为层

- 实现用户与页面的交互行为

7.label

label 标签在HTML中用于改进表单控件的可访问性和用户体验。它的主要作用是为用户指示出表单字段的用途，比如一个文本框是用于输入名字还是邮箱地址。通过将 label 与表单控件关联起来，还可以增强可用性，例如点击标签时聚焦或选中对应的表单元素。

使用方法：

直接包含法 ：将表单控件直接放在 label 标签内。
<label> 输入你的名字: </label>

就比如这里点击"输入你的名字"，就会自动聚焦到输入框

使用 for属性：通过 for 属性指定与哪个表单控件相关联（需要与该表单控件的 id 相匹配）。

<label for="fname">输入你的名字:</label>

这两种方法都可以使点击 label 文本时聚焦到相应的表单控件上，从而提升用户的交互体验。

一、基础结构

1.<!DOCTYPE html>

2.<html lang="en">...</html>

3.<head></head>

3.1. <meta charset="UTF-8">

3.2<meta name="viewport" content="width=device-width, initial-scale=1.0">

3.3<title>Document</title>

二、html5新特性

1.声明方式的修改

2.更多的语义化标签

3.新的input表单输入类型与属性

4.视频和音频

5.Canvas和SVG

6.地理位置Api（Geolocation API）

7.拖放api

8.webworker

9.webstorge

10.websoket

三、

1.元素

2.script

3.iframe

✅ 优点：

❌ 缺点：

4.说一下img的srcset作用？alt和title的区别?

5.说一下src和href的区别？

6.前端页面由哪三层构成?

7.label

使用方法：

3.2`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

3.3`<title>Document</title>`