前端基础知识汇总-优快云博客

本文链接：https://blog.youkuaiyun.com/Angie_Q/article/details/77606846

1、链接： https://www.nowcoder.com/questionTerminal/d9a712c52333452abaebeee6f0a56fd5
来源：牛客网

以下关于盒子模型描述正确的是：A

标准盒子模型中：盒子的总宽度 ＝ 左右margin + 左右border + 左右padding + width

IE盒子模型中：盒子总宽度 ＝ 左右margin + 左右border + width

标准盒子模型中：盒子的总宽度 ＝ 左右margin + 左右border + width

IE盒子模型中：盒子总宽度 ＝ width

   标准W3C模型：宽度 = margin*2 + border*2 + padding*2 + width 
 

   IE模型： 宽度 = margin*2 + width 
 

2、

head 标签中必不少的是（） C

```
<meta>
```
```
<link>
```
```
<title>
```
```
<script>
```

3、链接： https://www.nowcoder.com/questionTerminal/3ad01cd09fb64fe596c3a8051001a6ba
来源：牛客网

什么是 Web Worker ？ B

运行在后台的JavaScript程序，会影响页面的性能。

运行在后台的JavaScript程序，不会影响页面的性能。

```
都不正确
```

运行在后台的CSS程序，不会影响页面的性能。

链接：https://www.nowcoder.com/questionTerminal/3ad01cd09fb64fe596c3a8051001a6ba
来源：牛客网

WebWorker：

通过使用Web Worker，可以让我们在浏览器后台运行javascript，而不占用浏览器自身进程。

Web Worker是运行在后台的JavaScript，不会影响页面的性能。

当在HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本完成为止。

web worker是运行在后台的js，独立于其他脚本，不会影响页面的性能，可以继续做其他事情：点击、选取内容等，而此时 web worker 在后台运行。

4、 input属于窗体元素,层级显示比flash、其它元素都高。请判断这句话的正确与否。B

```
T
```
```
F
```

链接：https://www.nowcoder.com/questionTerminal/6d4da50b5c90416b8d8ab2286d7a739c
来源：牛客网

     在html中，帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。 
   

     表单元素包括：文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等； 
   

     非表单元素包括：连接（a），div,table,span等。 
   

     所有的html元素又可以根据其显示分成两类：有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。 
   

     有窗口元素包括：select元素，object元素，以及frames元素等等。 
   

     无窗口元素：大部分链接： 
    https://www.nowcoder.com/questionTerminal/8e0bd42cdecd493f92ec2ca21f903b4d
 来源：牛客网 
    


      向  
     .form-control 添加前缀或后缀元素的步骤如下： 
    
把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。 
接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。 
把该 <span> 放置在 <input> 元素的前面或者后面。
 html元素都是无窗口元素。 
   

5、

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

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

 
         如：  
     <div class="  
     container  
     "> 
    

 
            <div class="  
     row  
     "></div> 
    

 
            </div> 
    

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

 
         如：  
     <div class="container">

 
                 <div class="row"> 
    

 
                 <div class="col-md-  
     4  
     "></div> 
    

 
                 <div class="col-md-  
     8  
     "></div> 
    

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

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

      详：  
     http://www.imooc.com/code/2325 
    

      关于列的嵌套 
    

 
     Bootstrap  
     框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（  
     row  
     ）容器，然后在这个行容器中插入列。但在列容器中的行容器（  
     row  
     ），宽度为  
     100%  
     时，就是当前外部列的宽度。 
    

6、链接：https://www.nowcoder.com/questionTerminal/562c9ee3cfcd4c9b9eb9d1dbc63f38ad
来源：牛客网

如何获取下面表单 select

<form name="a">
<select name="a" size="1" id=”obj”>
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>
</form> 域的选择部分的文本？() A

```
obj.options[obj.selectedIndex].text
```
```
obj.options[obj.selectedIndex].value
```
```
obj. value
```
```
obj.text
```

