前端面试题1

红太狼 2022-07-15 23:22 163阅读 0赞

第1题 块级元素和行内元素都有哪些  
    块级元素：div, p, form, ul, li, ol, dl, form, hr, table  
    行内元素：span, img, input, label, select, textarea, cite  
  
第2题 介绍所知道的CSS hack技巧  
    1、属性级Hack：当CSS写在同一行时，IE6无法识别!important。  
        "-"    减号是IE6专有的hack  
        "\*"    IE6/IE7生效  
        "\\9"   IE6/IE7/IE8/IE9/IE10生效  
        "\\0"   IE8/IE9/IE10生效  
        "\\9\\0" IE9/IE10生效  
    2、选择符级Hack：比如IE6能识别\*html .class\{\}，IE7能识别\*+html .class\{\}或者\*:first-child + html .class\{\}。  
    3、IE条件注释Hack：比如针对所有IE：<!–\[if IE\]><!–您的代码–><!\[endif\]–>，针对IE6及以下版本：<!–\[if lt IE 7\]><!–您的代码–><!\[endif\]–>，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都 会生效。  
  
第3题 介绍CSS盒模型  
    内容、padding、border、margin  
  
第4题 都知道哪些CSS浏览器兼容性问题  
    1、IE6的块元素，在左右浮动、设定marin时造成margin双边距bug。解决方法是在该元素中加入display:inline 或 display:block 明确其元素类型。  
    2、IE6/IE7下出现的各种错位，可以加入zoom:1来解决。  
    3、当元素使用float浮动后，元素与相邻的元素之间会产生3px的间隙。解决方法是在同一行的元素都加上float浮动。  
    4、IE6中奇数的宽高显示大小与偶数宽高显示大小存在一定的不同。其主要问题是出在奇数宽高上。要解决此类问题，只需要尽量将外部定位的div高宽写成偶数即可。  
    5、IE6中图片的下方会存在一定的缝隙。要解决此类问题，需要将img标签定义为display:block或为img对应的样式写入font-size:0。  
    6、如果一个元素中没有任何内容，当在样式中为这个元素设置了0-19px之间的高度时。此元素的高度始终为19px。加入HTML注释<!– >或者空白字符&nbsp;还可以在CSS中加入overflow:hidden。  
    7、IE6元素的z-index会继承父级元素的设置。  
  
  
第5题 position值都有哪些  
    static、absolute、relative、fixed四个  
  
第6题 常见的HTTP协议的状态消息都有哪些？  
    200  成功  
    400  客户端请求有语法错误  
    401  请求未经授权  
    404  请求资源不存在  
    500  服务器错误  
  
第7题 get和post的区别  
    1、Get限制Form表单的数据集的值必须为ASCII字符集，而Post支持整个ISO10646字符集。  
    2、Get数据是放在URL后面，是不安全的，而Post数据放在form数据体中，是安全的。  
    3、Get提交最大数据限于URL的长度，IE6/7大概是2K，其他浏览器大概是7K。而Post提交数据没有大小限制。  
  
第8题 cookie的属性有哪些  
    1、Expires – 过期时间。  
    2、Path – 路径。  
    3、Domain – 域。

4、Secure – 安全。

第9题 DOM操作 - 怎样添加、移除、移动、复制、创建和查找节点  
    1、创建新节点：createDocumentFragment(), createElement(), createTextNode()  
    2、添加、移除、替换、插入：appendChild(), removeChild(), replaceChild(), insertBefore()  
    3、查找：getElementsByTagName(), getElementsByName(), getElementById()  
  
第10题 浏览器内核有哪些  
    IE的Trident内核、谷歌的Webkit内核、火狐的Gecko内核  
  
第11题 正则表达式中贪婪模式与懒惰模式的区别  
    贪婪匹配:正则表达式趋向于最大长度匹配，取最多的匹配字符。  
        例如字符串“abcdefc”，正则“a\\w+c”，那么匹配结果就是“abcdefc”。  
    非贪婪匹配：匹配到结果就结束，取最少的匹配字符。  
        例如字符串“abcdefc”，正则“a\\w+?c”，那么匹配结果就是“abc”。  
    量词 ：\{m,n\}、\*、+、? 都是默认贪婪模式的，需要非贪婪模式就在要后面加个?。  
  
