前端基础面试题目(1)

一、谈谈你对Web标准的理解。

WEB标准不是某一个标准,而是一系列标准的集合。

网页主要由三部分组成:

1. 结构标准(Structure)用于对网页元素进行整理和分类 主要是html xhtml xml

2. 表现(Presentation)表现设置网页元素的版式、颜色、样式 主要CSS

3. 行为(Behavior): 指网页模型的定义及交互的缩写 主要是javascript

 

这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,

比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。

 

 

二、锚点的作用是什么?如何创建锚点?

含义:文档中某行的一个记号,类似于书签。

作用:用于链接到文档中的某个位置。

当定义了锚点后,我们可以创建直接跳至该锚点(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

在使用<a> 元素创建锚点时,需要使用name 属性为其命名,代码如下所示:

<a name=”anchorname1”>锚点一</a>

然后就可以创建链接,直接跳转到锚点,代码如下所示:

<a href=”#anchorname1”>回到锚点一</a>

 

  • 页面导入样式时,使用link和@import有什么区别?

    三方面区别:1.本质语法区别2.加载顺序区别3.兼容性区别

  1. 本质语法区别 link属于HTML标签,除了加载CSS外,还能用于定义type rel连接属性等作用;

@import是CSS提供的语法规则,只有导入样式表的作用;

2.加载顺序区别 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完后再加载;

3.兼容性区别 @import是CSS2.1 提出的,只在IE5以上才能被识别,而link是HTML标签,不存在兼容性问题;.

 

四、css的四种链接方式?

行内    <p style=””></p>

内嵌    <head><style></style></heads>

外部样式  <link rel="stylesheet" href="css文件路径">

外部导入  

<style type="text/css">

           @import url(css文件路径);

    </style>

 

 

 

五、你简述盒模型

CSS盒模型本质上是一个盒子封装周围的HTML元素

它包括:

外边距margin,

边框border,

填充padding,

实际内容content。(从外向内顺序)

盒模型允许我们在其它元素周围元素边框之间的空间放置元素

 

 

六、你怎么清楚浮动?

 

#### 1、在浮动子元素后面添加一个属性为 clear:both 的空 div 元素

 

```html

<div class="container">

    <div class="left"></div>

    <div class="right"></div>

    <div style="clear:both"></div>

</div>

```

 

####   2、给父元素添加 overflow:hidden 或者 auto 样式,触发BFC (块级格式化上下文)。

 

```html

<div class="container">

    <div class="left"></div>

    <div class="right"></div>

</div>

 

.container{

    width: 300px;

    background-color: #aaa;

    overflow:hidden;

    zoom:1;   /*IE6*/

}

```

 

####   3、使用伪元素,也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的。

 

```html

<div class="container clearfix">

    <div class="left"></div>

    <div class="right"></div>

</div>

 

.clearfix{

    zoom: 1; /*IE6*/

}

.clearfix:after{

    clear: both;

    display: block;

    content: "";

height: 0;

visibility: hidden;

   

   }

 

七、CSS盒模型原理中W3C 盒模型与IE盒模型的区别?

 

```

1、W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。

 

2、IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading

 

 

八、CSS display:none和visibility:hidden的区别

visibility:hidden隐藏元素,但隐藏的元素仍需占用与未隐藏之前一样的空间,影响布局。

display:none   隐藏元素视为不存在,且隐藏的元素不占用任何空间,不影响布局。

 

 

九、谈谈对html5的了解?

1.良好的移动性,以移动设备为主。

2.响应式设计,以适应自动变化的屏幕尺寸

3.支持离线缓存技术,webStorage本地缓存

4. 新增新标签元素    canvas,video,audio等。

新增特殊内容元素: header,nav,main article aside,footer ,section等,

新增表单控件: date,time,、month、week。email,url,search 、number。Calendar (日历) ,range (进度条)

 

5.地理定位…

6.新增webSocket/webWork技术

```

 

十、 内联元素可以实现浮动吗

 

```

CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。因此,对于内联元素,如果设置为浮动,会产生和块级框相同的效果。

 

十一、省略号/如何处理文本溢出?

white-spacing:nowrap;    (不换行显示)

overflow:hidden;           (超出内容隐藏)

text-overflow:ellipsis;      (显示省略号)

 

 

十二、BFC概念、作用、环境的产生?

 概念:Block Formating Context 块级格式化上下文

 作用:形成一个完整的独立容器,容器中的子元素不会影响外面的元素。

 环境产生:根元素html、浮动值不为none、定位值不为static relative、溢出处理不为visible

Display值为inline-block、table-cell、table-caption 、flex、inline-flex

 

十三、label 的作用和核心?(笔记)

Label input元素标记点击label内文本触发控件浏览器就会自动将焦点转移到和标签相关的的表单控件上

作用:增加用户的体验  

核心:Label的for属性值和input的id值一致

 

十四Label的作用是什么?是怎么用的?

 

<label for="Name">Number:</label>

<input type=“text“name="Name" id="Name"/>

 

<label>Date:<input type="text" name="B"/></label>

 

 

15、元素的分类?

1)行内元素:在一行显示,不可以直接设置宽度和高度(宽度和高度被内容撑开),盒模型margin padding支持水平方向。常见:a . b .i .u em span strong font

2)块级元素:独占一行,可以直接设置宽高度,默认宽度100% 盒模型完全支持。常见:p div h1-h6 ul ol dl dt dd li table tr hr form

3) 行内块元素:在一行显示,可以设置宽高度。盒模型完全支持。常见:img td th textarea input select

 

16浏览器及内核

Chrome: webkit (以前用)/Blink(现在用)(Blink 是在webkit 的基础上开发延伸的)

苹果浏览器Safari:  webkit

(microsoft edge)IE/:  trident

火狐      Firefox: gecko

Opera: Presto  (以前用) / Blink (现在用)

 

17 、li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

行框的排列会受到中间空白(回车\空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小(font-size)设为  0,就没有空格了。

上一篇:overflow:hidden作用


下一篇:js 实现浏览器下标签页间切换触发的事件