前端面试题整理（一）

最新推荐文章于 2024-06-15 03:51:35 发布

梦中蝶语

最新推荐文章于 2024-06-15 03:51:35 发布

阅读量2w

点赞数 3

分类专栏：面试文章标签： html css javascript

本文链接：https://blog.csdn.net/cyqiangweihua/article/details/103329234

版权

1、什么是HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language)，不是一种编程语言，而是一种标记语言，是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

2、什么是CSS？

层叠样式表(英文全称：Cascading Style Sheets)，也不是真正的编程语言，是一种用来表现HTML文件样式的语言，能够对网页中元素的样式进行精确控制。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

3、什么是javascript？

JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。
组成部分：

ECMAScript（基本语法）：描述了该语言的语法和基本对象
DOM（文档对象模型）：描述处理网页内容的方法和接口
BOM（浏览器对象模型）：描述与浏览器进行交互的方法和接口

基本特点：

是一种解释性脚本语言（代码不进行预编译）
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）

基本用途

嵌入动态文本于HTML页面
对浏览器事件做出响应
读写HTML元素
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。
控制cookies，包括创建和修改等。
基于Node.js技术进行服务器端编程。

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

HTML5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
ps：SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。但HTML5不是的。

HTML5有哪些新特性、HTML5新标签的浏览器兼容问题如何处理?

HTML5 现在已经不是SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

新增的元素

（1）语义标签

在这里插入图片描述
（2）增强型表单

HTML5 也新增以下表单元素

HTML5 新增的表单属性

placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required 属性，是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性，描述了一个正则表达式用于验证元素的值。
min 和 max 属性，设置元素最小值与最大值。
step 属性，为输入域规定合法的数字间隔。
height 和 width 属性，用于 image 类型的标签的图像高度和宽度。
autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性，是一个 boolean 属性。规定元素中可选择多个值。

(3) 视频和音频

视频播放：<video src=""><video>

音频播放：<audio src=""></audio>

（4）Canvas绘图

（5）SVG绘图

（6）地理定位

（7）拖放API

（8）WebWorker

（9）WebStorage

客户端存储数据的两个对象为：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage

（10）WebSocket

移除的元素

纯表现的元素：basefont，big，center，font,s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；

处理兼容问题
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

  <!--[if lt IE 9]>
   <script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
   <![endif]-->

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

（1）HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
（2）即使在没有样式CSS 的情况下也能以一种文档格式显示，并且是容易阅读的；
（3）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO；
（4）使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。

7、XHTML与HTML有什么区别？

所有标签都必须小写
标签必须成双成对（有结束标签）
标签顺序必须正确（合理嵌套）
所有属性都必须使用双引号（单引号不能使用）
不允许使用target="_blank"

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

1、DOCTYPE的作用
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于标签之前。它不是 HTML 标签，作用是告诉浏览器用哪种模式来渲染文档告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。<!DOCTYPE> 声明没有结束标签且对大小写不敏感
2、严格模式和混杂模式的如何区分？他们有什么意义？
标准模式(严格模式)的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式（混杂模式或怪异模式）中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

9、介绍一下你对浏览器内核的理解？常见的浏览器内核有哪些？

主要分成两个部分：渲染引擎(Render Engine)和JS引擎。

渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎：解析和执行JavaScript来实现网页的动态效果最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向与只指渲染引擎。

常见的浏览器内核有哪些？

Trident内核：IE，360，搜过浏览器；
Gecko内核：Netscape6及以上版本，FF
Presto内核：Opera
Blink内核：Opera；
Webkit内核：Safari，Chrome

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于渲染引擎

10、对WEB标准以及W3C的理解与认识?

web标准简单来说可以分为结构、表现和行为。web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰
W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点。
1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）
（1）标签字母要小写
（2）标签要闭合
（3）标签不允许随意嵌套
2.对于css和js来说
（1）尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
（2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
（3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。
3.其他方面
（1）文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，
（2）容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

11、Iframe的作用？

Iframe也称嵌入式框架，它可以把一个HTML文档嵌入在另一个HTML中显示。

优点：
（1）重载页面时不需要重载整个页面，只需要重载页面中的一个框架页（减少了数据的传输），增加了网页的下载速度。
（2）方便制作导航栏，信息管理系统会用到

缺点：
（1）会产生很多页面，不容易管理
（2）浏览器后退按钮无效
（3）代码复杂，无法被一些搜索引擎索引到
（4）多数小型的移动设备无法完全显示框架
（5）多框架的页面会增加服务器的http请求
由于上面诸多缺点，因此不符合标准网页设计的理念，已经被抛弃。目前框架的所有优点完全可以使用Ajax实现，因此没必要使用框架了。

12、CSS3新特性有哪些？

1.颜色：新增 RGBA，HSLA 模式
2.文字阴影（text-shadow）
3.边框：圆角（border-radius）边框阴影： box-shadow
4.盒子模型：box-sizing
5.背景：background-size 设置背景图片的尺寸、background-origin 设置背景图片的原点、background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
6.渐变：linear-gradient、radial-gradient
7.过渡：transition，可实现动画
8.自定义动画
9.在 CSS3 中唯一引入的伪元素是：selection.
10.媒体查询，多栏布局
11.border-image
12.2D 转换 3D 转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)

13、描述一下CSS中的渐进增强，优雅降级之间的区别？

渐进增强（progressive enhancement）针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）

.transition{
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;  
}

优雅降级（graceful degradation）一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）

.transition{ 
　　     transition: all .5s;
　　  -o-transition: all .5s;
  　-moz-transition: all .5s;
 -webkit-transition: all .5s;
}

区别：优雅降级认为应该针对那些最高级、最完善的浏览器来设计网站，从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是认为应该关注于内容本身，从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

14、对BFC规范的理解有哪些？

最低0.47元/天解锁文章

梦中蝶语

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
前端面试题整理（一）

1、什么是HTMLHTML 指的是超文本标记语言 (Hyper Text Markup Language)，不是一种编程语言，而是一种标记语言，是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序...
复制链接

扫一扫