澳门新浦京娱乐游戏HTML5 学习笔记 1

本文由码农网 –
小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

1.音频、视频

 1 <!DOCTYPE HTML>
 2 <html>
 3 <body>
 4 
 5 <audio controls="controls">
 6   <source src="/i/song.ogg" type="audio/ogg">
 7   <source src="/i/song.mp3" type="audio/mpeg">
 8 Your browser does not support the audio element.
 9 </audio>
10 
11 </body>
12 </html>

 

 1 <!DOCTYPE html> 
 2 <html> 
 3 <body> 
 4 
 5 <div style="text-align:center;">
 6   <button onclick="playPause()">播放/暂停</button> 
 7   <button onclick="makeBig()">大</button>
 8   <button onclick="makeNormal()">中</button>
 9   <button onclick="makeSmall()">小</button>
10   <br /> 
11   <video id="video1" width="420" style="margin-top:15px;">
12     <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
13     <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
14     Your browser does not support HTML5 video.
15   </video>
16 </div> 
17 
18 <script type="text/javascript">
19 var myVideo=document.getElementById("video1");
20 
21 function playPause()
22 { 
23 if (myVideo.paused) 
24   myVideo.play(); 
25 else 
26   myVideo.pause(); 
27 } 
28 
29 function makeBig()
30 { 
31 myVideo.width=560; 
32 } 
33 
34 function makeSmall()
35 { 
36 myVideo.width=320; 
37 } 
38 
39 function makeNormal()
40 { 
41 myVideo.width=420; 
42 } 
43 </script> 
44 
45 </body> 
46 </html>

今天跟H5班的一个同学聊面试。

本文将列出40个重要的HTML 5面试问题及答案,祝各位求职顺利。

实例

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <script type="text/javascript">
 5 function allowDrop(ev)
 6 {
 7 ev.preventDefault();
 8 }
 9 
10 function drag(ev)
11 {
12 ev.dataTransfer.setData("Text",ev.target.id);
13 }
14 
15 function drop(ev)
16 {
17 ev.preventDefault();
18 var data=ev.dataTransfer.getData("Text");
19 ev.target.appendChild(document.getElementById(data));
20 }
21 </script>
22 </head>
23 <body>
24 
25 <div id="div1" ondrop="drop(event)"
26 ondragover="allowDrop(event)"></div>
27 <img id="drag1" src="img_logo.gif" draggable="true"
28 ondragstart="drag(event)" width="336" height="69" />
29 
30 </body>
31 </html>

 

 

澳门新浦京娱乐游戏 1

目录

  • 介绍
  • Canvas和SVG图形之间的区别是什么?
  • 如何使用Canvas和SVG绘制矩形?
  • 什么是CSS选择器?
  • 如何使用ID值应用CSS样式?
  • CSS的列布局有什么用?
  • 请解释一下CSS盒子模型?
  • 请解释CSS 3中的一些文字效果?
  • 什么是web worker,为什么我们需要他们web worker?
  • 如何添加和删除本地存储中的数据?
  • 什么是本地存储的有效期?
  • 本地存储和cookie之间的区别是什么?
  • 会话存储和本地存储之间的区别是什么?
  • 什么是WebSQL?
  • WebSQL是HTML 5规范的一部分吗?
  • 那么我们该如何使用WebSQL?
  • 以及我们如何用HTML 5实现应用程序缓存?
  • 应用程序缓存的回退页面是什么?
  • 其他有关面试问题的文章参考

2.拖放

我已经成功一半了。。。

介绍

我是一个ASP.NET
MVC开发人员。最近当我找工作的时候,我发现很多问题都是围绕HTML
5和它的新功能展开的。所以,下面我将列出40个有助于你提高相关HTML
5知识的重要问题。

这些问题并不能保证你一定能找到工作,但可以肯定的是,如果你想提升自己关于这个主题的素养,那么它们一定是有用的。

祝你求职成功。

澳门新浦京娱乐游戏 2

设置元素为可拖放

首先,为了使元素可拖动,把 draggable 属性设置为 true :

<img draggable="true" />

 

怎么说?

SGML、HTML、XML和XHTML之间的关系?

澳门新浦京娱乐游戏,SGML(标准通用标记语言)是一种指定文档标记的标准,是一种描述了文档标记应该如何的元语言。
HTML是描述使用SGML的标记语言。

通过SGML,每一个HTML页面都需要在相同的地方创建并附加一个DTD(文档类型定义)节点。所以,你总是可以在HTML页面的顶部发现DTD用于解析目的的“DOCTYPE”属性。

 <!--!doctype-->

由于解析SGML是一种痛苦,所以创建了XML。
XML使用SGML。例如,在SGML,你必须拥有成对的开始和结束标签,但在XML中,你可以使用自动关闭的标签。

XHTML源自于使用HTML 4.0的XML。你可以参考XML DTD如以下所示的代码片段。

 <!--!doctype--><!--!doctype-->

拖动什么 – ondragstart 和 setData()

然后,规定当元素被拖动时,会发生什么。

在上面的例子中,ondragstart
属性调用了一个函数,drag(event),它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值:

 

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

 

在这个例子中,数据类型是 “Text”,值是可拖动元素的 id (“drag1”)。

澳门新浦京娱乐游戏 3

什么是HTML 5?

HTML
5是HTML的新标准,其主要目标是无需任何额外的插件如Flash、Silverlight等,就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。

HTML5是由万维网联盟(W3C)和Web Hypertext Application Technology Working
Group (Web超文本应用技术工作组—WHATWG)合作创建的HTML新版本。

