HTML&CSS常见面试题及疑难解答

             HTML&CSS常见面试题及疑难解答

HTML篇

对web标准以及W3C的理解与认识？

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。

对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript。

或者说：

web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。或许通俗点说，在页面body里面我们写入的标签都是为了页面的结构。表现即指css样式表，通过css可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。

W3C的理解：

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点

1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

1）标签字母要小写

2）标签要闭合

3）标签不允许随意嵌套

2.对于css和js来说

1）尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版

3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

2.xhtml和html有什么区别？

最主要的区别就是xhtml 比HTML的规范更严格

最主要的不同具体表现在：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

【课堂延伸】

xhtml与html严格意义上其实没什么区别，xhtml1.0的开发实际上是作为html4.01与xml2.0的一个过渡的网页版本而存在的，因为xml的解析语法过于苛刻，简单一句话就是：只要网页中出现一处错误，则浏览器停止解析。几年前，按照w3c的计划xhtml1.0的下一个版本来应该是xhtml 2.0的，但因为xhtml 2.0的语法苛刻程度已经是xml的苛刻程度了，但是xml违背了网页设计的一个基本原理，即“发送时要保守，接收时要开放。”，于是xhtml2.0项目最终流产，被html5所取代。

3.说说你常用的几种浏览器测试，并说出有哪些内核

(Q1)浏览器：IE，Chrome，FireFox，Safari，Opera。

(Q2)内核：Trident，Webkit  Gecko， Webkit   Presto，。

【课堂衍生】

 如果解决浏览器css新特性兼容问题

就必须在前面加上相关浏览器的前缀

-webkit 谷歌

-o 欧朋

-moz 火狐

推荐解决浏览器兼容的文章：

http://www.cnblogs.com/lgmcolin/archive/2013/02/12/2910179.html

 

4. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

   （1）、声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

    （2）、严格模式的排版和 JS运作模式是  以该浏览器支持的最高标准运行。

    （3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

    （4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

5.什么是语义化的HTML?

 

直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

详细解说参考链接：http://www.cnblogs.com/freeyiyi1993/p/3615179.html

6.HTML5 为什么只需要写 !DOCTYPE HTML？

 

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

7.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新标签，

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

详细参考链接网址：http://www.html5jscss.com/html5-semantics-section.html

CSS

1.   行内元素有哪些？块级元素有哪些？他们的区别是？

块级元素：div p h1 h2 h3h4 form ul

行内元素: a b br i spaninput select

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

块级元素：各占据一行，垂直方向排列。独占一行

2.常用的CSS三种样式可举例说明？

  行内样式

  

内部样式

     div{

      color:#aaffff;

}

外部样式

3．CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS 3新增伪类有哪些？

l id选择器（# myid）

l 类选择器（.myclassname）

l 标签选择器（div、h1、p）

l 相邻选择器（h1 + p）

l 子选择器（ul

l 后代选择器（li a）

l 通配符选择器（ * ）

l 属性选择器（a[rel ="external"]）

l 伪类选择器（a:hover, li: nth - child）

可继承： font-sizefont-family color, UL LI DL DD DT;

不可继承 ：border paddingmargin width height ;

优先级就近原则，样式定义最近者为准，载入样式以最后载入的定位为准。

优先级为：

       !important >  id > class > tag 

       important 比 内联优先级高

CSS3新增伪类举例：

lp:first-of-type 选择属于其父元素的首个

元素的每个

元素。

lp:last-of-type  选择属于其父元素的最后

元素的每个

元素。

lp:only-of-type  选择属于其父元素唯一的

元素的每个

元素。

lp:only-child    选择属于其父元素的唯一子元素的每个

元素。

lp:nth-child(2)  选择属于其父元素的第二个子元素的每个

元素。

l :enabled、:disabled 控制表单控件的禁用状态。

l :checked  单选框或复选框被选中。

4.   CSS隐藏元素的几种方法（至少说出三种）

      Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;

     Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;

      display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;

     position:不会影响布局，能让元素保持可以操作;

参考地址：http://www.cnblogs.com/zona/p/5814690.html

5.link和@import的区别是?

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

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

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

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

参考地址：http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html

 

6.src与href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

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

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

7.什么是盒子模型

    有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

详见地址：http://blog.csdn.net/zyuzixiao/article/details/18733463

8.Box-sizing 的值有哪些

box-sizing: content-box|border-box|

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

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

详见地址：http://www.cnblogs.com/zhp404/articles/4186373.html

9.列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

 1.    block 象块类型元素一样显示。

 none 缺省值。向行内元素类型一样显示。

 inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

 list-item 象块类型元素一样显示，并添加样式列表标记。

  2.

 *absolute

       生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

 *fixed （老IE不支持）

       生成绝对定位的元素，相对于浏览器窗口进行定位。

 *relative

       生成相对定位的元素，相对于其正常位置进行定位。

  *static  默认值。没有定位，元素出现在正常的流中

  *（忽略 top, bottom,left, right z-index 声明）。

  *inherit 规定从父元素继承 position 属性的值。

10. CSS3有哪些新特性？

CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

transform:rotate(9deg) scale(0.85,0.90)translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器多背景 rgba

11. CSS清除浮动的几种方法（至少两种）

使用带clear属性的空元素

使用CSS的overflow属性；

使用CSS的:after伪元素；

使用邻接元素处理；

详见：http://blog.csdn.net/xingxing1828/article/details/51245257