前端基础笔记

前端:

C/S: 客户端/服务端 Client/Server ，一般基于桌面型应用架构模式

B/S: 浏览器/服务端 Browser/Server ，一般基于浏览器的应用架构模式。

前端：HTML 4.0/5.0 / CSS 2.0/3.0 JS(javascript).所谓的脚本语言，

其实一种动态语言，一般是没有编译的。JQuery 2.0 / Bootstrap 3.0 /

nodeJS。...

===============================================

HTML 4.0 / XHTML(XML + HTML) .html .htm

- 标题

...

- 段落标签

- 分割线

---

- 换行

- 超链接 锚点

- 图片

- 表格

- 列表

无序。

。有序

-

- 表单:

- 表单/input： 文本框

密码框

单选

复选框

上传文件

普通按钮

一个表单只能有一个submit

重置

富文本

button名称 普通按钮

- 加粗

- 斜体

- 块元素 自动换行，支持设置宽、高等。

..

- 内联元素 不自动换行，不支持初始设置宽、高等。 ...

CSS 2.0

CSS 其实就是“形容词”，形容一个标签的。 .css

CSS有几种设置形式:

1、内嵌。

2、文件头部。

3、外链文件

CSS 选择器：

1、ID选择器

2、类选择器

3、标签选择器

颜色：

1、十六进制 #ffffff/#fff 白色 #000000/#000 黑色

2、英文 red black yellow green blue purple

3、rgb / rgba rgb(255,255,255) 白色 rgb(0,0,0) 黑色

rgba(255,255,255,0-1) 0-1 设置透明度

4、opacity：设置透明度

长度单位:

1、px 像素

2、pt 点

3、em 相对长度

CSS 文字:

1、color: 文字颜色

2、font: 字体设置所有。

3、font-size: 大小

4、font-family: 字体 微软雅黑 、arial

5、font-weight: 加粗 blod

6、font-style: italic; 斜体

7、text-align: 居中 center;

8、line-height: 行高

CSS 背景:

1、background: 背景设置所有

2、background-color: 背景颜色

3、background-image: url(地址) 背景图片

4、background-position: 背景图片位置 px top/left center

5、background-repeat-x: 横向平铺

6、background-repeat-y: 纵向平铺

7、background-attachment：背景是否随着滚动

CSS 盒子 每一个控件都是一个盒子，盒子包括：外边距、内边距、边框

1、border 边框

1、border : 边框设置所有 1px #fff solid.

2、border-top/right/bottom/left : 设置4个方向

3、border:1px 0 0 0 上、右、下、左。顺时针

4、border-color: 边框颜色

5、border-style: 边框样式 solid 、dotted...

6、border-width: 边框粗细

7、border-radius: 边框圆角

2、margin 外边距 元素与元素之间的边距

1、margin: 外边距设置所有 上 右 下 左。

2、margin-top: 上外边距

3、margin-bottom: 下外边距

4、margin-left: 左外边距

5、margin-right: 右外边距

3、padding 内边距 元素内部与边框的间距。

1、padding: 内边距设置所有 上 右 下 左。

2、padding-top: 上内边距

3、padding-bottom: 下内边距

4、padding-left: 左内边距

5、padding-right: 右内边距

CSS 位置 position：(原点为左上角)

1、absloute 绝对定位。一旦定位以后，找到已经定位过的父元素，

如果没有定位的父元素，那么找body(top/left/right/bottom)

2、relative 定位相对临近的元素的定位。(top/left/right/bottom)

3、fixed 固定位置，不会滚动

4、static 默认

CSS display 显示

1、display: block 默认为块元素显示方式。一般会换行。

2、display: inline 默认为内联元素显示方式。

3、display: inline-block 保证上面两种结合。最大特点支持样式保留

4、display: none 隐藏，不会保留位置。

5、visiblity： hidden 隐藏，会保留位置。

CSS 浮动 ： float，让控件整体向左，向右对齐。 float: left/right

1、浮动一般可以用于div 或者 图片设置在一行显示。

2、清除浮动： clear：both;

CSS 尺寸设置 ：

1、width: 宽度 30%(百度比)

2、height: 高度

3、min-width: 最小宽度

4、max-width: 最大宽度

5、min-height: 最小高度

6、max-height: 最大高度

CSS 轮廓 : 位于盒子外层

1、outline: 设置轮廓全部 outline: 1px dotted red;

2、属性参考边框。

CSS 显示次序

1、z-index: -1 一般最低层 1 100 1000 数字越大显示最外层

CSS overflow

1、显示超过范围的设置，一般都是hidden。

CSS 伪类 一种行为，一种动画效果

1、:vistited 打开过后效果

2、:active 点击效果

3、:hover 悬停效果

4、:link 链接样式

CSS 优先级：

1、!important > 内嵌写法 > ID > 类设置 > div > *

JS基础

JS 定义: 动态脚本语言。Javascript简称。基于浏览器，不需要额外按钮环境。

JS 输出: alert( 警告框 ) console.log( 控制台输出 ) confirm( 确认框 ) propmt( 输入框 );

JS 变量: var 在JS中变量可以重复定义。

JS 数据类型：typeof()检测数据类型。 Number Object String

JS 函数：function 函数名( 输入参数){ return 输出参数; }

JS 作用域：对于函数内部来说，优先使用内部变量。如果内部没有则使用全局变量。

JS 数组：var a = new Array(); var a = [1,2,3];

a.sort();

a.concat("");

a.push("");往尾部添加一个数据。

a.pop();往尾部删除一个数据

a.length 数组长度。

for( var i = 0 ; i < a.length; i++ );

for( var key in a ){}

JS 对象: var a = { a : "b" , b : functino(){ return 10; } }

调用1、a.a

调用2、a["b"]

JS 事件: 一般事件属于DOM文档操作对象。用于监听按钮等控件发起的操作监听。

事件有几种设置方式：

1、内嵌式：

2、script设置式:

3、全局设置式:

事件的种类：

1、点击 onclick

2、聚焦 onfocus

3、失焦 onblur

4、值改变 onchange

5、输入 oninput

6、鼠标移动 onmousemove

7、鼠标进入 onmouseenter

8、鼠标移出 onmouseleave

9、鼠标按下 onmousedown

10、鼠标弹起 onmouseup

11、鼠标移开元素 onmouseout

12、键盘事件，按下 onkeydown

13、键盘事件，弹起 onkeyup

键盘常用按键keyCode：

1、keyCode 回车：13

2、keyCode 空格：32

3、keyCode 左上右下: 37,38,39,40