前端开发知识总结

时间 2019-12-20

标签前端开发知识总结繁體版

原文原文链接

目录：javascript

1、HTML部分css

2、CSS部分html

3、JavaScript部分前端

4、jQuery部分html5

5、Bootstrap部分java

1、HTML部分web

XHTML和HTML有什么区别

XHTML是一种基本的web网页设计语言，XHTML是一个基于XML的置标语言
XHTML 元素必须被正确的嵌套
XHTML 元素必须被关闭
标签名必须用小写字母
XHTML 文档必须拥有根元素

　　2. 前端页面有哪几层构成，分别是什么？做用是什么？ajax

1.结构层 HTML（页面结构内容）表示层
2. CSS（网页的样式和外观）
3. js（实现网页的交互，动画效果）

　　3. form表单中input标签的readonly和disabled属性有何区别？数据库

readonly=“readonly”是只读，不能够修改， disabled=“disabled”是禁用，整个文本框是显示灰色状态  form中method是数据传递的方式，action是与后台数据库提交的

　　　4.内联标签有哪些？块级标签有哪些？json

行内标签：a b img em br i span input select
块级标签：div p h1-h6 form ul dl ol table

　　5. 内联标签和块级标签有什么区别？

内联标签不能够设置宽高，不独占一行；
块级标签能够设置宽高，独占一行

　　6. 简述form标签的功能和属性

功能：表单用于项服务器传输数据，从而实现用户与web服务器的交互
属性：1. action：表单提交到哪，通常指向服务器端一个程序，程序接收到表单提交过来的数据（即表单元素值）做相应处理；
2.method：表单的提交方式 post/get默认取值是get

　　7. 图形标签是什么，它的主要属性有哪些？

<img>标签 
主要属性：
src：要显示图片的路径
alt：图片没有加载成功时的提示
title：鼠标悬浮时的提示信息
width：图片的宽，height：图片的高（宽高两个属性只有一个会自动等比缩放）

　　8. input标签都有哪些类型　　

TYPE：text 文本输入框
password：密码输入框
radio：单选框
checkbok：多选框
submit：提交按钮
button：按钮（须要配合js使用）
file：提交文件

　　9. input 标签都有哪些属性？

name：表单提交项的键
value：radio 和checkbok 默认被选中
readonly：只读 ， text 和 password
disabled：对所用input均可以使用

　　10. src和href的区别

src：指向外部资源的位置， 用于替换当前元素， 好比js脚本，图片等元素
href：指向网络资源所在的位置，用于在当前文档和引用资源间肯定联系，加载CSS

　　11. 选择器中id ，class有什么区别

在网页中，每一个id名称只能用一次，class能够容许重复使用

2、CSS部分

　　1. CSS的基本语法

由两个主要的部分构成：选择器，以及一条或多条声明

　　2. CSS的引入方式有哪些？

1.内嵌方式：
style标签
<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <style>
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>这是一个p标签！</p>
    </body>
</html>

2. 行内样式
<!doctype html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<p style="color: blue;">这是一个p标签！</p>
</body>
</html>

3.外联样式表-连接式
link标签
p {
  color: green;
}
而后在HTML文件中经过link标签引入：
<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <p>这是一个p标签！</p>
    </body>
</html>

　　3. CSS的选择器有哪些？

1. 基本选择器     通配符选择器    标签选择器    id选择器    类选择器    
2.  组合选择器    子代选择器    后代选择器    群组选择器    交集选择器    毗邻选择器    兄弟选择器
3. 属性选择器

　　4. CSS伪类的做用

CSS伪类是用来添加一些选择器的特殊效果
超连接未被访问时的状态：a:link{background-color:blue;}
鼠标悬停时的状态：a:hover { color:green}
鼠标单击时的状态：a:visited{color:yellow;}
鼠标不松手的状态：a:active{color:blue;}
获取焦点时的状态：input:focus{background-color:red;}

　　5. 什么是CSS优先级，其基本规则是什么？

CSS优先级，是指CSS样式在浏览器中被解析的前后顺序。
基本规则：行内样式 > 内部样式表 > 外部样式表 ID选择器 > 类选择器 > 标签选择器

　　6. CSS隐藏元素的几种方法（至少说出三种）

