常用属性............................................................................................ 1
Html基础........................................................................................... 3
常用快捷键................................................................................ 3
认识大前端................................................................................ 4
前端工作就是 : 将设计图通过 Html,CSS,JS等技术生成网页............................................................................................ 4
应用于 : 移动端 PC端................................................... 4
用户体验 : UI设计................................................ 4
学习态度............................................................................ 4
认识网页.................................................................................... 4
网页由文字,图片,按钮,超链接等组成。........................... 4
Web标准............................................................................ 4
浏览器................................................................................ 5
浏览器内核......................................................................... 5
浏览器和服务器的那点事.................................................................................................... 6
Url地址.................................................................................................... 7
认识html.................................................................................... 7
Html 全称 : HyperText Markup Language........................ 7
Html结构标准(html 5 才开始的)...................................... 8
Html标签分类.................................................................... 8
Html标签关系分类............................................................ 8
开发工具............................................................................ 9
设置默认浏览器............................................................... 10
标签.......................................................................................... 10
单标签.............................................................................. 10
双标签.............................................................................. 11
文本标签.......................................................................... 11
图片标签.......................................................................... 12
路径.......................................................................................... 12
相对路径.......................................................................... 12
绝对路径.......................................................................... 13
超链接...................................................................................... 13
锚链接.............................................................................. 13
空链 不知道链接到那个页面的时候，用空链............. 14
压缩文件下载 不推荐使用.................................................................................................. 14
超链接优化写法 <base target="_blank"> 让所有的超链接都在新窗口打开................................................................... 14
另存为 ctrl+shift+s............................................................... 15
特殊字符.................................................................................. 15
列表.......................................................................................... 15
无序列表.......................................................................... 15
有序列表.......................................................................... 16
自定义列表....................................................................... 16
音乐标签.................................................................................. 17
滚动.......................................................................................... 17
head里的一些常用东西........................................................... 18
!+tab html5的标签结构............................................... 18
Charset 编码................................................................. 18
关键字.............................................................................. 18
网页描述.......................................................................... 18
网页重定向....................................................................... 19
链接外部样式表(css)........................................................ 19
设置icon图标.................................................................. 19
表格.......................................................................................... 20
表格的标准结构............................................................... 21
表头和单元格合并........................................................... 22
表格标题、边框颜色、内容垂直对齐............................ 22
表单.......................................................................................... 24
表单的作用是收集信息。................................................ 24
标签语义化.............................................................................. 28
Css基础........................................................................................... 28
Css概念................................................................................... 28
选择器写法....................................................................... 29
选择器...................................................................................... 29
基础选择器....................................................................... 29
复合选择器....................................................................... 31
文本元素.................................................................................. 34
属性.................................................................................. 34
文本属性连写................................................................... 35
文字的表达方式............................................................... 35
样式表书写位置....................................................................... 36
标签分类(显示方式)................................................................ 37
块元素.............................................................................. 37
行内元素.......................................................................... 37
行内块元素(内联元素)..................................................... 37
块元素、行内元素 转换.................................................. 38
css三大特性............................................................................. 39
层叠性.............................................................................. 39
继承性.............................................................................. 39
优先级 默认样式<标签选择器<类选择器<id选择器<行内样式<!important.................................................................... 39
链接伪类.................................................................................. 40
文本修饰.......................................................................... 40
背景属性.................................................................................. 41
background-color 背景颜色..................................... 41
background-image 背景图片...................................... 41
Background-repeat repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺...................................... 41
Background-position left | right | center | top | bottom 背景定位.................................................................... 41
Background-attachment 背景是否滚动 scroll | fixed.......................................................................................... 41
背景属性连写................................................................... 41
行高.......................................................................................... 42
行高的单位....................................................................... 42
补充:................................................................................. 43
PX特点............................................................................ 43
EM特点............................................................................ 43
１ 盒子模型............................................................................ 44
１.1 边框 border.......................................................... 44
１.2 边框合并 border-collapse:collapse;..................... 45
１.3 获取焦点................................................................. 45
１.4 内边距..................................................................... 46
１.5 外边距..................................................................... 46
１.6 行内元素可以定义左右的外边距，上下会被忽略掉。.......................................................................................... 47
文档流（标准流）................................................................... 47
浮动布局.................................................................................. 47
浮动的作用....................................................................... 48
清除浮动.................................................................................. 48
Overflow.................................................................................. 51
定位.......................................................................................... 51
定位的盒子居中显示............................................................... 52
标签包含规范.......................................................................... 53
规避脱标流.............................................................................. 55
图片和文字垂直居中对齐....................................................... 55
Css可见性................................................................................ 56
css之内容移除（网页优化）.................................................. 56
Css精灵图................................................................................ 57
属性选择器.............................................................................. 57
emmet快捷键：....................................................................... 57
html:......................................................................................... 58
生成结构的快捷键：....................................................... 58
生成id名和类名.............................................................. 58
生成同级元素：............................................................... 58
生成子类标签................................................................... 58
带固定数量的标签:.......................................................... 58
ul>li*5+tab........................................................................ 58
带有序号名称................................................................... 58
生成带有内容的标签：................................................... 58
css............................................................................................. 59
前端基本功—javascript................................................................... 59
JS概述..................................................................................... 59
JS作用.............................................................................. 59
浏览器工作原理(了解)..................................................... 60
弱类型脚本语言（解释型语言，解析执行与编译执行）..... 60
解析执行与编译执行....................................................... 60
弱类型脚本语言............................................................... 60
组成（前端标准和JS组成）.................................................. 61
前端标准（HTML/CSS/JS）........................................... 61
JS组成.............................................................................. 61
输出语句.................................................................................. 61
引入方式.................................................................................. 62
内嵌式（学习期间用）................................................... 62
外链式（实际开发）....................................................... 62
变量.......................................................................................... 62
命名规则.......................................................................... 62
变量使用.......................................................................... 62
数据类型.................................................................................. 63
数据类型划分................................................................... 63
字面量.............................................................................. 63
简单数据类型介绍........................................................... 63
数据类型转换.......................................................................... 65
任何简单类型转换成String（三种方法）...................... 66
任何简单类型转换成Number.......................................... 66
任何简单类型转换成Boolean.......................................... 67
操作符...................................................................................... 67
操作符种类....................................................................... 67
优先级.............................................................................. 68
&&和||运算....................................................................... 68
流程控制.................................................................................. 69
循序结构.......................................................................... 69
选择结构.......................................................................... 69
循环结构 (js中没有块级作用域,只有在function中有). 70
案例：...................................................................................... 72
数组.......................................................................................... 72
数组的概述....................................................................... 72
数组的定义....................................................................... 73
数组的操作....................................................................... 73
遍历数组（获取并操作数组中的每一个元素）（！！！重点！！！）........................................................................... 74
案例：.............................................................................. 74
调试（打断点）............................................................... 74
函数基础.................................................................................. 75
函数概述.......................................................................... 75
函数的定义....................................................................... 75
参数.................................................................................. 75
返回值.............................................................................. 76
案例.................................................................................. 76
函数名、函数体和函数加载问题（重点记忆）............. 77
作业：.............................................................................. 77
函数定义.......................................................................... 77
变量和作用域（隐式全局变量和变量声明提升）......... 78
小知识.............................................................................. 80
函数高级.................................................................................. 80
匿名函数（了解）........................................................... 80
函数是一种类型（了解）................................................ 81
函数作为参数（了解）................................................... 81
递归（理解）................................................................... 81
对象和面向对象....................................................................... 81
JS中的对象（Object）基于面向对象............................. 81
创建自定义对象............................................................... 82
对象字面量和JSON......................................................... 82
Json组成.......................................................................... 83
for...in...遍历JSON.......................................................... 83
参数和传值问题............................................................... 83
数组高级API........................................................................... 84
学习API的方法............................................................... 84
Array的内置方法............................................................. 84
事件.......................................................................................... 88
概述.................................................................................. 88
事件三要素....................................................................... 88
案例.................................................................................. 90
DOM概述................................................................................ 90
解析过程.......................................................................... 90
DOM (文档对象模型).................................................. 90
DOM的数据结构（树状）............................................. 92
HTML的组成部分为节点（ Node ）............................ 92
DOM节点的获得............................................................. 92
DOM 访问关系（节点的获得）..................................... 93
DOM节点操作 （！！！！！重点！！！！！）......... 96
DOM详解（属性操作）......................................................... 97
DOM元素........................................................................ 97
案例.................................................................................. 98
value和innerHTML和innerText和textContent............. 98
DOM详解................................................................................ 98
DOM案例........................................................................ 98
总结.................................................................................. 99
工具类的封装tools.js(了解,尝试).................................. 100
DOM创建元素............................................................... 101
内置对象BOM....................................................................... 101
Date................................................................................. 102
String.............................................................................. 103
Math................................................................................ 105
offset家族.............................................................................. 106
三大家族和一个事件对象.............................................. 106
Offset家族简介.............................................................. 106
offsetLeft和style.left区别............................................. 107
动画和封装............................................................................ 107
动画定义........................................................................ 107
动画的种类..................................................................... 108
动画原理........................................................................ 108
体验匀速动画................................................................. 108
案例........................................................................................ 108
焦点图............................................................................ 108
切换图............................................................................ 109
无缝滚动........................................................................ 109
缓动动画................................................................................ 109
三个函数........................................................................ 109
缓动动画原理................................................................. 109
体验缓动动画................................................................. 110
分析为什么没有到达指定位置...................................... 110
offsetLeft和style.left的值的获取问题.......................... 110
按例：筋斗云................................................................. 110
第二家族scroll....................................................................... 111
Scroll家族组成.............................................................. 111
获取title、body、head、html标签............................... 112
Json回顾........................................................................ 112
Scroll()的封装................................................................ 113
案例................................................................................ 114
小知识.................................................................................... 114
onscroll事件................................................................... 114
屏幕跳转........................................................................ 114
前端基本功—javascript 第八天............................................ 114
今日内容：............................................................................ 114
scroll家族.............................................................................. 115
案例................................................................................ 115
事件对象（event）................................................................ 115
事件对象的获取（event的获取）................................. 115
兼容获取方式有两种：................................................. 116
event内容重要内容........................................................ 116
screenX、pageX和clientX的区别................................ 117
pageY和pageX的兼容写法（低版本不支持,很重要）................................................................................................ 118
新事件（onmousemove）.............................................. 118
案例................................................................................ 118
第三大家族client................................................................... 119
主要成员........................................................................ 119
三大家族区别（三大家族总结）.................................. 119
client家族特殊用法之:检浏览器宽/高度(可视区域)..... 120
Onresize事件.................................................................. 120
案例：根据浏览器可视区域大小，给定背景色........... 120
事件总结........................................................................ 120
获得屏幕宽高................................................................. 121
冒泡........................................................................................ 121
阻止冒泡........................................................................ 121
addEventListener(参数1，参数2，参数3)................... 121
案例................................................................................ 122
缓动框架................................................................................ 123
封装框架遇到的两个问题.............................................. 123
获取任意类型的CSS样式的属性值............................. 123
开闭原则........................................................................ 123
回调函数........................................................................ 124
案例（缓动框架的应用）.............................................. 124
缓动框架存在的问题..................................................... 125
缓动框架案例................................................................. 125
正则表达式（RegExp）........................................................ 126
概述................................................................................ 126
正则表达式的特点是：................................................. 127
正则表达式声明............................................................. 127
test() 方法...................................................................... 128
正则内部类（帮我们写好的工具直接使用）............... 128
正则边界（重点）......................................................... 130
量词（重点）................................................................. 130
案例：............................................................................ 130
replace 函数................................................................... 131
jQuery............................................................................................ 132
jQuery 基础课程—jQuery选择器........................................ 132
为什么要学jQuery？..................................................... 132
jQuery是什么？............................................................. 133
如何使用jQuery？（重点）.......................................... 134
jQuery详细解释............................................................. 135
JS跟jQuery的区别是什么？（理解）......................... 140
为什么要学jQuery选择器？......................................... 141
强大的jQuery选择器（重点）..................................... 141
jQuery 基础课程—jQuery-DOM操作.................................. 143
使用jQuery操作DOM.................................................. 143
为什么要使用jQuery操作DOM................................... 143
重点内容........................................................................ 144
样式操作........................................................................ 145
jQuery动画是什么？..................................................... 147
jQuery节点操作............................................................. 153
操作form表单............................................................... 156
尺寸位置操作................................................................. 158
jQuery其他必备知识............................................................. 161
重点内容........................................................................ 161
操作form表单............................................................... 161
尺寸位置操作................................................................. 163
jQuery事件机制............................................................. 165
jQuery补充.................................................................... 170
jQuery插件机制............................................................. 172
H5................................................................................................... 173
1.1 认识HTML5................................................................... 173
1.2 语法规范......................................................................... 174
语义标签................................................................................ 175
常用新语义标签............................................................. 176
兼容处理........................................................................ 176
表单........................................................................................ 177
输入类型 (表单类型，表单元素，表单属性,表单事件.)......................................................................................... 177
表单元素（标签）......................................................... 178
表单属性........................................................................ 179
表单事件........................................................................ 180
案例练习........................................................................ 181
181
多媒体.................................................................................... 182
音频................................................................................ 182
视频................................................................................ 183
DOM扩展.............................................................................. 184
获取元素........................................................................ 184
类名操作........................................................................ 184
自定义属性..................................................................... 185
案例练习 (tab 切换)...................................................... 185
新增API................................................................................. 186
多媒体............................................................................ 186
拖拽................................................................................ 188
历史................................................................................ 188
地理定位........................................................................ 189
Web存储........................................................................ 190
全屏................................................................................ 191
网络状态........................................................................ 192
应用缓存........................................................................ 192
Font Awesome 字体框架............................................... 195
CSS3.............................................................................................. 196
1.3 CSS3的现状.................................................................... 196
1.4 如何对待......................................................................... 197
准备工作................................................................................ 197
统一环境........................................................................ 197
如何使用手册................................................................. 197
基础知识................................................................................ 198
选择器............................................................................ 198
颜色................................................................................ 201
文本 (shadow阴影)....................................................... 202
盒模型............................................................................ 203
边框................................................................................ 204
渐变................................................................................ 210
背景................................................................................ 214
过渡(transition)............................................................... 216
2D转换.......................................................................... 220
1、 3d变换.................................................................... 222
2、透视：...................................................................... 222
3、transform-style:preserve-3d;...................................... 222
4、 backface-visibility:hidden; 背面不可见.................. 223
5、动画：...................................................................... 223
伸缩布局........................................................................ 224
Web字体................................................................................ 227
字体格式........................................................................ 228
字体图标........................................................................ 228
兼容性.................................................................................... 229
高级应用................................................................................ 229
ajax................................................................................................. 231
HTTP服务搭建...................................................................... 231
AMP............................................................................... 231
AMP集成环境............................................................... 231
WAMP安装................................................................... 231
测试访问........................................................................ 232
配置局域网访问............................................................. 233
配置网站根目录............................................................. 234
PHP基础................................................................................ 234
PHP简介........................................................................ 234
PHP常见语法................................................................ 234
PHP中的header............................................................. 239
PHP表单........................................................................ 240
PHP_GET数据获取....................................................... 240
PHP_POST数据获取..................................................... 241
POST&GET错误处理.................................................... 241
PHP文件上传处理 $_FILES对象....................... 242
PHP文件上传处理02_文件保存................................. 242
常见网络传输协议................................................................. 243
HTTP协议............................................................................. 244
监测工具........................................................................ 244
请求/请求报文................................................................ 244
响应/响应报文....................................................................... 246
常见的响应状态..................................................................... 248
PHP设置上传文件大小......................................................... 248
修改php.ini.................................................................... 248
修改内容........................................................................ 248
Ajax的基本概念和使用........................................................ 249
同步&异步..................................................................... 249
异步更新网站........................................................................ 249
网站内容更新:................................................................ 249
Ajax概念............................................................................... 249
XMLHttpRequest.................................................................... 250
XMLHttpRequest_API讲解................................................... 252
1.创建XMLHttpRequest对象(兼容性写法).................. 252
2.发送请求:.................................................................... 253
3.POST请求注意点:...................................................... 253
4.onreadystatechange事件.............................................. 253
4.服务器响应内容.......................................................... 254
Ajax传输xml......................................................................... 254
XML简介....................................................................... 254
XML语法....................................................................... 255
XML解析....................................................................... 256
PHP中设置Header................................................................ 256
Ajax传输json........................................................................ 257
JSON解析...................................................................... 257
JavaScript 中.................................................................. 257
Ajax工具函数封装................................................................ 259
原生Ajax写法回顾........................................................ 259
抽取公共部分................................................................. 260
Jquery中的ajax..................................................................... 261
格式化表单$('form').serialize()....................................... 261
JQueryAjax使用............................................................ 262
模版引擎................................................................................ 265
模版引擎简介................................................................. 265
模版插件原理................................................................. 266
常见的模板插件............................................................. 266
ArtTemplate基本使用.................................................... 266
同源以及跨域........................................................................ 267
同源................................................................................ 267
跨域方案(了解).............................................................. 268
JSONP(了解).................................................................. 268
jQuery 的$.ajax()........................................................... 269
瀑布流.................................................................................... 270
什么是瀑布流?............................................................... 271
瀑布流实现原理............................................................. 272
移动端开发.................................................................................... 272
设备................................................................................ 272
移动web页面的作用..................................................... 272
注意点............................................................................ 273
移动web的注意点......................................................... 273
移动端的浏览器............................................................. 273
电脑上查看移动端界面................................................. 273
常见前端编辑器............................................................. 274
Viewport................................................................................. 274
viewport的概念.............................................................. 274
修改viewport................................................................. 274
可选值............................................................................ 275
移动web样式注意................................................................ 275
点击高亮效果................................................................. 275
盒子模型........................................................................ 276
Input默认样式清除........................................................ 276
最小宽度和最大的宽度................................................. 276
视网膜屏幕..................................................................... 276
左右两张的无限轮播..................................................... 277
touch............................................................................... 277
过度事件........................................................................ 278
图片分辨率问题............................................................. 279
移动端屏幕适配布局方式.............................................. 279
抽取通用样式................................................................. 279
学习布局........................................................................ 279
移动京东站首页js效果................................................. 279
过度结束事件................................................................. 280
移动端特有事件............................................................. 280
常见的封装..................................................................... 280
LESS............................................................................... 280
less只是一个纯文本...................................................... 281
less使用.......................................................................... 281
考拉编译注意点............................................................. 281
less的作用...................................................................... 282
如何让代码写的通用性更强.......................................... 282
响应式............................................................................ 284
微金所............................................................................ 286
响应式布局..................................................................... 286
bootsrap使用.................................................................. 287
标签页导航..................................................................... 288
bootstrap使用................................................................. 289
栅格系统的偏移............................................................. 289
zepto............................................................................... 290
响应式布局..................................................................... 290
bootsrap使用.................................................................. 291
微金所信息区域............................................................. 292
cursor:pointer;//设定鼠标移入的形状为一只伸出食指的手
position: absolute;/*子布局为绝对布局，从而让此控件随着父布局放大或缩小时位置不变*/
position: relative;/*使父布局为相对布局*/
right: 10px;/*让控件在右侧*/
margin: 0 auto;/*使内部的div居中*/
text-align: center;/*文本内容居中*/
text-decoration: none;/*去掉a标签的下划线*/
/*隐藏*/
.hide{
display: none;
}
/*显示*/
.show{
display: block;
}
box.onmouseover = fun1;/*鼠标悬停，即鼠标停留在图片等上方*/
box.onmouseout = fun2;/*鼠标移出，即鼠标离开图片等所在的区域*/
list-style-type: none;/*去掉每个li前面的点*/
background: url("images/bgs.png") no-repeat;/*no-repeat使背景图片不重复*/
input.disabled = true;//禁用输入框
input.disabled = false;//解禁输入框
input.style.border = "1px solid red"//设置输入框的样式
input.style.border = ""//清空输入框的样式
input{
/*去掉input边框*/
border:0 none;
/*去掉被点击后的边框*/
outline-style: none;
/*设置边框连写*/
border:dashed 1px green;
}
/*获取焦点*/
input:focus{
border:dotted 1px red;
border-width: 3px;
}
outline: none;/*清除鼠标点击输入框时出现的蓝色边框*/
<!--onfocus是得到焦点，
onblur 是失去焦点-->
<input type="text" οnblur="fn(this)" οnfοcus="fn2(this)">
border: 2px solid #e4e4e4;/*设置外边框* dotted 点线,dashed 虚线,solid 实线/
z-index: 100;/*设置层次，值越大层次越高*/
font-weight: bold;/*设置字体加粗*/
border-radius: 4px;/*设置圆角*/
/*获取窗口内部的宽高*/
var w = window.innerWidth;
var y = window.innerHeight;
overflow 属性规定当内容溢出元素框时发生的事情
可能的值
| 值 |
描述 |
| visible |
默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden |
内容会被修剪，并且其余内容是不可见的。 |
| scroll |
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto |
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit |
规定应该从父元素继承 overflow 属性的值。 |
a标签空连方式：
1,href=“#”
2，href=“javascript:;”
3，herf=“javascript:void(0)”
Opacity:0.3;//单独设置透明度
Array.from(数组)//将伪数组转换成真数组
onselectstart=”return false”禁止被选中
| Ctrl+c |
复制 |
| Ctrl+v |
粘贴 |
| Ctrl+x |
剪切 |
| Ctrl+a |
全选 |
| Ctrl+s |
保存文件 |
| Ctrl+z |
撤销一步 |
| Windows+d |
显示桌面 |
| Windows+e |
资源管理器 |
| Windows+r |
打开运行窗口 |
| Alt+tab |
切换软件窗口 |
| Ctrl+tab |
切换页签 |
| F2 |
重命名 |
| F5 |
刷新 |
前端工作就是 : 将设计图通过 Html,CSS,JS等技术生成网页
养成一种习惯。
网页由文字,图片,按钮,超链接等组成。
W3c组织（万维网联盟）
Html 结构标准 相当于 结构,骨骼,组成
Css 表现标准 相当于给人化妆
Js 行为标准 想当于 行为,功能,动作 灵动
◆浏览器是一个上网的客户端（软件）。
渲染引擎
IIS web服务器 提供网页浏览服务
Html 全称 : HyperText Markup Language
超文本标记语言。
超文本
标记 < html >
语言
Html结构标准(html 5 才开始的)
< ! DOCTYPE html> 声明文档类型
<html> 根标签
<head> 头标签
<title></title> 标题标签
</head>
<body> 主体标签
</body>
</html>
Html 与htm是一样的。
后缀名能否决定文件格式?
不能,只能决定 打开方式
包含（嵌套关系）: <head> <title></title > </head >
并列关系 :<head></head> <body></body>
单标签 <! Doctype html>
双标签 <html></html> <head></head> <title></title>
开发工具
Dw 历史悠久，设计师使用。
Sublime 轻量级 有很多好用的插件。
Webstorm 重量级 项目级别的开发工具,太过智能现在用不到。
| |
新建文件、打开文件、打开文件夹 |
| Html:xt+tab |
Html结构代码 |
| tab |
补全标签代码 |
| Ctrl+shift+d |
快速复制一行 |
| Ctrl+shiif+k |
快速删除一行 |
| Ctrl+鼠标左键单击 |
集体输入 |
| Ctrl+h |
查找替换 |
| Ctrl+f |
查找 |
| Ctrl+/ |
注释 |
| Ctrl+L |
快速选择一行 |
| Ctrl+shift+↑（↓） |
快速上移（下移）一行 |
| F11 |
全屏 |
| |
查看----布局 |
Chrome浏览器右上角，设置里选择设置默认浏览器。
◆注释标签 ctrl+/
<!— 内容 -->
◆ 换行标签 <br />
◆ 水平线标签 <hr />
<p>文本内容</p>
特点：上下自动生成空白行。<br />换行不会生成空白行。
标题标签
h1-h6 取值到h6
<font>文本内容</font>
文本格式化标签
文本加粗标签 <strong></strong> <b></b> 工作里尽量使用strong
文本倾斜标签
<em></em> <i></i> 工作里尽量使用em
删除线标签
<del></del> <s></s> 工作里尽量使用del
下划线标签
<ins></ins> <u></u> 工作里尽量ins
◆注意：之所以工作里使用<strong></strong> <em></em> <del></del>
<ins></ins> 是因为更有语义化。
Src 图片的来源 必写属性
Alt 替换文本 图片不显示的时候显示的文字
Title 提示文本 鼠标放到图片上显示的文字
Width 图片宽度
Height 图片高度
◆图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。
相对于文件自身出发，就是相对路径。
◆文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名。
◆图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称
◆图片（html）在文件的上一级目录里，..+/+图片（html）名称
◆图片在文件的上一级的其他目录里，../文件夹名称/图片名称
★总结：找到下一级目录（文件夹）的图片（文件）用 /
跳出当前目录使用../
href 去往的路径（跳转的页面） 必写属性
title 提示文本 鼠标放到链接上显示的文字
target=”_self” 默认值 在自身页面打开（关闭自身页面，打开链接页面）
target=”_blank” 打开新页面 （自身页面不关闭，打开一个新的链接页面）
- 先定义一个锚点
- 超链接到锚点
空链 不知道链接到那个页面的时候，用空链
<ul>
<li></li> 列表项
<li></li>
<li></li>
</ul>
type=”square” 小方块
Type=”disc” 实心小圆圈
Type=”circle” 空心小圆圈
<ol>
<li></li> 列表项
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
◆type=”1,a,A,i,I” type的值可以为1,a,A,i,I
start=”3” 决定了开始的位置。
<dl>
<dt></dt> 小标题
<dd></dd> 解释标题
<dd></dd> 解释标题
</dl>
注意:此标签是h5 特有的,老版本不支持
hidden属性表示是否隐藏播放界面
scrolldelay="10" 设置移动速度,数值越小越快 ,默认 90
scrollamount="5" 设置移动距离数值越大移动距离越大
Ascll
Ansi 扩展的ASCII编码
Unicode 日文/韩文
Gbk 中文
Gb2312 中文
Big5 繁体
Utf-8 通用字符集
展示数据。 是对网页重构的一个有益补充。
<table> 表格
<tr> 行
<td></td> 列
<td></td>
<td></td>
</tr>
</table>
◆属性：
Border=”1” 边框:1默认为2px
Width=”500” 宽度
Height=”300” 高
cellspacing=”2” 单元格与单元格的距离 : 0
cellpadding=”2” 内容距边框的距离
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用 ，tr或者td内容居中。
bgcolor=”red” 背景颜色。
bordercolor="green" 边框颜色
<table>
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
◆ 表头 <caption></caption>
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格
◆表格标题 <th></th>用法和td一样
标题的文字自动加粗水平居中对齐
◆边框颜色
◆内容垂直对齐方式
Valign=”top | middle | bottom”
表单的组成
◆提示信息
◆表单控件
◆表单域
属性：action:处理信息
Method=”get | post”
Get通过地址栏提供（传输）信息，安全性差。
Post 通过1.php来处理信息，安全性高。
◆文本输入框
maxlength="6" 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态（不能编辑）
disabled="disabled" 输入框未激活状态
name="username" 输入框的名称
value="大前端" 将输入框的内容传给处理文件
◆密码输入框
★注意：文本输入框的所有属性对密码输入框都有效。
◆单选框
★只有将name的值设置相同的时候，才能实现单选效果。
★checked=”checked” 设置默认选择项。
◆下拉列表
<select>
<option>下拉列表选项</option>
<option>下拉列表选项</option>
</select>
属性：
Multiple=”multiple” 将下拉列表设置为多选项
Selected=”selected” 设置默认选中项目
<optgroup></optgroup> 对下拉列表进行分组。
Label=”” 分组名称。
◆多选框
Checked=”checked” 设置默认选中项
◆多行文本框
Cols 控制输入字符的长度。
Rows 控制输入的行数
◆ 文件上传控件
◆文件提交按钮
★：可以实现信息提交功能
◆普通按钮
★不能提交信息，配合JS使用。
◆图片按钮
★图片按钮可实现信息提交功能
☆提交按钮与图片按钮的区别：唯一的区别就是type=image的input提交方式会把按钮点击的位置坐标x,y提交过去。
◆重置按钮
★将信息重置到默认状态
◆表单信息分组
<fieldset></fieldset> 对表单信息分组
<legend></legend> 表单信息分组名称
html5补充表单控件
好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。
标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
-标签语义化意义：
1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取；
3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
4:便于团队开发和维护
1：尽可能少的使用无语义的标签div和span；
2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3：不要使用纯样式标签，如：b、font、u等，改用css设置。
4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；
CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)
Css是用来美化html标签的，相当于页面化妆。
◆样式表书写位置
选择器是一个选择谁（标签）的过程。
选择器{属性:值； 属性:值;}
| 属性 |
解释 |
| width:20px; |
宽 |
| height:20px; |
高 |
| background-color:red; |
背景颜色 |
| font-size:24px; |
文字大小 |
| text-align:left | center| right |
内容的水平对齐方式 |
| text-indent:2em; |
首行缩进 |
| color:red; |
文字颜色 |
◆标签选择器
标签{属性：值;}
特点：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。
◆类选择器（重点）
写法
.自定义类名{属性:值; 属性:值；}
特点： 谁调用，谁生效。
一个标签可以调用多个类选择器。
多个标签可以调用同一个类选择器。
★类选择器命名规则
◎不能用纯数字或者数字开头来定义类名
◎不能使用特殊符号或者特殊符号开头（_）来定义类名
◎不建议使用汉字来定义类名
◎不推荐使用属性(css关键字)或者属性的值来定义类名
关键字:凡是被css语言所定义过的词语就叫做关键字
◆ID选择器
写法
#自定义名称{属性:值;}
特点： 一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。
一个标签只能调用一个ID选择器。
一个标签可以同时调用类选择器和ID选择器。
◆通配符选择器
*{属性:值;}
特点：给所有的标签都使用相同的样式。
★不推荐使用，增加浏览器和服务器负担。
◆颜色的显示方式
◎直接写颜色的名称
◎十六进制显示颜色 0-9 a-f RGB
#000000; 前2为代表红色，中间2位代表绿色，后边2位代表蓝色。
◎rgb
◎rgba
a代表alpha 不透明度 值 0-1
概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。
◆交集选择器
标签+类（ID）选择器{属性：值；}
特点：即要满足使用了某个标签，还要满足使用了类（id）选择器。
◆后代选择器（重点）
选择器+空格+选择器{属性：值;}
后代选择器首选要满足包含（嵌套）关系。
父集元素在前边，子集元素在后边。
特点：无限制隔代。
只要能代表标签，标签、类选择器、ID选择器自由组合。
◆子代选择器
选择器>选择器{属性:值;}
选中直接下一代元素。
◆并集选择器
选择器+，+选择器+，选择器{属性:值;}
font-size:16px; 文字大小
font-weight: 700 ; 值从100-900，文字粗细，不推荐使用(font-weight:bold;)
font-family:微软雅黑(Lobster-Regular); 文本的字体
Font-style: normal / italic; normal 默认值 italic 斜体
line-height: 行高
font: font-style font-weight font-size/line-height font-family;
◆：注意：font:后边写属性的值。一定按照书写顺序。
文本属性连写文字大小和字体为必写项。
Font:italic 700 16px/40px 微软雅黑;
◆直接写中文名称。
◆写字体的英文名称。
◆unicode 编码
◆内嵌式写法
<head>
<style type=”text/css”>
样式表写法
</style>
</head>
◆外链式写法
写在head里，<link rel=”stylesheet” href=”1.css”>
◆行内样式表
◆三种写法特点:
★内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。
★外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。推荐使用
★行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。 （不推荐使用）
典型代表,div,h1-h6,p,ul,li
特点: ★独占一行
★可以设置宽高
★ 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
典型代表 span ,a, ,strong , em, del, ins
特点：★在一行上显示
★不能直接设置宽高
★元素的宽和高就是内容撑开的宽高。
典型代表 input img
特点：★在一行上显示
★可以设置宽高
◆块元素转行内元素
display:inline;
◆行内元素转块元素
display:block;
◆块和行内元素转行内块元素
display:inline-block;
当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码。和标签调用选择器的顺序没有关系。
继承性发生的前提是包含（嵌套关系）
★文字颜色可以继承
★文字大小可以继承
★字体可以继续
★字体粗细可以继承
★文字风格可以继承
★行高可以继承
总结：文字的所有属性都可以继承。
◆特殊情况：
h系列不能继承文字大小。
a标签不能继承文字颜色。
优先级
默认样式<标签选择器<类选择器<id选择器<行内样式<!important
0 1 10 100 1000 1000以上
◆优先级特点
★继承的权重为0
★权重会叠加
a:link{属性:值;} a{属性:值}效果是一样的。
a:link{属性:值;} 链接默认状态
a:visited{属性:值;} 链接访问之后的状态
a: text-decoration {属性:值;} 鼠标放到链接上显示的状态
a:active{属性:值;} 链接激活的状态
：focus{属性:值；} 获取焦点
text-decoration: none | underline | line-through
★方位值只写一个的时候，另外一个值默认居中。
★写2个方位值的时候，顺序没有要求。
★写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向。
★：连写的时候没有顺序要求，url为必写项。
浏览器默认文字大小：16px
行高：是基线与基线之间的距离
行高=文字高度+上下边距
一行文字行高和父元素高度一致的时候，垂直居中显示。
| 行高单位 |
文字大小 |
值 |
| 20px |
20px |
20px |
| 2em |
20px |
40px |
| 150% 200% |
20px |
30px 40px |
| 2 |
20px |
40px |
总结:单位(px)除了像素以外，行高都是与文字大小乘积。
| 行高单位 |
父元素文字大小 |
子元素文字大小 |
行高 |
| 40px |
20px |
30px |
40px |
| 2em |
20px |
30px |
40px |
| 150% |
20px |
30px |
30px |
| 2 |
20px |
30px |
60px |
总结:不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。
◆推荐行高使用像素为单位。
-1. IE无法调整那些使用px作为单位的字体大小；
-2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
-3. Firefox能够调整px和em，rem，但是有大部分的国产浏览器使用IE内核。
-1. em的值并不是固定的；
-2. em会继承父级元素的字体大小。
em是以字为单位，1em是占一个字符的宽度，大小随着字符的字号而变化。
px是像素，是对所有浏览器都显示为一样大小的。
-
-
- 边框 border
border-top-style: solid 实线
dotted 点线
dashed 虚线
border-top-color 边框颜色
border-top-width 边框粗细
◆边框属性的连写
特点：没有顺序要求，线型为必写项。
◆四个边框值相同的写法
特点：没有顺序要求，线型为必写项。
-
-
- 边框合并 border-collapse:collapse;
-
-
- 获取焦点
-
-
- 内边距
Padding-left | right | top | bottom
◆padding连写
Padding: 20px; 上右下左内边距都是20px
Padding: 20px 30px; 上下20px 左右30px
Padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40
Padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px
◆内边距撑大盒子的问题
内边距影响盒子的宽度
边框影响盒子的宽度
盒子的宽度=定义的宽度+边框宽度+左右内边距
◆继承的盒子一般不会被撑大
包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。
-
-
- 外边距
margin-left | right | top | bottom
◆外边距连写
Margin: 20px; 上下左右外边距20PX
Margin: 20px 30px; 上下20px 左右30px
Margin: 20px 30px 40px; 上20px 左右30px 下 40px
Margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px
◆垂直方向外边距合并
两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。
◆嵌套的盒子外边距塌陷
解决方法: 1 给父盒子设置边框
2给父盒子 overflow:hidden; 隐藏溢出
bfc 格式化上下文 感兴趣了解
-
-
- 行内元素可以定义左右的外边距，上下会被忽略掉。
元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。
float: left | right
特点：
★元素浮动之后不占据原来的位置（脱标）
★浮动的盒子在一行上显示
★行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;）
◆文本绕图
◆制作导航
◆网页布局
当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。
◆清除浮动不是不用浮动，清除浮动产生的不利影响。
◆清除浮动的方法
clear: left | right | both
工作里用的最多的是clear:both;
★额外标签法
在最后一个浮动元素后添加标签,。
★给父集元素使用overflow:hidden; bfc
如果有内容出了盒子，不能使用这个方法。
★伪元素清除浮动 推荐使用
CSS初始化
为了考虑到浏览器兼容问题,不同的浏览器对有些标签的默认值是不同的,如果没有CSS初始化会出现浏览器之间的页面差异
腾讯：
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
新浪：
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
淘宝：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
定位方向: left | right | top | bottom
◆position:static; 静态定位。默认值，就是文档流。
◆绝对定位
Position:absolute;
特点：
★元素使用绝对定位之后不占据原来的位置（脱标）
★元素使用绝对定位，位置是从浏览器出发。
★嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。
★嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。
★给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block;）
◆相对定位
Position: relative;
特点：
★使用相对定位，位置从自身出发。
★还占据原来的位置。
★子绝父相（父元素相对定位，子元素绝对定位）
★行内元素使用相对定位不能转行内块
◆固定定位
相对于父级或同级别元素
Position:fixed;
特点：
★固定定位之后，不占据原来的位置（脱标）
★元素使用固定定位之后，位置从浏览器出发。
★元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）
★:margin:0 auto; 只能让标准流的盒子居中对齐。
★定位的盒子居中：先左右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)
◆div可以包含所有的标签。
◆p标签不能包含div h1等标签。
◆h1可以包含p，div等标签。
◆行内元素尽量包含行内元素，行内元素不要包含块元素。
◆尽量使用标准流。
◆标准流解决不了的使用浮动。
◆浮动解决不了的使用定位。
vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline;
overflow:hidden; 溢出隐藏
visibility:hidden; 隐藏元素 隐藏之后还占据原来的位置。
display:none; 隐藏元素 隐藏之后不占据原来的位置。
Display:block; 元素可见
Display:none 和display:block 常配合js使用。
css之内容移除（网页优化）
◆使用text-indent:-5000em;
◆将元素高度设置为0,使用内边距将盒子撑开，给盒子使用overflow:hidden;将文字隐藏。
emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。
！+ tab,可以生成html5的结构代码。
标签名.类名#id名+tab
没有标签名.类名+tab ==>div
标签名+标签名+标签名 “+”tab
标签名>子标签名>子标签名>子标签名+tab
标签名>子标签名>子标签名>子标签名^^子标签名+tab
ul>li.abc$*3 + tab
ul>li>a{item}*5
width:30px==>w30+tab
Height:30px==>h30+tab
Margin:30px==>mg30+tab
Padding:30px==> pd30+tab
Line-height:12px==>lh12px+tab
Background==>bg+tab
Js高级
语法:
后代：>
缩写：nav>ul>li
<nav>
<ul>
<li></li>
</ul></nav>
兄弟：+
缩写：div+p+bq
<div></div><p></p><blockquote></blockquote>
上级：^
缩写：div+div>p>span+em^bq
<div></div><div>
<p><span></span><em></em></p>
<blockquote></blockquote></div>
缩写：div+div>p>span+em^^bq
<div></div><div>
<p><span></span><em></em></p></div><blockquote></blockquote>
分组：()
缩写：div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer></div>
缩写：(div>dl>(dt+dd)*3)+footer>p
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl></div><footer>
<p></p></footer>
乘法：*
缩写：ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul>
自增符号：$
缩写：ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li></ul>
缩写：h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1><h2 title="item2">Header 2</h2><h3 title="item3">Header 3</h3>
缩写：ul>li.item$$$*5
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li></ul>
缩写：ul>li.item$@-*5
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li></ul>
缩写：ul>li.item$@3*5
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li></ul>
ID和类属性
缩写：#header
<div id="header"></div>
缩写：.title
<div class="title"></div>
缩写：form#search.wide
<form id="search" class="wide"></form>
缩写：p.class1.class2.class3
<p class="class1 class2 class3"></p>
自定义属性
缩写：p[title="Hello world"]
<p title="Hello world"></p>
缩写：td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
缩写：[a='value1' b="value2"]
<div a="value1" b="value2"></div>
文本：{}
缩写：a{Click me}
<a href="">Click me</a>
缩写：p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>
隐式标签
缩写：.class
<div class="class"></div>
缩写：em>.class
<em><span class="class"></span></em>
缩写：ul>.class
<ul>
<li class="class"></li></ul>
缩写：table>.row>.col
<table>
<tr class="row">
<td class="col"></td>
</tr></table>
HTML
所有未知的缩写都会转换成标签，例如，foo → <foo></foo>
缩写：!
<!doctype html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title></head><body>
</body></html>
缩写：a
<a href=""></a>
缩写：a:link
<a href="http://"></a>
缩写：a:mail
<a href="mailto:"></a>
缩写：abbr
<abbr title=""></abbr>
缩写：acronym
<acronym title=""></acronym>
缩写：base
<base href="" />
缩写：basefont
<basefont />
缩写：br
<br />
缩写：frame
<frame />
缩写：hr
<hr />
缩写：bdo
<bdo dir=""></bdo>
缩写：bdo:r
<bdo dir="rtl"></bdo>
缩写：bdo:l
<bdo dir="ltr"></bdo>
缩写：col
<col />
缩写：link
<link rel="stylesheet" href="" />
缩写：link:css
<link rel="stylesheet" href="style.css" />
缩写：link:print
<link rel="stylesheet" href="print.css" media="print" />
缩写：link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
缩写：link:touch
<link rel="apple-touch-icon" href="favicon.png" />
缩写：link:rss
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
缩写：link:atom
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />
缩写：meta
<meta />
缩写：meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
缩写：meta:win
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
缩写：meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
缩写：meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7" />
缩写：style
<style></style>
缩写：script
<script></script>
缩写：script:src
<script src=""></script>
缩写：img
<img src="" alt="" />
缩写：iframe
<iframe src="" frameborder="0"></iframe>
缩写：embed
<embed src="" type="" />
缩写：object
<object data="" type=""></object>
缩写：param
<param name="" value="" />
缩写：map
<map name=""></map>
缩写：area
<area shape="" coords="" href="" alt="" />
缩写：area:d
<area shape="default" href="" alt="" />
缩写：area:c
<area shape="circle" coords="" href="" alt="" />
缩写：area:r
<area shape="rect" coords="" href="" alt="" />
缩写：area:p
<area shape="poly" coords="" href="" alt="" />
缩写：form
<form action=""></form>
缩写：form:get
<form action="" method="get"></form>
缩写：form:post
<form action="" method="post"></form>
缩写：label
<label for=""></label>
缩写：input
<input type="text" />
缩写：inp
<input type="text" name="" id="" />
缩写：input:hidden
别名：input[type=hidden name]
<input type="hidden" name="" />
缩写：input:h
别名：input:hidden
<input type="hidden" name="" />
缩写：input:text, input:t
别名：inp
<input type="text" name="" id="" />
缩写：input:search
别名：inp[type=search]
<input type="search" name="" id="" />
缩写：input:email
别名：inp[type=email]
<input type="email" name="" id="" />
缩写：input:url
别名：inp[type=url]
<input type="url" name="" id="" />
缩写：input:password
别名：inp[type=password]
<input type="password" name="" id="" />
缩写：input:p
别名：input:password
<input type="password" name="" id="" />
缩写：input:datetime
别名：inp[type=datetime]
<input type="datetime" name="" id="" />
缩写：input:date
别名：inp[type=date]
<input type="date" name="" id="" />
缩写：input:datetime-local
别名：inp[type=datetime-local]
<input type="datetime-local" name="" id="" />
缩写：input:month
别名：inp[type=month]
<input type="month" name="" id="" />
缩写：input:week
别名：inp[type=week]
<input type="week" name="" id="" />
缩写：input:time
别名：inp[type=time]
<input type="time" name="" id="" />
缩写：input:number
别名：inp[type=number]
<input type="number" name="" id="" />
缩写：input:color
别名：inp[type=color]
<input type="color" name="" id="" />
缩写：input:checkbox
别名：inp[type=checkbox]
<input type="checkbox" name="" id="" />
缩写：input:c
别名：input:checkbox
<input type="checkbox" name="" id="" />
缩写：input:radio
别名：inp[type=radio]
<input type="radio" name="" id="" />
缩写：input:r
别名：input:radio
<input type="radio" name="" id="" />
缩写：input:range
别名：inp[type=range]
<input type="range" name="" id="" />
缩写：input:file
别名：inp[type=file]
<input type="file" name="" id="" />
缩写：input:f
别名：input:file
<input type="file" name="" id="" />
缩写：input:submit
<input type="submit" value="" />
缩写：input:s
别名：input:submit
<input type="submit" value="" />
缩写：input:image
<input type="image" src="" alt="" />
缩写：input:i
别名：input:image
<input type="image" src="" alt="" />
缩写：input:button
<input type="button" value="" />
缩写：input:b
别名：input:button
<input type="button" value="" />
缩写：isindex
<isindex />
缩写：input:reset
别名：input:button[type=reset]
<input type="reset" value="" />
缩写：select
<select name="" id=""></select>
缩写：option
<option value=""></option>
缩写：textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
缩写：menu:context
别名：menu[type=context]>
<menu type="context"></menu>
缩写：menu:c
别名：menu:context
<menu type="context"></menu>
缩写：menu:toolbar
别名：menu[type=toolbar]>
<menu type="toolbar"></menu>
缩写：menu:t
别名：menu:toolbar
<menu type="toolbar"></menu>
缩写：video
<video src=""></video>
缩写：audio
<audio src=""></audio>
缩写：html:xml
<html xmlns="http://www.w3.org/1999/xhtml"></html>
缩写：keygen
<keygen />
缩写：command
<command />
缩写：bq
别名：blockquote
<blockquote></blockquote>
缩写：acr
别名：acronym
<acronym title=""></acronym>
缩写：fig
别名：figure
<figure></figure>
缩写：figc
别名：figcaption
<figcaption></figcaption>
缩写：ifr
别名：iframe
<iframe src="" frameborder="0"></iframe>
缩写：emb
别名：embed
<embed src="" type="" />
缩写：obj
别名：object
<object data="" type=""></object>
缩写：src
别名：source
<source></source>
缩写：cap
别名：caption
<caption></caption>
缩写：colg
别名：colgroup
<colgroup></colgroup>
缩写：fst, fset
别名：fieldset
<fieldset></fieldset>
缩写：btn
别名：button
<button></button>
缩写：btn:b
别名：button[type=button]
<button type="button"></button>
缩写：btn:r
别名：button[type=reset]
<button type="reset"></button>
缩写：btn:s
别名：button[type=submit]
<button type="submit"></button>
异常处理
常见的异常分类
- 运行环境的多样性导致的异常（浏览器）
- 语法错误，代码错误
异常最大的特征，就是一旦代码出现异常，后面的代码就不会再执行
异常捕获
捕获异常，使用try-catch语句
try{
//这里写可能出现异常的代码
}catch(e){
//这里的e就是捕获的异常对象
//可以在这里写，出现异常后的处理代码
}
异常捕获语句执行的过程为：
-
代码正常运行, 如果在try中出现了错误, try 里面出现错误的语句后面的代码都不再执行, 直接跳转到 catch 中
-
catch中处理错误信息
- 然后继续执行后面的代码
-
如果 try 中没有出现错误, 那么不走 catch 直接执行后面的代码
通过try-catch语句进行异常捕获之后，代码将会继续执行，而不会中断。
注意：
-
语法错误异常用
try-catch语句无法捕获，因为在预解析阶段，语法错误会直接检测出来，而不会等到运行的时候才报错。
-
try-catch在一般日常开发中基本用不到，但是如果要写框架什么的，用的会非常多。因为这个会让框架变得健壮
抛出异常
如何手动的抛出异常呢？
案例：自己写的一个函数，需要一个参数，如果用户不传参数，此时想直接给用户抛出异常，就需要了解如何抛出异常。
抛出异常使用throw关键字，语法如下：
throw 异常对象;
异常对象一般是用new Error("异常消息"), 也可以使用任意对象
function test(para){
if(para == undefined){
throw new Error("请传递参数");
//这里也可以使用自定义的对象
throw {
"id":1, msg:"参数未传递"};
}
}
try{
test();
}catch(e){
console.log(e);
}
异常的传递机制
function f1 () {
f2(); // f1 称为调用者, 或主调函数, f2 称为被调用者, 或被调函数
}
function f2 () {
f3();
}
function f3() {
throw new Error( 'error' );
}
f1();
当在被调函数内发生异常的时候，异常会一级一级往上抛出。
异常捕获语句的完整模式
异常捕获语句的完整模式为try-catch-finally
try {
//可能出现错误的代码
} catch ( e ) {
//如果出现错误就执行
} finally {
//结束 try 这个代码块之前执行, 即最后执行
}
finally中的代码，不管有没有发生异常，都会执行。一般用在后端语言中，用来释放资源，JavaScript中很少会用到
面向对象
面向对象的基本概念
1.什么是面向对象编程？
2.面向过程和面向对象的对比
Example 1：洗衣服
面向过程的思维方式：
step 1:收拾脏衣服
step 2:打开洗衣机盖
step 3:将脏衣服放进去
step 4:设定洗衣程序
step 5:开始洗衣服
step 6:打开洗衣机盖子
step 7:晒衣服
面向对象的思维方式：
洗衣机需要什么对象？
女朋友
洗衣机
在面向对象的思维方式中：我们只关心要完成事情需要的对象。
总结：面向对象是一种解决问题的思路，一种编程思想。
对象是什么呢？
万物皆对象
JavaScript中的对象是什么？
在JavaScript中，所谓的对象，就是键值对的集合。
编写代码的时候的原则:DRY
Don’t repeat yourself
属性和方法是什么？
比如要描述一个人，这个人有name,age,gender,体现在代码中：
{ name:"张三", age:18, gender:"Male" }
比如要做一个学生管理系统，那学生就是要设计的对象，学生拥有name,age,gender,address,phone,体现在代码中：
{ name:"刘亦菲", age:18, gender:"female", address:"上海", phone:"110" }
3.总结
- 面向过程关注的实现功能的步骤，是如何把功能拆解后一步步的实现
- 面向对象则是关注的实现功能的一系列的对象
面向对象编程举例
设置页面中的div和p的边框为1px solid red
传统的处理办法
// 任务需求:
// 1> 获取div标签
var divs = document.getElementsByTagName( 'div' );
// 2> 遍历获取到的div标签
for(var i = 0; i < divs.length; i++) {
//3> 获取到每一个div元素,设置div的样式
divs[i].style.border = "1px dotted black";
}
// 4> 获取p标签
var ps = document.getElementsByTagName("p");
// 5> 遍历获取到的p标签
for(var j = 0; j < ps.length; j++) {
// 获取到每一个div元素 设置p标签的样式
ps[j].style.border = "1px dotted black";
}
使用函数进行封装优化
// 通过标签名字来获取页面中的元素
function tag(tagName) {
// var dvs = document.getElementsByTagName(tagName);
// return dvs;
return document.getElementsByTagName(tagName);
}
// 封装一个设置样式的函数
function setStyle(arr) {
for(var i = 0; i < arr.length; i++) {
// 获取到每一个div元素
arr[i].style.border = "1px solid #abc";
}
}
var dvs = tag("div");
var ps = tag("p");
setStyle(dvs);
setStyle(ps);
使用面向对象的方式
// 更好的做法：是将功能相近的代码放到一起
var tools = {
getEle: {
tag: function (tagName) {
return document.getElementsByTagName(tagName);
},
id: function (idName) {
return document.getElementById(idName);
}
},
setCss: {
setStyle: function (arr) {
for(var i = 0; i < arr.length; i++) {
arr[i].style.border = "1px solid #abc";
}
},
css: function() {},
addClass: function() {},
removeClass: function() {}
// ...
}
// 属性操作模块
// 动画模块
// 事件模块
// ...
};
var divs = tools.getEle.tag();
tools.setCss.setStyle(divs);
构造函数的作用
function Person(name, age){
this.name = name;
this.age = age;
}
//断点调试，进行类型查看
var p1 = new Person();
var p2 = new Object();
var p3 = new Date();
var p4 = new RegExp();
var p5 = {};
1.构造函数是干什么用的？
在JavaScript中，构造函数是给对象添加属性，初始化属性用的。
2. 对象的创建过程
var p = new Person();
以上面这个p对象创建为例：
-
首先使用new关键字创建对象，类似于使用
{},这个时候创建出来的对象是一个"没有任何成员"的对象。这里需要注意两点：
-
使用
new关键字创建的对象，对象的类型就是创建这个对象使用的构造函数的函数名
-
使用
{}创建对象，对象的类型一定是Object，相当于使用了new Object()
-
使用构造函数为其初始化成员
-
在构造函数调用开始的时候，有一个赋值操作，也就是让
this = 刚创建出来的对象
-
在构造函数中，
this就代表刚创建出来的对象
- 在构造函数中，利用对象的动态特性，为对象添加成员
面向对象的特性
JavaScript面向对象的特性
1. 封装性
对象是将数据与功能组合到一起, 即封装
-
js 对象就是 键值对的集合
-
键值如果是数据( 基本数据, 复合数据, 空数据 ), 就称为属性
-
如果键值是函数, 那么就称为方法
- 对象就是将属性与方法封装起来
- 方法是将过程封装起来
2. 继承性
所谓继承就是自己没有, 别人有,拿过来为自己所用, 并成为自己的东西
2.1. 传统继承基于模板
子类可以使用从父类继承的属性和方法。
class Person {
string name;
int age;
}
class Student : Person {
}
var stu = new Student();
stu.name
即：让某个类型的对象获得另一个类型的对象的属性的方法
2.2. js 继承基于对象
在JavaScript中，继承就是当前对象可以使用其他对象的方法和属性。
js继承实现举例：混入（mix）
function mix ( o1, o2 ) {
for ( var k in o2 ) {
o1[ k ] = o2[ k ];
}
}
3. 多态性（基于强类型）只做了解
把不同的子类对象都当作父类来看，可以屏蔽不同子类对象之间的差异，写出通用的代码，做出通用的编程，以适应需求的不断变化。
动物 animal = new 子类(); // 子类：麻雀、狗、猫、猪、狐狸...
动物 animal = new 狗();
animal.叫();
原型
传统构造函数存在的问题
1. 发现问题
现有构造函数如下：
function Person(name, age){
this.name = name;
this.age = age;
this.sayHi = function(){
console.log("你好");
}
}
调用该构造函数创建对象，并对比创建出来的对象的sayHi方法：
var p = new Person("张三", 18);
var p1 = new Person("李四", 19);
console.log(p.sayHi == p1.sayHi); //输出结果为false
由于每个对象都是由new Person创建出来的，因此每创建一个对象，函数sayHi都会被重新创建一次，这个时候，每个对象都拥有一个独立的，但是功能完全相同的方法。
功能相同的函数，完全没有必要再内存中存在这么多份。所以就造成了资源浪费。
2. 解决问题
这里最好的办法就是将函数体放在构造函数之外. 在构造函数中只需要引用该函数即可。
function sayHello(){
console.log("你好");
}
function Person(name, age){
this.name = name;
this.age = age;
this.sayHi = sayHello;
}
//调用该构造函数创建对象，并对比创建出来的对象的sayHi方法
var p = new Person("张三", 18);
var p1 = new Person("李四", 19);
console.log(p.sayHi == p1.sayHi); //输出结果为true
function Person(name, age){
this.name = name;
this.age = age;
// this.sayHi = function(){
// console.log("你好");
// }
this.sayHi=sayHi;
}
// 调用该构造函数创建对象，并对比创建出来的对象的sayHi方法：
function sayHi() {
console.log(this.sayHi);
}
var p = new Person("张三", 18);
var p1 = new Person("李四", 19);
console.log(p.sayHi === p1.sayHi); //输出结果为true
这样写依然存在问题：
- 全局变量增多，会增加引入框架命名冲突的风险
- 代码结构混乱，会变得难以维护
使用原型解决构造函数问题
1. 关键点
- 每一个函数在定义的时候，都会有跟它关联的一个对象被创建出来
- 每一个由构造函数创建出来的对象，都会默认的和构造函数的神秘对象关联
- 当使用一个方法进行属性或者方法访问的时候，会先在当前对象内查找该属性和方法
- 如果当前对象内未找到，就回去跟它关联的神秘对象内进行查找
function Person(name, age){
this.name = name;
this.age = age;
this.sayHi = function(){
console.log("Hello!");
};
}
var p = new Person("张三", 18);
p.sayHi(); //当前对象内有这个方法，所以不会去神秘对象内进行查找
var p1 = new Person("李四", 19);
p1.sayHello(); //当前对象没没有找到这个方法，所以去神秘对象内进行查找
问题来了，如何访问到这个神秘对象呢？
//可以通过 构造函数.prototype 访问这个神秘对象
console.log(Person.prototype);
当尝试给这个对象新增一个方法之后:
Person.prototype.sayHello = function(){
console.log("我是神秘对象中的方法");
};
使用p,p1都可以访问这个方法：
p.sayHello();
p1.sayHello();
总结：
所有对象共享神秘对象(构造函数.prototype)内的属性和方法。
2. 解决方案
既然所有对象共享神秘对象(构造函数.prototype)内的属性和方法。我们只需要将需要共享的东西，也就是重复占用内存的东西，全部都放到 神秘对象(构造函数.prototype)中，那么所有对象就都可以使用，并且内存里面也只有一份了。
改造构造函数
function Person(name, age){
this.name = name;
this
