Erlo

web前端面试题总结(html、css)

时间:2019-08-13 17:04   阅读:26次   来源:博客园页面报错

点赞

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 reset 的作用和用途。?

  参考: Reset 重置浏览器的 css 默认属性 浏览器的品种不同,样式不同,然后重置,让他们统 一。 

5.解释 css sprites,如何使用。?

  参考: Css 精灵 把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量。 

6.你如何对网站的文件和资源进行优化?

  参考:解决方案包括:文件合并、文件最小化/文件压缩、使用 CDN 托管、缓存的使用

7.清除浮动的几种方式,各自的优缺点?

  参考:1.使用空标签清除浮动 clear:both(理论上能清楚任何标签,,,增加无意义的标签) 。 2.使用 overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用 zoom:1 用于兼容 IE)。 3.是用 afert 伪元素清除浮动(用于非 IE 浏览器)。 

8.前端页面由哪三层构成,分别是什么?作用是什么? 

  参考: 网页分成三个层次,即:结构层、表示层、行为层。

     网页的结构层(structural layer)由 HTML 或 XHTML 之类的标记语言负责创建。标签, 也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含 任何关于如何显示有关内容的信息。例如, P 标签表达了这样一种语义:“这是一个文本段”。

     网页的表示层(presentation layer) 由 CSS 负责创建。 CSS 对“如何显示有关内容” 的问题做出了回答。

    网页的行为层(behavior layer)负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

9.浏览器的内核分别是什么? 

  参考:  IE 浏览器的内核 Trident、Mozilla 的 Gecko、Chrome 的 Blink(WebKit 的分支)、Opera 内核原为 Presto,现为 Blink。 

10.常见兼容性问题? 

  参考: * png24 位的图片在 iE6 浏览器上出现背景,解决方案是做成 PNG8. * 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;} 来统一。
     * IE6 双边距 bug:块属性标签 float 后,又有横行的 margin 情况下,在 ie6 显示 margin 比设置的大。 浮动 ie 产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下 IE 会产生 20px 的距离,解决方案是在 float 的标签样式控制中加入 —— _display:inline;将其转化为行内属性。(_这个符号只有 ie6 会识别) 渐进识别的方式,从总体中逐渐排除局部。

      首先,巧妙的使用“9”这一标记,将 IE 游览器从所有情况中分离出来。 接着,再次使用“+”将 IE8 和 IE7、IE6 分离开来,这样 IE8 已经独立识别。

      .bb{ background-color:#f1ee18;       #zs#所有识别#fzs#

          .background-color:#00deff9;     #zs#IE6、7、8 识别#fzs#

          +background-color:#a200ff;#zs#IE6、7 识别#fzs#

         _background-color:#1e0bd1;#zs#IE6 识别#fzs#

       }

    * IE 下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用 getAttribute()获取自定义属性; Firefox 下,只能使用 getAttribute()获取自定义属性. 解决方法:统一通过 getAttribute()获取自定义属性.

    * IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性; Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性. * 解决方法:(条件注释)缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。

     * Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

     超链接访问过后 hover 样式就不出现了 被点击访问过的超链接样式不在具有 hover 和 active 了解决方法是改变 CSS 属性的排列顺序:

         L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

11.html5 有哪些新特性、移除了那些元素?如何处理 HTML5 新标签的浏览器兼容问题?如 何区分 HTML 和 HTML5?  

  参考: * HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能 的增加。

     * 绘画 canvas

     用于媒介回放的 video 和 audio 元素

     本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

     sessionStorage 的数据在浏览器关闭后自动删除 语意化更好的内容元素,比如 article、footer、header、nav、section 表单控件,calendar、date、time、email、url、search
       新的技术 webworker, websockt, Geolocation

      * 移除的元素 纯表现的元素:basefont,big,center,font, s,strike,tt,u;

     对可用性产生负面影响的元素:frame,frameset,noframes;

       支持 HTML5 新标签:

      * IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签, 可以利用这一特性让这些浏览器支持 HTML5 新标签,

       浏览器支持新标签后,还需要添加标签默认的样式:

      * 当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

       如何区分: DOCTYPE 声明新增的结构元素功能元素

12. 解释下浮动和它的工作原理?清除浮动的技巧?

  参考:浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

      (1)、使用空标签清除浮动。
        这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
      (2)、使用overflow。
        给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
      (3)、使用after伪对象清除浮动。
        该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;

13.用过媒体查询,针对移动端的布局吗? 

  参考:媒体查询语法:

      1.内联写法:and之后必须有空格
      @media screen and (

        min-width:960px //判断浏览器大小条件)

        {body{background:red} //常规的样式
      }

      2.外联写法:当满足屏幕满足条件的时候连接href后的css文件
        <link='stylesheet' media='screen and (min-width:960)' href='xx.css'/>
        <link='stylesheet' media='screen and (min-width:960) and (max-width:1960)' href='xx.css'/>

      媒体查询根据不同屏幕显示不同界面有两种方式:
        1.在不同的媒体查询判定的大括号后写不同的样式
        2.写两个相同的HTML内部的内容,通过媒体查询判断界面后,显示一个,隐藏另一个

14.使用 CSS 预处理器吗?喜欢那个? 

  参考:1、什么是CSS预处理器

    CSS预处理器定义了一种新的语言,基本的思想是用一种专门的编程语言,开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码的编写过程的同时,它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。

    CSS预处理器种类繁多,本次就以Sass、Less、Stylus进行比较。

    2、语法

      在使用CSS预处理器之前最重要的是了解语法,我只写过sass,就从网上找了下另外两种语法的格式,与大家对比分享。

      首先Sass和Less都是用的是标准的CSS语法,因此你可以很方便的把已完成的CSS代码转为预处理器识别的代码,Sass默认使用 .sass扩展名,而Less默认使用.Less扩展名。

15.div+css 的布局较 table 布局有什么优点? 

   参考:   •改版的时候更方便 只要改 css 文件。

      •页面加载速度更快、结构化清晰、页面显示简洁。

      •表现与结构相分离。

      •易于优化(seo)搜索引擎更友好,排名更容易靠前。

下一篇:关于使用iframe的父子页面进行简单的相互传值

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“吐槽厅”,所有人可看,只保留当天信息。

  • Erlo.vip2019-08-23 02:33:07Hello、欢迎使用吐槽厅,这里是个吐槽的地方。
  • 首页 笔记分享 案例展示 ERLO 搜索
    鼠标试试
    返回顶部