放到何处 – ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法:

event.preventDefault()

澳门新浦京娱乐游戏 4

如果我不输入<!DOCTYPE HTML>,HTML 5能工作吗?

No,浏览器将无法识别HTML文件,并且HTML 5标签将无法正常工作。

进行放置 – ondrop

当放置被拖数据时,会发生 drop 事件。

在上面的例子中,ondrop 属性调用了一个函数,drop(event):

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

 

澳门新浦京娱乐游戏 5

哪些浏览器支持HTML 5?

几乎所有的浏览器都支持HTML 5,例如Safari,Chrome,火狐,Opera,IE等。

代码解释:

  • 调用 preventDefault() 来避免浏览器对数据的默认处理(drop
    事件的默认行为是以链接形式打开)
  • 通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在
    setData() 方法中设置为相同类型的任何数据。
  • 被拖数据是被拖元素的 id (“drag1”)
  • 把被拖元素追加到放置元素(目标元素)中

澳门新浦京娱乐游戏 6

HTML 5的页面结构和HTML 4或早先的HTML有什么不同?

一个典型的Web页面有页眉(header),页脚(footer),导航(navigation),正文(central
area)和侧栏(side bar)。现在如果是在HTML
4中,HTML部分中的上述这些专用名词需要使用DIV标签来描述。

但是,如果是在HTML
5,可以专门为这些区域创建特定的元素名,让HTML更具可读性。

澳门新浦京娱乐游戏 7

以下是形成页面结构的HTML 5元素的更多细节。

  • <header>:表现HTML的标题数据。
  • <footer>:页面的页脚部分。
  • <nav>:页面中的导航元素。
  • <article>:正文内容。
  • <section>:用在正文中定义section或区段内容。
  • <aside>:表现页面侧边栏内容。

3.画布

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是:在画布上绘制 150×75 的矩形,从左上角开始 (0,0)。

如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> 
body
{
font-size:70%;
font-family:verdana,helvetica,arial,sans-serif;
}
</style>

<script type="text/javascript"> 
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}

function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>

<body style="margin:0px;">

<p>把鼠标悬停在下面的矩形上可以看到坐标:</p>

<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<br />
<br />
<br />
<div id="xycoordinates"></div>


</body>
</html>

我这边已经认可公司了,就等公司认可我。

HTML 5中的DataList是什么?

HTML 5中的DataList控件元素有助于提供自动完成功能的文本框,如下图所示。

澳门新浦京娱乐游戏 8

下面是DataList控件功能的HTML代码:

<input list="Country">
<datalist id="Country">
<option value="India">
<option value="Italy">
<option value="Iran">
<option value="Israel">
<option value="Indonesia">
</datalist>

实例 – 线条

通过指定从何处开始,在何处结束,来绘制一条线:

澳门新浦京娱乐游戏 9

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

</body>
</html>

哈,这种心态太好了。面试是一个很消耗元气的事情,不管你本身的技能怎么样,作为一个初出茅庐的学生,在找工作的过程中,都会遇到各种问(刁)题(难)。

HTML 5中不同的新表单元素类型是什么?

HTML 5推出了10个重要的新的表单元素:

  1. Color.
  2. Date
  3. Datetime-local
  4. Email
  5. Time
  6. Url
  7. Range
  8. Telephone
  9. Number
  10. Search

让我们一步一步来了解这些元素。

如果你想显示拾色器对话框。

<input type="color" name="favcolor">

澳门新浦京娱乐游戏 10

如果你想显示日历对话框。

<input type="date" name="bday">

澳门新浦京娱乐游戏 11

如果你想用本地时间显示日历。

<input type="datetime-local" name="bdaytime">

澳门新浦京娱乐游戏 12

如果你想用电子邮件验证创建一个HTML文本,那么我们可以设置类型为“email”。

<input type="email" name="email">

澳门新浦京娱乐游戏 13

对于URL验证设置类型为“url”,如下面的HTML代码所示。

<input type="url" name="sitename">

澳门新浦京娱乐游戏 14

如果你想用文本框显示号码范围,您可以将设置类型为number。

<input type="number" name="quantity" min="1" max="5">

澳门新浦京娱乐游戏 15

如果你想显示范围调整控件,那么你可以使用range作为类型。

<input type="range" min="0" max="10" step="2" value="6">

澳门新浦京娱乐游戏 16

让文本框作为搜索引擎框。

<input type="search" name="googleengine">

只需要输入时间。

<input type="time" name="usr_time">

想要文本框接受电话号码。

<input type="tel" name="mytel">

实例 – 圆形

通过规定尺寸、颜色和位置,来绘制一个圆:

澳门新浦京娱乐游戏 17

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

</body>
</html>

HTML 5中的输出元素是什么?

当你需要计算两个输入的结果并将结果放到一个标签里的时候,就需要输出元素了。比如你有两个文本框(参见下图),你想要让这些文本框数字相加,然后输出给标签。

澳门新浦京娱乐游戏 18

下面就是如何使用HTML 5代码输出元素。

<form onsubmit="return false"  &ouml;ninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number"> +
<input name="b" type="number"> =
<output name="o" />
</form>

为了简单起见,你也可以用“valueAsNumber”替换“parseInt”。为了更具可读性,你也可以在输出元素中使用“for”。

<output name="o" for="a b"></output>

实例 – 渐变

使用您指定的颜色来绘制渐变背景:

澳门新浦京娱乐游戏 19

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>


<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>

</body>
</html>

