Web前端面试题

一、HTML 常见题目

01、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

答:

文档模式主要有以下两个作用:

1、告诉浏览器使用什么样的html或xhtml规范来解析html文档

2、对浏览器的渲染模式产生影响;不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析。

两种渲染模式:

BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)

CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])

区别:严格模式是浏览器根据规范去显示页面;混杂模式是以一种向后兼容的方式去显示

意义:决定浏览器如何渲染网站(浏览器使用那种规范去解析网页)

触发:浏览器根据doctype是否存在和使用的是那种dtd来决定。写了<!doctype html>就开启了严格模式,不写就是混杂模式。

----------------------------------------------------------------------------------------------------------------------------------

02、HTML5 为什么只需要写 <!DOCTYPE HTML>?

03、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

04、页面导入样式时,使用link和@import有什么区别?

05、介绍一下你对浏览器内核的理解?

06、常见的浏览器内核有哪些?

07、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?

08、如何区分 HTML 和 HTML5?

09、简述一下你对HTML语义化的理解?

10、HTML5的离线储存怎么使用,工作原理能不能解释一下?

11、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

12、请描述一下 cookies,sessionStorage 和 localStorage 的区别?

13、iframe有那些缺点?

14、Label的作用是什么?是怎么用的?(加 for 或 包裹)

15、HTML5的form如何关闭自动完成功能?

16、如何实现浏览器内多个标签页之间的通信? (阿里)

17、webSocket如何兼容低浏览器?(阿里)

18、页面可见性(Page Visibility)API 可以有哪些用途?

19、如何在页面上实现一个圆形的可点击区域?

20、实现不使用 border 画出1px高的线,在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

21、网页验证码是干嘛的,是为了解决什么安全问题?

22、tite与h1的区别、b与strong的区别、i与em的区别?

### Web前端开发常见面试题及答案 #### 1. Vue 生命周期的理解 Vue 的生命周期是一组用于管理组件状态的方法集合。这些方法按照特定顺序执行,允许开发者在不同阶段介入并实现自定义逻辑。以下是常见的生命周期钩子及其作用: - **beforeCreate**: 组件实例初始化之后立即调用,在此阶段,数据观测 (data observer) 和 event/watcher 事件配置尚未启动。 - **created**: 实例已完成数据观测、属性和方法的运算,但尚未挂载到 DOM 上。 - **beforeMount**: 在挂载开始之被调用,相关的 render 函数首次被调用。 - **mounted**: 此时组件已渲染到页面上,DOM 已经可用,适合操作初始 DOM 或发起 AJAX 请求[^2]。 其他重要钩子还包括 `beforeUpdate`、`updated`、`beforeDestroy` 和 `destroyed`,分别对应更新周期的不同阶段以及销毁过程中的清理工作。 --- #### 2. 常见 HTTP 状态码的意义 HTTP 协议通过状态码告知客户端请求的结果。以下列举了一些常用的 HTTP 状态码及其含义: - **400 Bad Request**: 客户端发送的请求有语法错误,服务器无法理解该请求。 - **403 Forbidden**: 服务器接收到请求,但由于权限不足等原因拒绝提供服务。 - **404 Not Found**: 服务器尝试定位指定资源失败,通常表示路径或文件名不正确[^3]。 了解这些状态码有助于调试网络问题,并优化用户体验。 --- #### 3. CSS 中的选择器分类与继承特性 CSS 提供多种选择器以满足不同的样式需求,主要包括以下几类: - 标签选择器(如 `p`, `div`) - 类选择器(`.class-name`) - ID 选择器(`#id-name`) - 属性选择器(`input[type="text"]`) 关于继承性,部分 CSS 属性能够自动传递给后代元素,典型的可继承属性包括但不限于: - 字体相关 (`font-family`, `font-size`) - 文本颜色 (`color`) - 行高 (`line-height`) 需要注意的是,盒模型相关的属性(如宽度、高度)、边框、背景等均不可继承[^3]。 --- #### 4. HTML 常见标签的作用范围 HTML 是构建网页结构的基础语言,下面列出了几个常用标签的功能描述: - `<div>`: 定义文档中的区块容器,默认为块级显示模式。 - `<p>`: 描述一段文字内容,属于短语级别标记。 - `<h1>-<h6>`: 设置标题等级,数值越小代表优先度越高。 - 列表项组合:<`ul`>无序列表;<`ol`>有序列表;配合<`li`>使用创建条目。 - 结构化语义增强标签:例如<`section`>, <`article`>帮助划分独立章节或者文章片段[^4]。 --- #### 5. Promise 对象的核心价值体现 Promise 是一种处理异步操作的对象形式,它提供了更清晰简洁的方式替代传统嵌套回调函数带来的复杂性和难以维护的问题。“回调地狱”现象得以缓解正是因为有了链式调用 `.then()` 方法的支持。此外,还可以利用 catch 捕获整个链条上的异常情况统一处理[^5]。 ```javascript function delay(ms) { return new Promise((resolve, reject) => { setTimeout(() => resolve('Resolved after ' + ms), ms); }); } delay(2000).then(result => console.log(result)); ``` 上述代码展示了如何创建一个简单的延迟 promise 并打印结果消息。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值