链接： https://www.nowcoder.com/questionTerminal/562c9ee3cfcd4c9b9eb9d1dbc63f38ad
来源：牛客网

        A， 
      

 
       <form name="a">
 <select name="a" size="1" id=”obj”>
 <option value="a">1</option>
 <option value="b">2</option>
 <option value="c">3</option>
 </select>
 </form> 
      

 
       当前默认选中的是第一个， 
      

 
       console.log( 
       obj.options[obj.selectedIndex].text 
        ) 
       输出的是1, 
      

 
       console.log( 
       obj.options[obj.selectedIndex].value 
        ) 
       输出的是a 
      

7、下面有关CSS中link和@import的区别，描述错误的是？D

link属于XHTML标签，而@import完全是CSS提供的一种方式

当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载

link在支持CSS的浏览器上都支持而@import只在5.0以上的版本有效

当使用javascript控制dom去改变样式的时候，只能使用@import方式

链接： https://www.nowcoder.com/questionTerminal/a00808e5e6374d15a4137d17f73e01ba
来源：牛客网

1，@import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。
2，@import 是css2里面的，所以古老的ie5不支持。
3，当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

4，link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css

8、

对于li这个节点，下列哪个CSS选择器的优先级最高？D

```
li#app
```
```
li.cnt
```
```
li.cnt:hover
```
```
#app.cnt
```

链接：https://www.nowcoder.com/questionTerminal/30b5db91357140fba4a68fefdd255d52
来源：牛客网

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如、>、+,权值为0000。

9、下列辅助类的说法错误的是？C

<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><br>可以用来表示一个关闭按钮

<span class="caret"></span>可以用来表示一个三角符号

```
navbar可使用pull-left类来定义
```
```
navbar可使用navbar-left类来定义
```

10、在CSS3中，以下哪个IE浏览器（Trident内核）的私有属性前缀？（）D

```
–Webkit
```
```
–trident
```
```
–ie
```
```
–ms
```

主流浏览器内核私有属性css前缀：mozilla内核 (firefox,flock等)     -moz
                                                      webkit内核(safari,chrome等)   -webkit
                                                      opera内核(opera浏览器)         -o
                                                      trident内核(ie浏览器)               -ms

11、<img>标签没有闭合，应该是<img src="" />

12、下列说法正确的是 AC

html5标准的链接默认都是带下划线的

```
bootstrap链接默认都是带下划线
```

bootstrap链接只有在hover状态下才带下划线

```
bootstrap链接从不会带下划线
```

13、

下列哪些是块级元素（）BCDEF

```
input
```
```
ul
```
```
hr
```
```
li
```
```
div
```
```
form
```

14、iframe的使用场景有？ABCD

与第三方域名下的页面共享cookie

```
上传图片，避免当前页刷新
```
```
左边固定右边自适应的布局
```
```
资源加载
```

链接： https://www.nowcoder.com/questionTerminal/a7393802e13045d0adff00cf2c728cf5
来源：牛客网

iframe可用在以下几个场景中：

1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。
2：ajax上传文件。
3：加载别的网站内容，例如google广告，网站流量分析。

4：在上传图片时，不用flash实现无刷新。

5：跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

15、链接： https://www.nowcoder.com/questionTerminal/8e0bd42cdecd493f92ec2ca21f903b4d
来源：牛客网

在bootstrap中为了在input两侧添加额外元素，以下说法正确的是ABD

```
使用input-group来封装控件
```

使用input-group-addon来添加前置元素

使用input-group-tailon来添加后置元素

```
必须为input添加form-control类
```

链接：https://www.nowcoder.com/questionTerminal/8e0bd42cdecd493f92ec2ca21f903b4d
来源：牛客网

向 .form-control 添加前缀或后缀元素的步骤如下：

把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
把该 <span> 放置在 <input> 元素的前面或者后面。

笔试笔记（八）