1.Opacity：元素自己依然占据它本身的位置并对网页的布局起做用。它也将响应用户交互；
2.Visibility: 与opacity惟一不一样的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏
3. Display： Display设为none任何对该元素直接打用户交互操做都不可能生效。此外，读屏软件也很差读到元素的内容。这种方式产生的效果就像元素彻底不存在
4. Position：不会影响布局，能让元素保持能够操做
5. Clip-path： clip-path属性尚未在IE或者Edge下被彻底支持，若是要在你的Clip-path中使用外部的SVG文件，浏览器支持度还要低

　　7. CSS清除浮动的几种方法（至少两种）

1.给父元素添加overflow：hidden（推荐使用）
.wrap{
    overflow:hidden;
}

2.after伪元素（官方推荐）
.wrap:after{
content:"";
clear:both;
display:block;
height:0;
visibility:hidden;
}

3. 给父盒子设定固定高度；缺点：不灵活
4. 给浮动元素最后一个加一个空的块级元素，且该元素为不浮动float：none，设置clear：both，就会撑开盒子
缺点：结构冗余

　　8. 页面导入样式时，使用link和@import有什么区别？

<link rel="stylesheet" type="text/css" href="./css/index.css"> 
<style type="text/css"> @import url('./css/index.css'); </style> 
1，link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel链接属性等做用；而@import是CSS提供的，只能用于加载CSS; 
2，页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; 3，import是CSS2.1提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

　　9. 介绍一个CSS的盒子模型

有两种：IE盒子模型和标签w3c盒子模型
IE的content部分包含border 和 padding；
盒子模型：内容（content），填充（padding），边界（margin），边框（border）

　　10. Display：none和visibility：hidden的区别是什么？

visbility：hidden    ------------ 将元素隐藏，可是还占用位置
Display：none     ------------ 将元素的显示设为无，不占任何的位置

　　11. 设置一个div的最小宽度为100像素，最大高度为50像素

min-width: 100px;
max-height: 50px;

　　12. 在变形CSS样式的赎回，若是想要设置标记容器和主容器之间的补白，用什么来表示？

marker-offset

　　13. CSS属性是否区分大小写？

不区分。（HTML, CSS都不区分，但为了更好的可读性和团队协做，通常都小写，而在XHTML 中元素名称和属性是必须小写的。）

　　14. 对行内元素设置margin-top 和 margin-bottom是否起做用？

不起做用，（须要注意行内元素的替换元素img，input，他们是行内元素，可是能够为其设置宽高，而且margin属性也是对其起做用的，有着相似于Inine-block的行为）
img input 行内块元素，能够设置

　　15. 对内联元素设置padding-top和 padding-bottom是否会增长它的高度？

不会。同上题，要注意行内元素的替换元素，img设置padding-top/bottom是会起做用的。

　　16. screen关键词是指设备的物理屏幕大小仍是浏览器的视窗

浏览器的视窗

　　17. rgba()和Opacity的透明效果有什么不一样？　

rgba()和Opacity都能实现透明效果，但最大的不一样是Opacity做用于元素，以及元素内的全部内容的透明度
而rgba()只做用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果）

　　18. css中可让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height
水平方向：letter-spacing

　　19. 关于letter-spacing的妙用知道吗？

能够用于消除inline-block元素间的换行符空格间隙问题

　　20. px和em的区别？

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em的值不是固定的，而且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。因此未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

　　21. 知道css有个content属性吗？有什么做用？有什么应用？

css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容。
最多见的应用是利用伪类清除浮动。

　　22. 简述css动画的优缺点？

优势：
    1.在性能上会稍微好一些，浏览器会对CSS3的动画作一些优化（好比专门新建一个图层用来跑动画）
    2.代码相对简单
缺点：
    1.在动画控制上不够灵活
    2.兼容性很差
    3.部分动画功能没法实现（如滚动动画，视差滚动等）

3、JavaScript部分

　　1. js的引入方式有哪些？

1. 直接编写
2. 导入文件

　　2.如何在js中定义使用变量？

1. 声明变量时不用声明变量类型，所有使用var关键字
2. 一行能够声明多个变量，而且能够是不一样类型
3. 声明变量时，能够不用var，若是不用var那么它是全局变量
4. 变量命名，首字符只能是字母，下划线，$美圆符 三选一，余下的字符能够是下划线，美圆符号或任何字母或数字字符且区分大小写，x与X是两个变量

