HTML
1.网页的头 Doctype ：告诉游览器使用什么规范来解析html文档，如果没写，就默认是BackCompat
1.BackCompat：标准兼容模式未开启
2.CSSlCompat：标准兼容模式已开启
2.HTML（主体）
-标签
1.Meta(metadata information) 自闭合标签
1.页面编码：<meta charset="UTF-8">
2.刷新和跳转：
刷新：<meta http-equi="Refresh" Content="30"/>
跳转：<meta http-equi="Refresh" Content="30;Url=http://www.xx.com"/>
3.关键字和描述：
<meta name="keywords" content = '关键字'/>
<meta name="description" content = '描述'/>
4.X-UA-Compatible （用IE内核解析）、
<meta http-equi="X-UA-Compatible" content="IE=edge"/>
2.Title:就是页面的头部信息
3.Link：
1.css
2.icon
<link rel="shortcut icon" href="image/favicon.ico">
4.div 标签
本身没有什么效果，只是显示，默认是块级标签，占一整行（div,h1,p）
5.span 标签
本身没有什么效果，只是显示，默认是内联标签，是什么就是什么（a,span,select）
PS:如果想要输入<h> 或<m等等的话，可以使用 <h> 这样就能显示了，不然会被当成特殊标签
空格是
6.p标签
代表一个段落，因为行与行之间有空隙 <br/>表示换行<hr/>表示分割线
7.input 标签
input输入类型：text，password，radio，checkbox，file，button，submit，reset，
radio，CheckBox:提交的时候，字典会以{name:'on/off'}显示，不知道提交的值，所以加上value，CheckBox同理
1 <p>性别（单选）：男<input type="radio" name="性别" value='男'> 2 女<input type="radio" name="性别" value='女'> 3 </p>
但是，submit，reset，button在form表单中
1 <input type="submit" value="提交"> <!-- 提交--> 2 <input type="button" value="提交"> <!-- 只是个按键，想实现功能需要联动--> 3 <input type="reset" value="提交"> <!-- 重置输入内容-->
8.form 标签：可以提交在本form的输入内容内容，默认是提交的本URL
1.可以用action指定提交的URL <form action="htt://www.baidu.com">
提交的时候，input需要有一个name，这样就可以以｛name:value｝ 提交给URL
如：<input type="text" name='a'> {'a':'内容'}
2.可以用method指定提交类型，默认是get <form method="get">
9.a标签
1.跳转页面
<a href = "http://www.baidu.com">百度1</a> 刷新掉原来标签页
<a href = "http://www.baidu.com" target = _blank>百度2</a> 新建一个标签页
2.锚点
把a标签和其他标签建立关系，使得可以用a标签跳转
<a href="#i1">点击</a>
<div id="i1" style="height: 500px">这里1</div>
10.h标签：
h1,h2,h3,h4,h5,h6 默认字体逐渐变小
11.file标签:需要经过处理才能把文件上传
1.<form action="http://www.baidu.com/s" method="post" enctype="multipart/form-data">
2.接收方也要做处理
12.select标签：选中哪个提交哪个，不过也可以用value来代指选定的值
....................： 其他标签也一样，如果要提交就加name，然后用value来代替选定值
13.label标签：
把输入框与外面的文字关联起来，当点外面的文字时，就相当于点输入框
1 <label for="name"> 2 姓名： 3 <input id="name" type="text"> 4 </label>
14.ul ol dl
ul 会使内容前面加个点，相当于无序标号
ul.li————> <ul> <li>内容</lli> </ul>
ol 会使内容前面数字，相当于有序标号
ol.li 使用方法同理
dl
1.dl.dt 相当于标题
2.dl.dd 相当于内容
效果为：DT
dd
15.table标签： 也可以不用写thead和tbody，直接tr,td,th
1 <table> 2 <thead> <!--标题--> 3 <tr> <!--行--> 4 <th>第一列</th> <!--th加粗字体--> 5 <th>第二列</th> 6 <th>第三列</th> 7 </tr> 8 </thead> 9 <tbody> 10 <tr> <!--内容--> 11 <td>第一列</td> 12 <td>第二列</td> 13 <td>第三列</td> 14 </tr> 15 </tbody> 16 </table>
左右合并：把<th>第一列</th> <th>第二列</th>，变成<th colspan=“2”>第一列</th>
上下合并：把第一行的<th>第一列</th> 和 第二行的<th>第一列</th>
变成<th rowspan=“2”>第一列</th>
16.fieldest标签：创建一个带名字的边框
<fieldset>
<legend>登陆</legend>
<p>用户名：</p>
<p>密码：</p>
</fieldset>
17.iframe标签：可以直接显示他人的页面：
<iframe style=" 100%;height: 200px" src="http://www.baidu.com/"></iframe>
-CSS
1.style
1.直接<div style="background-color: black;color: white">白底黑字</div>
2.在head里写上<style>div{background-color: black;color: white}</style>，这样<div> 就都可以直接使用格式了
3.在文件中创建一个CSS文件，内容是div{background-color: black;color: white}，这样在创建html的时候只要引用CSS文件就可以直接使用格式了
<link rel="stylesheet" href="（路径/）名称">当前文件就不用加路径
优先级：1>2>3 相同属性覆盖，不同属性依次保留
2.选择器
1.上面的第二点，就相当于标签选择器
2.ID选择器：寻找ID符合条件的，一般ID不能重复，但下面的选择器可以重复
在head里写上<style>#i1{background-color: black;color: white}</style>
3. class选择器：寻找所有符合条件的标签,不管在哪或者是ID、class等，只要值是c1就符合
<style>.c1{background-color: black;color: white}</style>
3.层级选择器：用空格来代表一层
比如:下面就可以通过 .c2 div p a{}或 .c2 div p .c3{}来设置,c3且最后一行不会改变
<div class="c2"> <div></div> <div> <p> <a class="c3">a</a> </p> </div> </div> <div class="c3"></div>
4.组合选择器
.c1,.c2,.c3{} 多个一起设置
5.属性选择器
div[name='haha']{}
3.基础样式
1.宽、高：
宽有100%，高没有。子级的百分比是根据父级的大小来继承的
2.颜色：
可以用red...来表示，也可以用rgb(0,0,0)或rgb的十六进制#ddd.....来显示
3.背景图片：（）
1.写入路径就可以把图片变成背景图片（记得加入宽、高，如果宽高大于图片，
就会以填充的形式补充；低于同理）
1 .c2{ 2 background-image:url("timg.gif"); 3 height: 330px; 4 440px; 5 }
2.但是如果在样式里面加入background-repeat: no-repeat; 那么就不宽高不匹配也不会填充
3.在样式里面加入background-position: 50px,60px; 可以改变图片的位置，移动第二图层，第一图层不变，挖出来的洞位置也不变
4.可以把background-等全部放在一起
如：background : red url('image.jpg') 50px -50px no-repeat; 默认为div的宽高
5.普通图片用 <img src="">
4.边框：
border:4px(边框线的高度) solid（实线虚线） red（颜色),然后用height来设定整个边框的高度，也可以border-left: 只给左边的框加样式
5.显示：
1.display:none; 使得整个标签的内容和位置消失
2.display:block; 使内联标签显示成块级标签
3.display:inline;使块级标签显示成内联标签
4.display:inline-block; 使得纯内联标签具有内联和块级标签的属性，也能设定高度和宽度
5.visibility:hidden ;使得标签的内容消失，位置保留
6.cursor:
改变鼠标放到标签上的样式
7.边距：
padding-top:20px, 内边距，属于自己这个标签（本身增加）
margin-top：20px，外边距，不属于自己这个标签（本身不增加）
8.漂浮：float:left...
1.这样子，还是显示两行
<div style=" 500px;background-color: #00b0e8"> <div style=" 20%;background-color: red">1</div> <div style=" 80%;background-color: black;color: white">2</div> </div>
2.这样子就不会，每一个子级尽量往左飘，如果到边缘就往上下移动,如果合起来超过一行就不行，但是这样子相当于去掉父级图层
<div style=" 500px;background-color: #00b0e8"> <div style=" 20%;background-color: red;float: left">1</div> <div style=" 80%;background-color: black;color: white;float: left">2</div> </div>
3.这样子当子级图层不覆盖父级图层时，还是会显示父级图层
<div style=" 500px;background-color: #00b0e8"> <div style=" 20%;background-color: red;float: left">1</div> <div style=" 70%;background-color: black;color: white;float: left">2</div> <div style="clear: both"></div> <!--放在最后--> </div>
9.positon:
1.relative:单写没用，但是如果父级是relative，子级是absolute，就absolute就会根据父级的大小来固定位置，如果上一级没有relative就一级一级往上找
2.absolute:固定在XX位置，滚动滑轮看起来位置就变了
1 <div style="height: 2000px;background-color: red"></div> 2 <div style="position: absolute;height: 20px;bottom:0;right:0">返回顶部</div>
3.fixed:固定在当前页面的xx位置，滚动滑轮看起来位置也不变
1 <div style="height: 2000px;background-color: red"></div> 2 <div style="position: fixed;height: 20px;bottom:0;right:0">返回顶部</div>
4.一般使用方式
relative+absolute、absolute、fixed
10.z-index:
可以用z-index的大小来判断优先级
11.opacity:透明度
透明 0-1 不透明
PS：一些其他补充
1.line-height:50px; 按照给的像素，让字体居中
2.list-style-type; 去掉ul,ol前面的特殊标号
3.XX:hover; 可以使标签在鼠标移动过去的时候变色
4.用inline-block 如果左右标签不对齐可以适当使用float和上下左右移动3px
5.关于float的补充使用（背景色）
XX:hover ：当鼠标移动到标签，更改样式
XX:after ：在标签后面加内容
XX:before ：在标签前面加内容
当做网页的时候几乎都需要背景色，但如果在背景上面加多个div那么父级就会被隐藏起来，看不到背景色，而且不好设置高度，因为不知道内容有多少
当然也可以使用 <div style="clear: both"></div> 来使背景颜色显示，不过最好设置一个样式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .clearfix:after{ 8 content: '.'; 9 clear: both; 10 display: block; 11 visibility: hidden; /*把.隐藏*/ 12 height: 0; /*把多出来的高度变为0*/ 13 } 14 .c2{ 15 float: left; 16 } 17 </style> 18 </head> 19 <body> 20 <div style="background-color: red;" class="clearfix"> 21 <div class="c2" style="background-color: green;height: 50px">11</div> 22 <div class="c2">22</div> 23 <!-- <div style="clear: both"></div>--> 24 </div> 25 </body> 26 </html>
小尖角的创建和使用：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1{ 8 display: inline-block; 9 border-right: 15px red solid; 10 border-top: 15px green solid; 11 border-left: 15px blue solid; 12 border-bottom: 15px yellow solid; 13 } 14 </style> 15 </head> 16 <body> 17 <div class="c1"></div> 18 </body> 19 </html>
效果如下：其实是由多个三角形组成的，如果哪一部分不想要，可以把颜色设置成透明（transparent）
滚动条
在内容样式中加上overflow: auto;就会在内容超出页面时为内容创建一个滚动条，位置都不改变
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 .pg-header{ 11 height: 48px; 12 background-color: #2e6ab1; 13 } 14 .pg-body .body-menu{ 15 position: absolute; 16 top: 48px; 17 left: 0; 18 bottom: 0; 19 200px; 20 background-color: red; 21 } 22 .pg-body .body-content{ 23 position: absolute; 24 top: 48px; 25 right: 0; 26 bottom: 0; 27 left: 200px; 28 background-color: green; 29 overflow: auto; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="pg-header"></div> 35 <div class="pg-body"> 36 <div class="body-menu"></div> 37 <div class="body-content"></div> 38 </div> 39 <div class="pg-footer"></div> 40 </body> 41 </html>