7) 下面有关 html5 标签说法错误的有? a. 标签定义声音,比如音乐或其他音频流 b. 比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦 或是来自其他外部源内容 c. 标签定义菜单列表。当希望列出表单控件时使用该标签 d. 标签定义命令按钮,比如单选按钮、复选框或按钮 8) 下述有关 css 属性 position 的属性值的描述,说法错误的是? a. b. c. d. static:没有定位,元素出现在正常的流中 fixed:生成绝对定位的元素,相对于父元素进行定位 relative:生成相对定位的元素,相对于元素本身正常位置进行定位。 absolute:生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位。 9) 下面符合一个有效的 javascript 变量定义规则的是? a. b. c. d. _$te$t2 with a bc 2a 10) 下面有关 JavaScript 中 call 和 apply 的描述,错误的是? a. b. c. d. call 与 aplly 都属于 Function.prototype 的一个方法,所以每个 function 实例都有 call、apply 属性 两者传递的参数不同,call 函数第一个参数都是要传入给当前对象的对象,apply 不是 apply 传入的是一个参数数组,也就是将多个参数组合成为一个数组传入 call 传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对 象。 11) 什么会被打印在控制台上? b 是局部变量还是全局变量 (function() { var a = b = 5; })(); console.log(b); 12) 执行这段代码,输出什么结果。 function test() { console.log(a); console.log(foo()); var a = 1; function foo() { return 2; } } test(); 13) 执行这段代码,输出什么结果。 var fullname = 'John Doe'; var obj = { fullname: 'Colin Ihrig',
prop: { fullname: 'Aurelio De Rosa', getFullname: function() { return this.fullname; } } }; console.log(obj.prop.getFullname()); var test = obj.prop.getFullname; console.log(test()); 14) 下面这个 JS 程序的输出是什么: function Foo() { var i = 0; return function() { console.log(i++); } } var f1 = Foo(), f2 = Foo(); f1(); f1(); f2(); 15) 下面这个 JS 程序的输出是什么: 16) Doctype 作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 17) CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3 新增伪类有那些? 18) 谈谈 This 对象的理解。 19)请用 js 实现全选和取消全选的功能,只需要写出 js 代码(可以使用 jquery 框架) 全选
答案 1,C。内联元素加上 display:block;后被块级化。块级元素一般是其他元素的容器, 可容纳内联元素和其他块状元素, 块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用。因此,可以定义其宽度和高度。 ,2,TRUE。参数是 scroll 时候,必会出现滚动条。 参数是 auto 时候,子元素内容大于父元素时出现滚动条。 参数是 visible 时候,溢出的内容出现在父元素之外。 参数是 hidden 时候,溢出隐藏。, 3,选 B。在 html 中通过
中写入 target 属性,则浏览器会根据 target 的属性值去打开与其命名或名称相符的 框架 或 者窗口. 在 target 中还存在四个保留的属性值如下, 属性值 值 描述 _blank 在新窗口中打开被链接文档。 _self 默认。在相同的框架中打开被链接文档。 _parent 在父框架集中打开被链接文档。 _top 在整个窗口中打开被链接文档。 framename 在指定的框架中打开被链接文档。 4,选 b。onfocus 获得焦点 onblur 失去焦点5,A 这两个属性是有些重复了。在不同浏览器里面表现有些不同。在 alt 和 title 同时设置的时候,alt 作为图片的替 代文字出现,title 是图片的解释文字。 6,A #0000 是不正确的写法,至少要为六位,应该是#FF0000 A 写法是正确的,有两种写法: document.getElementById("input").style.backgroundColor = "red"; inputElement.style.backgroundColor = "#FF0000"; 7, B 这里考察 HTML 标签的使用: 标签定义声音,比如音乐或其他音频流。 A 正确。 标签定义图形,比如图表和其他图像。 标签只是图形容器,您必须使用脚本来绘制图形。 B 错误, 标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来 自论坛的文本。亦或是来自其他外部源内容。 标签定义命令的列表或菜单。 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。 C 正确 command 元素表示用户能够调用的命令。 标签可以定义命令按钮,比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。 D 正确。 8,B static 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元 素中。 relative 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。 absolute 元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原 先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流 中生成何种类型的框。 fixed 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。 9,A 正确; B 是关键字; C 有空格; D 开头为数字; 第一个字符必须是一个 ASCII 字母(大小写均可),或一个下划线(_)。注意第一个字符不能是数字。 后续的字符必须是字母、数字或下划线。 变量名称一定不能是 保留字。 10,B; call()方法和 apply()方法的作用相同,他们的区别在于接收参数的方式不同。对于 call(),第一个参数是 this 值没有变化,变化的是其余参数都直接传递给函数。(在使用 call()方法时,传递给函数的参数必须逐个列举出来。 使用 apply()时,传递给函数的是参数数组)如下代码做出解释: function add(c, d){ return this.a + this.b + c + d; }
var o = {a:1, b:3}; add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 十一,5 b 是全局变量。 十二,undefined 和 2。 十三,答案是 Aurelio De Rosa 和 John Doe 十四, 0 1 0 十五,2 1 十六 (1)、 声明位于文档中的最前面,处于 标签之前。告知浏览器的解析器,用什么文档类型 规范来 解析这个文档。 (2)、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 (3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 (4)、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。 十七 * 1.id 选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p) 4.相邻选择器(h1 + p) 5.子选择器(ul < li) 6.后代选择器(li a) 7.通配符选择器( * ) 8.属性选择器(a[rel = "external"]) 9.伪类选择器(a: hover, li: nth - child) * 可继承: font-size font-family color, UL LI DL DD DT;
* 不可继承 :border padding margin width height ; * 优先级就近原则,样式定义最近者为准; * 载入样式以最后载入的定位为准; 优先级为: !important > id > class > tag important 比 内联优先级高 CSS3 新增伪类举例: p:first-of-type 选择属于其父元素的首个
元素的每个
元素。 p:last-of-type p:only-of-type p:only-child p:nth-child(2) 选择属于其父元素的最后
元素的每个
元素。 选择属于其父元素唯一的
元素的每个
元素。 选择属于其父元素的唯一子元素的每个
元素。 选择属于其父元素的第二个子元素的每个
元素。 :enabled、:disabled 控制表单控件的禁用状态。 :checked,单选框或复选框被选中。 十八 this 是 js 的一个关键字,随着函数使用场合不同,this 的值会发生变化。 但是总有一个原则,那就是 this 指的是调用函数的那个对象。 this 一般情况下:是全局对象 Global。 作为方法调用,那么 this 就是指这个对象 十九 $(function(){ $("#checkall").click(function(){ if($(this).attr("checked")){ $("div.list input").attr("checked",true); }else{ $("div.list input").attr("checked",false); } }); }); //全选 //全不选
二十, 考虑到你工作的稳定性。几种情况; 1、没女朋友,如果年纪不较大了,家里可能会有安排,如果是外地人,不太稳定; 2、有女朋友,在外地。异地恋很折磨人的,要么一方将就一方,要么分手,这对工作的稳定性有影响; 3、有女朋友且在本地,这种是面试官最喜欢见到的情况。 4、考察的反应能力、是否诚实 作业:了解自己感兴趣的公司 https://www.360docs.net/doc/995891085.html,/interviewl/search/?stype=&q=%E5%89%8D%E7%AB%AF https://www.360docs.net/doc/995891085.html,/interview/2117/?ka=select-hotjob-16
前端面试题大全(html篇) HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言。最主要的不同: (1)XHTML元素必须被正确地嵌套 (2)XHTML元素必须被关闭 (3)XHTML标签名必须用小写字母 (4)XHTML文档必须拥有根元素 2.什么是语义化的HTML html5的语义化是指用正确的标签包含正确的容,比如nav标签就应该包含导航条容 (1)直观的认识标签对于搜索引擎的抓取有好处,用正确的标签做正确的事情! (2)html语义化就是让页面的容结构化,便于对浏览器、搜索引擎解析 (3)在没有CCS样式情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下和各个关键字的权重,利于SEO。 (4)使阅读源代码的人更容易将分块,便于阅读维护理解。 写一段语义的html代码(HTML5中新增加的很多标签如:、、和等。就是基于语义化设计原则) < div id="header"> < h1>标题< /h1> < h2>专注Web前端技术< /h2> < /div> 语义HTML 具有以下特性: 文字包裹在元素中,用以反映容。例如: 段落包含在 元素中。 顺序表包含在元素中。 从其他来源引用的大型文字块包含在元素中。 HTML 元素不能用作语义用途以外的其他目的。例如: 包含标题,但并非用于放大文本。 包含大段引述,但并非用于文本缩进。 空白段落元素( ) 并非用于跳行。 文本并不直接包含任何样式信息。例如: 不使用 或 等格式标记。 类或ID 中不引用颜色或位置。 3.常见的浏览器核有哪些 Trident核:IE, Max Thon, TT, The World,360,搜狗浏览器等。[又称MSHTML] Gecko核:Netscape6及以上版本,FF, Mozilla Suite / Sea Monkey等 Presto核:Opera7及以上。[Opera核原为:Presto,现为:Blink;] Webkit核:Safari, Chrome等。[ Chrome的:Blink(WebKit的分支)] 有哪些新特性、移除了那些元素如何区分HTML 和HTML5 HTML5 现在已经不是SGML 的子集。 主要是关于图像,位置,存储,多任务等功能的增加:
前端最新面试题 这篇文章将分为三部分css和html为一部分,js、jQuery为一部分,vue与性能优化为一部分,今天会先整理css与html 1,弹性盒布局 父级设置display:flex将对象作为弹性伸缩盒显示 采用Flex布局的元素,被称为Flex容器(flex container),简称“容器”。其所有子元素自动成为容器成员,成为Flex项目(Flex item),简称“项目”。 容器默认生成两根主轴,水平方向主轴(main axis)和垂直方向交叉轴(cross axis),默认项目按主轴排列。 设置在容器上的属性有6种 分别为 flex-direction:决定主轴的方向(即项目的排列方向) flex-wrap:定义换行情况 flex-flow:flex-direction和flex-wrap的简写,默认row nowrap justify-content:定义项目在主轴上的对齐方式。 align-item:定义在交叉轴上的对齐方式 align-content:定义多根轴线的对齐方式 详细属性值请参阅文档 2,html5新标签与新功能 新标签: header,footer,article,aside,nav,section,time,progress, ruby,mark.... 新功能: vidio,audio,canvas,拖放,离线应用,web存储(sessionStorage,localStorage,sessionStorage 方法针对一个session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除,localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用),历史状态管理,地理位置,新增input类型(color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week),新增表单元素,WebSocket 3、css3的新特性 属性选择器:[attribute],[attribute=value],[attribute~=value]... 伪类选择器::first-letter ,:first-line,:first-child.... 伪元素选择器::before,:after border:border-image,border-radius,box-shadow 背景:background-size,background-origin,background-clip,background-image 渐变:线性渐变(Linear Gradients)径向渐变(Radial Gradients)
前端基础面试题汇总 1.行内元素和块级元素有哪些?有什么区别? 块级:
行内:a、br、i、img、input、strong 区别:块级元素的W、H、margin和padding都可以控制 行内元素的W、H,以及margin和padding的top和bottom不能控制 2.介绍所知道的CSS hack技巧 由于不同的浏览器对CSS的支持和解析结果不同,所以可以使用CSS hack来对不同的浏览器写不同的CSS样式,常见的有(_,*,!important) 3.CSS定位方式有哪些?position的属性值之间的区别是什么 static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。 relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过top,bottom,left,right 定位,并且可以通过z-index进行层次分级。 absolute(绝对定位) 脱离文档流,通过top,bottom,left,right定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。 fixed(固定定位)这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index 进行层次分级。 4.类的定义方法(prototype)(继承) var Obj3 = new Function(); Obj3.prototype = { v1 : "", get_v1 : function() { return this.v1; }, set_v1 : function(v) { this.v1 = v; } }; 5.DOM 操作 1.向当前对象追加节点 var para=document.createElement("p"); var node=document.createTextNode("这是新段落。"); para.appendChild(node); 2.移除当前节点的子节点,并返回节点 var childnode=document.getElementById("child"); var removednode=document.getElementById("father").removeChild(childnode) 3.复制并返回当前节点(复制节点本身,不复制子节点) varul = document.getElementByIdx_xx_x("myList"); //获得ul vardeepList = ul.cloneNode(true); //深复制 varshallowList = ul.cloneNode(false); //浅复制最新web前端面试题(及答案) 1、常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera。 (Q2) 内核:Trident,Gecko,Presto,Webkit。 2、说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)答: (Q1) 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。 块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。 (Q2) 兼容性:display:inline-block;*display:inline;*zoom:1; 3、清除浮动有哪些方式?比较好的方式是哪一种? 答: (Q1) (1)父级div定义height。 (2)结尾处加空div标签clear:both。 (3)父级div定义伪类:after和zoom。 (4)父级div定义overflow:hidden。 (5)父级div定义overflow:auto。 (6)父级div也浮动,需要定义宽度。 (7)父级div定义display:table。 (8)结尾处加br标签clear:both。 (Q2) 比较好的是第3种方式,好多网站都这么用。 4、box-sizing常用的属性有哪些?分别有什么作用? 答: (Q1)box-sizing: content-box|border-box|inherit; (Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度 之外绘制元素的内边距和边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内 进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的 宽度和高度。 5、Doctype作用?标准模式与兼容模式各有什么区别? 答: (Q1) 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不 存在或格式不正确会导致文档以兼容模式呈现。 (Q2) 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防 止站点无法工作。 6、HTML5 为什么只需要写?
前端开发的面试题 前端开发的面试题 web前端面试题 以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识。 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面 内容、提供打印版本而不需要复制内容、提高网站易用性; 2.xhtml和html有什么区别 HTML是一种基本的WEB语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有根元素。 3.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 用于声明文档使用那种规范(html/Xhtml)一般为严格过度基于框架的html文档 加入XMl声明可触发,解析方式更改为IE5.5 拥有IE5.5的bug 4.行内元素有哪些?块级元素有哪些?CSS的盒模型? 块级元素:div p h1 h2 h3 h4 form ul 行内元素: a b br i span input select Css盒模型:内容,border ,margin,padding 5.CSS引入的方式有哪些? link和@import的区别是?
内联内嵌外链导入 区别:同时加载 前者无兼容性,后者CSS2.1以下浏览器不支持 Link 支持使用script改变样式,后者不可 6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高? 标签选择符类选择符 id选择符 继承不如指定 Id>class>标签选择 后者优先级高 7.前端页面有哪三层构成,分别是什么?作用是什么? 结构层 Html 表示层 CSS 行为层 js 8.css的基本语句构成是? 选择器{属性1:值1;属性2:值2;……} 9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto) 10.写出几种IE6 BUG的解决方法 1.双边距BUG float引起的使用display 2.3像素问题使用float引起的使用dislpay:inline -3px 3.超链接hover 点击后失效使用正确的书写顺序 link visited hover active 4.Ie z-index问题给父级添加position:relative 5.Png 透明使用js代码改 6.Min-height 最小高度 !Important 解决’ 7.select 在ie6下遮盖使用iframe嵌套
2018前端面试题及答案汇总HTML 2018前端面试题及答案汇总 1、什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。 2、行内元素有哪些?块级元素有哪些?空(void)元素有那些? 行内元素:a、b、span、img、input、strong、select、label、em、button、textar ea 块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote 空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img 3、CSS实现垂直水平居中 一道经典的问题,实现方法有很多种,以下是其中一种实现: HTML结构:
CSS: .wrapper{position:relative;} .content{ background-color:#6699FF; width:200px;height:200px; position: absolute; //父元素需要相对定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的height,width margin-left: -100px; } 4、简述一下src与href的区别 href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。 src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src 资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将j s脚本放在底部而不是头部。 5、什么是CSS Hack? 一般来说是针对不同的浏览器写不同的CSS,就是CSS Hack。 IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack(详细参考C SS文档:css文档)。例如: // 1、条件Hack