前端开发面试题准备html+css（上）

Posted 2020-06-16

（1）如何理解web标准？

     web标准就是w3c标准，在1994年，为了研究web规范和方针，致力于web的发展，保证各种web技术协同发展。

     web标准的主要规范有：html，XML，XHTML，css，dom

     它的具体规范是：

　　a.要求标签必须闭合，小写，不可乱嵌套

　　b.建议使用外链css和脚本，实现结构与表现，结构与行为分离，从而方便检索，更快地显示页面；

　　c.内容能被更多的用户所访问，内容能被更多的设备所访问，更少的代码和组件，容易维护；

（2）xhtml和html有什么区别

       HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
       最主要的不同：
       XHTML 元素必须被正确地嵌套。
       XHTML 元素必须被关闭。
       标签名必须用小写字母。
       XHTML 文档必须拥有根元素。

（3）Doctype? 

        用于声明文档使用那种规范（html/Xhtml）

（4）行内元素有哪些?块级元素有哪些?CSS的盒模型?

        块级元素：div p h1 h2 h3 h4 form ul
        行内元素: a b br i span input select
        Css盒模型:内容，border ,margin，padding

5.CSS引入的方式有哪些?

     面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：link和@import。外部引用CSS两种方式link和@import      的方式分别是：

     XML/HTML代码
    <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   
     XML/HTML代码
    <style type="text/css" media="screen">   
    @import url("CSS文件");   
    </style>  

    两者都是外部引用CSS的方式，但是存在一定的区别：

　　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：ink支持使用javascript控制DOM去改变样式；而@import不支持。

 6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算？

   css选择器大致分为两种：

   标签选择器（*是特殊情况），可但标签，也可上下文多标签；
   通用*+标签+多标签
   属性选择器（id和class都是属性，特殊的属性）
   id+class+属性（img[title]）
   伪类，伪元素选择器
  ：（:active :focus :hover :link :visited :first-child ） + ：：before、:after
   i-c-e公式：
   行内（1000）但是现在很少这样写>id>class（伪类，类，属性）>元素（标签/伪元素）

 7.前端页面有哪三层构成，分别是什么?作用是什么?

   结构层 Html 表示层 CSS 行为层 js

8.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
   Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

9 标签上title与alt属性的区别是什么?.描述css reset的作用和用途？解释css sprites，如何使用？

   title:标题，

   alt:是图片不显示时的文字替代

   css reset：Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一

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

10.什么是语义化的HTML?
  直观的认识标签 对于搜索引擎的抓取有好处

11.清除浮动的几种方式，各自的优缺点
    1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
   2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
   3.是用afert伪元素清除浮动(用于非IE浏览器)

12.你如何对网站的文件和资源进行优化?期待的解决方案包括：

   文件合并
   文件最小化/文件压缩
   使用CDN托管
   缓存的使用

13.浏览器标准模式和怪异模式之间的区别是什么

   盒子模型 渲染模式的不同
   使用 window.top.document.compatMode 可显示为什么模式

14写出你遇到的bug，以及你是怎么解决问题的？

超链接hover 点击后失效 使用正确的书写顺序 link visited hover active