HTML&CSS常见面试题及疑难解答
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML&CSS常见面试题及疑难解答相关的知识，希望对你有一定的参考价值。
对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）、<!DOCTYPE>声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
参考地址：http://www.cnblogs.com/wuqiutong/p/5986191.html
http://blog.csdn.net/binglingnew/article/details/17301433
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
Canvas 的用法 (主要是用来画图) https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
Canvas 自带的属性width和height,该元素有getContext()的方法,这个方法是用来获得上下文和它的绘画功能.
function draw(){
var canvas=document.getElementById(‘canvas‘);
if(canvas.getContext){
var ctx=canvas.getContext(‘2d‘);
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.moveTo(115,75);
ctx.arc(75,75,35,0,Math.PI,false);
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true);
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true);
ctx.stroke();
}
}
以上是关于HTML&CSS常见面试题及疑难解答的主要内容，如果未能解决你的问题，请参考以下文章