我们应该用乐观积极的态度、满满的正能量去面对所有的事情。调整心态,全力以赴,属于你的work.right就在不远处等着你。

SVG是什么?

SVG表示(scalable vector
graphics)可缩放矢量图形。这是一个基于文本的图形语言,它可以绘制使用文本、线、点等的图形,因此可以轻巧又快速地渲染。

实例 – 图像

把一幅图像放置到画布上:

澳门新浦京娱乐游戏 20

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);

</script>

</body>
</html>

 

下面是小鸥整理的HTML5面试常见问题和答案,仅供参考,仅供参考,仅供参考。这些问题并不能保证你一定能得到心仪的Offer,但是可以肯定的是,看过它,面试的时候你心里一定不会那么方。

能否使用HTML 5举个简单的SVG例子?

比方说,我们想要使用HTML 5 SVG显示下面简单的线条。

澳门新浦京娱乐游戏 21

下面是HTML 5代码,你可以看到SVG标签封闭了多边形标签用来显示星星图形。

<svg id="svgelem" height="[object SVGAnimatedLength]" xmlns="http://www.w3.org/2000/svg">
<line style="stroke: rgb(255, 0, 0); stroke-width: 2px;" y2="[object SVGAnimatedLength]" x2="[object SVGAnimatedLength]" y1="[object SVGAnimatedLength]" x1="[object SVGAnimatedLength]">
</line>

4.SVG

在 HTML5 中,您能够将 SVG 元素直接嵌入 HTML 页面中:

澳门新浦京娱乐游戏 22

HTML 5中的Canvas画布是什么?

画布是一个可以在其上绘制图形的HTML区域。

访问画布区域

要在画布区域上绘制图形,我们首先需要获取上下文的引用部分。下面就是用于画布部分的代码。

var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");

绘制图形

一旦你可以使用上下文对象,就可以开始上下文绘制。所以首先调用“move”方法,从一个点开始,使用线方法画线,然后敲击键盘应用结束。

<a name="WhatisthedifferencebetweenCanvasandSVGgraphics">What is the difference between Canvas and SVG graphics? </a>

注:
从前面的两个问题中我们可以看到画布和SVG都可以在浏览器上绘制图形。所以在这个问题上面试官可能会要你回答什么时候用哪个。

SVG Canvas
绘制并记忆。换句话说就是,通过使用SVG绘制的任意形状都可以被记住和操作,并且浏览器可以再次渲染它。
SVG可以很好地用于创建如CAD软件的图形,绘制之后允许用户操作。
这是一个缓慢的过程,因为它需要记住坐标以便于后续操作。
我们可以有与图形对象相关联的事件处理程序。
分辨率独立。
画布则是绘制然后遗忘。一旦绘制完成,你就不能访问和处理像素。
Canvas则用于绘制和遗忘类似动漫和游戏的场画。
它就快多了,因为没有必要记住后面的东西。我们不需要将事件处理程序与图形对象关联,因为我们不需要引用它们。
分辨率依赖。

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

只许看,不许背 

如何在HTML 5中使用Canvas和SVG来绘制矩形?

使用SVG绘制矩形的HTML 5代码。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect style="fill: rgb(0, 0, 255); stroke-width: 1px; stroke: rgb(0, 0, 0);" height="[object SVGAnimatedLength]" width="[object SVGAnimatedLength]">
</rect>

使用画布绘制矩形的HTML 5代码。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle fill="red" stroke-width="2" stroke="black" r="[object SVGAnimatedLength]" cy="[object SVGAnimatedLength]" cx="[object SVGAnimatedLength]">

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();

<!DOCTYPE html>
<html>
<body  &ouml;nload="DrawMe();">
<svg height="[object SVGAnimatedLength]" width="[object SVGAnimatedLength]">
<circle id="circle1" cx="[object SVGAnimatedLength]" cy="[object SVGAnimatedLength]" r="[object SVGAnimatedLength]" style="stroke: none; fill: rgb(255, 0, 0);">

</body>
<script>

 var timerFunction = setInterval(DrawMe, 20);
alert("ddd");

function DrawMe()
{
var circle = document.getElementById("circle1");
var x = circle.getAttribute("cx");
var newX = 2 + parseInt(x);
if(newX > 500) 
{
            newX = 20;
}
        circle.setAttribute("cx", newX);

}
</script>
</html></circle>

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML,这意味着 SVG DOM
中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG
对象的属性发生变化,那么浏览器能够自动重现图形。

心理第一,答案第二

CSS中的选择器是什么?

选择器可以帮助选择你想要应用样式的元素。例如下面就是一个称为“intro”的简单样式,它应用红色到HTML元素背景。

<style>
.intro
{
background-color:red;
}
</style>

要应用上面的“intro”样式到div中,我们可以使用“class”选择器,所示如下。

<div class="intro">
<p>My name is Shivprasad koirala.</p>
<p>I write interview questions.</p>
</div>

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas
中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

开始吧

使用ID值如何应用CSS样式?

假设你一个ID为“mytext”的HTML段落标记,如下面的代码片段所示。

<p id="mytext">This is HTML interview questions.</p>

你可以使用有着“id”名称的“#”选择器创建一个样式,并应用CSS值到段落标记。为了应用样式到“mytext”元素,我们可以使用“#mytext”,如下面的CSS代码所示。

<style>
#mytext
{
background-color:yellow;
}
</style>

一些重要选择器的快速修测。

设置所有段落标记背景色为黄色。

P,h1
{ 
background-color:yellow;
}

将所有在div标签内的段落标记设置为黄色背景。

div p
{ 
background-color:yellow;
}