　　3. js的基本数据类型有哪些？

1.数字类型（number）
2.字符串类型（string）
3.布尔类型（Boolean）
4.null类型
5.undefined类型

　　4.null和undefined的区别？

null是一个表示“无”的对象，转为数值时为0；
undefined是一个表示“无”的原始值，转为数值时为nan

　　5. js有哪些运算符？

1. 算术运算符(+ - * / % ++ -- )
2. 比较运算符(> >= < <= != == === !==) 
3. 逻辑运算符(&& || ！)
4. 赋值运算符(= += -= *= /=) 
5. 字符串运算符(+ 链接，两边操做数有一个或两个是字符串就作链接运算)

　　6. js的typeof返回哪些数据类型？

number string Object function boolean underfind

　　7. 分别解释数组方法pop()、push()、unshift()、shift()的功能？

shift()头部删除 pop()尾部删除
Unshift()头部添加 push()尾部添加

　　8. ajax请求的时候get和post方式的区别？

get方式参数放在url后面
post放在虚拟载体里面有大小限制

　　9. ajax请求时，如何解释json数据？

使用eval parse，鉴于安全性考虑 使用parse更靠谱

　　10. 事件委托是什么？

事件代理：本身完成不了当前的点击事件，交给父级元素作这件事件
$('ul').on('click','.btn',function(){
})
让利用事件冒泡的原理，让本身的所触发的事件，让他的父元素代替执行

　　11. 添加删除替换插入到某个节点的方法分别是什么？

添加：obj.appendChild()
删除：obj.removeChild()
替换：obj.replaceChild（）
插入：obj.insertBefore（）

　　12. 简述一下什么是JavaScript的同源策略？

通常脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

　　13. 简述一下对this对象的理解

this是js的一个关键字，随着函数使用场合不一样，this的值会发生变化，可是有一个总原则，那就是this指的是调用函数的那个对象
this通常状况下：是全局对象Global，做为方法调用，那么this就是指这个对象

　　14. 编写一个b继承a的方法

function A（name）{
    this.name = name;
    this.sayHello = function(){alert(this.name+"say Hello!");};
}
function B(name,id){
    this.temp = A;
    this.temp(name);
    delete this.temp;
    this.id = id;
    this.checkId= function(ID) {alert(this.id==ID)};
}

　　15. 如何阻止事件冒泡和默认事件

function stopBubble（e）{
if (e && e.stopPropagation)
    e.stopPropagation()
else
    window.event.cancelBubble=true
}
return false

$(function(ev){
    //1.阻止事件冒泡
    ev.stopPropagation()
    //阻止默认事件
    ev.preventDefault();
    //阻止了冒泡和默认
    return false;
});

　　16. 浏览器端的js包括哪几个部分？

核心（ecmascript）
文档对象模型（DOM）
浏览器对象模型（BOM）

　　17. js动画有哪些实现方法?

用定时器setTimeout执行一次和setInterval

　　18. js动画的优缺点？

优势：
    1. 控制能力很强，能够单帧的控制，变换
    2.兼容性好，写的好顽强能够兼容IE6，且功能强大

缺点：
    计算没有css快，另外常常须要依赖其它的库

　　19. 跨域的几种方式？

jsonp（利用script标签的跨域能力）跨域、
websocket（html5的新特性，是一种新协议）跨域、
设置代理服务器（由服务器替咱们向不一样源的服务器请求数据）、
CORS（跨源资源共享，cross origin resource sharing）、
iframe跨域、
postMessage(包含iframe的页面向iframe传递消息)

　　20.div标签，最小宽度为300px，最大高度为200px。背景色默认为绿色，经过点击标签，使div背景颜色红绿来回切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box {
            width: 300px;
            height: 200px;
            background: green;

        }
    </style>
</head>
<body>
    <div class="box">
        div标签
    </div>

</body>
<script type="text/javascript">

    var oBox = document.getElementsByClassName('box')[0];
    console.log(oBox.innerText)
    var a = 1;
    oBox.onclick = function() {
        a++;
        if(a%2==0){
            this.style.background = 'red';

    }else if(a%2==1){
            this.style.background = 'green'
        }

    }
    
</script>
</html>

4、jQuery部分

