2018年的平安夜，与往常一样，没有太多的惊喜也没有意外，稀稀疏疏的同学们照旧在教室里上晚自习，双手不断的在键盘上噼噼啪啪的敲打着梦想。眼神不觉望着窗外不时想，突然怀念起大学时代，那时候的平安夜可以和一帮兄弟们一起去喝酒吹牛逼打游戏开黑，和女朋友一起去逛街…而现在回想起一切就好像是在昨天一样，回过神来，自己终究还是孤身一人，在为了理想而努力着，即使脖子再酸，眼睛再涩，有时候突然就很丧，要不放弃吧，不学了，太累了。世界上可能有很多条路，你可以选择最难走的一条路，但是一旦你选择了，你就要为自己的选择付出代价和努力不是吗？想一想以后能让爸妈能在别人谈论到我的时候眼角会露出一丝笑意，为了能让他们过上更好的生活，想一想以后的另一半现在或许也在为了遇见更好的自己在努力着，突然觉得这一切都是值得的…明年的现在我会在哪里呢，我会在干些什么呢，我会遇到哪些新的人呢？又会发生怎么样的故事呢…算了不想太多了活在当下吧，但行好事，莫问前程。 老师今天一天没讲新的东西，把已经学过的知识点从头到尾给我们梳理了一遍，相比之下清楚了不少。
1. html: 描述一个网页的内容
2. css: 描述了一个网页的样子，样式
3. javascript: 描述了、定义了一个网页的各种行为
1. html: 超文本标记语言
1.1 超文本：可以包含超出文本内容的图片、表单、视频、canvas...
1.2 标记语言：以左尖括号<开始, 以右尖括号结束,
通常来说，标签有开始就有结束
1.3 一个网页最基本的结构
<!doctype html>
<html>
<head>
<title>页面标题</title>
<meta charset="utf-8"/>
<meta description=""/>
</head>
<body>
将页面内容都写在这里面
</body>
</html>
1.4 元素和标签
属性和值：写在开始标签内 属性="" 或者 属性=''
id="d1" class="red font" type="A" border="1"
style="color: red; font-size: 16px;"
1.5 基于文本类型的标签
段落 p,
标题 h1 ~ h6 (从大到小),
strong 语气加强,
b 加粗,
em 语气加强,
i 斜体
1.6 超链接 a
href: 超链接的跳转地址
1. 可以是一个互联网的地址 <a href="https://www.baidu.com">百度</a>
2. 可以是本地的一个资源
绝对地址：<a href="D:\1811\test\20181222周测.html">跳转至周测</a>
相对地址：<a href="../test/20181222周测.html">跳转至周测2</a>
<a href="./20181222周测.html">跳转至周测3</a>
<a href="20181222周测.html">跳转至周测4</a>
3. 可以使页面上的某一个元素(跳转到指定元素, 回到顶部)
4. 可以是跳转到一个邮箱地址 mailto://[email protected]
5. 可以跳转拨打一个电话号码 tel:12345678901
target: _blank _parent _self _top
如果需要在新建标签页跳转 target="_blank"
1.7 图片 img <img />
src source 图片资源(必须填写)
绝对路径
相对路径
title 图片的标题
alt 图片没有加载出来 用作提示信息的
width
height
1.8 视频 video
<video src="" autoplay controls poster="封面图"></video>
src
绝对路径
相对路径
width
height
1.9 换行标签 br <br/>
水平线 hr <hr/>
2.0 布局标签
块状元素 div
行内元素 span
html5 新添加用于布局的一些标签
header
nav
main
section
title
aside
footer
2.1 列表
1. 有序列表 ol
<ol type="A">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
type A upper-alpha 大写字母
a lower-alpha 小写字母
1 decimal 数字
I upper-roman 大写罗马
i lower-roman 小写罗马
none
2. 无序列表 ul
<ol type="disc">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
type circle 空心小圆圈
square 实心小方块
disc 实心小圆圈
none
3. 自定义的，描述性的 dl
<dl>
<dt>苹果</dt>
<dd>one apple a day keep the doctor away.</dd>
<dd>一天一个苹果，医生远离我</dd>
<dt>香蕉</dt>
<dt>桔子</dt>
<dt>梨</dt>
</dl>
2.2 表格 table
tr 行
td 单元格
th 描述标题类型的单元格
table: border
table 边框 1px solid black;
td,th 1px solid black;
table, td, th {
border: 1px solid black;
border-collapse: collapse;
}
<table border="1">
<tr>
<td>序号</td>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
// 数据
</tr>
</table>
<table>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>成绩</td>
</tr>
</thead>
<tbody>
// 数据行
</tbody>
<tfoot>
// 合计, 统计
</tfoot>
</table>
2.3 表单 form
input
name 描述表单元素的字段, 将单选，多选几个选项联系到一起
type
text <input type="text" name="username" placeholder="请输入用户名" />
password <input type="password" name="password" placeholder="请输入密码" />
radio <input type="radio" name="gender" value="female "/>
<input type="radio" name="gender" value="male"/>
checkbox <input type="checkbox" name="interest" value="basketball" />
<input type="checkbox" name="interest" value="movie" />
如何判断单选或者多选选项有没有被选中
checked true 被选中
false 没有被选中
button <input type="button" value="点击" onclick="js语句方法" />
submit <input type="submit" value="提交"/>
reset <input type="reset" value="重置"/>
hidden <input type="hidden" name="id" />
select 下拉框
onchange
<select>
<option value="100">100米</option>
<option></option>
<option></option>
</select>
textarea 多行文本域
cols 列
rows 行
二、css 层叠样式表
1.0 层叠：
① 在页面上引入css方式： 3种
1. 外部样式表
2. style标签内（头部里面）
3. 内联的style属性
② 选择器有优先级
id选择器 #
class选择器 .
标签选择器 标签名
1.1 css的语法
选择器 {
/*多个键值对*/
属性: 值;
}
1.2 css的注释
/* 被注释的内容 */
1.3 css的盒子模型
margin: 外边距
border: 边框
padding: 填充
content: 内容
box-sizing: content-box;
border-box;
1.4 css定位
浮动 float
左浮动, 右浮动, 清除浮动
位置 position
relative: 相对定位, 相对与自己原来的位置。 原来的位置还占着
absolute: 绝对定位, 绝对与有相对定位的祖先。没找到就绝对于整个页面
fixed: 静止定位, 静止在窗口上
static: 静态定位, 默认的定位
1.5 css 选择器
id选择器 #
class选择器 .
tag选择器 标签名
组合选择器 ,
后代选择器 空格
子代选择器 >
相邻兄弟选择器 +
伪类 : (a:hover, a:active, a:visited, :before :after)
* 通配符选择器 所有的选择器都具有属性 一般初始化比较多一点
属性选择器 input[type='button']
1.6 字体
color:
① 关键字 red, blue,
② 十六进制的值 #000000, #ffffff
③ rgb() 与 rgba()
④ hsl() 与 hsla()
font-size 字体大小
font-family 字体
font-weight (100-900) 400 默认正常, 700 bold
font-style 斜体 加粗
font-variant: small-caps
1.7 文字
text-decoration: underline none
text-transform:
letter-spacing:
word-spacing:
text-align:
text-shadow: 水平 数值 阴影的半径 颜色
text-indent: 缩进
1.8 边框
border
border-radius
border-top-left-radius
1.9 背景
background: no-repeat;
background-color:
background-image:
background-repeat:
一、 javascript:
1. 分支结构
顺序结构
选择结构
if...
if...else
if...else...if
循环结构 开始条件, 结束条件, 递增迭代
for (开始条件; 结束条件; 递增迭代) {
// 循环体
}
开始条件;
while(结束条件) {
// 循环体
// 递增迭代
}
开始条件;
do {
// 循环体
// 递增迭代
} while(结束条件);
2. 变量 , var关键字
语句;
变量的命名规则:
2.1 由unicode字符集、数字、$、_组成
2.2 不能以数字开头
2.3 不能为关键字 for while if else
https://www.runoob.com/js/js-reserved.html
3. 方法 function 关键字
// 执行一系列的操作, 可以反复执行,
function 方法名(参数 / 输入) {
return 返回值;
}
// 调用方法
方法名();
// 方法的命名规则:
1 由unicode字符集、数字、$、_组成
2 不能以数字开头
3 不能为关键字 for while if else等
4. 全局变量 和 函数变量
全局作用域 和 函数作用域
类比 宪法 和 地方法规
全局变量：定义在全局的变量，所有的位置都可以访问
函数变量：方法的形式参数或者定义在方法里的变量
注意：在函数、方法内要用到什么变量, 现在方法体里面找,
方法体里面有该变量, 就是用该变量
5. 数据类型
1. 数字
2. 字符串
3. 布尔值 : true, false
4. 对象 : {
属性1: 值,
属性2: 值
}
对象如何调用自身的属性 . xuwei.name / xuwei.age
对象如何调用自身的方法 . xuwei.run() / xuwei.smile()
5. 数组
6. undefined 声明了变量但没有赋值
7. null 对象为空
6. 运算符
1. 算术运算符 + - * / %
2. 字符串拼接运算符 +
3. 赋值运算符
=, +=, -=, *=, /=, %=
4. 比较运算符
<, <=, >, >=, ==, !=
5. 逻辑运算符
!, 非, 求反
&&, 并且
有一假即为假
左边布尔值为true, 表达式的值就是右边的值
左边布尔值为false, 表达式的值就是左边的值
|| 或者
有一真即为真
左边的布尔值为true, 表达式的值就是左边的值
左边的布尔值为false, 表达式的值就是右边的值
6. 位运算符 二进制
// 后面将
7. javascript 标准库
字符串
属性：长度 length
方法：indexOf() 示例：str.indexOf("ab")
lastIndexOf() 示例：str.lastIndexOf("ab");
charAt() str.charAt(1); // 取出指定位置上的字母
concat() // 字符串拼接、吞并
slice() // 截取字符串
// 一个参数：索引位置到字符串最后
// 两个参数：索引位置到索引位置，包含头，去掉尾巴
substring() 同slice
substr() // 截取字符串
// 一个参数：索引位置到字符串最后
// 两个参数：指定索引截取几个字符
split() // 拆分字符串
toUpperCase()
toLowerCase()
数组 arr
属性：长度 length
方法：indexOf() 示例：str.indexOf("ab")
lastIndexOf() 示例：str.lastIndexOf("ab");
arr[i]
concat()
slice()
splice()
push() 后加
pop() 后删
unshift() 前加
shift() 前删
reverse() 倒转数组
sort() 排序，默认是按照字母顺序
join() 将数组每一个元素链接起来 默认是逗号
8. 事件
onclick ondblclick 点击事件
onchange 改变事件
onkeydown / onkeyup / onkeypress 键盘事件
onload 加载事件
onmouseover / onmouseenter
onmouseout / onmouseleave
onscroll 滚动事件
addEventListener 添加监听 // jQuery
9. DOM
http://www.runoob.com/js/js-htmldom.html
获取dom对象dom元素
与选择器对应的方法
id getElementById()
class getElementsByClassName()
tag getElementsByTagName()
遍历去操作它
for() {}
创建元素
document.createElement('tr')
document.createElement('td')