WEB前端开发工程师面试题.docx
《WEB前端开发工程师面试题.docx》由会员分享,可在线阅读,更多相关《WEB前端开发工程师面试题.docx(7页珍藏版)》请在冰豆网上搜索。
![WEB前端开发工程师面试题.docx](https://file1.bdocx.com/fileroot1/2023-1/5/b739cb6e-7dbd-48f6-bfbc-eee968709446/b739cb6e-7dbd-48f6-bfbc-eee9687094461.gif)
WEB前端开发工程师面试题
[HTML&&CSS]
1.Doctype?
严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
Doctype声明位于文档中的最前面的位置,处于标签之前。
此标签可告知浏览器文档使用哪种HTML或XHTML规范。
该标签可声明三种DTD类型,分别表示严格版本、过渡版本以及基于框架的HTML文档。
当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。
为了实现这一点,他们创建了两种呈现模式:
标准模式和混杂模式(quirksmode)。
在标准模式中,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。
混杂模式通常模拟老式浏览器(比如MicrosoftIE4和NetscapeNavigator4)的行为以防止老站点无法工作。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。
如果XHTML文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现。
对于HTML4.01文档,包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。
包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
2.行内元素有哪些?
块级元素有哪些?
CSS的盒模型?
行内元素有:
abspanIbemimginputselectstrong
块级元素有:
divulollidldtddh1h2h3h4…p
盒模型:
marginborderpaddingwidth
3.CSS引入的方式有哪些?
link和@import的区别是?
1.使用LINK标签
将样式规则写在.css的样式文件中,再以标签引入。
2.使用@import引入
跟link方法很像,但必须放在中
--
@importurl(css/example.css);
-->
3.使用STYLE标签
将样式规则写在标签之中。
--
body{color:
#666;background:
#f0f0f0;font-size:
12px;}
td,p{color:
#c00;font-size:
12px;}
-->
4.使用STYLE属性
将STYLE属性直接加在个别的元件标签里,<元件(标签)STYLE="性质(属性)1:
设定值1;性质(属性)2:
设定值2;...}
5.使用标记引入样式
12px/20px#000000;">
两者区别:
加载顺序的差别。
当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。
@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,如:
main.css
———————-
@import“sub1.css”;
@import“sub2.css”;
这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是谨慎使用。
4.CSS选择符有哪些?
哪些属性可以继承?
优先级算法如何计算?
内联和important哪个优先级高?
●通配选择符*{sRules}
●类型选择符E{sRules}
td{font-size:
14px;width:
120px;}
●属性选择符
E[attr]{sRules}
E[attr=value]{sRules}
E[attr~=value]{sRules}
E[attr|=value]{sRules}
h[title]{color:
blue;}/*所有具有title属性的h对象*/
span[class=demo]{color:
red;}
div[speed="fast"][dorun="no"]{color:
red;}
a[rel~="copyright"]{color:
black;}
●包含选择符E1E2{sRules}
tabletd{font-size:
14px;}
●子对象选择符E1>E2{sRules}
divul>lip{font-size:
14px;}
●ID选择符#ID{sRules}
●类选择符E.className{sRules}
●选择符分组
E1,E2,E3{sRules}
●伪类及伪对象选择符
E:
Pseudo-Classes{sRules}
(Pseudo-Classes)[:
link:
hover:
active:
visited:
focus:
first-child:
first:
left:
right:
lang]
E:
Pseudo-Elements{sRules}
(Pseudo-Elements)[:
first-letter:
first-line:
before:
after]
可以继承的有:
font-sizefont-familycolor
不可继承的一般有:
borderpaddingmarginbackground-colorwidthheight等
============================
关于CSSspecificity
CSS的specificity特性或称非凡性,它是衡量一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表:
规则:
1.行内样式优先级Specificity值为1,0,0,0,高于外部定义。
如:
red”>sjweb