设置div标签后面的所有段落标记为黄色背景。

div+p
{ 
background-color:yellow;
}

用“target”设置所有的属性为黄色背景。

a[target]
{ 
background-color:yellow;
}

<a href="http://www.questpond.com">ASP.NET interview questions</a>
<a href="http://www.questpond.com" target="_blank">c# interview questions</a>
<a href="http://www.questpond.org" target="_top">.NET interview questions with answers</a>

当控件获得焦点的时候,设置所有元素为黄色背景。

input:focus
{ 
background-color:yellow;
}

根据链接操作设置超链接。

a:link    {color:green;}
a:visited {color:green;}
a:hover   {color:red;}
a:active  {color:yellow;}

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

CSS中列布局的用处是什么?

CSS列布局可以帮助你分配文字为一个个列。例如,下面的杂志新闻文本内容就比较大,我们需要用两条边界线分成相同的3列。这就是HTML
5列布局的用途。

要实现列布局,我们需要指定以下内容:

要将文本分割成多少列?

要指定列数,需要使用column-count。Chrome和Firefox分别需要 “WebKit”和“moz-column”。

-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

这些列之间的间距要多大?

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:20px;

要不要再列之间画分界线,如果需要的话,那么线要多粗?

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:6px outset #ff00ff;

下面是完整代码。

<style>
.magazine
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:20px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:6px outset #ff00ff;
}
</style>

然后,你可以通过使用class属性应用样式到文本。

<div class="magazine">

Your text goes here which you want to divide in to 3 columns.

</div>

Canvas

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘

1谈谈你对HTML5的理解。

请解释一下CSS盒子模型?

CSS盒子模型是一个围绕HTML元素——并且HTML元素定义了边框border,内边距padding和外边距margin 的矩形空间。

  • Border:——定义了包含元素的最大面积。边框可以可见,也可以不可见,可以定义它的高度和宽度等。
  • Padding:——定义边框和元素之间的间距。
  • Margin:——定义边框和任何相邻元素之间的间距。

澳门新浦京娱乐游戏 23

例如下面就是一段简单的定义了box边框,外边距和内边距值的CSS代码。

.box {
    width: 200px;
    border: 10px solid #99c;
    padding: 20px;
    margin: 50px;
}

现在,如果我们应用上述CSS代码到DIV标记,如下所示,那么你的输出将会如下图所示。我创建了两个文本,“Some
text”和“Some other text”,这样我们可以看到margin属性函数是怎么样的。

<div align="middle" class="box">
Some text
</div>

Some other text

澳门新浦京娱乐游戏 24

SVG

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用

 

 

答案解析:

请解释一下CSS 3中的一些文本效果?

面试官希望你能够通过CSS回答两个文本效果中的一个。下面是两个值得注意的文本效果。

阴影文字效果

.specialtext
{
text-shadow: 5px 5px 5px #FF0000;
}

澳门新浦京娱乐游戏 25

自动换行效果

<style>
.breakword
{word-wrap:break-word;}
</style>

澳门新浦京娱乐游戏 26

5.地理位置

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮,获得您的坐标:</p>
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br />Longitude: " + position.coords.longitude;    
  }
</script>
</body>
</html>

 

绝大多数人心中的HTML5仅仅是HTML的第5个版本,认为H5只不过是增加了一些新标签,如<header>、<section>、<canvas>或者增加了动画、渐变之类的炫酷效果。实际上这种理解是极其肤浅的,完全是外行人看热闹!H5从广义上说是前端开发中各种最新技术的总称,包含了HTML5、CSS3、JavaScript、ES6和各种开源框架等最新前端开发技术的总和。H5广泛而深入地吸收了移动互联网时代的技术精髓,再加上其自身跨平台、免安装、更新快的技术优势,自2014年底发布以来,已经逐渐成为现代互联网和移动互联网开发的核心技术,逐渐发展成为各行各业进入互联网+的首选开发技术。

web workers是什么,为什么我们需要web workers?

请看下面的for循环代码,它将运行超过百万次。

function  SomeHeavyFunction()
{
for (i = 0; i < 10000000000000; i++)
{
x = i + x;
}
}

假设上述for循环代码在一个HTML按钮点击上执行。现在,这种方法执行是同步的。换句话说,完整的浏览器会一直等,直到循环完成。

<input type="button" onclick="SomeHeavyFunction();" />

这会进一步导致浏览器冻结,并出现如下图所示的错误信息而无法响应。

澳门新浦京娱乐游戏 27

因此,如果我们可以将这个烦琐的for循环到一个JavaScript文件中,并异步运行,那么就意味着浏览器不必等待循环,这样我们就能拥有一个更敏感的浏览器。这就是web
worker的目的。

web worker有助于异步执行JavaScript文件。

6.WEB存储

2目前哪些浏览器支持HTML5?

HTML 5中的本地存储概念?

很多时候,我们想在本地计算机存储有关用户的信息。例如,假设用户已经填满了一半的长表单,互联网却突然连接中断。此时,用户希望能在本地存储这些信息,然后当重新连接到互联网的时候,获取这些信息,并将其发送到服务器进行存储。

现代的浏览器存储称为“本地存储”,可以让你存储这些信息。

localStorage 方法

localStorage
方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

如何创建和访问 localStorage:

如何添加和删除本地存储中的数据?

添加到本地存储的数据使用“键”和“值”。下面的示例代码显示了国家数据“India”添加的键值为“Key001”。

localStorage.setItem(&ldquo;Key001&rdquo;,&rdquo;India&rdquo;);

