TOC](html+css+js 基本点)
html超文本标记语言(记事本 sublime text emmet插件)
标签
用标签标记元素<>成对 标签的开始到结束整体为元素 DOM document object model 文档对象模型 (树)
标签内部包含属性
html文件结构 title只会取第一次在代码中出现的结果
html 标签 h1-6标题 br换行 span段内分组 p段落 pre预留格式完全显示空格换行
水平线
绝对路径或是相对路径 alt 图片无法正常显示替代的文字
区域列表表格
区域 div便于修改 区域可以有自己的id唯一便于样式设置
无序列表ui 有序列表ol 列表项li
表格table tr行 td列 th表格单元头
表单form 及表单元素标签input select textarea
input type属性 password text name属性当前表单元素名字
选框radio checkbox 属性type name取值要相同 value checked 默认选中
下拉列表select option每一个选项selected默认选择
文本域textarea cols rows属性
css添加方式
css样式名称标签或自定义,分号 style行内样式 内嵌样式 外部文件使用link标签调用外部文件 就近原则
选择器 标签选择器 类别选择器class *全局 ID选择器#(被唯一引用)混合使用
css文字样式 px像素 em字符 %百分号 字体颜色rgb/rgba透明度
css背景样式 image repeat反复填充
超链接的四种css 顺序a:link visited hover active
css表格 border collapse tr属性tr:nth-child(old|even)奇偶选择器
css布局与定位
盒子模型margin+border+padding+content
content内容height weight margin盒子外边距 border盒子边框样式 padding内容边距 overflow内容溢出
水平线盒子模型 竖直方向上margin会合并水平不会
图片文字水平居中 text-align:center margin:0 auto text-direction下划线 去除浏览器默认字边距font-size:0
css定位 文档流 浮动定位float 层定位position
-
文档流
block元素(div等诸多标签)独占一行 可以设置长宽高margin padding inline元素 不独占一行span a 标签 无法设置大小 inline-block img 文档流可以设置display来更改 none不显示
-
浮动定位
div实现横向多列布局 (多用于图片文字混排,并列布局)float脱离文档流 clear清除浮动不会出现层叠 位置可以取决于float元素
-
层定位
position相对参照物 top left roght bottom 与margin不冲突z-index fixed相对浏览器进行定位 relative相对于父元素 relative 脱离文档流但原位置依然存在top等属性不影响其他的位置 依据原文挡流位置 absolute定位相对于上一层父元素(不是直接的上一层父元素)父元素为最近定义为absolute/relative的父元素直至body 一般父元素设置为relative 子元素设置为absolute
css3新标准
圆角边框 阴影box-shadow word-wrap换行
2D转换移动缩放 transform属性rotate() scale()
过渡动画
transtion过渡某个属性在一定时间内过度到另一个值 animation动画 定义@keyframes规则 animation调用
3D transform-style:preserve-3d transform属性 prespective透视属性 内容的父容器设置transform 透视关系上一层
js解释性语言 弱类型语言 不会检查错误 运行错及停止
js三部分 核心ECMAScript 文档对象模型DOM 有能力与网页对话(跳转等)浏览器对象模型BOM 与浏览器进行对话(确定鼠标位置)
浏览器内核 负责内容排版解析html css 脚本解释引擎js
js基本语法
-var变量声明 省略var为全局变量 变量用逗号相连简写
js变量命名规范 不允许使用关键字和保留关键字 由字母数字下划线$组成 不能以数字开头 多用驼峰命名第一个单词小写第二单词首字母大写
js数据类型 数字类型 bool 字符串 空声明对象未赋值 undefined未定义 变量为赋值 (null偏向于对象表示没有对象 undefined表示对象没赋值,对象 不存在的属性等)
-
数据类型
隐式转换 typeof获取数据类型 isNaN()判断是否为数字 str+结果一定是str 显示转换 toString() 变量.toString()=num+"" parseInt()获取数据整数部分(从左向右转换遇到非数字停止) parseFloat()
-
运算符与表达式
+(字符串连接或数字运算)==只比较数值 ===比较数值和类型 与或非(短路) 三目运算符 表达式1(bool类型)?表达式2:表达式3; 三目运算符嵌套 函数function:预定义 参数 返回值 (声明的参数为形参调用时传入的参数为实参)作用域(函数,全局)
-
js分支结构
if/elsel/elseif switch/case/default/break
-
js循环结构
for do/while
-
js数组
索引数组 var a=[]/new Array()先声明再赋值 赋值时数组越界会自动扩充数组未设置的项为空赋值时越界的一项成为数组最后一项 下标访问 混合数组 array.length 数组遍历 数组缩容直接改变arr.length的值实现改变数组长度 关联数组 空数组自定义下标 arr.length无法获取数组长度 arr['下标名']赋值 遍历for..in..实现 for key in arr key代表下标 关联数组无法以字符串直接输出复杂度低(hash)和存储位置个数无关
-
js数组api
-
String(arr) 数组转为字符串 arr.join("")用符号连接 面向对象的语言 执行的是值相等的对象 不是原对象
-
数组拼接arr.concat 将元素或数组拼接在arr之后返回新的对象
-
数组选取返回新数组arr.slice(数组下标start,end+1) 都不会原对象造成影响
-
修改原数组(直接修改原数组)arr.splice(start,n) 从下标start开始删除n个元素 返回被删的元素组成的数组 若n为0则会插入到start元素之前
-
arr.splice(start,n,像替换的数组或元素)
-
数组颠倒arr.reverse() 数组按字符串排序arr.sort()