zoukankan      html  css  js  c++  java
  • 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();

          }

         }

    生命不断追求不止
  • 相关阅读:
    Netty简单聊天室
    JDK环境变量配置
    EasyUI Tabs
    NIO(五)
    NIO(四)
    银行对公业务和对私业务
    mysql常用操作
    LInux安装MySQL5.7.24详情
    Python3 SMTP发送邮件
    linux下sendmail邮件系统安装详情
  • 原文地址:https://www.cnblogs.com/tangtangsimida/p/7570076.html
Copyright © 2011-2022 走看看