2018-12.1第一次练习
1.下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度：display:block
display属性 :
block : CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行 可以定义高度和宽度
none : CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline : CSS1 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行
inline-block : IE5.5 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内 inherit: 看display默认是不具备继承性的，使用inherit可以让其继承父对象的display属性。
2.css属性overflow属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。——true
参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。
3.新窗口打开网页，用到以下哪个值：_blank
5.flash和js通过什么类如何交互——ExternalInterface
Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback。
call的作用是让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。
6.alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字
alt是html标签的属性，而title既是html标签，又是html属性。
title标签这个不用多说，网页的标题就是写在
title作为属性时，用来为元素提供额外说明信息。
例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。
alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。
7.js可以让一个input的背景颜色变成红色的是：inputElement.style.backgroundColor = ‘red’;
8.有关html5标签
<audio> 标签定义声音，比如音乐或其他音频流。
<canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
<menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。
command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。
9
CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。
◆position:static 无定位
该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。
◆position:absolute 绝对定位
使用position:absolute，能够很准确的将元素移动到你想要的位置，
◆position:fixed 相对于窗口的固定定位
这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。
请特别注意，IE6不支持CSS中的position:fixed属性。真的非常遗憾，要不然我们就可以试试这种酷酷的效果了。
◆position:relative 相对定位
所谓相对定位到底是什么意思呢，是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。
10
只要 协议 、 域名 、 端口 有任何一个 不同, 都被当作是 不同 的域。
①.CORS
CORS（Corss-Origin Resource Sharing,跨资源共享），基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应的成功或失败。即给请求附加一个额外的Origin头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部决定是否给予响应。
②.document.domain
将页面的document.domain设置为相同的值，页面间可以互相访问对方的JavaScript对象。
注意：
不能将值设置为URL中不包含的域；
松散的域名不能再设置为紧绷的域名。
③.图像Ping
var img=new Image();
img.onload=img.onerror=function(){
… …
}
img.src=“url?name=value”;
请求数据通过查询字符串的形式发送，响应可以是任意内容，通常是像素图或204响应。
图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。
缺点：
只能发送GET请求；
无法访问服务器的响应文本，只能用于浏览器与服务器间的单向通信。
④.Jsonp
var script=document.createElement(“script”);
script.src=“url?callback=handleResponse”;
document.body.insertBefore(script,document.body.firstChild);
JSONP由两部分组成：回调函数和数据
回调函数是接收到响应时应该在页面中调用的函数，其名字一般在请求中指定。
数据是传入回调函数中的JSON数据。
优点：
能够直接访问响应文本，可用于浏览器与服务器间的双向通信。
缺点：
JSONP从其他域中加载代码执行，其他域可能不安全；
难以确定JSONP请求是否失败。
⑤.Comet
Comet可实现服务器向浏览器推送数据。
Comet是实现方式：长轮询和流
短轮询即浏览器定时向服务器发送请求，看有没有数据更新。
长轮询即浏览器向服务器发送一个请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据后，浏览器关闭连接，随即又向服务器发起一个新请求。其优点是所有浏览器都支持，使用XHR对象和setTimeout()即可实现。
流即浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据，页面的整个生命周期内只使用一个HTTP连接。
⑥.WebSocket
WebSocket可在一个单独的持久连接上提供全双工、双向通信。
WebSocket使用自定义协议，未加密的连接时ws://；加密的链接是wss://。
var webSocket=new WebSocket(“ws://”);
webSocket.send(message);
webSocket.onmessage=function(event){
var data=event.data;
… …
}
注意：
必须给WebSocket构造函数传入绝对URL；
WebSocket可以打开任何站点的连接，是否会与某个域中的页面通信，完全取决于服务器；
WebSocket只能发送纯文本数据，对于复杂的数据结构，在发送之前必须进行序列化JSON.stringify(message))。
优点：
在客户端和服务器之间发送非常少的数据，减少字节开销。
廖雪峰教程
11.闭包
12.局部变量和参
14.面有关javascript系统方法的描述，错误的是？
正确答案: B 你的答案: C (错误)
A.parseFloat方法：该方法将一个字符串转换成对应的小数
B.isNaN方法：该方法用于检测参数是否为数值型，如果是，返回true，否则，返回false。
C.escape方法： 该方法返回对一个字符串编码后的结果字符串
D.eval方法：该方法将某个参数字符串作为一个JavaScript执行
解析：
B;
NaN,即非数值（Not a Number）是一个特殊的数值，这个数值用来表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。
针对NaN的特点，ECMAScript定义了isNaN（）函数。这个函数接受一个参数，该参数可以是任何类型，而函数会帮我们确定这个参数是否“不是数值”。isNaN（）在接受一个值后，会尝试将这个值转换为数值。某些不是数值的值会直接转换为数值，例如字符串“10”或Boolean值。而任何不能被转换为数值的值都会导致这个函数返回true。
16.下面有关HTML的Doctype和严格模式与混杂模式的描述，错误的是？
DOCTYPE不存在或格式不正确会导致文档以标准模式呈现
解析：
文档类型
DTD（文档类型定义）是一组机器可读的规则，他们定义 XML 或 HTML 的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的 DOCTYPE 声明来了解要使用哪个 DTD ，由此知道要使用 HTML 的哪个版本。
DOCTYPE 当前有两种风格，严格（ strict ）和过渡（ transitional ）。过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本。
如果发送具有正确的 MIME 类型的 XHTML 文档，理解 XML 的浏览器将不显示无效的页面。
浏览器模式
浏览器有两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
DOCTYPE 切换
对于 HTML 4.01 文档，
包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。
包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。
但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。
DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。
17.
解析：
B；
call（）方法和apply（）方法的作用相同，他们的区别在于接收参数的方式不同。对于call（），第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。（在使用call（）方法时，传递给函数的参数必须逐个列举出来。使用apply（）时，传递给函数的是参数数组）如下代码做出解释：
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
18.
解析：
C:当定义border:none时，表示无边框样式，浏览器并不会对边框进行渲染，也就没有实际的宽度；
D:定义边框时，除了设置宽度外，还必须设置边框的样式才能显示出来。
19.
解析：
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。所以C错误
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
20.下面列出的浏览器，无webkit内核的是（）
正确答案: D 你的答案: C (错误)
A.chrome
B.Safari
C.搜狗浏览器
D.firefox
解析：
D
Wekbit是一个开源的Web浏览器引擎，也就是浏览器的内核。Apple的Safari, Google的Chrome, Nokia S60平台的默认浏览器，Apple手机的默认浏览器，Android手机的默认浏览器均采用的Webkit作为器浏览器内核。Webkit的采用程度由 此可见一斑，理所当然的成为了当今主流的三大浏览器内核之一。另外两个分别是Gecko和Trident，大名鼎鼎的Firefox便是使用的Gecko 内核，而微软的IE系列则使用的是Trident内核。
另外，搜狗浏览器是双核的，双核并不是指一个页面由2个内核同时处理,而是所有网页（通常是标准通用标记语言的应用超文本标记语言）由webkit内核处理,只有银行网站用IE内核
2018-12.3 第二次练习
1.
【数据类型(默认:智能猜测(xml、json、脚本或html))
类型:字符串
您期望从服务器返回的数据类型。如果没有指定，jQuery将尝试根据响应的MIME类型推断它(XML MIME类型将生成XML, 1.4 JSON将生成JavaScript对象，1.4脚本将执行脚本，其他任何内容都将作为字符串返回)。可用类型(以及作为成功回调的第一个参数传递的结果)是:
“xml”:返回一个可以通过jQuery处理的xml文档。
“html”:以纯文本形式返回html;所包含的脚本标记在插入DOM时进行计算。
“script”:将响应计算为JavaScript并以纯文本形式返回。通过向URL添加查询字符串参数“=[TIMESTAMP]”来禁用缓存，除非缓存选项设置为true。注意:这将把post转换为远程域请求的get。
“json”:将响应计算为json并返回一个JavaScript对象。JSON数据被严格解析;任何格式不正确的JSON都会被拒绝，并引发解析错误。在jQuery 1.9中，空响应也会被拒绝;服务器应该返回null或{}的响应。(有关正确JSON格式的更多信息，请参见json.org。)
“jsonp”:使用jsonp加载JSON块。在URL的末尾添加一个额外的“?callback=?”来指定回调。通过向URL添加查询字符串参数“=[TIMESTAMP]”来禁用缓存，除非缓存选项设置为true。
“文本”:纯文本字符串。
多个空格分隔的值:从jQuery 1.5开始，jQuery可以将内容类型标头中接收到的数据类型转换为您需要的数据类型。例如，如果希望将文本响应作为XML处理，则对数据类型使用“text XML”。您还可以发出一个JSONP请求，将其作为文本接收，并由jQuery将其解释为XML:“JSONP text XML”。类似地，像“jsonp xml”这样的简写字符串将首先尝试从jsonp转换为xml，如果失败，将从jsonp转换为文本，然后从文本转换为xml。】
$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待。
通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。
2.
JS 中值的类型分为原始值类型和对象类型。
原始值类型包括 number, string, boolean, null 和 undefined；对象类型即 object。
首先原始值类型它就不是对象。
另外，要注意 ‘hello’ 和 new String(‘hello’) 的区别，前者是字符串字面值，属于原始类型，而后者是对象。用 typeof 运算符返回的值也是完全不一样的：
typeof 'hello'; // 'string'
typeof new String('hello'); // 'object'
之所以很多人分不清字符串字面值和 String 对象，归根结底就是 JS 的语法对你们太过纵容了。当执行 ‘hello’.length 时，发现可以意料之中的返回 5，其实，这是由于 JS 在执行到这条语句的时候，内部将 ‘hello’ 包装成了一个 String 对象，执行完后，再把这个对象丢弃了，这种语法叫做 “装箱”，在其他面向对象语言里也有（如 C#）。不要认为 JS 帮你装箱了，你就可以在写代码的时候不分箱里箱外了！
3.常见的浏览器端的存储技术有哪些？—cookie、localStorage、userData
【cookie 是靠谱的浏览器都支持；
localStorge 比 cookie 存的更多，获取更方便，而且存储内容不会随请求发送给服务器；
session 虽然需要 cookie 支持（通常存放加密过的 sessionId），但是不在浏览器端存放主要信息，排除；
IE 支持 userData 存储数据，但是基本很少使用到，除非有很强的浏览器兼容需求。】
4.JavaScript中有5种简单数据类型（也称为基本数据类型）： Undefined、Null、Boolean、Number和String 。还有1种复杂数据类型—— Object ，Object本质上是由一组无序的名值对组成的。
7.在bootstrap中， 关于导航条，下列说法正确的是?
正确答案: A B C D 你的答案: B D (错误)
A应该将被包裹的元素放到navbar-collapse类中
B表单应该放置于navbar-form内
C可以使用navbar-left和navbar-right来对齐导航条
D可以使用navbar-fixed-top和navbar-fixed-bottom来将导航条固定到顶部或底部
9.下面关于IE、FF下面脚本的区别描述错误的是？
正确答案: A B D 你的答案: C (错误)
A.innerText IE支持，FIREFOX不支持
B.document.createElement FIREFOX支持，IE不支持
C.setAttribute(‘class’，‘styleClass’) FIREFOX支持，IE不支持
D.用setAttribute设置事件 FIREFOX不支持，IE支持
[在 IE8(S) Firefox Chrome Safari Opera 中，结果符合规范。
而在 IE6 IE7 IE8(Q) 中，无法通过 setAttribute 方法传入一段代码字符串设置一个元素的内联事件，而必须传入一个 function 类型的对象；
获取一个已有的内联事件的属性值也是 function 类型，而不是规范中的字符串类型。]
10.下面有关javascript内部对象的描述，正确的有？
正确答案: A B C D 你的答案: A B D (错误)
A.History 对象包含用户（在浏览器窗口中）访问过的 URL
B.Location 对象包含有关当前 URL 的信息
C.Window 对象表示浏览器中打开的窗口
D.Navigator 对象包含有关浏览器的信息
11.嵌入在HTML文档中的图像格式可以是？
正确答案: A C D 你的答案: A D (错误)
A..gif
B..tif
C..bmp
D..jpg
[网页html文档支持的图片格式有jpg , gif , png 和 bmp 这四种。
jpg ， gif 和 png 格式的图片特点是体积很小，因为在网上很常见，
然而 bmp就不常见了，因为这种格式虽然很清晰色彩丰富，但是所占内存很大，所以很少见，但是也是支持的。一共这4种。]
12.CSS3新增属性用法整理：
1、box-shadow（阴影效果）
2、border-color（为边框设置多种颜色）
3、border-image（图片边框）
4、text-shadow（文本阴影）
5、text-overflow（文本截断）
6、word-wrap（自动换行）
7、border-radius（圆角边框）
8、opacity（透明度）
9、box-sizing（控制盒模型的组成模式）
10、resize（元素缩放）
11、outline（外边框）
12、background-size（指定背景图片尺寸）
13、background-origin（指定背景图片从哪里开始显示）
14、background-clip（指定背景图片从什么位置开始裁剪）
15、background（为一个元素指定多个背景）
16、hsl（通过色调、饱和度、亮度来指定颜色颜色值）
17、hsla（在hsl的基础上增加透明度设置）
18、rgba（基于rgb设置颜色，a设置透明度）
css3新增标签
14.问一份标准的HTML文档有哪几个必须的HTML标签？
正确答案: A B C D 你的答案: A B D (错误)
编程题
1.请给Array本地对象增加一个原型方法，它用于删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。
Array.prototype.distinct = function() {
var ret = [];
for (var i = 0; i < this.length; i++)
{
for (var j = i+1; j < this.length;) {
if (this[i] === this[j]) {
ret.push(this.splice(j, 1)[0]);
} else {
j++;
}
}
}
return ret;
}
//for test
alert(['a','b','c','d','b','a','e'].distinct());
2.请填充代码，使mySort()能使传入的参数按照从小到大的顺序显示出来。
function mySort() {
var tags = new Array();//使用数组作为参数存储容器
请补充你的代码
return tags;//返回已经排序的数组
}
var result = mySort(50,11,16,32,24,99,57,100);/传入参数个数不确定
console.info(result);//显示结果
插入代码：
function mySort() {
var tags = new Array();
for(var i = 0;i < arguments.length;i++) {
tags.push(arguments[i]);
}
tags.sort(function(compare1,compare2) {
return compare1- compare2;
});
return tags;
}
var result = mySort(50,11,16,32,24,99,57,100);
console.info(result);
3.用javascript实现用户登录验证的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单from校验</title>
<style>
</style>
</head>
<body>
<form id="form1" action="" method="get">
<input name="text1" type="text" value="" placeholder="name">
<br>
<input type="password" name="pwd" placeholder="密码">
<br>
<input name="text3" value="submit" type="submit" onclick="subimtonclick()">
</form>
<script language="JavaScript">
function subimtonclick(){
var form1=document.getElementById('form1');
if(form1.text1.value==""){
alert("用户名不能为空");
form1.text1.focus();
return;
}
if(form1.text1.value.length<6 || form1.text1.value.length>10){
alert("用户名不能少于六个字符，不能超过十个字符");
form1.text1.focus();
return;
}
if(form1.pwd.value==""){
alert("密码不能为空");
form1.pwd.focus();
return;
}
if(form1.pwd.value.length<6 || form1.pwd.value.length>10){
alert("密码不能少于六个字符，不能超过十个字符");
form1.pwd.focus();
return;
}
var str="用户名："+form1.text1.value+"<br>"+
"密码："+form1.pwd.value+"<br>";
document.writeln(str);
}
</script>
</body>
</html>