HTML
1、<meta charset="UTF-8"> #设置页面编码，这个设置英文则现在国内浏览器会弹出是否要转换中文
2、<title>我的第一个页面</title> #设置网页的抬头名称
3、<body><!--页面中所有要展现的内容都要写在body标签内--></body>
4、<meta charset="UTF-8"> #定义字符编码
5、<!doctype + 类型> #规定文档类型
6、<!-- 注释 --> #注释的格式
7、&； #转义字符
8、> #创建父子结构标签的
9、+ #创建兄弟标签的
10、. + 名字 #可以在标签下快速创建标签并且给到属性值
11、$ # 叫计数器从1开始（如果是$$$，就是001开始） ul>li{$}*5通过table键直接可以生成1~5的带内容的标签 ul>li.li${$$$}*5这样的格式可以直接生成带内容和带顺序类名的标签
12、<h1>一级标题</h1>
13、<h2>二级标题</h2>
14、<h3>三级标题</h3>
15、<h4>四级标题</h4>
16、<h5>五级标题</h5>
17、<h6>六级标题</h6>
18、<p>段落标签</p>
19、<span>文本标签</span>
20、<i>斜体标签，能让字体斜体</i>
21、<b>加粗标签</b>
22、<em>是强调标签，显示效果和i标签一抹一样</em>
23、<strong>是强调标签，以加粗方式强调</strong>
24、<br> #换行标签
25、<hr> #分割线标签
26、<a href="http://www.w3school.com.cn/">前往w3school网站</a> #超链接标签
27、<img src="" alt="狗狗" title="这是狗狗图片"></img> #title就是鼠标悬停后出现的提示
28、<img src="./111111.jpg" alt="狗狗"></img> #alt 当图片没有被加载出来出现的提示文本
29、<li></li> #列表标签
30、<th>单元格标题</th> #表格标签
31、<input type="text" name="user"> #输入框标签 / type就是输入的类型，type就是文本明文的 / password就是密码类型是密文的 / file就是选择文件的 / radio就是圆点选择框（圆点框必须建立起练习才能选择其一，否则变成多选框而且无法取消）/ checkbox就是方形点选框（可以多选可取消）
32、<textarea name="" id="" cols="30" rows="10"></textarea> #文本域标签 / textarea 就是文本域，文本域是可以鼠标拖动缩放的
33、<input type="file"> #文件选择标签
34、<select name="" id=""> #下拉选择列表标签
<option value="">语文</option>
<option value="">数学</option>
<option value="">外语</option>
</select>
35、<label for="">性别</label> #展示标签
36、男<input type="radio" name="sex" checked> #圆点选择标签
37、西瓜<input type="checkbox" name="like"> #方形复选框标签
38、<button type="submit">提交按钮</button> #按钮标签
39、<input type="submit" values="input也可以做提交按钮"> #标签提交按钮
CSS
1、<link rel="stylesheet" href="./css/index.css"> #这个是外联式需要导入的写法，用link标签在href里面用相对路径导入外联css样式文件
2、/**/ #css注释
3、<style> </style> #将样式与页面中的某一个或某些标签建立联系，只要使用选择器，将需要的标签写在这个style标签下，设置属性即可，这就是选择器
基础选择器
4、div{} #标签选择器
5、*{} #通配选择器
3、.class{} #类选择器
4、#box #id选择器
5、div{">!important;} #！import选择器
PS：这个语法比较特殊，在语句的值和结束符中间写
6、border-radius #这个是圆角设置,参数用百分比
7、border;2px solid blue； #broder边框，2px就是边框的粗细，solid就是边框实线，blue就是定义边框的颜色
高级选择器
8、div,p,h1{} #群组选择器
9、.sup .sub{} #后代选择器
10、.sup > .sub{} #.sup只能为.sub的父亲
11、.div1 ~ .div2{} #兄弟选择器
12、h2.hd{} #交叉选择器
13、.h.h61{} #多类名选择器
14、color: red; #字体颜色
15、class-name:nth-child(number){} #伪类选择器
16、 200px; #宽度
17、height: 200px; #高度
18、background-color: yellowgreen; #区域颜色
19、transition: 1s 1s all linear #transition动画过渡效果，有几个属性： 1、（1s 1s过渡效果展开的时间和延迟时间）延迟时间一般不会写，用户体验度不好 2、动画属性默认all 3、过渡曲线linear（线性）
20、hover #鼠标悬停动画效果
21、text-align: center; #改变文本的水平居中方式
22、top; #从顶部往下移动
23、font-weight: 900; #字重:字越粗越重，越细越轻，范围100~900的整数
24、font-size: 30px; #字体大小
25、font-family: SimSun-ExtB,Shruti; #字族=字体，可以写备用字体，就是字体后面以逗号分隔，再写一个字体，备用字体一般选用系统默认字体
26、font: 900 30px/100px "SimSun-ExtB","Shruti" #多个基础功能的简写方式(字重 字体大小/行高 字族)
27、background-image: url("img/bg.png"); #加载背景图片
28、background-repeat: no repeat; #处理平铺:repeat-x就是x轴平铺 | repeate-y就是y轴平铺 | no repeate就是没有平铺
29、background-size: 100px 200px #背景尺寸(这个不常用)，会缩放背景图
30、background-position: 10px 20px; #背景定位，往右移10（x轴左右偏移）、往下移20（y轴上下偏移）（-10、20往左移10，往下移20）
31、background: url("img/bg.png") red no-repeat 10px 20px; #以上几个功能简写（加载背景图片 | 区域颜色 | 处理平铺 | 背景定位）
32、text-decoration: none; #清除字体下划线
33、list-style: none; #清除列表样式
34、margin: 0; / padding: 0; #清除列表默认的距离值
35、float: left; #浮动布局
36、.sup:after{ #清浮动的写法，子浮动,父级开启清浮动,父级的兄弟显示区域正常
content: "";
display: block;
clear: both;}
37、solid black #设置边框线的样式（实线/虚线）
38、border: 10px solid black; #border就是色块区域的边框线，用来设置边框线的粗细以及类型
39、padding: 10px 20px 30px 40px; #pading用来也是四个参数上下左右，用来设置margin区域在色块区域的位置
40、margin: 100px 0 0 200px; #margin也是四个参数上下左右，用来设置整个标签在页面的什么位置
41、ul { #ul中有系统默认样式，重置默认样式，然后自定义样式，这个过程就叫reset操作
margin: 0;
padding: 0;
list-style: none;}
42、父相子绝 （子级在父级的区域内可以随意设置位置） #具体查看14
43、margin-right; 10px; #盒模型的margin区域右边增加指定的空白像素区域
44、margin; 0 auto; #区域居中，详细参数看盒模型篇
45、bottom 10px； #底部开始向上移动指定像素,底部开始居上指定像素
46、right 10px; #右边开始居上指定像素
47、text-indent: 20px; #文本缩进，按照像素缩进
48、text-indent: 2em; #文本缩进,em代表当前字体大小进行缩进
49、line-height: 1em; #行高，按照当前字体大小进行距离分配
50、line-height: 100px; #行高，按照像素进行距离分配
51、
PS:！import > 行间式 > id > class> 标签 > 通配
PS：什么是行间式，行间式就是在标签的内部书写格式
javaScript
1、alert('弹出警告') #alert就是警告的意思
2、<script src="js的引入.js"> #通过script从外部引入脚本
3、var 变量名 = 变量值； #var是定义变量的关键词
4、new #创建对象的关键词
5、print #这个功能就是通过浏览器调用打印机打印页面
6、console.log （xxx） #就是js语法用来打印的
7、// #这个是js的注释
8、! #是取反的意思
9、isNaN #检查是不是NaN
8、<script src="js的引入.js"> #从外部引入脚本
9、var n=10; #定义一个数字类型
10、var s = 'str' ; #定义一个字符串
11、var b = true; #定义一个布尔值
12、console.log(m,typeof (m)) #查看值的类型，查看类型m时候可以不加括号
13、var m = new Number(100); #创建一个新的对象
14、var x = Number('123'); #值类型的转换,这里是将字符串123转换成数字123
15、var s = '字符串'; #定义字符串，'' "" 单双引号都可，js中没有 ''' '''三引号
16、var b = true; #定义布尔值
17、var abc; #定义一个未定义类型
18、== #这个是用来判断值是否相等，这个是做值比较
19、=== #判断本质上是否相等，就是做值与类型比较
20、var num = 666 + ''; #数字转换成字符串
21、var res1 = '10' + 5; #js中字符串的拼接优先级高于数字运算的加法，所以这里识别成字符串的拼接
22、var res2 = '10' - 5; #这里有减法，字符串不能做减法，所以字符串10识别成数字做了减法
23、var res = '888' - 0; #字符串转换成数字,-0就是表示值不变，字符串不能做减法，所以自动识别成数字做计算，类型也改变了
24、var ress = +'888'; #字符串转换成数字的另外一种方式，字符串必须是纯数字的字符串，不能是数字加字幕的字符串
25、 isNaN（结果） #判断转换的结果是否是非数字类型
26、res = parseInt('3.1.4abc'); #将非纯数字的字符串转换成数字类型，这个方法就会从前往后找，找到的第一个数字就是返回值
27、res = parseFloat('3.1.4abc'); #将非纯数字的字符串转换成数字类型，这个方法就会从前往后找，找到的第一个小数点后的第一个数字就是返回值
28、var arr = [1,2,5,3,4]; #定义数组
29、console.log(arr[2]); #数组的查询 => 索引即可
30、delete arr[4]; #数组的删除
31、delete arr[arr.length - 1]; #删除数组中最后一个,arr.length - 1就是最后一个，以此类推-2就就是删除最后第二个
32、arr[4] = 100; #修改数组中的指定位置值
33、arr.unshift(123); #在数组的头位置增加值
34、arr.shift(); #删除数组头位置的值
35、arr.push(888); #在数组的尾部增加一个值
36、arr.pop(); #将数组的尾部的值删除
37、arr.splice(1,1,999); #splice可以完成除了查的所有功能，包含插入。spilce（从什么索引开始，操作多少位，操作成什么(这个可以用逗号添加多个值，如果是空不写值就是删除)）（省略第三个参数就是从第几位开始索引，操作几个位进行删除）
38、newarr = arr.splice(1,2); #slice 切片操作,切片之后数组内的值就没有了，被切掉了。slice (n,m) 从索引位置n开始截取到索引位置m之前。这里将切片后的值放入一个新的变量中
39、var str =arr.join('-'); #将数组中的值以指定的符号拼接成字符串
40、narr = str.split('-'); #字符串对应有一个逆运算,将字符串以指定的符号拆分成数组，拆分后数组内的值是以字符串形式存在，可以通过索引修改类型
41、narr[2] = narr[2] - 0; #索引数组内指定位置的值改变类型
42、var dic = {name:'liuxx',age:'100'}; #js没有字典类型，但可以通过对象完全表现字典类型，对象可以当成字典来使用
43、console.log(dic.name); #查找字典中指定的值，对象的调用就是对象加.来调用
44、console.log(dic['age']); #查找字典中指定的值，对象中对象中所有的key都是字符串形式，和42的指令是一样的效果，知识写法不同
45、dic.sex = 'male'; #字典的增加
46、dic.age = 99; #修改字典内的指定key的值
47、delete dic.age; #字典内的值删除
48、函数的定义
function fn1() {
console.log('我是函数fn1');
}
49、 fn1(); #函数的调用
50、#定义函数的另一种方式
var fn2 = function () {
console.log('我是函数fn2');
};
51、匿名函数的定义 （匿名函数只能在定义阶段被调用一次）（第一个()，是将定义的代码作为整体拿到内存地址，后面的()就是调用的意思，这就是匿名函数的定义方式和原理）
(function () {
console.log('我是匿名函数')
})();
52、onmouseout onmouseover #添加鼠标悬浮事件out是离开，over是悬浮（就是鼠标悬停）
53、流程控制（语句的循环） #看16
jQuery #详见jQuery
常用标签
语义标签： h1~h6（页面标题，出现1 次或者不出现） | p（段落标签） | span（文本标签） | i（斜体标签，给字体加效果） | em（强调标签字体加粗） | b（字体加粗标签） | strong（强调标签字体加粗）
功能性标签： a(超链接标签) | img（图片标签） | hr（分割线标签） | br（换行标签） | ul>li（列表标签） | table（表格标签） | form（表单标签-重点）
PS:在body外面的内容会被自动解析到body标签下，但是不要写body外面，不规范
盒模型
margin #外边距，控制居上 margin-top, 居左 margin-left 的距离
bordr #边框设置 1px solid black
padding #内边距，将内容‘内挤’，本质在content 与 border区域之间添加了留白区域
content #width * heigth
浮动
float:left ight #这个就是浮动，设置左右（让原来一行一行显示的标签能够同行显示）
.header:after{ #这个是清浮动，如果不知道子级的固定高度则采用清浮动，这样自动会根据子级的高度位置撑开
content: " ";
display: block; #display 就是显示方式，目的就是让x标签支持宽高，为block时支持宽高，显示方式为inline时不支持宽高
clear: both; #清除左右浮动
}
reset操作（用css写）
body, h1,h2,h3,ul {
margin 0;
padding 0;
}
ul {
/*清除列表样式*/
list-style:none
}
a {
/*设置字体默认颜色和清除下划线*/
color: black;
text-decoration:none;
}
定位布局
position: relative; #相对定位，是父级设置的（fixed就是固定定位）
position: absolute; #绝对定位，是子级设置的（static就是静态的，初始默认就是这个静态定位，意思就是没有定位）
z-index #一个父级下多个子级产生重叠，可以用这个设置层级，以整数大小来排序显示
PS：border就是色块区域的边框线，用来设置边框线的粗细以及类型
PS：这个位置属于content区域，就是盒模型最内层的区域，用来设置标签的范围，其实就是整个色块区域的大小
PS：padding也是四个参数上下左右，用来设置margin区域在色块区域的位置
PS：margin也是四个参数上下左右，用来设置整个标签在页面的什么位置
PS：最小的字号12号，要设置比12号还小的子，只能自己倒入字库，用小号字体，如果要在粗体上更粗，也只能导入自定意义的字库