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>
之间的区别,以表格形式展示:
特性/属性 |
|
|
|
加载方式 | 阻塞 HTML 解析直到脚本加载并执行完毕。 | 脚本并行加载,加载完成后立即执行,不等待HTML解析完成。 | 脚本并行加载,但会在HTML解析完成后执行。 |
执行顺序 | 当遇到脚本标签时立即执行。 | 执行顺序不可控,哪个先加载完就先执行哪个。 | 按照它们在文档中的顺序执行。 |
适用场景 | 小型脚本或者需要在页面渲染前必须执行的脚本。 | 适用于独立于其他脚本和页面内容加载的第三方脚本等。 | 适用于所有脚本都需要按顺序执行的情况。 |
DOM 元素访问 | 可以直接操作当前已加载的DOM元素。 | 由于脚本可能在HTML完全加载之前执行,因此访问某些DOM元素可能会失败。 | 因为脚本在HTML解析后执行,可以安全地访问DOM。 |
使用位置 | 通常放在 | 适合放置在 | 适合放置在 |
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>输入你的名字:<input type="text" name="fname">
</label>
就比如这里点击“输入你的名字”,就会自动聚焦到输入框
- 使用
for
属性:通过for
属性指定与哪个表单控件相关联(需要与该表单控件的id
相匹配)。
<label for="fname">输入你的名字:</label>
<input type="text" id="fname" name="fname">
这两种方法都可以使点击 label
文本时聚焦到相应的表单控件上,从而提升用户的交互体验。