html-css-javascript题目集锦-1

>
$.post(url)是ajax请求； 
ajax的事件是： 
ajaxComplete(callback) 
ajaxError(callback) 
ajaxSend(callback) 
ajaxStart(callback) 
ajaxStop(callback) 
ajaxSuccess(callback)

> 包含在 ^{标签和其结束标签} 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。

上标

下标

突出显示

>

---

 ：表示一条横线    
 :可插入一个简单的换行符   产生一个表行

>

JavaScript脚本放在哪里

在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行。

>

change是改变文本框的内容时触发的方法

select是选中时触发的方法

bind是被选元素（class或id）添加一个或多个事件处理程序，并规定事件发生时运行的函数。

>

JSON数据格式与JavaScript中的JSON对象

http://itbilu.com/javascript/js/Vkmh3oeOg.html

> 可置换元素，区别一般inline元素是：这些元素有内在尺寸，可以设置宽高属性，主要指：img.input.textarea.select.object等默认有CSS格式化外表范围的元素！

>

下面这段javascript代码,

class = "lang-js" >var msg= 'hello' ;
for (var i=0; i<10; i++)
{
    var msg= 'hello' +i*2+i;
}
alert(msg);

最后一句alert的输出结果是？

JavaScript没有块作用域，所以说这段代码两个msg属于同一作用域下，第二个变量msg把第一个变量msg覆盖了

正确答案: B   你的答案: A (错误)

hello

hello189

hello30

hello27

对比： var a = 1;
function box(){
var a = 3;
}
box();
alert(a); //1
这不是同一作用域，两个a处的作用域不同。

>

HTML meta标签总结与属性使用介绍

https://segmentfault.com/a/1190000004279791

>

为了解决 AngularJS性能问题，编译阶段应分为两个阶段

1,compile (绑定DOM)   

2,link（数据绑定）。

详情： https://github.com/angular/angular.js/wiki/Understanding-Directives

>

处理a.html文件时，以下哪行伪代码可能导致内存越界或者抛出异常（）

         int totalBlank =  0 ;
         int blankNum =  0 ;
         int taglen = page.taglst.size();
A        for ( int i =  1 ; i < taglen- 1 ; ++i)
        {
                 //check blank
B              while (page.taglst[i] ==  "" && i < taglen)
               {
C                       ++totalBlank;
D                       ++i;
               }
E              if (totalBlank >  10 )
F                      blankNum += totalBlank;
G             totalBlank =  0 ;
        }

注意：以下代码中taglen是html文件中存在元素的个数，a.html中taglen的值是15，page.taglst[i]取的是a.html中的元素，例如page.taglst[1]的值是
a.html的文件如下：

aaaaaaa

正确答案: B   你的答案: D (错误)

>

event.preventDefault();// 取消事件的默认行为  

event.stopPropagation(); // 阻止事件冒泡行为 , 符合 W3C 标准，适用于 FireFox 等

cancelBubble  // 阻止事件冒泡行为，不符合 W3C 标准，适用于 IE

stopImmediatePropagation 防止对事件流中当前节点中和所有后续节点中的事件侦听器进行处理。此方法会立即生效，并且会影响当前节点中的事件侦听器。

stopPropagation  防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理。此方法不会影响当前节点 (currentTarget) 中的任何事件侦听器。

  >> eg:

下列哪个操作是W3C标准定义的阻止事件向父容器传递：

正确答案: C   你的答案: A (错误)

e.preventDefault()

e.cancelBubble=true

e.stopPropagation()

e.stopImmediatePropagation()

>    CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 1.指定要添加效果的CSS属性
• 2.指定效果的持续时间。

• 实例

  应用于宽度属性的过渡效果，时长为 2 秒：

  div
  {
  transition: width 2s;
  -webkit-transition: width 2s; /* Safari */
  }

  
  

  注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。

  指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

  

  实例

  规定当鼠标指针悬浮(:hover)于

  元素上时：

  div:hover
  {
  width:300px;
  }

  
  

详情见

http://www.runoob.com/css3/css3-transitions.html

eg:

