Web前端面试题总结（day2）

最新推荐文章于 2022-03-05 15:26:47 发布

鄧覴覴

最新推荐文章于 2022-03-05 15:26:47 发布

阅读量534

点赞数

本文链接：https://blog.csdn.net/weixin_44007039/article/details/85254406

版权

1.head标签可以包含，title、meta、link、script等

2.下列哪一个是页面载入是会触发Dom事件？（C）

A.onchange

B.onaclive

C.onload

D.onresize

A是指表单内容改变

C,load完毕后，会触发DOM的加载

D是BOM的时间

onLoad事件是页面第一次打开的时候触发的！表示页面加载完执行的事件！
onActive事件是页面已经打开了！第二次或以两次以上页面激活显示的时候触发！
onLoad 和 onActive 是互斥的！每次只能触发其中的一个事件！

3.HTML的注释方法

CSS的注释方法 /注释内容/

JavaScript的注释方法 /* 多行注释方式 */ //单行注释方式

4.UTF-8（8-bit Unicode Transformation Format，万国码）。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。

GBK是汉字编码，是双字节码，可表示繁体字和简体字。

ISO8859-2 字符集，也称为 Latin-2，收集了东欧字符。

5.Blob对象中的type属性表示文件的是（C）

A.文件大小

B.文件名

C.MIME类型

D.图片格式

一个Blob对象就是一个包含有只读原始数据的类文件对象.实际上 file 对象只是 blob 对象的一个更具体的版本。
其type属性是表示文件的MIME（多用途互联网邮件扩展类型），也就是设定某种扩展名的文件用一种应用程序来打开的方式类型。

File接口基于Blob，继承了Blob的功能,并且扩展支持了用户计算机上的本地文件。
var blob = new Blob(dataArr:Array<any>, opt:{type:string});

dataArray：数组，包含了要添加到Blob对象中的数据，数据可以是任意多个ArrayBuffer，ArrayBufferView， Blob，或者 DOMString对象。
opt：对象，用于设置Blob对象的属性（如：MIME类型）

6.href属性值是URL，而URL里包含协议，但不一定是http协议。如果没协议就会解析为相对路径。在浏览器地址栏中不输入协议名也行是因为浏览器发现这个相对路径没东西之后自动帮你加的协议

7.把鼠标移动到按钮并点击时，会产生一串什么样的事件？

hover focus active

悬停聚焦响应

CSS伪类用于向某些选择器添加特殊的效果。
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。

8. width - viewport的宽度 height - viewport的高度
    initial-scale - 初始的缩放比例
    minimum-scale - 允许用户缩放到的最小比例
    maximum-scale - 允许用户缩放到的最大比例
    user-scalable - 用户是否可以手动缩放

9.基于以下 HTML 结构，判断浏览器会发送多少个图片请求？（3次）

经过测试的结果是:

1. 只要是img src引用的都会请求；

2. background: url()所属样式如果挂靠在某个元素上，就一定会请求；单独写了这么一个样式并不请求。

所以这道题目中，只有#bg不请求。

10.在HTML中，<a href="mailto:ming.zhou@nowcoder.com">发送邮件</a> 可以在网页上通过链接直接打开邮件客户端发送邮件

11.关于嵌套列的用法，正确的是（D）

A. <div class="row"><br> <div class="col-sm-1">

B. <div class="col-sm-1"><br><div class="row"><br>

C. <div class="row"><br> <div class="container"><br> <div class="col-xs-1"><br>

D. <div class="container"><br> <div class="row"><br> <div class="cox-xs-1">

Bootstrap 框架的网格系统工作原理如下：

1 、数据行 (.row) 必须包含在容器（ .container ）中，以便为其赋予合适的对齐方式和内距 (padding) 。

如： <div class=" container ">

</div>

2 、在行 (.row) 中可以添加列 (.column) ，但列数之和不能超过平分的总列数，比如 12 。

如： <div class="container">

3 、具体内容应当放置在列容器（ column ）之内，而且只有列（ column ）才可以作为行容器 (.row) 的直接子元素

