WEB开发基础

控制台输出内容，测试

弹出框测试

基本数据类型

Function

Object

Array

Date

=

+

-

*

/

%

++

--

==

===

!=

!==

>,<,>=,<=

var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隐式转换
console.log(typeof n3);

// 强制类型转换String(),toString()
var str1 = String(n1);
console.log(typeof str1);
var num = 234;
console.log(num.toString())

var stringNum = '789.123wadjhkd';
var num2 = Number(stringNum);
console.log(num2)
// parseInt()可以解析一个字符串 并且返回一个整数
console.log(parseInt(stringNum))
console.log(parseFloat(stringNum));

var b1 = '123';//true
var b2 = 0;//false
var b3 = -123;//true
var b4 = Infinity; //true
var b5 = NaN; //false
var b6; //false
var b7 = null; //false
// 非0既真
console.log(Boolean(b7))

concat()

join()

pop

shift()

unshift()

slice(star,end)

push()

sort()

reverse()

length

文本内容，只包含文本不包含标签

渲染标签也可以设置文本

对于标签中有value属性的设置，表单控件

document.createElement('div');

父.appendChild(子标签)

父.insertBefore(要插入的节点，参考的节点)

父.removeChild(子)

如果不写参数，移除所有的事件

$( "#foo").unbind( "click" ，function(){})

将两个处理程序绑定到匹配的元素，当鼠标指针进入和离开元素时执行

注意

鼠标指针穿过/离开被选元素或者当前元素的子元素，会触发事件

鼠标指针只在穿过/离开被选元素触发事件

此事件仅限于<input>元素，<textarea>框和<select>元素

对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时，会立即触发事件
但对于其他元素类型，事件将延迟到元素失去焦点

此事件仅限于input type类型为text和textarea表单元素

form表单有默认的submit行为，当对input type=submit按钮点击的时候会触发form的默认action行为，
此时可以调用 jquery的submit方法通过e.preventDefault()来阻止默认事件，这样我们就能动态的跟服务端来发送数据了

.btn-info

.btn-default

.btn-warn

.btn-success

.btn-link

.btn-lg

.btn-sm

.btn-xs

居中，使用 .center-block（不要使用text-center）

原理：max-width:100%;height:auto;display:block

圆角 .img-rounded

圆形 .img-circle

缩略图 .img-thumbnail

带边框 .table-bordered

.form-group

.form-horizon

.form-inline

checkbox父级标签

radio父级标签

表单验证 .has-feedback

高度设置

.col-lg-

.col-md-

.col-xs-

.col-sm-

推荐使用li内嵌a标签

.disabled 改变外观，不改变功能，a标签仍可点击跳转

.media-left

.media-right

.media-top

.media-middle

.media-bottom

样式

Dreamweaver

Fireworks

Flash

W3C

超文本标记语言

层叠样式表

脚本语言

在HTML中规定标签使用英文的的尖括号即`<`和`>`

HTML中标签**通常**都是成对出现的，分为开始标签和结束标签

标签之间是可以嵌套的

HTML标签不区分大小写（建议小写）

title标签，显示网站的标题

meta标签，提供有关页面的原信息

style标签，定义内部样式表

style标签，定义内部样式表

link标签，链接css资源文件、网站图标

script标签，链接脚本js文件

行内标签

块级标签

常用标签

UI在设计稿拿软件画前端的页面，可以任意提的地方来画，按照一定的规则来做站

匹配所有的标签

通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用

匹配以唯一标识符id属性等于wrap的对象作为选择符，唯一的只有一个

匹配div标签的选择器

以class属性包含myclass的E对象作为选择符

不同于ID选择符的唯一性，类选择符可以同时定义多个

只能命中子元素，而不能命中孙辈

选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...

选择紧贴在li元素之后a元素

选择li元素后面的所有兄弟元素a

设置超链接a在未被访问前的样式

设置超链接a在其链接地址已被访问过时的样式

设置元素在其鼠标悬停时的样式

设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式

选择具有att属性的E元素

选择具有att属性且属性值等于val的E元素

选择具有att属性且属性值为以val开头的字符串的E元素

选择具有att属性且属性值为以val结尾的字符串的E元素

选择具有att属性且属性值为包含val的字符串的E元素

设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性

设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性

normal

italic

oblique

normal

bold

bolder

lighter

<integer>

16个基础颜色关键字

扩展颜色关键字

#RRGGBB或#RGB

RGB(R,G,B)

left 内容左对齐

center 内容居中对齐

right 内容右对齐

justify 内容两端对齐

none 文字无装饰

underline 下划线

overline 上划线

line-through 删除线

指定文本字体的行高，字体最底端与字体内部顶端之间的距离，设置行高=盒子的高度，使文本垂直居中

背景图像在横向和纵向平铺 默认

背景图像横向平铺

背景图像纵向平铺

背景图像不平铺

背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，
因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动

背景图像相对于窗体固定

使用说明：分别设置四个边框宽度

none 默认 无轮廓

dotted 点状轮廓

dashed 虚线轮廓

solid 实线轮廓 使用较多

double 双线轮廓

用法：与border-width使用说明一样

用法：与border-width使用说明一样

border-left-width

border-left-style

border-left-color

border-left：1px solid red

border-right-width

border-right-style

border-right-color

border-right：2px dotted yellow

与border-left和border-right用法雷同

与border-left和border-right用法雷同

常用

内边距会扩大元素所在的区域

注意：外边距合并的情况

左浮动 左侧为起始。从左往右依次排列

右浮动 右侧为起始。从右往左依次排列

默认 不浮动

浮动可以使元素按指定位置排列，直到遇到父元素的边界或另一个元素的边界停止

缺点：不灵活

缺点：结构冗余，无缘无故添加了一个块级元素

这就是所谓的页面布局 “父相子绝”