知识总结
每走过一段路，我们都有一个习惯，去回忆路上的每一件值得留下记忆的事物。学习当然也是如此，每次学习完一门新的知识，也总有重新去回想学习的过程，以便留下更深的记忆。更好的去掌握所学的知识。这就是学习总结的作用。
经过一段不算长也不算短的时间，我们初步的接触到了基础的编程语言，了解到了这份外行人看似神秘的工作，程序员。当然这只是一个初步的了解和掌握阶段，距离成为一个真正的程序员还是有一段比较远的距离的。
我们来聊聊学习的过程和体会，互相借鉴和相互提高，学习和分享其中的乐趣和学习知识的方式方法，一起进步，更好的认识和了解。
首先我们先从HTML开始说起。这是每个想了解编程语言都必须先了解的一个基础门类。（这是个人见解）
HTML：是一个超文本标记（标签）语言。
HTML的标记格式
双边标记和单边标记
双边标记：
有开始也有结束
格式：<标记名 属性=“属性值” 属性=“属性值”>内容</标记名>
单边标记：
只有开始没有结束
格式：<标记名 属性=“属性值” 属性=“属性值”>
单边标记一般都是起到一些特殊的作用 比如：换行 水平线
注意：HTML网页它只认识标记 只能解析标记
属性与属性值的解释：
比如一个人 是不是应该有姓名、有身高、有体重、有性别
一、 HTML网页的语法规则
所有的HTML标记都是放在一对<>尖括号里面 这一对尖括号必须英文状态下
HTML标记名是不区分大小写 但是建议使用小写
如果标记有属性 那么属性一定是写在开始标记里面 而不是写结束标记里面
属性与标记名之间最少要有一个空格 属性与属性之间也需要有一个空格
标记与标记之间的嵌套 只能使用顺序嵌套
如果属性有属性值 那么建议属性值加上引号
HTML网页结构
HTML网页至少有三对标记组成
<html>
<head></head>
<body></body>
</html>
body标记的常见属性
| 属性名 | 功能 |
| background | 给网页来设置背景图片 默认会进行平铺 水平方向和垂直方向都会进行平铺 |
| bgColor | 给网页设置背景颜色 |
注释
HTML里面的注释
格式：
<!--注释的内容-->
注释的作用：
1、 起到一个解释性说明
2、 起到调试代码的作用
文本与字体修饰标记
| 标记名 | 功能 |
| <b></b>或者<strong></strong> | 对文本进行加粗 |
| <i></i>或<em></em> | 将文本设置为斜体 |
| <u></u>或者<ins></ins> | 给文本设置下划线 |
| <s></s>或者<del></del> | 删除线 |
| <sup></sup> | 上标 |
| <sub></sub> | 下标 |
| <font></font> 常见的属性 face：用来设置字体 size：用来设置字体大小 取值：1~7 1小7大 color：用来设置颜色 | 给文本设置字体 设置字体大小 设置颜色 |
排版标记
l 标题标记：<h1></h1>~<h6></h6> 1大6小
l 段落标记：<p></p> 属性：align 设置里面的内容水平方向对齐 取值：left (默认值)|center |right
l 换行标记：<br>
l 水平线：<hr >
n color 设置水平线的颜色
n size 设置水平线的粗细
n width 设置水平线的长度
n align 设置水平线线水平对齐方式 取值：left |center(默认值) |right
n noshade 去阴影 因为这个属性没有属性值
预排版标记：<pre></pre> 保留了空格与换行
字符实体
表示一个英文状态下半角的空格
× 乘号
÷ 除号
> >
< <
¥ 人民币
& &
© 版权符号
® 注册符号
列表
l 无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
l 有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
l 定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
跑马灯标记
<marquee></marquee>
常见属性：
l direction：滚动的方向 取值 left(默认值 从右向左进行滚动)、right、up、down
l behavior：滚动的方式 取值：scroll(滚动 默认值) slide(滑动 只滚动一次) alternate(弹动 打乒乓球一样 )
l width：设置宽度
l height：设置高度
l bgColor：设置背景颜色
l scrollAmount：滚动的步长值 一步走多远 值越大速度越快
一、 head标记
title标记
l 这个标记的作用是用来显示网页的标题
meta标记
它主要的作用：
n 它告诉浏览器要使用什么编码来解析当前的文档
n 它可以实现网页刷新
n 它可以实现网页跳转
n 它还可以实现SEO优化
告诉浏览器要使用什么编码来解析当前的文档
l <meta http-equiv="Content-Type" content="text/html;charset=字符编码 ">
如何去解决乱码问题？
1、 编辑器的编码环境要与代码里面的内容是一致
2、 要告诉浏览器使用编辑器的编码环境来解析当前的HTML文件
超级链接
<a href=”要链接的目标地址URL” target=”_self|_blank”>文字或者图片</a>
相对路径
平级关系 当前文件与目标文件在同一个文件夹里面
上级关系 目标文件在当前文件的上一级
下级关系 目标文件在当前文件的下一级
上级关系 ： ../表示上一级
../../表示上两级
锚点链接
要实现锚点链接需要两步：
第一步：要定义锚点
<a name=”锚点名”></a>或者<a id=”锚点名”></a>
第二步：要找到定义的锚点链接
<a href=”#锚点名”>文字或者图片 </a>
图片标记
<img />
src：图片的URL地址
alt：如果图片不存在的时候 显示的文字信息 有利于SEO优化
title：当鼠标放上图片上面时 显示的文字信息
表格
表格的标记：
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
结构标记的说明：
l <table></table>它表示表格
l <tr></tr>它表示表格中的行 一个表格中有多少行 就应该有多少对tr标记
l <td></td>它表示行中的单元格 一行中有多少个单元格 就应该有多少对td标记
l <th></th>它也是表示行中的单元格 它表示的是标题单元格 它里面的文字会加粗和居中显示
table标记的属性
l border：表格的边框 取值：1~n
l borderColor：表格中边框的颜色
l width：设置表格的宽度 取值：固定值或者百分比 百分比它是相对于当前元素的父元素来作为标准
l height：设置表格的高度 但是这个属性一般不建议使用
l align：设置表格的水平对齐方式 取值：left(默认值)|right|center
l bgColor：设置表格的背景颜色
l background：设置表格的背景图片
l cellpadding：表格中单元格里面的内容到单元格边框之间的距离
l cellspacing：表格中单元格与单元格之间的距离
注意：表格默认是没有边框的 表格默认是有cellpadding与cellspacing
tr的常见属性
l bgColor：设置行的背景颜色
l background：设置行的背景图片
l width：设置行的宽度
l height：设置行的高度
l align：设置行中的内容水平方向对齐方式 取值：left(默认值)|center|right
l valign：设置行中的内容垂直方向对齐方式 取值：top(顶部对齐)|middle(默认值) 中间对齐 |bottom 底部对齐
td或者th的常见属性
width：设置单元格的宽度
height：设置单元格的高度
bgColor：设置单元格的背景颜色
background：设置单元格的背景图片
rowspan：跨行合并单元格
colspan：跨列合并单元格
注意：
l 首先要明确是跨行还是跨列
l 其实要开始在第一个合并单元格里面写属性
l 要减去对应的单元格的数量 n-1
一、 图像热点
给一张图片增加多个超级链接
给一张图片设置一个超级链接
<a href=”#”><img src=”图片”/></a>
一定先要有图片
格式：
<img src=”图片的地址” usemap=”#名称”>
<map name=”它要和img标记里面的usemap的属性值一样”>
<area shape coords=”” href=”” title=”当鼠标放上图片上面时显示的文字”/>
<area />
<area />
</map>
area标记的属性：
shape：表示区域里面的形状 取值：rect(矩形)、circle(圆形)、poly(多边形)
coords：坐标值
如果形状设置为 rect(矩形)时 那么坐标值应该有4个:x1,y1,x2,y2
如果形状设置为 circle(圆形)时 那么坐标值应该有3个:x1,y1,r
如果形状设置为 poly(多边形)时 那么坐标值应该有根据多少边来决定
表单控件
注意：
n 表单控件只有放上form标记里面它们才有表单的效果
n 如果说需要将某个表单数据提交给PHP程序来进行处理的话 那么一定要写name属性 如果说某个表单数据不想让其提交给PHP程序来进行处理的话 那么就不要写name属性
单行文本框：
<input type=”text” name=”名称” value=”值” size=”设置长度”/>
在这里value属性值指的是用户输入的数据
明文显示出来
单行密码框：
<input type=”password” name=”名称” value=”值” size=”设置长度”>
以小黑点显示的
单选按钮：
<input type=”radio” name=”名称” value=”值” disabled=”disabled”/>
一组单选按钮它应该是一组相互排斥的按钮 只能选一个
一组单选按钮要实现只能选择一个 只需要将这一组单选按钮 name属性值要一样
单选按钮与多选按钮独有属性
checked 这个属性没有属性值 为了满足XHTML的规范 要让其值等于自身 它表示默认选中的意思
n disabled：这个属性没有属性值 为了满足XHTML的规范 要让其值等于自身disabled=”disabled” 这表示当前的表单控件不可以用
n enabled：这个属性没有属性值 为了满足XHTML的规范 要让其值等于自身
enabled =” enabled” 这表示当前的表单控件可用 默认值
n readonly 这个属性没有属性值 为了满足XHTML的规范 要让其值等于自身
readonly =” readonly” 这表示当前的表单控件不可以用
disabled与readonly之间的区别：
它们两个属性都表示表单控制不可用
加了disabled的表单控件 它不能将表单数据发送给PHP程序进行处理
加了readonly的表单控件 它能将表单数据发送给PHP程序进行处理
多选按钮：
可以选取多个
<input type=”checkbox” name=”名称” value=”值” />
提交按钮：
<input type=”submit” value=”内容” name=”名称” />
框架型网页的结构：
<frameset rows=”将这个框架网页设置为上下型” cols=” 将这个框架网页设置为左右型”>
<frame />
<frame />
</frameset>
frameset这个标记它用来定义这个框架网页是上下还是左右型
属性：
rows=”80,*” 将窗口分割为上下型 上边的窗口占据80个像素 剩下的所有的空间都给到下窗口
rows=”80,100,*” 将窗口分割为上中下型 上边的窗口占据80个像素 中间的窗口占据100个像素 剩下的所有的空间都给到下窗口
cols=”100,*” 将窗口分割为左右型 左边的窗口占据100个像素 剩下的所有的空间都给到右窗口
cols=”100,80,*” 将窗口分割为左中右型 左边的窗口占据100个像素 中间的窗口占据80个像素 剩下的所有的空间都给到右窗口
border：用来设置框架网页的边框的粗细
borderColor:边框的颜色
HTML的篇幅有点冗长，聊完HTML后接下来就是CSS了。
CSS：翻译为“层叠样式表”或者“级联样式表”，简称“样式表”，主要是给HTML增加标记样式。
选择器
选择器它就是将HTML标记选择到 ，然后给它设置CSS样式！
基本选择器
通用选择器、标签选择器、ID选择器、类选择器
文本与字体属性：
text-decoration:文本修饰线 none(去除修饰线)、underline(下划线)、overline(上划线)、line-through(删除线)
color：设置文本的颜色
font-size：设置字体大小 值要在单位 px
font-style：设置文字的样式 取值：italic(斜体)
font-weight：设置文本的加粗效果 取值：normal(正常) 、bold(加粗)
font-family：给文本设置字体 可以一次写多个字体 每一个字体要加双引号
text-align：设置文本的水平对齐方式 取值：left|center|right
text-transform：改变字母的大小写或者首字母大写 取值：lowercase(小写) 、uppercase(大写)、Capitalize(首字母大写)
line-height：设置行高 将一行文本在一个容器内垂直方向居中 它的值应该要与height这个属性的值一样
text-indent：首行缩进 取值:px 或者em (1个em指一个汉字的位置 ) 值可以是负数
尺寸样式：
width:设置宽度
height:设置高度
复合选择器
- 组合选择器
n 格式：选择器1,选择器2,选择器3,选择器n{语句1;}
n 作用：同时去给列表中的选择器来设置样式
- 后代元素选择器
n 格式：祖先元素 后代元素{语句1;语句2;}
n 作用：它是匹配祖元素下面的指定的所有的后代元素设置样式
- 子元素选择器
n 格式：父元素 > 子元素{语句1;语句2;}
n 作用：匹配父元素下面的指定的子元素然后给其设置样式
- 相邻元素选择器
n 格式：E + F{格式声明语句;}
作用：匹配E元素下面的F兄弟元素 要求 E与F元素必须是兄弟关系 并且 F元素要在E的后面 并且这两个元素必须是紧挨着的
列表样式属性
| 属性名 | 功能 |
| list-style-type | 用来将列表前面的项目符号给清除掉 取值：none(无)、disc(实心园)、circle(空心园)、square(小方块) |
| list-style-position | 用于设置列表前面符号的位置 取值：inside(在里面)、outside(在外面 默认值) |
| list-style-image | 将列表前面的项目符号设置为一张图片 例如： list-style-image:url(图片的路径) |
| list-style | 简写属性 list-style它的值个数不定 顺序不定 每一个值之间都要使用空格来分隔 list-style:none url(图片的地址) inside; |
注意：
在CSS中 只要是能图片有关的 都得将图片的路径写在url(图片的路径)
固定定位
什么是固定定位？
固定定位它是相对于“浏览器窗口”来进行定位！不管页面如何滚动，固定定位元素它的位置不会发生改变！
语法格式：
position:fixed;
定位的坐标
特点：
- 固定定位元素它脱离了标准文档流
- 固定定位元素它不再占用空间
- 固定定位元素它的层级比普通元素要高 并且它会压住普通元素
- 固定定位元素它的位置不会发生改变！
相对定位
语法格式：
position:relative;
什么是相对定位？
相对定位它是相对于“原来的自己”来进行定位！
特点：
- 如果相对定位元素不加定位的坐标属性 那么相对定位元素它还在原来的位置！
- 如果相对定位元素使用了定位坐标的话 那么它会在它的老家留下一个坑！
- 相对定位元素它没有脱离标准文档流！
- 相对定位元素它会压盖住普通元素！
相对定位元素这个属性它一般自己很少使用，因为它会在老家给自己留一个坑！相对定位元素它一般是用来配合绝对定位来使用！
绝对定位
格式：
position:absolute;
什么叫绝对定位？
绝对定位元素它是相对于“祖先定位元素”为作为参照物来进行定位！
绝对定位元素它会先去找它的父元素是否有进行定位 如果它的父元素有进行定位 那么它会参照于其父元素来进行定位，但是如果它的父元素没有进行定位 那么它会去找其爷爷元素 如果说绝对定位元素它的祖先都没有进行定位的话 那么它会以“浏览器窗口”来进行定位！
俗语：
“子绝父相！” ==è儿子是绝对定位 老爸是相对定位
绝对定位的特点：
n 绝对定位元素它脱离的标准文档流！
n 绝对定位元素它不再占用空间！
n 绝对定位元素它会压盖住普通的元素
假设：绝对定位元素它的父元素与它的爷爷元素都进行了相对定位 ，那么请告诉我这个绝对定位元素它会以谁来作为参照物来进行定位！ 它会以其父元素作为参照物来进行定位！
CSS的只是总结说完了，我们接着来聊聊JavaScript的知识点。
JavaScirpt 它是由网景公司开发一款基本浏览器、基于面向对象、事件驱动式的网页脚本语言！
JavaScript的应用场景
l 表单验证
l 网页特效
l 一些网页上面小游戏
l AJAX 与服务器进行交互
书写JS的方式
嵌入式、外链式、行内式
嵌入式：
它是将JS代码嵌入在HTML文档中 它是通过HTML中的一个叫<script>标记嵌入的
格式：
<script type=”text/javascript”>
//书写JS代码
</script>
外链式：
将一个外部的JS文件链接到当前的HTML文档中 它是通过script标记的src属性将外部的JS文件链接到当前的HTML文件中
格式：
<script type=”text/javascript” src=”外部的JS文件”></script>
注意：
1、script标记可以书写在HTML文档中任何位置
2、如果一对script标记引入了外部的JS文件 那么就不能在里面书写JS代码
3、在一个HTML文档中 script标记可以有多个
行内式
在HTML标记中 有一些事件的属性
比如:
onclick 当鼠标单击时
onmouseover 当鼠标经过时
将JS代码书写在标记的事件属性里面
注释
注释的格式：
单行注释和多行注释
单行注释：
//注释的内容
行注释：
/*
注释的内容
*/
书写JS代码的语法规则
l JavaScript区分大小写
l JavaScript须嵌入在HTML文件中
l JavaScript代码中不能出现有<>以及不能有CSS代码
l 语句末尾可以加分号一定是英文下的分号(;)，最好加分号
l JavaScript可以独立保存为一个外部文件
给变量名赋值
var 变量名 = 值
将等号右边的值赋值给等号左边的变量！
三个常见的输出的方法
l window.alert(数据或者变量名)
n 作用：是向浏览器的窗口中弹出一个警告提示框
n window它是一个对象 它表示当前的浏览器窗口对象
n alert() 它是window对象下面的一个方法 方法带小括号
n window对象它是JS中的最顶级的对象 所以可以省略不写
l window.document.write(数据或者变量名)
n 作用：向body标记中输出内容
n window它是一个对象 它表示当前的浏览器窗口对象
n document对象它是window对象下面的一个属性
n write() 它是document对象下面的一个方法
l console.log()
n 作用：是将数据输出在浏览器的控制台中
n console它表示控制台对象
n log() 是日志的意思
变量的数据类型
变量的数据类型分为两大种：基本数据类型和复合数据类型
基本数据类型：只能存储一个值
String(字符串)、number(数值)、boolean(布尔)、null(空)、undefined(未定义)
复合数据类型：最少存储一个值
Object(对象)----àfunction(函数)和Array(数组)
String(字符串)
什么叫字符串数据？
只要是加了引号的字符它们就是String
假设字符串有一个双引号 现在我想将这个双引号也输出出来！
在JS中有一个符号“\”来可以用来将双引号或者单引号进行转义！
第一种方法：加转义字符
第二种方式：单包双或者双包单
number(数值)
包含：整数与小数(浮点数)
整数：int
小数：float
boolean(布尔型)
错与对 男与女
布尔型数据只有两个值：true和false
null(空型)
空型的值只有一个：null
或者会在出错的时候出现：null
undefined(未定义)
当声明了变量 但是没有给其赋值
变量的数据类型的转换
在JS中 变量的数据类型的转换分为两种：自动转换和强制转换
比如：
将字符串数据类型转换为数值型
自动转换是JS自己内部完成的！ 在JS中有三个内置的函数可以来完全变量数据类型转换！
String(变量名)：将其它的数据类型强制的转换为字符串
Number(变量名)：将其它的数据类型强制的转换为数值型
NaN 它也是数值里面的一种，Not a Number 它不是一个数！
在将其它数据类型转换为数值型 有些数据它是转换不过来的 它会得到一个特殊的Number型数据 NaN
在将其它数据类型转换为数值型 如果能够转换过来 就会得到一个具体的数 ，但是如果转换不过来 就会得到 NaN
Boolean(变量名)：将其它的数据类型强制的转换为布尔型
只有两个结果：true和false
三目(三元)运算符
格式：
表达式 ? 值1 : 值2 它是if语法的变种
说明：
它会去判断表达式是否成立 看其结果是布尔true 还是布尔false 如果是true就执行值1 如果说是false就执行值2
逻辑运算符
逻辑与：&& 它要求&&两边的结果都要为真才是真
逻辑或：|| 它要求||两边只有一个为真就是真
逻辑非：! 取反 将真变成假 假变成真
注意：
逻辑与和逻辑或这两个逻辑运算符它不单单会输出布尔型数据！
1、只要“||”前面为false，无论“||”后面是true还是false，结果都返回“||”后面的值。
2、只要“||”前面为true，无论“||”后面是true还是false，结果都返回“||”前面的值。
3、只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;
4、只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;
PHP+AJAX
运算符的优先级
有括号的先算括号里面的 再乘除 后加减
如果我们需要提升运算符的优先级 一句话：加括号
二、流程控制
顺序结构、分支结构、循环结构！
顺序结构
代码是从上至下一行一行执行并解析！、
if语句
单分支、双分支、多分支
单分支：
格式：
if(条件表达式){
//语句块
}
说明：如果当条件表达式成立的时候 得到布尔true 就执行语句块
注意：如果单分支小括号后面这一对大括号可以省略不写 但是建议不要省略！
双分支：
格式：
if(条件表达式){
//语句块1
}else{
//语句块2
}
说明：如果当条件表达式成立的时候 得到布尔true 就执行语句块1 但是如果条件表达式不成立 得到布尔false 就会执行语句块2
多分支：
格式：
if(条件表达式1){
//语句块1
}else if(条件表达式2){
//语句块2
} else if(条件表达式3){
//语句块3
} else if(条件表达式n){
//语句块n
}[else{
//语句块
}]
说明：
l 第一步：先去判断条件表达式1是否成立 如果成立得到布尔true 就会执行语句块1 如果不成立 得到false 就会判断条件表达式2是否
l 第二步：它是建议第一步不成立的基础上 判断条件表达式2是否成立 如果成立得到布尔true 就会执行语句块2 如果不成立 得到false 就会判断条件表达式3是否成立
l 第三步：它是建议第二步不成立的基础上 先判断条件表达式3是否成立 如果成立就 就会执行语句块3 如果不成立 就会再去判断下一条条件表达式
l 如果上面的条件表达式都不成立 并且我们写了else这个语句 那么就会执行else里面的语句块
l else语句可以省略不写 可写可不写 根据实际情况来定
switch语句
格式：
switch(变量名){
case值1 :
执行语句块1
break;
case 值2 :
执行语句块2
break;
case 值3:
执行语句块3
break;
case 值n:
执行语句块n
break;
default:
默认的语句块
break;
}
说明：
拿变量名的值与case中的每一个值比较全等于比较 如果比较成立 就会执行对应的语句块 但是它会去查找这个对应的语句块的后面是否写了break这个关键字 如果没有写它会继续往下去找break关键字 并且同时会将下面的语句块输出 直达找到break为止！
实例：动态的输出今天星期几
第一步：我们要获取到系统时间日期
创建了一个时间日期对象
对象是由属性与方法组成！
循环语句
什么叫循环？
当满足一定的条件下，重复去做件事情！
for循环、while循环、do…while循环
for循环
格式：
for(变量初始化;条件表达式;变量更新){
//循环体
}
结构说明：
第一步：变量初始化 声明一个变量然后给其赋值 它只执行一次
第二步：判断条件表达式是否成立 如果条件表达式成立 就执行第三步 如果条件表达式不成立就退出循环
第三步：建立第二步成立的基础上 执行循环体
第四步：变量进行更新 立马又来执行第二步 判断条件表达式是否成立！
while循环
格式：
变量初始化
while(条件表达式){
//循环体
变量更新
}
结构说明：
当条件表达式成立时 就执行循环体 ！
do…while循环
这个循环是while循环的变种！
格式：
变量初始化
do{
循环体;
变量更新
}while(条件表达式);
结构说明：
先执行一次循环体，再来判断条件表达式是否成立！不管条件表达式是否成立 都会执行一次循环体！
for循环与while循环之间的区别：
for循环主要是在已知循环次数的时候使用
while一般用于未知循环次数的使用
while循环与do….while循环之间的区别
while循环先判断条件表达式是否成立
do..while 先执行一个次循环体 不管条件表达式是否成立 它都会执行一次循环体 再来判断条件表达式！
数组中的相关概念
数组元素
数组中的每一个数据我们都称之为数组元素！
数组下标
数组中每一个数据都对应着一个数组下标 下标是从0开始 数组中第一个元素的下标为0 第二个元素的下标为1 第三个元素的下标为2………….
如何访问数组中数组元素
格式：
数组变量名[数组下标]
数组的长度
数组的长度指数组中元素的总个数
每一个数组的变量名它其它是一个数组对象
对象是由属性与方法来组成！
方法：
数组变量名.length
如何修改数组元素的值
就是重新给数组元素赋值！
数组的长度与数组最大下标之间关系
数组最大下标=数组的长度-1
如何定义数组？
使用[]来定义
格式：
var 变量名 = [数组元素1,数组元素2]
遍历数组元素
将数组中的每一个数组元素一个一个的依次输出出来！
我们知道了数组的下标同时也知道了数组的长度 所以我们就应该有办法
我们可以使用for循环来实现将数组元素进行遍历！
格式：
var arr = [];
for(var i=0;i<数组长度;i++){
arr[i];
for….in语句也可以遍历数组
格式：
for(变量名 in 数组名){
多维数组的创建
JS中本身是没有多维数组的概念，因为JS中的数组元素的类型可以是任意数据类型。
数组里面的元素它又是一个数组！
二维数组如何去访问数组元素！
格式：
数组变量名[一维数组的下标][二维数组元素的下标];
函数
函数分为系统内置函数与自定义函数！
什么是函数？
函数是可以被命名的，它是为了实现某个功能的代码段
函数可以有名字也可以匿名。
代码段指函数体。
函数有什么作用？
代码重用
模块化编程----à面向对象编程！
注册模块、登录模块
如何定义函数？
格式：
function 函数名(参数1,参数2,参数n){
//函数体
}
结构说明：
l function它是定义函数的关键字 它必须要写
l 函数名的命名规则它和变量名的命名规则一样
n 可以使用大小写字母、下划线、数字、美元符号来组合
n 不能以数字开头
n 不能是JS中的关键字和保留字
n 如果是由多个单词组成的 建议使用下划线连接法或者是驼峰法
l 函数名的后面紧着一对小括号 它必须要写
l 小括号里面的称之参数列表 这个参数列表它是根据函数实际需要来设置
l 小括号后面跟着一对大括号 大括号里面就是我们要实现的功能的代码
匿名函数的自调用
格式：
(function(){})()
变量的作用域
变量的作用域指的是变量在什么地方可以使用在什么地方不能使用！
JS中的变量的作用域是以函数来进行分割的！
在函数外面定义的变量它的作用域是全局的！
在函数里面定义的变量它的作用域是局部的，只能在这个函数里面可以使用
中国警察他只能在中国范围内执法
国际刑警可以在全世界范围内执法！
我们需要在函数外面也使用函数里面定义的变量！将函数里面定义的变量的作用域提升为全局的作用域！
只需要将函数里面定义的变量的var 关键字给去掉就可以了，那么这个变量的作用域就是全局了！
建议：
将函数里面的变量名前面的var 去掉的时候 同时要在函数外面声明一个同名的变量
值传递：将一个变量的值赋值给另外一个变量 那么将其中一个变量的值进行修改后 它不会影响 到另外一个变量 这两个变量之前是没有任何的关系！
引用传递：将一个变量的(内存地址)赋值给另外一个变量 那么当将其中一个变量的值进行修改后 它会影响 到另外一个变量 这两个变量之前是有联系！
自定义对象
第一种方法：
使用new关键字和Object()方法来创建
第二种方法：
使用一对{}来创建
格式：
var 变量名 = {
属性名:值，
属性名:值，
方法名:值
}
JSON对象
格式：
var 变量名 = {
“名称”:值,
“名称”:值
}
如何创建Array对象
第一种方法：
使用[]来创建数组
第二种方法：
使用new关键字和Array()方法来创建
| 方法名 | 功能 |
| ArrayObject.sort(sortby) | 对数组元素进行排序 |
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
- 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
- 若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
Date对象
如何创建Date对象
第一种：
使用new关键字与Date()来创建 带参数
第二种：
使用new关键字与Date()来创建 不带参数
Date方法
| 方法名 | 功能 |
| DateObject.getFullYear() | 得到4位数的年份 |
| DateObject.getMonth() | 得到月份 返回值是 0（一月） 到 11（十二月） 之间的一个整数。 |
| DateObject.getDate() | 得到一个月中的某一天 返回值是 1 ~ 31 之间的一个整数。 |
| DateObject.getHours() | 返回0~23小时 |
| DateObject. getMinutes() | 返回0~59分钟 |
| DateObject.getSeconds | 返回秒数 0~59 |
| DateObject. getMilliSeconds() | 返回毫秒数 0~999 |
| DateObject.getDay() | 返回一周中的某一天 返回值：0~6 |
| DateObject.getTime() | 返回时间戳 从1970年1月1号0时0分0秒开始一直到现在的毫秒数 |
BOM对象
什么是BOM对象
Browser Object Model 浏览器对象模型
BOM对象有什么作用
BOM对象它主要是用来提供了一些属性与方法操作浏览器中的各组件！
BOM对象的结构图
l window对象 它是JS中的顶级对象 它代表着浏览器的窗口对象 它的下面有很多属性与方法
l DOM对象 文档对象模型 它主要是提供了一些属性与方法来操作HTML文档 JS它主要就是用来操作HTML文档
l history 历史对象 它可以用来实现前进后退 可以通过浏览器的访问历史来实现的前面后退页面的操作
l location 地址栏对象 它可以获取到地址栏中的相关的数据
l navigator 浏览器对象 它可以获取这个对象来获取到浏览器的名称 、版本
l screen 屏幕对象 它可以获取到屏幕的分辨率
window对象
属性
| 属性名 | 功能 |
| window.innerWidth | 内宽 |
| window.innerHeight | 内高 |
| window.outerWidth | 外宽 包含浏览器的边框 |
| window.outerHeight | 外高 包含浏览器的边框以及浏览器中地址栏等 |
方法
| 方法名 | 功能 |
| window.alert() | 向浏览器的窗口弹出一个警告提示框 |
| window.prompt() | 向浏览器的窗口中弹出一个输入对话框 如果用户点击了确定按钮会得到“string”数据 如果用户点击了取消按钮会得到 “null” |
| window.confirm() | 向浏览器窗口弹出一个确认对话框 点击“确定”按钮会得到布尔型 true 点击“取消”按钮会得到布尔型 false |
| 方法名 | 功能 |
| window.open(url,name,options) url：打开新窗口的URL地址 name：新窗口名称 options： | 打开一个新窗口 这个方法有一个返回值 这个返回是当前小窗口窗口对象 它是用来给小窗口对象.close()这个方法来关闭当前的打开的窗口 |
| 方法 | 功能 |
| window.close() | 这个方法是用来关闭当前的窗口 它跟浏览器上面的那个关闭按钮是一个的功能 |
| 方法名 | 功能 |
| window.setTimeout(code,Millisec) code:执行的JS代码 Millisec:毫秒数 这个方法有一个返回值 这个返回值的作用是用来给clearTimeout来使用的 就是用来将当前的延时器清除掉 | 当指定的时间到了以后就执行一次code |
| window.clearTimeout(要清除延时器的返回值) | 清除延时器 |
| 方法名 | 功能 |
| window.setInterval(code,Millisec) code:要执行的JS代码 Millisec：毫秒时间 | 每隔一定的时间就执行code代码 |
| window.clearInterval(要清除的定时器返回值) | 清除指定的定时器 |
screen对象
| 属性名 | 功能 |
| screen.width | 获取屏幕的宽度 |
| screen.height | 获取屏幕的高度 |
| screen.availWidth | 获取到屏幕有效的宽度(除了任务栏) |
| screen.availHeight | 获取到屏幕有效的高度 |
| screen.colorDepth | 获取到屏幕的色深 |
Navigator对象
| 属性名 | 功能 |
| navigator.appName | 获取到浏览器的名称 |
| navigator.appVersion | 获取浏览器的版本 |
| navigator.systemLanguage | 系统语言 只有IE浏览器才认识 |
| navigator.userLanguage | 用户语言 只有IE浏览器才认识 |
| navigator.cpuClass | 获取到CPU的等级 |
location对象
| location.href | JS实现网页跳转 |
| location.hash | 获取地址栏中的URL地址后面的锚点数据 |
| location. search | 获取到查询字符串?后面的数据 |
| location.reload() | 它相当于浏览器的刷新按钮 刷新当前网页 |
history对象
注意：一定要先有访问过 浏览记录才可以使用history这个对象
| 方法名 | 功能 |
| history.back() | 返回上一个页面 |
| history.forward() | 返回下一个页面 |
| history.go(n) | 前进或者后退 n=-1 返回上一个页面 n=0 相当于刷新 n=1 返回下一个页面 |
DOM对象的作用
它主要是用来提供了操作HTML文档的属性与方法
注意：
1、先要获取到HTML中的标签对象然后再来操作
2、这个标签所拥有的属性 那么当前的标签对象也会同时的拥有！
DOM的分类
l 核心DOM：为操作XML和HTML文档的提供了属性与方法
l HTML DOM：它是用来专门操作HTML文档和XHTML文档
l XML DOM：它是用来专门操作XML文档的 就业班讲
l CSS DOM：它是用来专门操作style这个属性
events DOM：事件DOM
核心DOM
属性
l firstChild 第一个子节点
l lastChild 最后一个子节点
l childNodes 子节点列表 就算里面只有一个子节点 它也是一个数组 它和数组的访问方式一样 就是通过下标来进行访问
l parentNode 父节点
l innerHTML 用来设置或者返回双边标记里面的内容
l nextSibling 下一个兄弟节点
l previousSibling 上一个兄弟节点
l nodeValue 节点的值
l nodeName 节点的名称
要使用核心 DOM来操作HTML文档 访问HTML文档里面的标签 如果说要通过核心DOM来访问HTML的标签 一定是先根标签开始！
注意：
核心dom它会把换行空格都会理解为文本节点
核心DOM对标签的操作
创建标签
语法：
document.createElement(“标签名”)
注意：标签名不能带尖括号 但是创建好的标签它暂时是存放于内存中
追加标签
父对象.appendChild(要追加的标签对象)
将标签对象追加父对象的末尾
将标签对象追加谁的最前面
父对象.insertBefore(要追加的标签对象, 在谁之前进行追加)
移除标签
父对象.removeChild(要删除的标签对象)
HTML DOM
方法
document.getElementById(ID的属性值)
作用：通过id的属性值来获取标签对象
注意：这个只能获取到一个标签对象 因为id的属性值是在一个HTML文档里面是唯一的！
document.getElementsByTagName(“标签名”)
父对象. getElementsByTagName(“标签名”)
作用：通过标签名来获取对象
注意：这里返回的是一个数组集合 需要使用下标来进行访问 就算获取到只有一个标签 它也是一个数组集合
document.getElementsByName(name的属性值)
说明：通过标签中的Name的属性值来获取元素
注意：这里返回的是一个数组集合 需要使用下标来进行访问 就算获取到只有一个标签 它也是一个数组集合
HTML DOM对标签属性的操作
标签中所所有的属性 ，这个JS对象也会同时拥有
增
要操作的标签对象.属性名 = “值”
删
要操作的标签对象.属性名 = “”
改
要操作的标签对象.属性名 = “重新赋值”
查
要操作的标签对象.属性名
但是以上对标签属性的操作均不包含对class属性的操作 如果要对标签里面的class属性的操作 一定要把class改为className
格式：
要操作的标签对象.className
事件绑定的方式
行内绑定
将事件的处理程序是写在HTML标签中
<标签 事件名=“事件的处理程序”></标签>
动态绑定
将事件的处理程序是写在JS代码中
要操作的标签对象.事件名 = 事件的处理程序
事件列表
onclick：当鼠标单击时
ondblclick：当鼠标双击时
onmouseover：当鼠标经过时
onmouseout：当鼠标离开时
onfocus：当获取光标焦点时
onblur：当失去焦点时
onsubmit：当表单提交时 这个事件它是给form标签来绑定的
阻止表单的默认提交 如果表单数据验证不通过就不能让这个表单提交！
如何阻止表单的默认提交：onsubmit这个事件在行内绑定时、onsumbit这个事件在动态绑定时
动态绑定：只需要在事件的处理程序中 返回一个false即可！
行内绑定时：
要阻止表单的默认提交 需要有两个return 第一个return 是写行内绑定里面
第二个return 是写在事件的处理函数里面 如果返回false就会阻止表单进行提交 如果返回true则会允许表单进行提交！
onchange：当内容发生改变时 多用于下拉列表
关于this
this代表当前对象，谁调用就代表谁！
1、行内绑定中的this 没有将this这个参数传递过来！
2、行内绑定中的this this这个参数传递过来！
3、动态绑定中的this
表格的专用属性
表格对象.tBodies 获取到当前表格对象下面的所有的tbody标签 它是一个数组集合
tbody对象.rows 获取到当前的tbody对象下面的所有的行 它是一个数组集合
行对象.cells 获取到当前行对象下面的所有的单元格 它是一个数组集合
jquery的知识点
javascript Query
它其实一个JavaScript写的代码库！开放源代码 github
jQuery目的
写的少 做的多
write less do more
用少量的代码去实现复杂的功能
选择器
要做事、先找人！要实现某个功能，先将要对象找到
l 基本
l 层级
l 简单
l 内容
l 可见性
l 属性
l 子元素
l 表单
l 表单对象属性
选择器语法：
$(‘选择器’)
基本选择器
l #id 根据id的属性值来获取元素
l TagName 根据标签名来获取元素
l selector1,selector2 匹配列表中的选择器
l .class 根据class的属性值来获取元素
层级选择器
l 祖先元素 后代元素 匹配祖先元素下面的指定的后代元素
l parent > child 匹配父元素下面的指定的子元素
l prev + next 匹配当前元素的下一个兄弟元素 要求这两个元素必须邻居
l prev~siblings 匹配当前元素的下面的指定所有的兄弟元素
简单选择器
l :first 匹配第一个元素
l :last 匹配最后一个元素
l :even 匹配下标值为偶数的所有元素
l :odd 匹配下标值为奇数的所有元素
l :eq(index) 匹配下标值为指定值的元素
l :gt(index) 匹配下标值大于指定值的所有元素
l :lt(index) 匹配下标值小于指定值的所有元素
l :not(selector) 匹配不包含指定选择器的所有元素
内容选择器
l :contains(text) 匹配内容中包含指定值的元素
l :empty 匹配内容为空的元素
l :has(selector) 匹配内容中包含指定选择器的元素
l :parent 匹配内容不为空的元素
可见性选择器
l :hidden 匹配隐藏的元素 CSS中:display:none
:visible 匹配显示的元素 CSS中：display:block
属性选择器
l [attribute] 匹配指定属性的所有元素
l [attribute=value] 匹配属性等于指定值的元素 input[name=”username”]
l [attribute!=value] 匹配属性不等于指定值的所有元素
l [attribute^=value] 匹配属性以指定值开头的所有元素
l [attribute$=value] 匹配属性以指定值结束的所有元素
l [attribute*=value] 匹配属性中包含指定值的所有元素
l [selector1][selector2][selectorN] 匹配列表中所有属性
子元素选择器
l :nth-child(index/even/odd) 匹配索引值为指定值或者索引值为奇偶的子元素 这里的是从1开始的
l :first-child 第一个子元素
l :last-child 最后一个子元素
l :only-child 匹配有且仅有一个子元素
表单属性选择器
l :input 匹配表单里面所有元素 包含select textarea
l :text 匹配单行文本框
l :password 匹配单行密码框
l :radio 匹配单选按钮
l :checkbox 匹配多选按钮
l :submit 匹配提交按钮
l :reset 匹配重置按钮
l :image 匹配图片按钮
l :button 匹配普通按钮
l :file 匹配文件上传
l :hidden 匹配隐藏域 如果是要匹配表单中的隐藏域控件 一定要先加上input标签 $(“input:hidden”)
问：请回答$(“input”)与$(“:input”)之间的区别？
答：$(“input”)它是匹配到所有的input标签
$(“:input”)它是匹配到除了input标签以外 select textarea 所有的表单控件元素
表单对象选择器
l :enabled 匹配表单中可用的表单控件
l :disabled 匹配表单中不可用的表单控件
l :checked 匹配表单中默认选中的元素 单选按钮和多选按钮
l :selected 匹配表单中默认选中的元素 下拉列表
jQuery对象操作标签中的class属性
l addClass(class) 给当前对象添加class属性值
l removeClass(class) 将当前对象的class属性值移除
l toggleClass(class) 当前对象中如果有指定的class属性值则移除 反之则添加
hasClass(class) 如果有指定的class属性值就返回true 反之没有就返回false
jQuery对象对标签中的style属性的操作
l css(name) 获取到当前对象的style属性指定的CSS样式的属性值
l css(key,value) 给当前对象的的style属性中设置css样式
l css(properties) 一次设置多个
尺寸方法
l width()
l width(value)
l height()
l height(value)
文本、值
l html()：获取双边标记中的内容
l html(val)：往双边标记设置内容
l val()：获取单边标记中的value属性值
l val(val)：往单边标记中的value属性设置值
l text()：获取双边标记的中的内容
l text(val)：往双边标记设置内容
html()和text()方法之间的区别： 一个可以解析HTML标签 一个解析不了
html()获取的时候将标签中的所有的内容都会获取到
text()获取的时候只会获取到标签中的文本内容
事件编程
l 页面载入
l 基本事件
l 事件切换
l 事件处理
所谓的页面载入指的是：当页面加载完成后
JavaScript它是使用的是window.onload 这个事件来实现
jQuery它是使用一个ready()方法
jQuery实现页面载入总有三种方式：
第一种：
$(document).ready(function(){
//在这里写代码
});
第二种：
$().ready(function(){
//在这里写代码
});
第三种：
$(function(){
//在这里写代码
});
window.onload 与ready()之间的区别：
ready方法的速度远比window.onload快
事件编程
l 页面载入 使用是ready方法来实现
l 基本事件
l 事件切换
l 事件处理
基本事件
它将JavaScript中的事件去除了on前缀 然后将它们封装为对应的方法
onclick =======èclick(function(){ 书写代码});
对象.事件方法(匿名函数)
l blur(fn) 当失去焦点时
l change(fn) 当内容发生改变时
l click(fn) 当鼠标单击时
l dblclick(fn) 当鼠标双击时
l focus(fn) 当获取焦点时
l keydown(fn) 当键盘按下时
l load(fn) 当页面加载完成时
l mouseover(fn) 当鼠标经过时
l mouseout(fn) 当鼠标离开时
l scroll(fn) 当滚动条滚动时
l select(fn) 当内容被选中时
l submit(fn) 当表单提交时
l mouseenter(fn) 当鼠标经过时
l mouseleave(fn) 当鼠标离开时
事件切换
l hover(over,out)：它是专门用于实现鼠标经过与鼠标离开
参数说明：
over：表示的是鼠标经过事件 它是一个匿名函数
out：表示是的鼠标离开事件 它是一个匿名函数
事件绑定
l bind(type,fn) ：对事件进行绑定 但是只绑定一个事件、
参数说明：
type：指事件名 事件名不带on前缀
fn：事件的处理程序 是一个匿名函数
l bind({type:fn,type:fn})：对事件进行绑定 可以同时绑定多个事件
参数说明：
要求参数是一个JSON对象
type：指事件名 事件名不带on前缀
fn：事件的处理程序 是一个匿名函数
l one(type,fn) ：对事件进行一次绑定 只会触发一次事件 、
参数说明：
type：指事件名 事件名不带on前缀
fn：事件的处理程序 是一个匿名函数
l unbind([type]) ：对事件进行解除绑定 如果带参数(事件名 不带on前缀) 表示对指定的事件进行解绑 如果不带参数 表示对所有的事件进行解绑
参数说明：
type：可选的参数 事件名
效果
l 基本
l 滑动
l 淡入淡出
l 自定义动画
基本效果
l show()：将隐藏的元素显示出来
l show(speed,[callback]) ：将隐藏的元素以动画的方式显示出来
l hide()：将显示的元素隐藏起来
l hide(speed,[callback]) ：将显示的元素以动画的方式隐藏
l toggle() ：如果显示就隐藏 如果隐藏就显示
l toggle(switch) ：如果参数为true则表示只显示，如果为false表示只隐藏
l toggle(speed,[callback])：以动画的方式进行显示或者隐藏
参数说明：
- speed表示的方式有两种：一种毫秒数 二种英文单词
- speed:"slow", "normal", "fast"
- callback：可选的参数 它是一个回调函数 当动画执行完了以后再来执行的函数
滑动效果
l slideDown()：将隐藏的元素显示出来
l slideDown(speed,[callback]) ：以动画的方式将隐藏的元素显示出来
l slideUp()：将显示的元素进行隐藏
l slideUp(speed,[callback]) ：以动画的方式将显示的元素进行隐藏
l slideToggle()：显示或者隐藏
l slideToggle(speed,[callback]) ：以动画的方式进行显示或者隐藏
淡入淡出
- fadeOut()：淡出
- fadeIn()：淡入
- fadeTo(speed,opacity)：淡入淡出到指定值 opactiy 指透明度 取值：0~1之间 0表示完全透明 1表示不透明
- fadeToggle()：淡入或者淡出
自定义动画
animate(options,speed)：当时间到了以后 就执行options里面的参数
文档操作
对HTML中标签进行增删改查
l 插入
l 删除
l 复制
l 替换
l 包裹
l 查找
内部插入
l $(selector).append(content) ：将content追加到selector选择器内部的最后面
l $(content).appendTo(selector)：将content追加到selector选择器内部的最后面
l $(selector).prepend(content) ：将content追加到selector选择器内部的最前面
l $(content).prependTo(selector) ：将content追加到selector选择器内部的最前面
外部插入
l $(selector).after(content) ：将content插入到selector选择器外部的最后面
l $(selector).before(content) ：将content插入到selector选择器外部的最前面
l $(content).insertAfter(selector)： 将content插入到selector选择器外部的最后面
$(content)insertBefore(selector) ：将content插入到selector选择器外部的最前面
删除操作
l empty() 将当前对象里面的内容清空 但是标签还在 将身体掏空了
l remove() 将标签与内容同时移除
复制
l clone([true]) 将元素进行克隆
参数说明：如果有带true这个参数 表示克隆元素本身的同时还会将这个元素身上的事件进行克隆 如果没有带true 则表示只克隆 元素的本身 不克隆元素身上的事件
替换
l replaceWith()
包裹
l wrap() 对元素进行包裹
l wrapAll() 对元素进行包裹 只包裹一次
l wrapInner() 对元素进行内部包裹
获取到当前的索引值
l index()
查找
链式编程
对象.方法名.方法名.方法名
l eq(index) ：获取到指定下标的元素
l filter(expr) ：将范围缩小
l not(expr) ：除了当前元素以外的元素
l next([expr]) ：匹配当前元素的下一个兄弟元素
l prev([expr])：匹配当前元素的上一个兄弟元素
l parent([expr])：匹配当前元素的父元素
l Parents([pxpr])：匹配当前元素的祖先元素
l Siblings()：匹配除了当前元素以外的所有的其它的兄弟元素
插件机制
问：我们要实现某一个功能 需要用到一个很特别的函数 但是jQeury中没有给我们封装这个函数 jQuery它给我们提供了一个类似于接口的东西 ！
l jQuery.fn.extend(object)或$.fn.extend(object)
l 要求参数必须是一个JSON对象
l jQuery ===== $
fn1:function(){},
fn2:function(){},
......
});
结构说明：
fn1或者fn2指的方法 名
匿名函数就是当前方法的处理程序
特别注意：
在jQuery中除了插件机制中的this指向的是jQuery对象 其它的任何地方都是JavaScript对象
使用插件机制来实现全选、反选、取消功能
Bootstrap简介
什么是Bootstrap?
l Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 两位设计师开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
l Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
l Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
l Bootstrap简洁灵活，使得 Web 开发更加快捷。
l Bootstrap可以构建出非常优雅的前端界面，而且占用资源非常小。
全局的CSS样式
bootstrap官网给用户定义了相当多的全局样式 类名
<标签 class=”类名”></标签>
布局窗口
l .container 类用于固定宽度并支持响应式布局的容器。
排版样式
l .h1~.h6或者<h1>~<h6>
l <p></p>
l <strong></strong>或者 <b></b>
l <ins></ins>或者<u></u>
l <em></em>或者<i></i>
l <del></del>或者<s></s>
l .text-left 设置文本左对齐
l .text-center 设置文本居中对齐
l .text-right 设置文本右对齐
l .text-lowercase 将大写字母转换小写
l .text-uppercase 将小写字母转换为大写
l .text-Capitalize 将首字母变成大写
列表样式
l . list-unstyled 将列表前面的项目符号去掉
l .dl-horizontal 将定义列表中的dt与dd中的内容排列成一行
定义列表：
<dl>
<dt></dt>
<dd></dd>
</dl>
表格样式
.table 为任意表格标签添加一个table类名 然后 给会表格加上一个水平分隔线和少量的内填充
table类名它是基类名 父类
l . table-striped 实现隔行变色的表格
l table-bordered 带边框的表格
l table-condensed 紧凑型表格
按钮样式
l .btn 所有按钮样式的基类
l .btn-success 成功的按钮
l .btn-danger 危险的按钮
l .btn-warning 警告的按钮
l .btn-default 默认的按钮
l .btn-info 一般信息的按钮
l .btn-link 链接状态的按钮
l .btn-primary 重要的按钮
l .btn-lg 超大按钮
l .btn-sm 小按钮
l .btn-xs 超小按钮
图片样式
l . img-responsive 响应式的图片
l .img-circle 圆形图片
l .img- rounded 圆角图片
.img- thumbnail 带边框的图片
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
需求：
如果是电脑 一行显示6列 >1200px
如果是中等屏幕电脑 一行显示4列
如果是ipad 一行显示3列
如果是手机 一行显示2列
列偏移
l .col-m-offset-n
m：表示的是根据分辨率来决定
n：表示的是偏移的位置
表单
. form-control <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;
.form-group 表单组
.form-inline 内联表单
只是总结还存在诸多不足欢迎补充说明。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