要检索本地存储的数据,我们需要使用“getItem”来提供键名。

var country = localStorage.getItem(&ldquo;Key001&rdquo;);

你还可以使用下面的代码存储JavaScript对象到本地存储。

var country = {};
country.name = &ldquo;India&rdquo;;
country.code = &ldquo;I001&rdquo;;
localStorage.setItem(&ldquo;I001&rdquo;, country);
var country1 = localStorage.getItem(&ldquo;I001&rdquo;);

如果你想用JSON格式存储,那么可以使用“JSON.stringify”函数,如下面所示的代码。

localStorage.setItem(&ldquo;I001&rdquo;,JSON.stringify(country));

实例

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

localStorage.lastname="Smith";
document.write("Last name: " + localStorage.lastname);

</script>

</body>
</html>

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

if (localStorage.pagecount)
    {
    localStorage.pagecount=Number(localStorage.pagecount) +1;
    }
else
    {
    localStorage.pagecount=1;
    }
document.write("Visits: " + localStorage.pagecount + " time(s).");

</script> 

<p>刷新页面会看到计数器在增长。</p>

<p>请关闭浏览器窗口,然后再试一次,计数器会继续计数。</p>

</body>
</html>

 

答案解析:

什么是本地存储的生命周期?

本地存储没有生命周期,它会一直存在直到用户将其从浏览器清楚或使用JavaScript代码删除它。

sessionStorage 方法

sessionStorage 方法针对一个 session
进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

如何创建并访问一个 sessionStorage:

本地存储和cookies之间的区别是什么?

cookies 本地存储
客户端/服务器端 既可以从客户端也可以从服务器端访问数据。每个请求都会发送cookie数据到服务器。 只能在本地浏览器端访问数据。服务器无法访问本地存储,除非特意通过POST或GET发送到服务器。
大小 每个Cookie 4095个字节。 每个域5 MB。
有效期 cookie有附加的有效期。所以有效期后的cookie和cookie数据会被删除。 数据没有有效期限。要么最终用户从浏览器删除它,要么使用JavaScript编程删除。

实例

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);

</script>

</body>
</html>

 

几乎所有的浏览器都支持HTML 5,例如Safari,Chrome,火狐,Opera,IE等。

WebSQL是什么?

WebSQL是客户浏览器端的结构化的关系数据库。这是浏览器内部的本地RDBMS,你可以在这个本地RDBMS上执行SQL查询。

7.应用程序缓存

<!DOCTYPE html>
<html manifest="/example/html5/demo_html.appcache">
<body>
<script type="text/javascript" src="/example/html5/demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">获得日期和事件</button></p>
<p><img src="/i/w3school_banner.gif" /></p>
<p>请打开<a href="/example/html5/html5_html_manifest.html" target="_blank">这个页面</a>,然后脱机浏览,重新加载页面。页面中的脚本和图像依然可用。</p>
</body>
</html>

3HTML5中的DataList是什么?

WebSQL是HTML 5规范的一部分吗?

不是,虽然很多人将其标记为HTML 5,但它不是HTML 5规范的一部分。HTML
5规范基于SQLite。

Manifest 文件

manifest
文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

manifest 文件可分为三个部分:

  • CACHE MANIFEST – 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK – 在此标题下列出的文件需要与服务器的连接,且不会被缓存
  • FALLBACK – 在此标题下列出的文件规定当页面无法访问时的回退页面(比如
    404 页面)

那么如何使用WebSQL?

我们需要做的第一步是通过使用“OpenDatabase”函数开放数据库,如下图所示。第一个参数是数据库的名称,接下来是版本,然后一个简单的文本标题,最后的是数据库的大小。