第12题 前端优化  
    1、减少HTTP请求  
    2、避免回流（添加或者删除可见的DOM元素，元素位置或尺寸的改变，浏览器尺寸改变resize事件发生）  
    3、减少对DOM的操作  
    4、使用JSON格式来进行数据交换  
    5、将CSS和JS放到外部文件中引用，CSS放头，JS放尾  
    6、压缩CSS和JS文件  
    7、压缩图片和使用图片Sprite技术  
    8、控制Cookie大小  
  
第13题 什么是重构  
    重构就是我们在保持功能不变的情况下，改善代码的质量，提高代码的复用程度。  
  
第14题 ajax如何解决跨域问题  
    URL后面加callback或者dataType用jsonp。  
  
第15题 如何做好SEO优化  
    1、简化代码结构，更利于搜索引擎分析抓取有用内容。  
    2、重要内容优先加载。  
    3、每个页面只能出现一次H1标签。  
    4、图片一定要添加alt属性，title属性可选。  
    5、页面内容尽量不要做成flash、图片、视频。  
    6、除首页外别的页面最好要加上结构清晰的导航。  
    7、网站结构呈扁平状树型，目录结构不宜过深。  
  
第16题 对WEB标准以及W3C的理解与认识  
    标签闭合、标签小写、不乱嵌套、使用外链css和js脚本、结构行为表现分离。  
  
第17题 XHTML和HTML有什么区别  
    HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的标记语言。  
    1.XHTML 元素必须被正确地嵌套。2.XHTML 元素必须被关闭。3.标签名必须用小写字母。4.空标签也必须被关闭。5.XHTML 文档必须拥有根元素。  
  
第18题 CSS引入的方式有哪些? link和@import的区别是?  
    内联 内嵌 外链 导入4种。  
    1.link无兼容性问题，@import在CSS2.1以下浏览器不支持。  
    2.link可以使用javascript改变样式，@import不行。  
    3.link在页面载入时同时加载，@import需要页面网页完全载入以后加载。  
  
第19题 CSS选择器有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？  
    1.CSS选择器有：  
        I.   元素选择器（例如body、div）  
        II.  ID选择器（例如\#id）  
        III. 类选择器（例如.class）  
        IV.  属性选择器（例如\#id\[title="hello"\]）  
        V.   后代选择器（又称为包含选择器，例如h1 strong）  
        VI.  子元素选择器（只能选择作为某元素子元素的元素，例如h1 > strong）  
        VII. 相邻兄弟选择器（如果需要选择紧接在一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。例如h1 + strong）  
        VIII.伪类选择器（例如:link，:visited，:hover，:first-child，:focus）  
        IX.  伪元素选择器（例如:first-letter，:first-line，::before，::after）（before和after伪元素双冒号，css3中的伪类是单冒号）  
    2.可以继承的有  
        I.  所有元素可继承：visibility和cursor  
        II. 内联元素可继承：line-height、color和font  
        III.终端块状元素可继承：text-indent和text-align  
        IV. 列表元素可继承：list-style  
    3.通过CSS的权重specificity来进行计算。简单来说就是选择器越精确优先级越高，还有行内样式优先级高于外部定义、继承得到的权重最低。  
    4.!important的优先级最高。  
  
第20题 清除浮动的几种方式，各自的优缺点  
    1.使用空标签清除浮动 clear:both（增加无意义的标签）。  
    2.给浮动元素的父元素也设浮动属性（需要给父元素设置宽度，浮动元素太多）。  
    3.给父元素加overflow:hidden（IE6需要给父元素设置宽度）。  
    4.使用:after伪类和内容声明在指定的现有内容的末尾添加新的内容（IE6下需要hack）。  
  
第21题 javascript的typeof返回哪些数据类型  
    undefined、boolean、string、number、object、function 这6个  
  
