新人必看的前台网站开发【超全总结】

经常会用到那几种浏览器进行测试？

IE，FireFox，Chrome，Opera，Safari，Opera。

行内元素和块级元素的区别？以及它们的兼容性使用？

（1）-行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

-块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。

（2）兼容性：display:inline-block;*display:inline;*zoom:1;

网页清除浮动有哪些方式？

（1）父级div定义height。

（2）结尾处加空div标签clear:both。

（3）父级div定义overflow:auto。

（4）父级div定义overflow:hidden。

（5）父级div定义伪类:after和zoom。

（6）父级div定义display:table。

（7）父级div也浮动，需要定义宽度。

（8）结尾处加br标签clear:both。

box-sizing经常用的的属性有哪些？分别有什么作用？

（1）box-sizing: content-box|border-box|inherit;

（2）border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

（3）content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

网页前都要有的Doctype有什么作用？它的标准模式与兼容模式各有什么区别?

（1） 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

（2）标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

HTML5 为什么只需要写 ？

HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

页面载入样式时，使用@import和link有什么区别？

（1）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

（2）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（3）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

.xhtml和html有什么区别？

html是一种基本的web网页设计语言，xhtml是基于xml的标记语言

区别：

xhtml元素必须被正确的嵌套

xhtml元素必须被关闭

标签名必须使用小写

xhtml必须拥有根元素

（附：xml拓展）什么是xml？

xml(extensible markup language)可拓展标记语言，是对超文本标记语言的补充。它是一种用来传输和存储数据的标准，一种独立于软件和硬件的信息传输工具。一种不同设备之间通讯协议。

src与href的区别？

（1） src（source）指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档中，如js脚本，img图片和iframe等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，类似于将所指向资源嵌入当前标签内。

（2） href（hypertext reference/超文本引用）指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也就是为什么建议使用link方式加载css而不是使用@import方式。

页面大量图片，如何优化加载，如何优化用户体验？

（1）图片懒加载。在页面的未可视区域添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

（2）如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

（3）如果图片为css图片，可以使用CSSsprite，SVGsprite等技术。

（4）如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

（5）如果图片展示区域小于图片的真实大小，应在服务器端根据业务需要先进行图片压缩，图片压缩后大小与展示一致。

网站标题：新人必看的前台网站开发【超全总结】
网页链接：https://www.cdcxhl.com/news9/225809.html

成都网站建设公司_创新互联，为您提供响应式网站、微信公众号、静态网站、云服务器、标签优化、移动网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联