var db=openDatabase('dbCustomer','1.0','Customer app&rsquo;, 2 * 1024 * 1024);

要执行SQL,我们需要使用“transaction”函数,并调用“executeSql”函数执行SQL。

db.transaction(function (tx) 
{
tx.executeSql('CREATE TABLE IF NOT EXISTS tblCust(id unique, customername)');
tx.executeSql('INSERT INTO tblcust (id, customername) VALUES(1, "shiv")');
tx.executeSql('INSERT INTO tblcust (id, customername) VALUES (2, "raju")');
}

如果你执行“select”查询,那么你将得到的数据是“results”集合,这个数据集合可以循环和显示在HTML界面中。

db.transaction(function (tx) 
{
  tx.executeSql('SELECT * FROM tblcust', [], function (tx, results) {
   for (i = 0; i < len; i++)
{
     msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
     document.querySelector('#customer).innerHTML +=  msg;
}
 }, null);
});

CACHE MANIFEST

第一行,CACHE MANIFEST,是必需的:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF
图像,以及一个 JavaScript 文件。当 manifest
文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的。

答案解析:

1.0缓存:Login.aspx

  • 所有的manifest资源配置文件以CACHE MANIFEST声明开头。
  • #(哈希标签)有助于提供缓存文件的版本。
  • CACHE命令指定哪些文件需要被缓存。
  • manifest资源配置文件的内容类型应是“text /cache-manifest”。

以下就是使用ASP.NET C#提供的缓存清单。

Response.ContentType = "text/cache-manifest";
Response.Write("CACHE MANIFEST n");
Response.Write("# 2012-02-21 v1.0.0 n");
Response.Write("CACHE : n");
Response.Write("Login.aspx n");
Response.Flush();
Response.End();

在创建了缓存清单文件之后,接下来的事情就是提供清单文件在HTML页面中的链接,如下所示。

<html manifest="cache.aspx">

上述文件第一次运行时,它会被增加到浏览器应用程序缓存中,万一服务器宕机的话,页面就可以由应用程序缓存提供服务。

NETWORK

下面的 NETWORK 小节规定文件 “login.asp”
永远不会被缓存,且离线时是不可用的:

NETWORK:
login.asp

可以使用星号来指示所有其他资源/文件都需要因特网连接:

NETWORK:
*

HTML 5中的DataList控件元素有助于提供自动完成功能的文本框,如下图所示。

应用程序缓存中的回退页面功能?

<a name="WhatisfallbackinApplicati>FALLBACK:
/home/ /homeoffline.html </a></pre>

<h2><a name=" whatisfallbackinapplicati=""></a>

MVC面试问题及答案:http://www.codeproject.com/Articles/556995/MVC-interview-questions-with-answers

实体框架面试问题及答案:http://www.codeproject.com/Articles/676309/ADO-NET-Entity-Framework-Interview-Questions

.NET面试问题及视频系列:

.NET开发人员会被问到的哪种问题:

一个简单的.NET模拟面试视频:

FALLBACK

下面的 FALLBACK 小节规定如果无法建立因特网连接,则用 “offline.html” 替代
/html5/ 目录中的所有文件:

FALLBACK:
/html5/ /404.html

注释:第一个 URI 是资源,第二个是替补。

澳门新浦京娱乐游戏 28

许可证

这篇文章,以及任何相关的源代码和文件,根据The Code Project Open
License(CPOL)。

更新缓存

一旦应用被缓存,它就会保持缓存直到发生下列情况:

  • 用户清空浏览器缓存
  • manifest 文件被修改(参阅下面的提示)
  • 由程序来更新应用缓存

DataList控件功能的HTML代码:

实例 – 完整的 Manifest 文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

重要的提示:以 “#” 开头的是注释行,但也可满足其他用途。应用的缓存会在其
manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个
JavaScript
函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

<input list=”Country”>
<datalist id=”Country”>
<option value=”India”>
<option value=”Italy”>
<option value=”Iran”>
<option value=”Israel”>
<option value=”Indonesia”>
</datalist>

8.Web Workers

4SVG是什么?

什么是 Web Worker?

当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

web worker 是运行在后台的
JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时
web worker 在后台运行。

答案解析:

检测 Web Worker 支持

在创建 web worker 之前,请检测用户的浏览器是否支持它:

if(typeof(Worker)!=="undefined")
  {
  // Yes! Web worker support!
  // Some code.....
  }
else
  {
  // Sorry! No Web Worker support..
  }

  

创建 web worker 文件

现在,让我们在一个外部 JavaScript 中创建我们的 web worker。

在这里,我们创建了计数脚本。该脚本存储于 “demo_workers.js” 文件中:

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

  

以上代码中重要的部分是 postMessage() 方法 – 它用于向 HTML
页面传回一段消息。

注释:web worker 通常不用于如此简单的脚本,而是用于更耗费 CPU
资源的任务。

SVG表示(scalable vector
graphics)可缩放矢量图形。这是一个基于文本的图形语言,它可以绘制使用文本、线、点等的图形,因此可以轻巧又快速地渲染。

创建 Web Worker 对象

我们已经有了 web worker 文件,现在我们需要从 HTML 页面调用它。

下面的代码检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker
对象,然后运行 “demo_workers.js” 中的代码:

if(typeof(w)=="undefined")
  {
  w=new Worker("demo_workers.js");
  }

然后我们就可以从 web worker 发生和接收消息了。

向 web worker 添加一个 “onmessage” 事件监听器:

w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};

当 web worker 传递消息时,会执行事件监听器中的代码。event.data
中存有来自 event.data 的数据。

5能否使用HTML5举个简单的SVG例子?

终止 Web Worker

当我们创建 web worker
对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。

如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:

w.terminate();

答案解析:

完整的 Web Worker 实例代码

我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码:

比方说,我们想要使用HTML 5 SVG显示下面简单的线条。

实例

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
 does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();
}
</script>

</body>
</html>

  

澳门新浦京娱乐游戏 29

9.服务器发送事件

下面是HTML 5代码,你可以看到SVG标签封闭了多边形标签用来显示星星图形。

Server-Sent 事件 – 单向消息传递

Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。

例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

<svg id=”svgelem” height=”[object
SVGAnimatedLength]” xmlns=”;
<line style=”stroke: rgb(255, 0, 0); stroke-width: 2px;” y2=”[object
SVGAnimatedLength]” x2=”[object SVGAnimatedLength]” y1=”[object
SVGAnimatedLength]” x1=”[object SVGAnimatedLength]”>
</line>

浏览器支持

所有主流浏览器均支持服务器发送事件,除了 Internet Explorer。

6HTML5中canvas是什么?

接收 Server-Sent 事件通知

EventSource 对象用于接收服务器发送事件通知:

答案解析:

实例

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
  {
  document.getElementById("result").innerHTML+=event.data + "<br />";
  };

 

例子解释:

  • 创建一个新的 EventSource 对象,然后规定发送更新的页面的
    URL(本例中是 “demo_sse.php”)
  • 每接收到一次更新,就会发生 onmessage 事件
  • 当 onmessage 事件发生时,把已接收的数据推入 id 为 “result” 的元素中

Canvas是你在HTML中可以绘制图形的区域。 

检测 Server-Sent 事件支持

在上面的 TIY
实例中,我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况:

if(typeof(EventSource)!=="undefined")
  {
  // Yes! Server-sent events support!
  // Some code.....
  }
else
  {
  // Sorry! No server-sent events support..
  }

7我们如何使用Canvas来画一条简单的线?

服务器端代码实例

为了让上面的例子可以运行,您还需要能够发送数据更新的服务器(比如 PHP 和
ASP)。

服务器端事件流的语法是非常简单的。把 “Content-Type” 报头设置为
“text/event-stream”。现在,您可以开始发送事件流了。

PHP 代码 (demo_sse.php):

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}nn";
flush();
?>

