对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();
}
}