　　1.jQuery是什么？

jQuery是一个快速的，简洁的JavaScript库，是用能方便的处理HTMLdocuments，events，实现动画效果，而且方便地为网站提供AjAX交互

　　2. jQUery的优点是什么？

它的文档说明很全，并且各类应用也说的很详细，同时还有不少成熟的插件可供选择

　　3.什么是jQUery对象？

jQuery对象就是经过jQuery包装DOM对象后产生的对象。jQUery对象是jQUery独有的，若是一个对象是jQuery对象，那么它就可使用jQUery里的方法：$("#test").html()

　　4.jQuery都有哪些选择器？

1. 基础选择器
id选择器$('#brother').css('color','red');
标签选择器：$('a').css({'color':'green','font-size':'24px'});
类选择器：$('.li3').css('background','yellow');
通配符选择器:console.log($(''));
$('').html('');    // 清空整个界面的dom元素

2.层级选择器
后代选择器：$('#box p').css('color','red');
子代选择器：$('#box>p').css('color','green');
毗邻选择器，匹配全部的紧接着选中元素的兄弟：$('#father+p').css('font-size','30px');
兄弟选择器 $('#father~p').css('background','gray');

3.过滤选择器
获取第一个 $('li:first').css('background','gray');
获取最后一个 $('li:last').css('background','yellow');
获取奇数 $('li:odd').css('color','red');
获取偶数 $('li:even').css('color','green');
选中索引值为1 $('li:eq(1)').css('font-size','32px');
大于索引值1 $('li:gt(1)').css('font-size','60px');
小于索引值1 $('li:lt(1)').css('font-size','10px');

4.属性选择器
$('li[id]').css('color','red');
$('li[class=what]').css('font-size','30px');
$('li[class!=what]').css('font-size','50px');
$('input[name^=username]').css('background','gray');
$('input[name$=222]').css('background','green');
$('button[class*=danger]').css('background','orange');

解释：
        标签名【属性名】，查找全部含有id属性的该标签名的元素
        匹配给定的属性 是what值 【attr=value】 匹配给定的属性是某个特定值的元素
        没有class也会发生变化，[attr!=value]匹配全部不包含有特定的属性，或者属性不等于特定值的元素
        匹配给定的属性是以某些值开始的元素   ^ 
        匹配给定的属性是以某些值结尾的元素   $
        匹配给定的属性是以包含某些值的元素    *

　　5.筛选选择器

$('span').eq(1).css('color','red');
$('span').first().css('font-size','28px');
$('span').last().css('color','greenyellow');
console.log($('span').parent());
$('span').parent('.p1').css({'width':'300px',height:'400px','background':'red'});
$('.list').siblings('li').css('color','red');
$('div').find('button').css('background','gray');


解释：
    获取第n个元素 数值从0开始 .eq()
    获取第一个元素    .first()
    获取最后一个元素    .last()
    获取父元素       .parent()
    选择全部的兄弟元素        .siblings（）
    查找全部的后代元素    .find()

　　6. 简述一下jQuery的筛选器的分类，分别简单举例介绍一下。

过滤筛选器 如：$("li").eq(2) $("li").first() $("ul li").hasclass("test") 
查找筛选器 如： 查找子标签： $("div").children(".test") $("div").find(".test") 
向下查找兄弟标签： $(".test").next() $(".test").nextAll() $(".test").nextUntil() 
向上查找兄弟标签： $("div").prev() $("div").prevAll() $("div").prevUntil() 
查找全部兄弟标签： $("div").siblings()
查找父标签： $(".test").parent() $(".test").parents() $(".test").parentUntil()

　　7. jQuery的美圆符号$有什么做用？

其实美圆符号$只是“jQuery”的别名，它是jQuery的选择器

　　8. body中的onload（）函数和jQuery中的document.ready()有什么区别？

1. 咱们能够在页面中使用多个document.ready(),但只能使用一次onload()
2. document.ready()函数在页面DOM元素加载完之后就会被调用，而onload（）函数则要在全部的关联资源（包括图像，音频）加载完毕后才会调用

　　9.jQuery中的Delegate（）函数有什么做用？

