HTML+CSS面试题总结

前端开发和前端设计一样吗
前端开发毕业设计论文
web前端设计与开发书

总结了一些html+css方向的面试题,有的简单,有的复杂。祝大家学习愉快。欢迎批评共同进步
1、div+css排版相对比table排版的区别?

2、浏览器是怎样解析css选择器的?
下面这个例子,css选择器它是如何工作的?.mod-nav h3 span {font-size: 16px;}
如果不知道匹配规则,可能的理解是从左向右匹配:先找到.mod-nav,然后逐级匹配h3、span,在这个过程中如果遍历到叶子节点都没有匹配就需要回溯,继续寻找下一个分支。但事实上,css选择器的读取顺序是从右向左。还是上面的选择器,它的读取顺序变成:先找到所有的span,沿着span的父元素查找h3,中途找到了符合匹配规则的节点就加入结果集;如果直到根元素html都没有匹配,则不再遍历这条路径,从下一个span开始重复这个过程(如果有多个最右节点为span的话)。在某条css规则下(比如.mod-nav h3 span),会形成一条符合规则的索引树,树由上至下的节点是规则中从右向左的一个个选择符匹配的节点。很明显,两种匹配规则的性能差别很大。之所以会差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点);而从左向右的匹配规则的性能都浪费在了失败的查找上面。

3、css 优化、提高性能的方法有哪些?
①尽量将样式写在单独的css文件里面,在head元素中引用②避免使用复杂的选择器,层级越少越好③精简页面的样式文件,去掉不用的样式④利用CSS继承减少代码。

4、<!DOCTYPE>是干什么的
<!DOCTYPE>在遵循标准的任何web文档中,它都是一项必需的元素。<!DOCTYPE>会影响代码验证,并决定了浏览器最终如何显示你的web文档。现在您明白了吧,当你删除了<!DOCTYPE>时,就是把如何展示您html页面的权利给浏览器!很恐怖吧,IE6,IE7,IE8,Firefox2,Firefox3,Chrome,有多少种浏览器,您的页面可能就会产生多少种展示方式

5、border:none;与border:0;的区别
性能差异:
【border:0;】把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。
兼容性差异:
border:none;当border为“none”时似乎对IE6/7无效边框依然存在
当border为“0”时,感觉比“none”更有效,所有浏览器都一致把边框隐藏

6、前端页面有哪三层构成,分别是什么?作用是什么
结构层 Html 表示层 CSS 行为层 js

7、如何选择使用的HTML标签?什么时候选择什么样的标签?在网页布局中HTML标签如何选择?
1)框架布局(使用DIV标签)
在网页中框架布局一般使用DIV布局,无论大小DIV盒子一般均使用DIV标签(<div> </div>)布局。
2)列表型布局(使用ul li标签)
遇到图片列表、文章标题列表,通常使用ul li列表标签进行布局。当然使用这些标签时要进行设置需要CSS样式达到布局效果。这样程序调用数据时候更容易做循环内容。
3)、标题型布局(使用h1、h2、h3、h4标签)
遇到独立的栏目标题、正文标签,通常使用h1、h2、h3、h4标题标签,这样布局内容具有层次感。同时考虑SEO来说适当使用这些标题标签有利于优化排名。
4)、内容独立样式型(使用span)
在一段文字中,有几个文字需要单独设置一个颜色值,这个时候可以对这几个文字加span标签,对span标签单独设置class或直接CSS样式达到效果,一般来说布局框架很少使用span。
5)、功能型布局(img、em、strong、var等标签)
比如遇到网页中引人图片使用Img标签;适当选用这些HTML标签从SEO方面更加好些。
6)、段落(p标签)
一般文章段落都是使用p标签,即每段文字开始时候使用<p>结束时使用</p>,这样文章段落分明。
7)、表格型(table表格标签)
在HTML布局中,学习DIV CSS并不意味着放弃table标签,这个有时还是需要table标签的,比如遇到表格型布局的,还是需要table tr td标签布局,这个时候使用表格布局优于div标签。
8)、表单布局(form、input等)
遇到表单布局,比如注册、登录、填写数据提交地方等,均是使用表单标签。

8.简述一下src与href的区别。
src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。
src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。
<script src =”js.js”></script>
当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加
<link href=”common.css” rel=”stylesheet”/>
那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css

前端开发设计的课程
web前端开发属于设计吗
开发设计前端开发
» 本文来自:前端开发者 » 《HTML+CSS面试题总结》
» 本文链接地址:https://www.rokub.com/8024.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!