当前位置: 首页 > news >正文

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,生命周期由 ExpiresMax-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,cssjs构成
  • html结构层
    • 组成页面的基本结构
  • css表示层
    • 为页面添加丰富的样式
  • js行为层
    • 实现用户与页面的交互行为

7.label

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

使用方法:
  1. 直接包含法:将表单控件直接放在 label 标签内。
<label>输入你的名字:<input type="text" name="fname">
</label>

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

  1. 使用 for 属性:通过 for 属性指定与哪个表单控件相关联(需要与该表单控件的 id 相匹配)。
<label for="fname">输入你的名字:</label>
<input type="text" id="fname" name="fname">

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


http://www.xdnf.cn/news/1120555.html

相关文章:

  • 消费 Kafka 一个TOPIC数据,插入到另一个KAFKA的TOPIC
  • python学习2
  • ubuntu(22.04)系统上安装 MuJoCo
  • FRP Ubuntu 服务端 + MacOS 客户端配置
  • 微前端架构详解
  • 《C++初阶之STL》【泛型编程 + STL简介】
  • Nacos 技术研究文档(基于 Nacos 3)
  • 基于R语言的极值统计学及其在相关领域中的实践技术应用
  • 迅为八核高算力RK3576开发板摄像头实时推理测试 ppyoloe目标检测
  • 《亿级流量系统架构设计与实战》通用高并发架构设计 读场景
  • 文心4.5开源之路:引领技术开放新时代!
  • Go从入门到精通(22) - 一个简单web项目-统一日志输出
  • 如何单独安装设置包域名
  • LeetCode--45.跳跃游戏 II
  • 雷卯针对灵眸科技RV1106G3开发板防雷防静电方案
  • AI数字人正成为医药行业“全场景智能角色”,魔珐科技出席第24届全国医药工业信息年会
  • 2024年中国公交网络数据集(Shp/分城市)
  • 【DOCKER】-6 docker的资源限制与监控
  • 【机器学习深度学习】Ollama vs vLLM vs LMDeploy:三大本地部署框架深度对比解析
  • ElasticSearch重置密码
  • LabVIEW浏览器ActiveX事件交互
  • JavaScript 性能优化实战:深入性能瓶颈,精炼优化技巧与最佳实践
  • aspnetcore Mvc配置选项中的ModelBindingMessageProvider
  • 多任务——协程
  • VictoriaMetrics 架构
  • VR样板间:房产营销新变革
  • 纯数学专业VS应用数学专业:这两个哪个就业面更广?
  • Cannot add property 0, object is not extensible
  • 【橘子分布式】Thrift RPC(理论篇)
  • iOS APP 上架流程:跨平台上架方案的协作实践记录