4 、通过设置内距（ padding ）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（ margin ）

来抵消内距 (padding) 的影响

12.外边距、边框、内边距、内容

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
Margin

margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的
Padding（填充）

当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充

13.参考：CSS3: 移动端开发中 max-device-width 与 max-width 的区别

max-width 指的是显示区域的宽度，比如浏览器的显示区域宽度

max-device-width 指的是设备整个渲染（显示）区域的宽度，比如设备的实际屏幕大小，也就是设备分辨率

max-height 与 max-device-height 也是同理。更进一步说，max-width在窗口大小改变或横竖屏转换时会发生变化

max-device-width只与设备相关，横竖屏转换或改变尺寸，缩放都不会发生变化（部分android的宽高会互换而IOS不会）

device- width指的是设备本身的宽度，也就是屏幕的分辨率，比如说你手机的分辨率是1440*900，这表示你的屏幕宽是1440px，所以device-width是1440px。大部分的手机宽度不到480px，（当然今后的趋势是越来越大)。iphone 4的device-width就只有320px，即便对外宣称有640*960.这要归功于iphone的retina显示方式，也就是用两个像素来表示屏幕上一个CSS像素，IPAD3也是这样的。官方说IPAD3跟前几代一样采用的device-width是768px，它的实际分辨率达到了1536*2048，就是这个原因。

media queries 的定义方式适配 iphone6s 的是

．@media(min-device-width:375px) and(max-device-width:667px) and(-webkit-min-device-pixel-ratio:2){}

iphone6s plus是414×736；iphone6s是375×667；

14.v3 沒有分 fluid 和 non-fluid ，所以移除了 .container-fluid 和 .row-fluid 兩個大框架容器，所有都是 fluid。

15.要运用css3动画，你需要运用什么规则？

16.DHTML 的动态样式的作用是

DHTML实现了网页从Web服务器下载后无需再经过服务的处理，而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如，当鼠标指针移到文章段落中时，段落能够变成蓝色，或者当鼠标指针移到一个超级链接上时，会自动生成一个下拉式子链接目录等。

包括：

①动态内容(Dynamic Content)：动态地更新网页内容，可“动态”地插入、修改或删除网页的元件，如文字、图像、标记等。

②动态排版样式(Dynamic Style Sheets)：W3C的CSS样式表提供了设定HTML标记的字体大小、字形、样式、粗细、文字颜色、行高度、加底线或加中间横线、缩排、与边缘距离、靠左右或置中、背景图片或颜色等排版功能，而“动态排版样式”即可以“动态”地改变排版样式。

17.关于栅格系统

18.bootstrap辅助类

.text-muted:文字的颜色换成灰色

.text-primary:文字的颜色变成蓝色

.text-success:文字的颜色变成绿色

.text-info:文字的颜色变成暗蓝色

.text-warning:文字颜色变成暗黄色

.text-danger：文字的颜色变成红色

19.<pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)

20. 21.HTML5新增的表单元素

datalist元素规定输入域的选项列表，通过option创建！

keygen元素的作用是提供一种验证用户的可靠方法，密钥对生成器，私钥存于客户端，公钥发到服务器，用于之后验证客户端证书

output元素用于不同类型的输出！

22.关于canvas不正确的是？（A B）

A. canvas是HTML5的一部分，允许脚本动态渲染位图像

B. canvas是作为Flash的替代技术出现

C. canvas拥有多种绘制路径、矩形、圆形、字符及添加图像的方法

D. Internet Explorer自Internet Explorer9起已经可以支持canvas

鄧覴覴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端面试题总结（day2）

1.head标签可以包含，title、meta、link、script等2.下列哪一个是页面载入是会触发Dom事件？（C） A.onchange B.onaclive C.onload D.onresize A是指表单内容改变 C,load完毕后，会触发DOM的加载 D是BOM的时间 onLoad事件是页面第一次打开的时候触发的！表示页面加载...
复制链接

扫一扫