CSS样式
1 宽高设置
块元素可使用 wid
1字体
font-family : 文本类型
font-size 字体大小
font-style 字体样式 斜体italic 正常normal
font-weight 字体粗细(100-900) 加粗bolder 正常normal 细体lingther
chorm默认16px 微软雅黑
2 列表
list-style 标记修改 none去除 可设置样式
list-style-position 设置标记位置 inside列表li内 outside 列表li外
3 盒子模型
内容+padding+border+margin
padding 内边界(内部背静延伸可见)
boeder 边框
margin 外边界(不可见)
设置方式 padding:50px(四边均相同)
padding:50px,10px(上下50,左右10)
padding:50px,10px,5px(上50,右10,下5,左同右)
padding:50px,10px,5px,1px(上右下左)逆时针
4 元素的居中调整
line-height 行高
text-align 水平方向的对齐方式 块和行内块能够使用(设置居中)
vertical-align 垂直方向的对其方式 行内|行内块有效(设置高度居中)
5 浮动
float :left|right 向指定方向移动,遇到其他浮动元素或浏览器边界停止
半脱离文档流 内容会让出前面浮动元素的位置(原本用于实现文字环绕)
主要用于实现块元素并排显示
浮动的清除
1属性设置 clear:left/right/both 元素的左边或右边不能有浮动元素 建议使用both
只能控制一侧,另一侧由其他浮动元素控制,避免同行显示
2 浮动元素外套父元素 设置父元素高度或将设置父元素属性overflow:hidden
通过父元素控制包含主内部的浮动元素,需要父元素高度适应子元素
6 定位
position定位属性包括:
relative 相对定位 不脱离文档流 相对于自身原位置定位
能够实现块元素行连接,但原位置仍然占着
absolute 绝对定位 脱离文档流(取消原位置) 绝对位置
若父元素设置relative则相对父元素移动
若父元素未设置relative则相对窗体定位
fixed 固定定位 脱离文档流(取消原位置)
相对浏览器的视图定位 无视滚动条
需要与top bottom left right属性设置连用
7 图片属性设置 high=100%, width=100%表示占着父原则的所有空间
JavaScript
1 基本概念
Js客户端脚本语言:ECMAScript 核心基础语法 描述语法与基本对象
DOM 文档对象模型 描述处理网页内容的方法和接口
BOM 浏览器对象模型 描述与浏览器交互的方法与接口
Js中一切都是对象
2 定义方式
行内 标签内定义
内部 html文档内的script标签内
外部 外部定义js文件,在引入html中
一个script不能同时定义js代码又引入js文件
Js在html的定义位置建议
Head中 便于维护,可能拿不到元素节点,需要设置window.onload
Body结束前 能够拿到元素所有节点
三种注释与java相同
3 数据类型
简单数据类型
String 字符串 显示黑色 单引号/双引号括住 转义字符适用
Number 数值型 显示紫色 包括 整数,小数,NaN
Boolean 布尔型 true/false
Undefined 未定义 赋值未定义;声明未赋值
Null 空 赋值null,获取不到元素
function 方法 function(参数){}
复杂数据类型/对象类型
{key:value, key:value} 键值对形式的数据
获取数据类型的运算符
typeof(数据) null与方法返回object
4 变量作用域
变量声明
1 var 变量名 (可直接赋值,可先声明后赋值,根据赋值确定数据类型)
2变量名 (直接声明)
3多个连续声明格式: var a,b,c
var a,b,c =10 (这给c赋值了) var aa=11, bb=12, cc = 10(全部赋值)
4若对已声明的对象重写声明无效,但同时声明赋值能够覆盖原值
var box = 10;var box=15; box值为10
作用域包括两类外部script标签和内部function方法
全局变量作用域为整个script 局部变量只在function中有用
作用域提升
var声明的变量在作用域中存在作用域提升的作用,但只能提升变量声明(包括方法中)
局部变量var变量在外部无法使用
例外 没有var声明的方法局部变量在方法被调用后,
外部在方法以下的代码能够使用该局部变量
5 数据类型转换
1自动转换
+-运算
数字(+-)boolean Boolean转为0(false)和1(true)
数值+字符串 字符串拼接
2 强制转换
String() 返回字符串 方法名则返回方法代码
Boolean() 非空字符串和非0数字 为ture;其他均false
Number() 空字符串和空格字符串 返回0
纯数字字符串 返回数字
非纯数字 NaN
boolean 0或1
null 0
undefined NaN
字符串转数字的方法(推荐)
parseInt() 分析字符串索引0位置的字符
若有效字符则找出首个有效整数 若首个并发有效字符返回NaN
parseInt(字符串,数字进制) 能够对进制数进行获取
parseFloat()分析首字符,以获取首部的有效小数 否则NaN 只识别十进制
5 运算符
== 直接比较内容(字符串与数字直接比较)
=== 同时比较数据类型和数据内容 先比较类型,若否直接false
! 取反可以重复使用 !!!true值为false
{ }不具备作用域效果,仅仅区分代码块
其余同java
6 数组
特点:不定长,存任意数据(多个类型存储),索引从0开始
创建:
[数据,数据,数据… ] 推荐
new Array( ) 创建空数组
new Array(值1,值2…) 赋值创建
eg: var arr=[true,false,1,'red']
索引赋值 数组名[索引]=值
若索引大于length,能够赋值,间隔元素为undefined
若索引为其他非正常值 将索引和值,作为数组自定义的属性存在,KV形式
遍历
普通for
for(i=0;i<arr1.length;i++){console.log(arr1[i]);}
for…in…循环
for(var 索引 in 数组){ console.log(i+'---->'+arr1[i]); } 能够遍历所有值包括非正常索引
forEach(function(指代值,指代索引,数组)) 指代值和指代索引随便选变量
方法
slice( ) 截取 原数组不改变
1个参数 从指定参数处截取到最后
2个参数 从参数1截取到参数2索引处 前闭后开
splice( ) 截取 原数组改变
1个参数 从指定参数处截取到最后
2个参数 从参数1截取,截取长度为参数2
3个及以上参数 从参数1截取,截取长度为参数2,参数3之后填充到原数组的截取位置
7 函数
函数声明
function 函数名([形参列表]){ ... } |
调用 函数名(实参)
外部加括号,可转为函数表达式 之后再加( )直接调用
函数声明前加~ + - 转为函数表达式 之后再加( )直接调用
自调用的函数函数名不可再调用
函数表达式
var 变量=function [函数名](形参列表) { ... } |
调用 变量(实参)
函数表达式后再加( )直接调用 注意,自调用后变量不可再调用
注意外部函数无法再通过方法名直接调用,单方法定义内部可以递归使用方法名
匿名函数
(function( ){ … } )( ); |
方法中可以使用 return返回返回值 , 若无return则视为返回Undefined
形参列表不需要指明数据类型
调用时缺少参数,形参视为undefined,参数多则按顺序获取