1. 若是你有一个父元素，须要给其下的子元素添加事件，这时你可使用delegate（）了，代码以下：
$("ul").delegate("li","click",function(){
$(this).hide();
});
2. 当元素在当前页面中不可用时，可使用delegate（）
//事件代理：本身完成不了当前的点击事件，交给父级元素作这件事件
//事件代理
$('ul').on('click','.name,.luffy',function(){
console.log($(this));
});

　　10. 请用jQuery实现，在一个表单中，若是将全部的div元素都设置为绿色

$("div").css("color","green")

　　11. jQUery中的hover（）和toggle（）有什么区别？

hover（）和toggle（）都是jQuery中两个合成事件
hover（）方法用于模拟光标悬停事件
toggle()方法是连续点击事件

　　12. jQuery表单提交前有几种校验方法？分别为？

formData：返回一个数组，能够经过循环调用来校验
jaForm：返回一个jQuery对象，全部须要先转换成dom对象
fileValue：返回一个数组
beforeSend（）

　　13. $(this) 和 this 关键字在 jQuery 中有何不一样？

$(this)返回一个jQuery对象，你能够对它调用多个jQuery方法，好比用text（）获取文本，用val（）获取值等
this 表明当前元素，它是JavaScript关键词中的一个，表示上下文中的当前dom元素。你不能对它调用jQuery方法，直到它被$()函数包囊，例如：$(this)

　　14. jQuery中 detach() 和 remove() 方法的区别是什么？

detach() 和 remove() 方法都被用来移除一个DOM元素，二者之间的主要不一样在于：
detach() 会保持对过去被解除元素的跟踪，所以它能够被取消解除
remove（） 方法则会保持过去被移除对象的引用，你也还能够看看 用来向DOM中添加元素的appendTO（）方法


var a = $('button').remove();
console.log(a[0],a[1]);
$('ul').append(a[0]);         // 时间没了


var b = $('button').detach();
console.log(b[0]);
$('ul').append(b[0]);         //事件会保留

　　15. 你要是在一个 jQuery 事件处理程序里返回了 false 会怎样？

这一般用于阻止事件向上冒泡

　　16. 如何在点击一个按钮时使用 jQuery 隐藏一个图片？

$('ButtonToClick').click(function(){
    $('#ImageToHide').hide();
});

　　17. jQuery.get() 和 jQuery.ajax()方法之间的区别是什么?

ajax（）方法更强大，更具可配置性，让你能够指定等待多久，以及如何处理错误。
get（）方法是一个只获取一些数据的专门化方法

　　18. 用jQuery如何将一个 HTML 元素添加到 DOM 树中的？