答案解析:

ASP 代码 (VB) (demo_sse.asp):

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>

代码解释:

  • 把报头 “Content-Type” 设置为 “text/event-stream”
  • 规定不对页面进行缓存
  • 输出发送日期(始终以 “data: ” 开头)
  • 向网页刷新输出数据

三步走:

EventSource 对象

在上面的例子中,我们使用 onmessage
事件来获取消息。不过还可以使用其他事件:

事件 描述
onopen 当通往服务器的连接被打开
onmessage 当接收到消息
onerror 当错误发生

1、定义Canvas区域

 

 

2、获取访问canvas上下文区域

3、绘制图形

定义Canvas区域
定义Canvas区域你需要使用下面的HTML代码,这定义了你能进行绘图的区域

<canvas id="mycanvas" width="600" height="500"></canvas>

获取画布区域的访问

在画布上进行绘图我们首先需要获取上下文区域的关联,下面是获取画布区域的代码。

var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");

绘制图形

现在一旦你获取了访问上下文,我们就可以开始在上下文中绘制了。首先调用“move”方法并从一个点开始,使用线条方法绘制线条然后使用stroke方法结束。

澳门新浦京娱乐游戏 30

以下是完整的代码:

澳门新浦京娱乐游戏 31

输出结果:

澳门新浦京娱乐游戏 32

8Canvas和SVG图形的区别是什么?

答案解析:

从前面的两个问题中我们可以看到Canvas和SVG都可以在浏览器上绘制图形。所以在这个问题上面试官可能会要你回答什么时候用哪个。

SVGCanvas绘制后记忆,换句话说任何使用SVG绘制的形状都能被记忆和操作,浏览器可以再次显示Canvas则是绘制后忘记,一旦绘制完成你就不能访问像素和操作它SVG对于创建图形例如CAD软件是良好的,一旦东西绘制,用户就想去操作它Canvas则用于绘制和遗忘类似动漫和游戏的场画。为了之后的操作,SVG需要记录坐标,所以比较缓慢。因为没有记住以后事情的任务,所以Canvas更快。我们可以用绘制对象的相关事件处理我们不能使用绘制对象的相关事件处理,因为我们没有他们的参考分辨率独立分辨率依赖

9HTML5中我们如何实现应用缓存?

答案解析:

首先我们需要指定”manifest”文件,“manifest”文件帮助你定义你的缓存如何工作。以下是”mainfest”文件的结构:

澳门新浦京娱乐游戏 33

所有manifest文件都以“CACHE MANIFEST”语句开始。

#(散列标签)有助于提供缓存文件的版本。

CACHE 命令指出哪些文件需要被缓存。

Mainfest文件的内容类型应是“text/cache-manifest”。

以下是如何在ASP.NET C#使用manifest缓存:

澳门新浦京娱乐游戏 34

创建一个缓存manifest文件以后,接下来的事情实在HTML页面中提供mainfest连接,如下所示:

澳门新浦京娱乐游戏 35

当以上文件第一次运行,他会添加到浏览器应用缓存中,在服务器宕机时,页面从应用缓存中获取。

10本地存储和cookies(储存在用户本地终端上的数据)之间的区别是什么?

答案解析:

CookiesLocal
storage客户端/服务端客户端和服务端都能访问数据。Cookie的数据通过每一个请求发送到服务端。只有本地浏览器端可访问数据,服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器。大小每个cookie有4095byte。每个域5MB。过期Cookies有有效期,所以在过期之后cookie和cookie数据会被删除。没有过期数据,无论最后用户从浏览器删除或者使用Javascript程序删除,我们都需要删除。

11HTML5 为什么只需要写 <!DOCTYPE HTML>?

答案解析:

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

12行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

答案解析:

行内元素:a  b  span  img  input  select  strong

块级元素:div  ul  ol  li  dl  dt  dd  h1  h2  h3  h4  p  等

空元素:<br>  <hr>  <img>  <link> <meta>

13页面导入样式时,使用link和@import有什么区别?

答案解析:

link属于XHTML标签,而@import是css提供的;

页面被加载时,link会同时被加载,而@import引用的css会等到页面被加载完再加载;

@import只在IE5以上才能识别,而link是XHTML标签,无兼容问题;

link方式的样式的权重高于@import的权重。

14html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?

答案解析:

新特性,新增元素:

内容元素: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

处理兼容问题有两种方式:

IE6/IE7/IE8支持通过document方法产生的标签,利用这一特性让这些浏览器支持HTML5新标签。

使用是html5shim框架

另外,DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素,此外,还可以根据新增的结构,功能元素来加以区分。

15如何区分 HTML 和 HTML5?

答案解析:

在文档类型声明上不同:

HTML是很长的一段代码,很难记住,而HTML5却只有简简单单的声明,方便记忆。

在结构语义上不同:

HTML:没有体现结构语义化的标签,通常都是这样来命名的<div
id=”header”></div>,这样表示网站的头部。

HTML5:在语义上却有很大的优势。提供了一些新的标签,比如:<header><article><footer>

16简述一下你对HTML语义化的理解?

答案解析:

