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.xhtmlhtml有什么区别?

最主要的区别就是xhtmlHTML的规范更严格

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

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

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

【课堂延伸】

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

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

(Q1)浏览器:IEChromeFireFoxSafariOpera

(Q2)内核:TridentWebkit GeckoWebkit 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 的数据在浏览器关闭后自动删除

语义化更好的内容元素,比如 articlefooterheadernavsection

表单控件,calendardatetimeemailurlsearch

新的技术webworker, websockt, Geolocation

移除的元素

纯表现的元素:basefontbigcenterfont, sstrikettu

对可用性产生负面影响的元素:frameframesetnoframes

支持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 自带的属性widthheight,该元素有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();

      }

     }

生命不断追求不止
原文地址:https://www.cnblogs.com/tangtangsimida/p/7570076.html