常用属性............................................................................................ 1
Html基础........................................................................................... 3
常用快捷键................................................................................ 3
认识大前端................................................................................ 4
应用于 : 移动端 PC端................................................... 4
用户体验 : UI设计................................................ 4
学习态度............................................................................ 4
认识网页.................................................................................... 4
网页由文字,图片,按钮,超链接等组成。........................... 4
Web标准............................................................................ 4
浏览器................................................................................ 5
浏览器内核......................................................................... 5
认识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
另存为 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
链接伪类.................................................................................. 40
文本修饰.......................................................................... 40
背景属性.................................................................................. 41
background-color 背景颜色..................................... 41
background-image 背景图片...................................... 41
背景属性连写................................................................... 41
行高.......................................................................................... 42
行高的单位....................................................................... 42
补充:................................................................................. 43
PX特点............................................................................ 43
EM特点............................................................................ 43
1 盒子模型............................................................................ 44
1.1 边框 border.......................................................... 44
1.2 边框合并 border-collapse:collapse;..................... 45
1.3 获取焦点................................................................. 45
1.4 内边距..................................................................... 46
1.5 外边距..................................................................... 46
文档流(标准流)................................................................... 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
函数基础.................................................................................. 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
新事件(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 基础课程—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
1.1 认识HTML5................................................................... 173
1.2 语法规范......................................................................... 174
语义标签................................................................................ 175
常用新语义标签............................................................. 176
兼容处理........................................................................ 176
表单........................................................................................ 177
表单元素(标签)......................................................... 178
表单属性........................................................................ 179
表单事件........................................................................ 180
案例练习........................................................................ 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
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
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”禁止被选中
Html基础
常用快捷键
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等技术生成网页
应用于 : 移动端 PC端
用户体验 : UI设计
学习态度
养成一种习惯。
认识网页
网页由文字,图片,按钮,超链接等组成。
Web标准
W3c组织(万维网联盟)
Html 结构标准 相当于 结构,骨骼,组成
Css 表现标准 相当于给人化妆
Js 行为标准 想当于 行为,功能,动作 灵动
浏览器
◆浏览器是一个上网的客户端(软件)。
浏览器内核
渲染引擎
浏览器和服务器的那点事
IIS web服务器 提供网页浏览服务
Url地址
认识html
Html 全称 : HyperText Markup Language
超文本标记语言。
超文本
标记 < html >
语言
Html结构标准(html 5 才开始的)
< ! DOCTYPE html> 声明文档类型
<html> 根标签
<head> 头标签
<title></title> 标题标签
</head>
<body> 主体标签
</body>
</html>
Html 与htm是一样的。
后缀名能否决定文件格式?
不能,只能决定 打开方式
Html标签关系分类
包含(嵌套关系): <head> <title></title > </head >
并列关系 :<head></head> <body></body>
Html标签分类
单标签 <! 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” 打开新页面 (自身页面不关闭,打开一个新的链接页面)
锚链接
- 先定义一个锚点
- 超链接到锚点
空链 不知道链接到那个页面的时候,用空链
压缩文件下载 不推荐使用
超链接优化写法
<base target="_blank"> 让所有的超链接都在新窗口打开
另存为 ctrl+shift+s
特殊字符
列表
无序列表
<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" 设置移动距离数值越大移动距离越大
head里的一些常用东西
!+tab html5的标签结构
Charset 编码
Ascll
Ansi 扩展的ASCII编码
Unicode 日文/韩文
Gbk 中文
Gb2312 中文
Big5 繁体
Utf-8 通用字符集
关键字
网页描述
网页重定向
链接外部样式表(css)
设置icon图标
表格
展示数据。 是对网页重构的一个有益补充。
<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基础
Css概念
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;
css三大特性
层叠性
当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码。和标签调用选择器的顺序没有关系。
继承性
继承性发生的前提是包含(嵌套关系)
★文字颜色可以继承
★文字大小可以继承
★字体可以继续
★字体粗细可以继承
★文字风格可以继承
★行高可以继承
总结:文字的所有属性都可以继承。
◆特殊情况:
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
背景属性
background-color 背景颜色
background-image 背景图片
Background-repeat repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺
Background-position left | right | center | top | bottom 背景定位
★方位值只写一个的时候,另外一个值默认居中。
★写2个方位值的时候,顺序没有要求。
★写2个具体值的时候,第一个值代表水平方向,第二个值代表垂直方向。
Background-attachment 背景是否滚动 scroll | fixed
背景属性连写
★:连写的时候没有顺序要求,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和%的行高是和父元素文字大小相乘。行高以像素为单位,就是定义的行高值。
◆推荐行高使用像素为单位。
补充:
PX特点
-1. IE无法调整那些使用px作为单位的字体大小;
-2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
-3. Firefox能够调整px和em,rem,但是有大部分的国产浏览器使用IE内核。
EM特点
-1. em的值并不是固定的;
-2. em会继承父级元素的字体大小。
em是以字为单位,1em是占一个字符的宽度,大小随着字符的字号而变化。
px是像素,是对所有浏览器都显示为一样大小的。
border-top-style: solid 实线
dotted 点线
dashed 虚线
border-top-color 边框颜色
border-top-width 边框粗细
◆边框属性的连写
特点:没有顺序要求,线型为必写项。
◆四个边框值相同的写法
特点:没有顺序要求,线型为必写项。
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; }
Overflow
定位
定位方向: 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;
Css可见性
overflow:hidden; 溢出隐藏
visibility:hidden; 隐藏元素 隐藏之后还占据原来的位置。
display:none; 隐藏元素 隐藏之后不占据原来的位置。
Display:block; 元素可见
Display:none 和display:block 常配合js使用。
css之内容移除(网页优化)
◆使用text-indent:-5000em;
◆将元素高度设置为0,使用内边距将盒子撑开,给盒子使用overflow:hidden;将文字隐藏。
Css精灵图
属性选择器
emmet快捷键:
emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。
html:
生成结构的快捷键:
!+ tab,可以生成html5的结构代码。
生成id名和类名
标签名.类名#id名+tab
没有标签名.类名+tab ==>div
生成同级元素:
标签名+标签名+标签名 “+”tab
生成子类标签
标签名>子标签名>子标签名>子标签名+tab
标签名>子标签名>子标签名>子标签名^^子标签名+tab
带固定数量的标签:
ul>li*5+tab
带有序号名称
ul>li.abc$*3 + tab
生成带有内容的标签:
ul>li>a{item}*5
css
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标签
vardivs =
document.getElementsByTagName(
'div');
// 2> 遍历获取到的div标签
for(
vari =
0; i < divs.length; i++) {
//3> 获取到每一个div元素,设置div的样式
divs[i].style.border =
"1px dotted black";
}
// 4> 获取p标签
varps =
document.getElementsByTagName(
"p");
// 5> 遍历获取到的p标签
for(
varj =
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
(
vari =
0; i < arr.length; i++) {
// 获取到每一个div元素
arr[i].style.border =
"1px solid #abc";
}
}
vardvs = tag(
"div");
varps = 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
(
vari =
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;
}
//断点调试,进行类型查看
varp1 =
newPerson();
varp2 =
newObject
();
varp3 =
newDate
();
varp4 =
newRegExp
();
var p5 = {};
1.构造函数是干什么用的?
在JavaScript中,构造函数是给对象添加属性,初始化属性用的。
2. 对象的创建过程
varp =
newPerson();
以上面这个p对象创建为例:
- 首先使用new关键字创建对象,类似于使用
{}
,这个时候创建出来的对象是一个"没有任何成员"的对象。这里需要注意两点:- 使用
new
关键字创建的对象,对象的类型就是创建这个对象使用的构造函数的函数名 - 使用
{}
创建对象,对象的类型一定是Object
,相当于使用了new Object()
- 使用
- 使用构造函数为其初始化成员
- 在构造函数调用开始的时候,有一个赋值操作,也就是让
this =
刚创建出来的对象
- 在构造函数中,
this
就代表刚创建出来的对象
- 在构造函数调用开始的时候,有一个赋值操作,也就是让
- 在构造函数中,利用对象的动态特性,为对象添加成员
面向对象的特性
JavaScript面向对象的特性
1. 封装性
对象是将数据与功能组合到一起, 即封装
- js 对象就是 键值对的集合
- 键值如果是数据( 基本数据, 复合数据, 空数据 ), 就称为属性
- 如果键值是函数, 那么就称为方法
- 对象就是将属性与方法封装起来
- 方法是将过程封装起来
2. 继承性
所谓继承就是自己没有, 别人有,拿过来为自己所用, 并成为自己的东西
2.1. 传统继承基于模板
子类可以使用从父类继承的属性和方法。
class Person {
s
tring name;
int age;
}
class Student : Person {
}
var stu = new Student();
stu.name
即:让某个类型的对象获得另一个类型的对象的属性的方法
2.2. js 继承基于对象
在JavaScript中,继承就是当前对象可以使用其他对象的方法和属性。
js继承实现举例:混入(mix)
function mix ( o1, o2 ) {
for
(
vark
ino2 ) {
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
方法:
varp =
newPerson(
"张三",
18);
varp1 =
newPerson(
"李四",
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方法
varp =
newPerson(
"张三",
18);
varp1 =
newPerson(
"李四",
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