html+css+js+bootstrap面试题
HTML 常见面试题
1. DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义?
DOCTYPE 是 document type (文档类型的）的简写。
作用：
告诉浏览器通过哪种规范(文档类型定义，DTD) 解析文档 (如HTML或XHTML规范)；
DTD 是一系列的语法规则，用来定义 XML 或 (X)HTML 的文件类型。
浏览器会使用它来判断文档类型， 决定使用何种协议来解析，以及切换浏览器模式。
浏览器模式—标准模式（standards mode）：浏览器根据W3C标准来渲染页面。
浏览器模式—混杂模式(quirks mode)：浏览器采用更宽松、向后兼容方式渲染页面。
混杂模式下，浏览器会模仿旧浏览器的行为，比如IE6，在此基础上兼容新的标准特性。
混杂模式又称兼容模式、怪异模式等。
浏览器根据不同的 DOCTYPE 选择不同的渲染方法就叫做 DOCTYPE 切换。
DOCTYPE切换就是用来识别和兼容旧网页的。
!DOCTYPE html 的重要性：声明文档的解析类型(document.compatMode)，
避免浏览器的怪异模式。
2. image 标签上title属性与alt属性的区别是什么？
title
- title 属性规定关于元素的额外信息。
- title 属性通常会在鼠标移到元素上时显示一段工具提示文本。
- title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。
- title 属性是 abbr 和 acronym 元素的必需属性。
alt
- alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
- alt 属性值是一个最多包含 1024 个字符的字符串，包括空格和标点。
- 字符串必须包含在引号中。
- 如果图像包含信息 - 使用 alt 描述图像
- 如果图像在 a 元素中 - 使用 alt 描述目标链接
- 如果图像仅供装饰 - 使用 alt=""
3. 请说说你对标签语义化的理解？
- 去掉或者丢失CSS样式的情况下能够让页面呈现出清晰的内容结构，代码结构。
- 有利于SEO(搜索引擎优化)：和搜索引擎建立良好沟通，有助爬虫抓取更多有效信息。
- 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备) 以意义的方式来渲染网页。
- 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
4. 简述一下 src 与 href 的区别
src
- src 是source的缩写，用于替换当前元素。
- src 指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置。
href
- href 是Hypertext Reference的缩写，用于在当前文档和引用资源之间确立联系。
- href 指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接
5. 页面导入样式时，使用link和@import有什么区别？
区别：
从属关系区别：
link 是HTML提供的标签，不仅可加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
@import 是 CSS 提供的语法规则，只有导入样式表的作用。
加载顺序区别:
link 引用CSS时候，页面载入时同时加载。
@import 引入的 CSS需要在页面完全加载完毕后被加载。
兼容性问题:
link 标签作为 HTML 元素，不存在兼容性问题。
@import 是在css2.1提出来的，低版本的浏览器不支持。
DOM 可控性区别:
link 支持使用 javascript 控制去改变样式。
@import 不支持 javascript 方式插入样式。
权重区别:
link 方式的样式的权重高于 @import 的权重
6. iframe框架有那些优缺点？
优点：
- iframe能够原封不动的把嵌入的网页展现出来。
- 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
- 网页如果为了统一风格，头部和版本都是一样的，就可写成一个页面，用iframe嵌套，可以增加代码的可重用。
- 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
缺点：
- 搜索引擎的爬虫程序无法解读这种页面
- 框架结构中出现各种滚动条
- 使用框架结构时，保证设置正确的导航链接。
- iframe页面会增加服务器的http请求
7. 介绍一下对浏览器内核的理解
- 渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，然后输出到显示器或打印机。
- JS引擎：解析和执行JavaScript来实现网页的动态效果。
- 浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。
- 所有网页浏览器、电子邮件客户端及它需要编辑、显示网络内容的应用程序都要内核。
8. 常见的浏览器内核有哪些？
Trident内核：IE，360，搜过浏览器；
Gecko内核：Netscape6及以上版本，
Presto内核：Opera
Blink内核：Opera；
Webkit内核：Safari，Chrome
9. 对 WEB 标准以及 W3C 的理解与认识
- 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链 css 和 js 脚本。
- 结构行为表现的分离、文件下载与页面速度更快。
- 内容能被更多的用户所访问，内容能被更广泛的设备所访问。
- 更少的代码和组件，容易维 护、改版方便，不需要变动页面内容。
- 提供打印版本而不需要复制内容、提高网站易用性
10. xhtml 和 html 有什么区别？
- HTML 是一种基本的 WEB 网页设计语言，XHTML 是一个基于 XML 的置标语言。
- XHTML 元素必须被正确地嵌套。
- XHTML 元素必须被关闭。
- XHTML标签名必须用小写字母。
- XHTML 文档必须拥有根元素。
11. 清除浮动的几种方式，各自的优缺点？
- 使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）。
- 使用 overflow:auto（空标签元素清除浮动不得不增加无意代码弊端,用 zoom:1 兼容 IE）
- 使用 afert 伪元素清除浮动(用于非 IE 浏览器)。
CSS 经典面试题
CSS3有哪些新特性？
1. CSS3实现圆角（border-radius），阴影（box-shadow），
2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4. 增加了更多的CSS选择器 多背景 rgba
5. 在CSS3中唯一引入的伪类是 ::selection.
6. 媒体查询，多栏布局
7. border-image
1. 介绍一下 CSS 的盒子模型？
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
- 背景应用于由内容和内边距、边框组成的区域。
- 内边距、边框和外边距都是可选的，默认值是零。
- 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
- 内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
- 外边距可以是负值，而且在很多情况下都要使用负值的外边距
1）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
2）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padding;
2. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？
- id 选择器（ # myid）
- 类选择器（.myclassname）
- 标签选择器（div, h1, p）
- 相邻选择器（h1 + p）
- 子选择器（ul < li）
- 后代选择器（li a）
- 通配符选择器（ * ）
- 属性选择器（a[rel = “external”]）
- 伪类选择器（a: hover, li: nth – child）
- 可继承的样式： font-size font-family color, UL LI DL DD DT;
- 不可继承的样式：border padding margin width height ;
- 优先级就近原则，同权重情况下样式定义最近者为准;
- 载入样式以最后载入的定位为准;
- 优先级为: !important > id > class > tag important 比内联优先级高
3. 为什么要初始化 CSS 样式?
- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的。
- 如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
- 初始化样式会对 SEO 有一定的影响，但力求影响最小 的情况下初始化。
- 最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）
4. div+css 的布局较 table 布局有什么优点？
- 改版的时候更方便 只要改 css 文件。
- 页面加载速度更快、结构化清晰、页面显示简洁。
- 表现与结构相分离。
- 易于优化（seo）搜索引擎更友好，排名更容易靠前。
5. 什么是外边距重叠？重叠的结果是什么？
- 外边距重叠就是 margin-collapse。
- 在 CSS 中，相邻两个盒子（可能是兄弟关系也可能是祖先关系）的外边距
可以结合成一个单独的外边距 - 这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时，折叠结果是两者的相加的和。
6. rgba()和 opacity 的透明效果有什么异同？
同：rgba()和 opacity 都能实现透明效果
异：
- opacity 作用于元素，以及元素内 的所有内容的透明度
- rgba()作用于元素的颜色或背景色（设置 rgba 透明元素的子元素不会继承透明效果！）
7. position 的 absolute 与 fixed 共同点与不同点
static: 无特殊定位，对象遵循 HTML 定位规则
absolute: 将对象从文档流中拖出，用 left ， right ， top ， bottom 等属性做绝对定位。
而其层叠通过 css z-index 属性定义。此时对象不具有边距，但仍有补白和边框
relative: 对象不可层叠, 但将依据 left, right, top, bottom 等属性在正常文档流中偏移位置
A：共同点：
改变行内元素的呈现方式，display 被置为 block；
让元素脱离普通流，不占据空间；
默认会覆盖到非定位元素上
B 不同点：
absolute 的”根元素“是可以设置的，而 fixed 的”根元素“固定为浏览器窗口。
当你滚动网页，fixed 元素与浏览器窗口之间的距离是不变的。
8. px 和 em 的区别。
px 和 em 都是长度单位。
区别：
- px 的值是固定的，指定是多少就是多少，计算比较容易。
- em 得值不是固定的，并且 em 会继承父级元素的字体大小。
浏览器的默认字体高都是 16px。
所以未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em。
9. display:none 与 visibility:hidden 的区别是什么？
- display : 隐藏对应的元素但不挤占该元素原来的空间。
- visibility: 隐藏对应的元素并且挤占该元素原来的空间。
区别：
- 使用 CSS display:none 属性后，HTML 元素(对象)的宽度、高度等属性值都将“丢失”
- 使用 visibility:hidden 属性后，HTML 元素(对象)仅仅是在视觉上看不见(完全透明),
而它所占据的空间位置仍然存在。
10. 简述 border:none 以及 border:0 的区别，并给出使用建议。
border:none 表示边框样式无。 border:0 表示边框宽度为 0;
当定义了border:none,即隐藏了边框的显示,实际就是边框宽度为 0.
当定义边框时,必须定义边框的显示样式.
因为边框默认样式为不显示 none,所以仅设置边框宽度,由于样式不存在,
边框的宽度也自动被设置为0.
11. display: block;和 display: inline;的区别
block 元素特点：
- 处于常规流中时，如果 width 没有设置，会自动填充满父容器
- 可以应用 margin/padding
- 在没有设置高度的情况下会扩展高度以包含常规流中的子元素
- 处于常规流中时布局时在前后元素位置之间（独占一个水平空间）
- 忽略 vertical-align
inline 元素特点 ：
- 水平方向上根据 direction 依次布局
- 不会在元素前后进行换行
- 受 white-space 控制
- margin/padding 在竖直方向上无效，水平方向上有效
- width/height 属性对非替换行内元素无效，宽度由元素内容决定
- 非替换行内元素的行框高 由 line-height 确定，
- 替换行内元素的行框高由 height,margin,padding,border 决定
- 浮动或绝对定位时会转换为 block
- vertical-align 属性生效
12. PNG, GIF, JPG 的区别及如何选
GIF:
- 8 位像素，256 色
- 无损压缩
- 支持简单动画
- 支持 boolean 透明
- 适合简单动画
JPEG：
- 颜色限于 256
- 有损压缩
- 可控制压缩质量
- 不支持透明
- 适合照片
PNG：
- 有 PNG8 和 truecolor PNG
- PNG8 类似 GIF 颜色上限为 256，文件小，支持 alpha 透明度，无动画
- 适合图标、背景、按钮
13. 浮动元素引起的问题和解决办法？
浮动元素引起的问题：
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 与浮动元素同级的非浮动元素会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决方法：
1. 使用 CSS 中的 clear:both; 属性来清除元素的浮动可解决 2、3 问题。
2. 对于问题 1，添加如下样式，给父元素添加 clearfix 样式：
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
display: inline-block;
} /* for IE/Mac */
清除浮动的几种方法：
1. 额外标签法，
（缺点：不过这个办法会增加额外的标签 使 HTML 结构看起来不够简洁。）
2. 使用 after 伪类
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
3. 浮动外部元素
4. 设置 overflow 为 hidden 或者 auto
14. 解释下浮动和它的工作原理？清除浮动的技巧
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
这种方法在所有浮动标签后添加一个空标签定义 css clear:both. 弊端是增加无意义标签
2.使用 overflow。
给包含浮动元素的父标签添加 css 属性 overflow:auto; zoom:1; zoom:1 用于兼容 IE6。
3.使用 after 伪对象清除浮动。
该方法只适用于非 IE 浏览器。
该方法必须为需要清除浮动元素的伪对象设置 height:0，否则该元素比实际高若干像素
15. CSS优化、提高性能的方法有哪些？
- 避免过度约束
- 避免后代选择符
- 避免链式选择符
- 使用紧凑的语法
- 避免不必要的命名空间
- 避免不必要的重复
- 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
- 避免！important，可以选择其他选择器
- 尽可能的精简规则，你可以合并不同类里的重复规则
Js 经典面试题
1. 请描述一下 cookies，sessionStorage 和 localStorage 的区别?
- cookie 在浏览器和服务器间来回传递,sessionStorage 和 localStorage 不会
- sessionStorage 和 localStorage 的存储空间更大;
- sessionStorage 和 localStorage 有更多丰富易用的接口;
- sessionStorage 和 localStorage 各自独立的存储空间;
请你谈谈Cookie的弊端：
cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。
缺点：
1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
优点：极高的扩展性和可用性
简单说一下浏览器本地存储是怎样的
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
2. 从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理?
dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。
3. js 如何获取和设置 cookie?
// 创建 cookie
function setCookie(name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += '; expires=' + expires;
}
if (path) {
cookieText += '; expires=' + expires; }
if (domain) {
cookieText += '; domain=' + domain;
}
if (secure) {
cookieText += '; secure'; }
document.cookie = cookieText; }
// 获取 cookie
function getCookie(name) {
var cookieName = encodeURIComponent(name) + '=';
var cookieStart = document.cookie.indexOf(cookieName);
var cookieValue = null;
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf(';', cookieStart); if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
}
// 删除 cookie
function unsetCookie(name) {
document.cookie = name + "= ; expires=" + new Date(0);
}
4. 你了解 HTTP 状态码吗，请随便介绍一下。
5. 说说对网站重构的理解。
网站重构: 在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变 UI 的情况下，对网站进行优化，在扩展的同时保持一致的 UI。
对于传统的网站来说重构通常是:
- 表格(table)布局改为 DIV + CSS
- 使网站前端兼容于现代浏览器(针对于不合规范的 CSS、如对 IE6 有效的)
- 对于移动平台的优化
- 针对于 SEO 进行优化
- 深层次的网站重构应该考虑的方面
- 减少代码间的耦合
- 让代码保持弹性
- 严格按规范编写代码
- 设计可扩展的 API
- 代替旧有的框架、语言(如 VB)
- 增强用户体验
- 通常来说对于速度的优化也包含在重构中
- 压缩 JS、CSS、image 等前端资源(通常是由服务器来解决)
- 程序的性能优化(如数据读写)
- 采用 CDN 来加速资源加载
- 对于 JS DOM 的优化
- HTTP 服务器的文件缓存
6. js 数组去重。
- 返回值是否是当前引用
- “重复”的判断条件
Array.prototype.uniq = function () {
// 长度只有 1，直接返回当前的拷贝
if (this.length <= 1) {
return this.slice(0);
}
var aResult = [];
for (var i = 0, l = this.length; i < l; i++) {
if (!_fExist(aResult, this[i])) {
aResult.push(this[i]);
}
}
return aResult;
// 判断是否重复
function _fExist(aTmp, o) {
if (aTmp.length === 0) {
return false;
}
var tmp;
for (var i = 0, l = aTmp.length; i < l; i++) {
tmp = aTmp[i];
if (tmp === o) {
return true;
}
// NaN 需要特殊处理
if (!o && !tmp && tmp !== undefined && o !== undefined && isNaN(tmp) && isNaN(o)) {
return true;
}
}
return false;
}
}
7. Ajax 是什么?Ajax 的交互模型?同步和异步的区别?如何解决跨域问题?
- AJAX 的全称是异步的 Javascript 和 XML ，是一种创建快速动态的技术，通过在后台与服务器进行少量数据交互，实现网页的异步更新，在不重新加载整个界面的情况下，做到网页的部分刷新;
- AJAX 的交互模型( AJAX 的过程)
交互过程：
- 用户发出异步请求;
- 创建 XMLHttpRequest 对象;
- 告诉 XMLHttpRequest 对象哪个函数会处理 XMLHttpRequest 对象状态的改变，为此要把对象的 onReadyStateChange 属性设置为响应该事件的JavaScript 函数的引用
- 创建请求，用 open 方法指定是 get 还是 post ，是否异步， url 地址;
- 发送请求， send 方法
- 接收结果并分析
- 实现刷新
10. Flash、Ajax 各自的优缺点，在使用中如何取舍?
Flash:
- Flash 适合处理多媒体、矢量图形、访问机器
- 对 CSS、处理文本上不足，不容易被搜索
Ajax:
- Ajax 对 CSS、文本支持很好，支持搜索
- 多媒体、矢量图形、机器访问不足
共同点:
- 与服务器的无刷新传递消息
- 可以检测用户离线和在线状态
- 操作 DOM
12. 哪些操作会造成内存泄漏?
内存泄漏： 指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象)，或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
14. 写出至少 5 个前端优化的方法，并写明理由。
15. ajax 原理、如何实现刷新数据及优点?
Ajax 的工作原理：
相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。
并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax 引擎自己来做,只有确定需要从服务器读取新数据时再由 Ajax 引擎代为向
服务器提交请求
优点:
-
- 减轻服务器负担
- 无刷新更新页面
- 更好的用户体验
17. javascript 的本地对象，内置对象和宿主对象。
本地对象为 array obj regexp 等可以 new 实例化。
内置对象为 gload Math 等不可以实例化的。
宿主为浏览器自带的 document,window 等。
18. 谈谈 this 对象的理解。
this 是 js 的一个关键字，随着函数使用场合不同，this 的值会发生变化。
但是有一个总原则，那就是 this 指的是调用函数的那个对象。
this 一般情况下:是全局对象 Global。 作为方法调用，那么 this 就是指这个对象
19. new 操作符具体干了什么呢?
创建一个空对象，并且 this 变量引用该对象，同时还继承该函数的原型。
属性和方法被加入到 this 引用的对象中。
新创建的对象由 this 所引用，并且最后隐式的返回 this 。
var obj = {};
obj.proto = Base.prototype;
Base.call(obj);
20. JSON 的了解?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
它是基于 JavaScript 的一个子集。数据格式简单, 易于读写, 占用带宽小 {‘age’:‘12’, ‘name’:‘back’}
21. 异步加载的方式有哪些?
- defer，只支持 IE
- async:
- 创建 script，插入到 DOM 中，加载完毕后 callBack
题目练习：https://www.nowcoder.com/ta/front-end-interview?query=&asc=true&order=&tagQuery=&page=1
框架bootstrap：https://blog.csdn.net/qq_32888087/article/details/89447576?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task