前端面筋-牛客网

最新推荐文章于 2023-03-18 17:40:17 发布

curry的记录

最新推荐文章于 2023-03-18 17:40:17 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/weixin_36215102/article/details/100662504

版权

1、HTML

1.1 浏览器页面有哪三层构成，分别是什么，作用是什么?

结构层、表示层、行为层
html, css, javaScript
HTML实现页面结构，css完成页面表现与风格，js实现一些客户端的功能与业务

1.2 HTML5的优点与缺点？

优点：
（1）新增语义化标签，有利于SEO，提高代码可读性
（2）新增多媒体标签，canvas等标签，为页面带来丰富的媒体元素等
（3）web socket 、H5的跨域策略，postMessage等可以实现跨域和双工通信和服务器推送等
（4）将被大量应用于移动应用程序和游戏
（5）多设备，跨平台，即时更新
（6）webStorage为本地存储提供了方便
缺点：
（1）安全：web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。
（2）完善性：许多特性各浏览器的支持程度也不一样。
（3）技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战
（4）性能：某些平台上的引擎问题导致HTML5性能低下。
（5）浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。

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

作用：位于文档最前面，处于标签之前，告知浏览器用什么文档类型解析这个文档
严格模式的排版和js运作模式是以浏览器支持的最高标准运行。
混杂模式中，页面以宽松的向后兼容的方式运行。模拟老式浏览器的行为以防止站点无法工作，在格式不正确的情况下会以混杂模式出现

1.4 HTML5有哪些新特性、移除了哪些元素？

Html5新增了 27 个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类
结构性元素：
section
header
footer
nav
article
aside
figure
code
dialog
行内语义性元素：
meter
time
progress
video
audio
details
menu
command

1.5 Label的作用是什么，是怎么用的？

label标签来定义表单控制间的关系 , 当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for=‘Name’>Number:

<label>Date:

注意:label的for属性值要与后面对应的input标签id属性值相同
<label for=‘Name’>Number:
<input type=“ text “ name=‘Name’ id=‘Name’/>

1.6 如何实现浏览器内多个标签页之间的通信?

WebSocket、 SharedWorker ；

也可以调用localstorage、 cookies 等本地存储方式；
localstorage另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信；

注意quirks： Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常；

1.7 简述一下src与href的区别？

src用于替换当前元素， href 用于在当前文档和引用资源之间确立联系。

src是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本， img 图片和 frame 等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css ，而不是使用 @import 方式。

1.8 表单的基本组成部分有哪些，表单的主要用途是什么？

组成：表单标签、表单域、表单按钮
a、表单标签：这里面包含了处理表单数据所用 CGI 程序的 URL, 以及数据提交到服务器的方法。

b、表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。

c、表单按钮：包括提交按钮，复位按钮和一般按钮；用于将数据传送到服务器上的 CGI 脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

主要用途：表单在网页中主要负责数据采集的功能，和向服务器传送数据。

1.9 post和get的区别

(1)、 get 是从服务器上获取数据， post 是向服务器传送数据。

(2)、 get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中，值和表单内各个字段一一对应，在 URL 中可以看到。 post 是通过 HTTP post 机制，将表单内各个字段与其内容放置在 HTML HEADER 内一起传送到 ACTION 属性所指的 URL 地址 , 用户看不到这个过程。

(3)、对于 get 方式，服务器端用 Request.QueryString 获取变量的值，对于 post 方式，服务器端用 Request.Form 获取提交的数据。

(4)、 get 传送的数据量较小，不能大于 2KB 。 post 传送的数据量较大，一般被默认为不受限制。但理论上， IIS4 中最大量为 80KB ， IIS5 中为 100KB 。

(5)、 get 安全性低， post 安全性较高

1.20 HTML5 应用程序缓存和浏览器缓存有什么区别？

应用程序缓存是h5 的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地网站的内容。例如 HTML 、 CSS 、图片以及 JavaScript 。这个特性可以提高网站性能，它的实现借助于 manifest 文件，如下：

<!doctype html>

……

</html>
与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。

2. CSS

2.1 解释css盒子模型

标准的盒模型：width = content
IE盒模型：width = content+padding-Left+padding-right+border-left + border-right

2.2 列出display的值并说明他们的作用？

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline：指定对象为内联元素。
block：指定对象为块元素。
list-item：指定对象为列表项目。
inline-block：指定对象为内联块元素。（CSS2）
table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column：指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）
box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

2.3 请你说说box-sizing属性的的用法？

设置或检索对象的盒模型组成模式

a、box-sizing:content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding，但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。
b、box-sizing:border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。

2.4 说说你对边距折叠的理解?

外边距折叠：相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin）
相邻：没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系
垂直方向外边距合并计算:
a、参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。
b、参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。
c、参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

2.5 谈谈你对BFC与IFC的理解？(是什么，如何产生，作用)

(1) 什么是BFC与IFC
a、BFC（Block Formatting Context）即“块级格式化上下文”， IFC（Inline Formatting Context）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。

b、BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。

c、在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是 block ，或者是 inline ，但不能同时属于这两者。并且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 Inline Formatting Context(行内格式化上下文) 里格式化。

(2) 如何产生BFC
当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：
a、float的值不为none
b、overflow的值不为visible
c、display的值为table-cell, table-caption, inline-block中的任何一个
d、position的值不为relative和static

CSS3触发BFC方式则可以简单描述为：在元素定位非static，relative的情况下触发，float也是一种定位方式。

(3) BFC的作用与特点
a、不和浮动元素重叠，清除外部浮动，阻止浮动元素覆盖

如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个重叠的现象。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态，当float不为none时，position为absolute、fixed时元素将脱离标准流。

2.6 一个图片url访问后直接下载怎样实现？

设置response header中的disposition-type为attachment

2.7 说一下HTML5 drag api

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发，。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发