经过appendTo（）方法在指定的DOM元素末尾添加一个现存的元素或者一个新的HTML元素
$('<a href='#'>luffy</a>').appendTo($('ul'));
append appendTo
prepend prependTo
before  insertBefore  after  insertAfter
clone   replaceWith  replaceAll
empty  remove  detach

　　19. 如何找到全部HTML select标签的选中项？

$('[name=NameOfSelectedTag]:selected')
这段代码结合使用了属性选择器和：selected选择器，结果只返回被选中的选项。你可按需修改它，好比用id属性而不是name属性来获取<select>标签

　　20. remove（）和empty（）的区别？

remove：删除节点，并删除元素节点绑定的事件
empty：清空节点元素的内容，可是节点还存在，只是内容被清空，相似$().html('')

　　21. 在jQuery中你是如何去操做样式的？

addClass（）来追加样式
removeClass（）：删除样式
toggle（）：切换样式

　　22. 简述beforeSend方法有的做用？

发送请求前能够修改XMLHTTPRequest对象的函数，在beforeSend中，若是返回false，能够取消本次的ajax请求，XMLHTTPRequest对象是惟一的参数，因此在这个方法里能够作验证

　　23. jQuery对象和dom对象是怎样转换的？

jQuery转dom对象：jQuery对象是一个数组对象，能够经过[index]的丰富获得相应的DOM对象，还能够经过get[index]去获得相应的DOM对象
DOM对象转jQuery对象：$(DOM对象）

　　24. radio单选选组的第二个元素为当前选中值，该怎么去取？

$('input[name=items]').get(1).checked = true;

　　25. 在ajax中data主要有几种方式？

三种，
html拼接的，
json数组，
form表单经serialize()序列化的

　　26. jQuery 中的方法链是什么？使用方法链有什么好处？

方法链是对一个方法返回的结果调用另外一个方法，这使得代码简洁明了，同时因为只对 DOM 进行了一轮查找，性能方面更加出色

　　27. 哪一种方式更高效：document.getElementbyId("myId") 仍是 $("#myId")？

第一种，由于它直接调用了 JavaScript 引擎。

5、Bootstrap部分

　　1.什么是 Bootstrap？

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

　　2. 为何使用 Bootstrap？

移动设备优先 浏览器支持 容易上手 响应式设计 它为开发人员建立接口提供了一个简洁统一的解决方案。 它包含了功能强大的内置组件，易于定制。 它还提供了基于 Web 的定制。 它是开源的。

　　3. Bootstrap 包含哪些内容？

1. 基本结构：Bootstrap 提供了一个带有网格系统、连接样式、背景的基本结构。
2. CSS：Bootstrap 自带如下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。 
3. 组件：Bootstrap 包含了十几个可重用的组件，用于建立图像、下拉菜单、导航、警告框、弹出框等等。
4. JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您能够直接包含全部的插件，也能够逐个包含这些插件。 
5. 定制：您能够定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来获得您本身的版本。

　　4. Bootstrap HTML编码规范语法。

1. 用两个空格来代替制表符（tab） -- 这是惟一能保证在全部环境下得到一致展示的方法。 2. 嵌套元素应当缩进一次（即两个空格）。 
3. 对于属性的定义，确保所有使用双引号，毫不要使用单引号。 
4. 不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。 
5. 不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。

　　5. Bootstrap CSS编码规范语法。

1. 用两个空格来代替制表符（tab） -- 这是惟一能保证在全部环境下得到一致展示的方法。
2.为选择器分组时，将单独的选择器单独放在一行。 
3. 为了代码的易读性，在每一个声明块的左花括号前添加一个空格。 
4. 声明块的右花括号应当单独成行。 
5. 每条声明语句的 : 后应该插入一个空格。
6. 为了得到更准确的错误报告，每条声明都应该独占一行。 
7. 全部声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，可是，若是省略这个分号，你的代码可能更易出错。 
8. 对于以逗号分隔的属性值，每一个逗号后面都应该插入一个空格（例如，box-shadow）。,
9. 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。 
10.，对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。 
11. 十六进制值应该所有小写，例如，#fff。在扫描文档时，小写字符易于分辨，由于他们的形式更易于区分。
12. 尽可能使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。 
13. 为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些状况下是可选的，可是，为了代码的一致性，建议都加上双引号。 
14. 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

　　6. 让中的每一行对鼠标悬停状态做出响应的类名是什么？

table-hover

　　7. 让表格更加紧凑，单元格中的内补（padding）均会减半的类名是什么？

table-condensed

　　8. 输入框设置 readonly 后的结果是什么？

禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框同样），可是仍然保留标准的鼠标状态。

　　9. 输入框设置 disabled 属性后的结果是什么？

禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，而且还添加了 not-allowed 鼠标状态。

　　10. 简述下button都有哪些经常使用的状态，及类名分别是什么？

默认样式    btn-default
首选项  btn-primary
成功    btn-success
通常信息    btn-info
警告    btn-warning
危险    btn-danger
连接    btn-link

　　11. 为元素添加什么属性，使其表现出禁用状态？

disabled

　　12. 经常使用的情境背景色都有哪些，并把类名写出？

首选项  bg-primary
成功    bg-success
通常信息    bg-info
警告    bg-warning
危险    bg-danger

　　13. 简述 .show 和 .hidden 类的做用？

能够强制任意元素显示或隐藏(对于屏幕阅读器也能起效)

　　14. 在bootstrap中被删除的文本使用什么标签？

<del>

　　15. 在bootstrap中无用文本使用什么标签？

<s>

　　16. 在bootstrap中额外插入的文本使用什么标签？

<ins>

　　17. 在bootstrap中为文本添加下划线使用什么标签？

<u>

　　18. 在bootstrap中给以内的每一行增长斑马条纹样式类名是什么？

table-striped

　　19 . 简介一下栅格系统

栅格系统用于经过一系列的行（row）与列（column）的组合来建立页面布局，你的内容就能够放入这些建立好的布局中,系统会自动分为最多12列。

　　20. 在bootstrap中让段落突出显示的类名是什么？

lead