>> 在css3中要使元素由一种样式转换成另一种样式，需要使用什么属性？

正确答案: D   你的答案: D (正确)

animation

keyframes

flash

transition

>

iframe可用在以下几个场景中：

1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。 
2：ajax上传文件。 
3：加载别的网站内容，例如google广告，网站流量分析。

4：  在上传图片时，不用flash实现无刷新。

5：  跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

也可参考：

学习HTML：iframe用法总结

http://blog.csdn.net/super_marioli/article/details/4437082

>>   iframe的使用场景有？

正确答案: A B C D   你的答案: A B C (错误)

与第三方域名下的页面共享cookie

上传图片，避免当前页刷新

左边固定右边自适应的布局

资源加载

>

下列关于btn标签的说法正确的是

正确答案: A B C D   你的答案: A C (错误)

btn-group能将按钮组成按钮组

btn-toolbar能将btn做成复杂组件

btn-group可以嵌套使用

可以使用btn-group-lg，btn-group-sm来调整按钮大小

>Javascript异步编程的4种方法

>html5

HTML5 的新的表单元素：

• datalist(兼容性太低) datalist 元素规定输入域的选项列表。 列表是通过 datalist 内的 option 元素创建的。 如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id 实例：

  Webpage: <input type="url" list="url_list" name="link" />
  <datalist id="url_list">
  <option label="W3School" value="http://www.W3School.com.cn" />
  <option label="Google" value="http://www.google.com" />
  <option label="Microsoft" value="http://www.microsoft.com" />
  datalist>
  

• keygen(兼容性太低) keygen 元素的作用是提供一种验证用户的可靠方法。 keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。 私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。 目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。 实例

  <form action="form.php" method="post">
    Username: <input type="text" name="usr_name" />
    Encryption: <keygen name="security" />
    <input type="submit" />
  form>
  

• output(兼容性太低) output 元素用于不同类型的输出，比如计算或脚本输出： 实例

  <output id="result" onforminput="resCalc()">output>

>>  下面哪些是HTML5 新增的表单元素？

正确答案: A C   你的答案: A C (正确)

datalist

optgroup

output

legend

>      

h1. Bootstrap heading Secondary text

	
最大

	表示副标题

>

Navagator：提供有关浏览器的信息

Window：Window对象处于对象层次的最顶层，它提供了处理Navagator窗口的方法和属性

Location：提供了与当前打开的URL一起工作的方法和属性，是一个静态的对象

History：提供了与历史清单有关的信息

Document：包含与文档元素一起工作的对象，它将这些元素封装起来供编程人员使用

下面有关javascript内部对象的描述，正确的有？

正确答案: A B C D   你的答案: A B D (错误)

History 对象包含用户（在浏览器窗口中）访问过的 URL

Location 对象包含有关当前 URL 的信息

Window 对象表示浏览器中打开的窗口

Navigator 对象包含有关浏览器的信息

>

请选出正确的答案

正确答案: A B C   你的答案: A B (错误)

一个id在页面中只能使用一次

一个class可以在一个网页中多次使用

ID和class都能和javascript及CSS一起使用

同一个id或class，都可以在一个网页中出现多次

>

在页面中添加样式的方式有

导入外部样式表是指在内部样式表的 
…… 

正确答案: A B C D   你的答案: A B D (错误)

内联式：即直接加在标签上的样式  如:

导入样式：@import url("css/style.css")

嵌入式：即用标签括起来写在页面中的样式

外部引用式：即将样式单独放到一个文件夹中，然后用link标签引入页面的形式，如：

>bootstrap-css

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
• The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
• Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

通过研究后面的实例，可以将这些原理应用到你的代码中。

媒体查询

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

Copy

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。

Copy

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

实例：从堆叠到水平排列

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

Copy

 class="row">
   class="col-md-1">.col-md-1

class="col-md-1">.col-md-1

class="col-md-1">.col-md-1

class="col-md-1">.col-md-1

class="col-md-1">.col-md-1

class="col-md-1">.col-md-1

class="col-md-1">.col-md-1

class="col-md-1">.col-md-1

class="col-md-1">.col-md-1