用正确的标签做正确的事情

html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析

即使在没有样式css情况下也以一种文档格式显示,并且是容易阅读的

搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO

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

17HTML5的离线储存怎么使用,工作原理能不能解释一下?

答案解析:

localStorage 长期存储数据,浏览器关闭后数据不丢失;

sessionStorage 数据在浏览器关闭后自动删除。

18iframe有那些缺点?

答案解析:

在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面

框架结构有时会让人感到迷惑,页面很混乱

19Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

答案解析:

<!Doctype>声明位于文档中的最前面,处于<html>标签之前。告知浏览器的解析器,用什么文档类型规范来解析这个文档。

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

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

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

20常见兼容性问题?

png24位的图片在IE6浏览器上出现背景

        解决方案:做成PNG8

浏览器默认的 margin 和 padding 不同

        解决方案:加一个全局的*{margin:0;padding:0;}来统一

IE6双边距bug:块属性标签float后,又有横行的 margin 情况下,在 IE6 显示
margin 比设置的大。浮动IE产生的双倍距离
#box{float:left;width:10px;margin:0 0 0 100px;}
这种情况下IE6会产生200px的距离。

        解决方法:加上_display:inline,使浮动忽略

IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。

       解决方法:统一通过getAttribute()获取自定义属性。

IE下,even对象有x,y属性,但是没有pageX,pageY属性,但是没有x,y属性;

     
 解决方法:
(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。

Chrome中文界面下默认会将小于 12px 的文本强制按照 12px 显示

       解决方法:可通过加入 CSS 属性
-webkt-text-size-adjust:none;解决

超链接访问过后 hover 样式就不出现了,被点击访问过的超链接样式不在具有
hover 和 active ;

        解决方法:改变CSS属性的排列顺序:L-V-H-A: a:link{ }
 a:visited{ } a:hover{ } a:active{ } 

21如何实现浏览器内多个标签页之间的通信?

答案解析:

调用localstorge、cookies等本地存储方式

22webSocket如何兼容低浏览器?

答案解析:

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送
XHR 、 基于长轮询的 XHR

23支持HTML5新标签

答案解析:

IE8/IE7/IE6支持通过 document.createElement
方法产生的标签,可以利用这一特性让这些浏览器支持 HTML5
新标签,浏览器支持新标签后,还需要添加标签默认的样式;

当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

<!–[if lt IE 9]> 

<script>
src=”; 

<![endif]–>

24如何区分:DOCTYPE 声明新增的结构元素功能元素,语义化的理解?

答案解析:

用正确的标签做正确的事情;

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

在没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读的;

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利用 SEO ;

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

25介绍一下 CSS 的盒子模型?

答案解析:

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

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

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

答案解析:

id 选择器(#myid)

类选择器(.myclassname)

标签选择器(div,h1,p)

相邻选择器(h1 + p)

子选择器(ul > li)

后代选择器(li a)

通配符选择器(* )

属性选择器( a[rel = “external”])

伪类选择器(a: hover, li: nth – child)

27可继承的样式有哪些?

font-size

font-family color, 

UL

LI 

DL 

DD 

DT

28不可继承的样式有哪些?

border 

padding 

margin 

width 

height

29优先级就近原则

解析答案:

同权重情况下样式定义最近者为准

30载入样式

解析答案:

以最后载入的定位为准;

优先级为: !important >  id > class > tag  ;   important 比
内联优先级高 

31CSS3新增伪类举例:

答案解析:

p:first-of-type   选择属于其父元素的首个 <p> 元素的每个 <p>
元素;

p:last-of-type   选择属于其父元素的最后 <p> 元素的每个 <p>
元素;

p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p>
元素;

p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素;

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

:enabled  :disabled 控制表单控件的禁用状态;

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

32如何居中div? 如何居中一个浮动元素?

答案解析:

给div 设置一个宽度,然后添加 margin:0 auto 属性;div{width:200px;
margin:0 auto; }

33居中一个浮动元素

答案解析:

确定容器的宽高  宽500 高300的层,设置层的外边距

.div{width:500px;height:300px;margin:-150px 0 0
-250px;position:relative;background:green;left:50%;头:50%}

34css3有哪些新特性?

答案解析:

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

35display:inline-block 什么时候会显示间隙?

答案解析:

移除空格,使用margin 负值、使用 font-size:0、letter-spacing
、word-spacing

36使用 CSS 预处理器吗?喜欢哪个?

答案解析:

SASS

37什么是盒子模型?

答案解析:

在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。

这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

38CSS实现垂直水平居中

答案解析:

一道经典的问题,实现方法有很多种,以下是其中一种实现:

HTML结构:

<div class=”content”></div>

</div>

CSS:

    .wrapper{position:relative;}

    .content{

        background-color:#6699FF;

        width:200px;

        height:200px;

        position: absolute;        //父元素需要相对定位

        top: 50%;

        left: 50%;

        margin-top:-100px ;   //二分之一的height,width

        margin-left: -100px;

    }

39简述一下src与href的区别

答案解析:

href
是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

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

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

40简述同步和异步的区别

答案解析:

同步是阻塞模式,异步是非阻塞模式。

同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;

异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

41px和em的区别

答案解析:

px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合:
1em=16px。那么12px=0.75em, 10px=0.625em

42浏览器的内核分别是什么?

答案解析:

IE: trident内核

Firefox:gecko内核

Safari:webkit内核

Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核

Chrome:Blink(基于webkit,Google与Opera Software共同开发)

发表评论

电子邮件地址不会被公开。 必填项已用*标注