Web前端面试宝典(最新)

 

第一部分:HTML问答题 1.简述一下你对HTML语义化的理解?用正确的标签做正确的事情。html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。2.Label的作用是什么?是怎么用的?label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。3.iframe有那些缺点?*iframe会阻塞主页面的Onload事件;*搜索引擎的检索程序无法解读这种页面,不利于SEO;*iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript。动态给iframe添加src属性值,这样可以绕开以上两个问题。4.HTML与XHTML —— 二者有什么区别,你觉得应该使用哪一个并说出理由。1.XHTML 元素必须被正确地嵌套。错误:

this is example.

正确:

this is example.

2.XHTML 元素必须被关闭。错误:

this is example.正确:

this is example.

3.标签名必须用小写字母。错误:

this is example.

正确:

this is example.

3.1空标签也必须被关闭错误:
正确:
4.XHTML 文档必须拥有根元素。所有的 XHTML 元素必须被嵌套于 根元素中。 5.常见的浏览器内核有哪些?Trident内核:IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等Presto内核:Opera7及以上。      [Opera内核原为:Presto,现为:Blink;]Webkit内核:Safari,Chrome等。   [ Chrome的:Blink(WebKit的分支)]6.简述一下你对HTML语义化的理解?用正确的标签做正确的事情。html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。7.HTML5的form如何关闭自动完成功能?给不想要提示的 form 或某个 input 设置为 autocomplete=off。8.实现不使用 border 画出1px高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
9.title与h1的区别、b与strong的区别、i与em的区别?title属性没有明确意义只表示是个标题,H1则表示层次明确的标题,对页面信息的抓取也有很大的影响;strong是标明重点内容,有语气加强的含义,使用阅读设备阅读网络时:会重读,而是展示强调内容。i内容展示为斜体,em表示强调的文本;Physical Style Elements -- 自然样式标签b, i, u, s, preSemantic Style Elements -- 语义样式标签strong, em, ins, del, code应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。10.请描述下SEO中的TDK?在SEO中,所谓的TDK其实就是title、description、keywords这三个标签,这三个标签在网站的优化过程中title标题标签,description描述标签,keywords关键词标签11.简单书写HTML代码:请写出一个html网站代码,内容为一个图片,链接到“http://www.baidu.com”,图片路径为“./img/logo.png”,为图片设置替换文本”webfoss”,新网页在新窗口打开;答: 12.标签上title与alt属性的区别是什么?alt是给搜索引擎识别,在图像无法显示时的替代文本;title是关于元素的注释信息,主要是给用户解读。当鼠标放到文字或是图片上时有title文字显示。(因为IE不标准)在IE浏览器中alt起到了title的作用,变成文字提示。在定义img对象时,将alt和title属性写全,可以保证在各种浏览器中都能正常使用。13.前端页面有哪三层构成,分别是什么?作用是什么?分成:结构层、表示层、行为层。结构层(structural layer)由 HTML 或 XHTML之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P标签表达了这样一种语义:“这是一个文本段。”表示层(presentation layer)由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。行为层(behaviorlayer)负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。14.每个HTML文件头里都有个很重要的东西,Doctype,知道这是干什么的么? 声明位于文档中的最前面的位置,处于  标签之前。作用:1.告知浏览器文档使用哪种 HTML 或 XHTML 规范。2.告诉浏览器按照何种规范解析页(如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,浏览器按照自己的方式解析渲染页面)15.DIV+CSS布局较table有什么优势?1、速率更快,页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了;2、更好地被搜索引擎收录,大部分html页面的样式写入了CSS文件中,便于被搜索引擎采集收录;3、对浏览者和浏览器更具优势,由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形;4、修改更有效率,由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时,提高工作效率;16.为什么用多个域名存储网站资源更有效?1、CDN缓存更方便2、突破浏览器并发限制3、节约cookie带宽4、节约主域名的连接数,优化页面响应速度5、防止不必要的安全问题17.简要说明一下做好SEO需要考虑哪些方面?1.TDK2.图片+alt3.友情链接4.站点地图第二部分:HTML单选题1.以下描述错误的是(A)html需要先编译之后才能执行html需要存放在应用服务器端,客户端请求后才会将html程序返回给客户端html是需要浏览器解析的html语言就是把我们需要的内容显示在浏览器,但是html语言本身不显示2.以下描述错误的是(C)A.html分为三个基本标记结构B.head头标签,可以添加关键字描述网站优化网站C.通常我们显示的内容都会放在标签,通常html只能使用一次D.属于HTML标签,它是一种标准通用标记语言的文档类型声明3.在HTML语言中,设置表格单元格之间距离的是(B)和单元格和文字之间距离的是(C)A.borderB.cellspacingC.cellpaddingD.width4.以下对标签描述正确的(多选)(ABC)A.h1,h2,h3,h4,h5,h6标签是显示标题从h1到h6从大到小的过程B.b标签呈现粗体文本C.I标签呈现斜体文字5.以下描述错误的是(D)html分为 三个基本标记结构。head头标签可以加关键字、描述网站、优化网站通常我们显示的内容都会放在标签,通常html只能使用一次。 : 属于html标签,它是一种标准通用标记语言的文档类型声明。6.以下说法错误的是(D)A.

标签 : 标签定义段落B.
: 简单的换行C.

标签: 自定义列表D.
: 自定义标题7.以下对标签描述正确的(多选)(A,C,D)A.h1,h2,h3,h4,h5,h6 标签是显示标题从h1到h6,从大到小的过程B.tt标签对表格的限定标签C.b 标签呈现粗体文本D.i 标签呈现斜体文字8.在HTML语言中,设置表格单元格之间距离的标签是( B )和单元格内文字与边框的距离 的标签是(C)A.B.
C.
D.
第三部分:CSS问答题1.介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?(1)有两种, IE 盒子模型、W3C 盒子模型;(2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);(3)区  别: IE的content部分把 border 和 padding计算了进去;2.CSS选择符有哪些?哪些属性可以继承?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 height3.css定义的权重   标签的权重为1,class的权重为10,id的权重为1004.如果需要手动写动画,你认为最小时间间隔是多久,为什么?   多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms5.简单介绍下CSS的盒子模型,他都包含哪些属性?  width,height,margin,padding,border6.宽高都200px的div在浏览器窗口居中(水平垂直都居中)  position:fixed;width:200px;height:200px;left:50%;top:50%;  margin-left:-100px;margin-top:-100px;7.一个满屏 品 字布局 如何设计?   
   
   
8.超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:  L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}9.display:none;跟visibility:hidden;的区别是啥?  display:none;不占位,visibility:hidden;占位10.低版本浏览器不支持display:inline-block属性,请问怎么兼容*display:inline;*zoom:1;11.在使用display:inline-block时,inline-block元素会有4px左右的空隙,这是什么原因导致的以及解决方法(1) 取消换行和空格(2) 设置父元素的font-size为0,在给子元素设置自身的字体大小 12.写出下面三个的区别?*height{}_height{}+height{}* IE7及以下_IE6+IE713.Inline-block默认的对其方式是什么?在使用inline-block时在内容不同的时候想要保持内容水平对齐,说一下你采用的方法?默认对齐方式:base-line水平对齐:vertical-align:top;14.简明说一下CSS link于@import的区别和用法link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。link支持使用Javascript控制DOM去改变样式;而@import不支持。

 

你可能感兴趣的:(java)