第22题 js数组常用函数  
    1.push() 尾部添加。  
    2.pop() 尾部删除。  
    3.unshift() 头部添加。  
    4.shift() 头部删除。  
    5.splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。（该方法会改变原始数组）  
    6.slice() 方法可从已有的数组中返回选定的元素。（该方法不不不会改变原始数组）  
    7.concat() 方法用于连接两个或多个数组。（该方法不不不会改变原始数组）  
    8.reverse() 方法用于颠倒数组中元素的顺序。（该方法会改变原始数组）  
    9.sort() 方法用于对数组的元素进行排序。（该方法会改变原始数组）  
    10.join() 方法用于把数组中的所有元素放入一个字符串。  
  
第23题 javascript的同源策略

只有域名、协议、端口都相同，JavaScript脚本才能读取和修改这个页面文档的属性。

第24题 CSS层叠是什么？  
    层叠指的是样式的权重，当产生冲突时以权重高的为准。  
    详见http://www.zhihu.com/question/20077745  
  
第25题 如何居中一个浮动元素  
    \#div\{  
        width:500px;  
        height:200px;  
        background:blue;  
        position:absolute;  
        left:-250px;  
        margin-left:50%;  
    \}  
  
==========HTML5==========  
一、新增标签  
1、<article> 标记定义一篇文章  
2、<header> 标记定义一个页面或一个区域的头部  
3、<nav> 标记定义导航链接  
4、<section> 标记定义一个区域  
5、<aside> 标记定义页面内容部分的侧边栏  
6、<hgroup> 标记定义文件中一个区块的相关信息  
7、<figure> 标记定义一组媒体内容以及它们的标题  
8、<figcaption> 标签定义 figure 元素的标题。  
9、<footer> 标记定义一个页面或一个区域的底部  
10、<dialog> 标记定义一个对话框(会话框)类似微信  
11、<video> 标记定义一个视频  
12、<audio> 标记定义音频内容  
13、<source> 标记定义媒体资源  
14、<canvas> 标记定义画布  
15、<menu> 右键菜单  
16、<meter> 范围条  
17、<progress> 进度条  
18、<datalist> 为input标记定义一个下拉列表，配合option  
  
二、新增表单类型  
1、email 邮箱地址  
2、url URL地址  
3、date，time，month，week，datetime，datetime-local 日期类型  
4、number 数字（max min step）  
5、range 范围滑块（max min step）  
6、search 搜索输入框  
7、tel 电话号码输入框  
8、color 颜色拾取器  
  
三、新增表单属性  
1、placeholder 输入框默认内容  
2、required 必填内容（必须加name）  
3、pattern 正则验证（必须加name）  
4、autofocus 自动聚焦  
5、autocomplete 自动完成（autocomplete="on/off"）  
6、novalidate 不验证此表单（form属性）  
7、multiple 多个值上传  
  
四、本地存储  
1、sessionStorage 会话级别的本地存储  
2、localStorage 永久本地存储l  
3、本地数据库  
  
五、CSS3 关系选择器  
1、E~F 兄弟选择符 选择E元素所有兄弟元素F  
  
六、CSS3 结构伪类选择器  
1、E:last-child 匹配父元素的最后一个子元素E  
2、E:only-child 匹配父元素仅有的一个子元素E  
3、E:nth-child(n) 匹配父元素的第n个子元素E（odd单数，even双数）  
4、E:nth-last-child(n) 匹配父元素的倒数第n个子元素E（odd单数，even双数）  
5、E:first-of-type 匹配同类型中的第一个同级兄弟元素E  
6、E:last-of-type 匹配同类型中的最后一个同级兄弟元素E  
7、E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E  
8、E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E（odd单数，even双数）  
9、E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E（odd单数，even双数）  
10、E:empty 匹配没有任何子元素（包括text节点）的元素E  
  
七、CSS3 UI元素状态伪类选择器  
1、E:checked 匹配选中状态的元素E  
2、E:enabled 匹配可用状态的元素E  
3、E:disabled 匹配不可用状态的元素E  
  
八、CSS3 属性选择器  
1、E\[att^="val"\] 选择具有att属性且属性值为以val开头的字符串的E元素  
2、E\[att$="val"\] 选择具有att属性且属性值为以val结尾的字符串的E元素  
3、E\[att\*="val"\] 选择具有att属性且属性值为包含val的字符串的E元素  
  
九、CSS3 新增属性  
1、text-shadow 文字阴影  
2、border-image 边框图片  
3、border-radius 圆角边框