1 HTML
好早之前写的，今天突然看到了，发出来吧，不能浪费自己的劳动力啊！！！
1.1 基础知识
html可扩展超文本标记语言
让你的每个想法成为现实
是一个平台，css，gs
API 定位、音频、视频
在移动设备开发HTML5应用只有两种方法，要不就是全使用HTML5的语法，要不就是仅使用JavaScript引擎。
1.2
<html></html> html5程序
<head></head> 头部 <title></title> 标题
<body></body> 躯干（文字、图片、链接）1.3 一个标准开头 （！+Tab）文件后缀名为html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>1.4 h1~h6 六种标题模式，格式大小依次减小
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h4>这是一个标题</h4>
<h4>这是一个标题</h4>
1.5
<p>这是一个段落</p>1.6
水平线<hr/>1.7
换行<br/>1.8
引用<blockquote></blockquote>
预格式<pre></pre>1.9
ol>li*3 + Tab 自动生成列表格式
<ol>
<li></li>
<li></li>
<li></li>
</ol>1.10
h2*3 + Tab 自动生成3个
<h2></h2>
<h2></h2>
<h2></h2>1.11 有序列表标签
<ol>
<li>填写信息</li>
<li>提交信息</li>
<li>注册成功</li>
</ol>1.12 无序标签
<ul>
<li></li>
<li></li>
<li></li>
</ul>文字前面加项目号“点”
1.13 描述标签
<dl>
<dt>标题</dt>
<dd>描述1</dd>
<dd>描述2</dd>
</dl> 标题
描述1
描述2
1.14 div把网页分成不同的布局、分区、容器
1.15 <!–注释–>
Ctrl+/ 注释选中的内容、注释该行
1.16
< header>
//但是在显示上没有区别
头部logo、搜索框、目录等
</header>1.17
<footer> //但是在显示上没有区别
尾部联系信息、版权信息等
</footer> 1.18 增加样式
<footer style="background-color: blue">
这是尾部
</footer>1.19 < nav>网页主导航
<nav>
<ul> //无序标签
<li>首页</li>
<li>产品介绍</li>
<li>公司新闻</li>
<li>技术中心</li>
<li>联系我们</li>
</ul>
</nav>1.20 < hgroup> 标题组
<hgroup></hgroup>1.21< article>定义文章
<article></article>1.22 各种标签可以嵌套使用
1.23
<section>
定义节，表示专题
</section>会生成大纲目录，而div不会生成
里面一般跟< h1>标题< h2> …… 不加的话会导致专题错乱
1.24 < aside>侧边
1.25 html直接命名方式：
输入“网页.html” Ctrl+S 保存
1.26 输入文字时，没有任何区别
<header>头部logo、搜索框、目录等</header>
<footer>尾部联系信息、版权信息等</footer>
<article>文章</article>
<section>定义节，表示专题</section>
<aside>侧边</aside>
<time>时间戳</time>1.27 HTML 表单
1.27.1 <input> 元素
<input> 元素是最重要的表单元素。
<input>元素有很多形态，根据不同的 type 属性。
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
- email
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
<form action="/example/html5/demo_form.asp" method="get">
E-mail: <input type="email" name="user_email" /><br />
Homepage: <input type="url" name="user_url" /><br />
Points: <input type="number" name="points" min="1" max="10" /><br />
Points: <input type="number" name="points" min="1" max="10" /><br />
Date: <input type="date" name="user_date" />
<input type="submit" />
</form>1.27.2 Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
在上面的例子中，指定了某个服务器脚本来处理被提交表单
如果省略 action 属性，则 action 会被设置为当前页面。
<form action="action_page.php">1.27.3 Method 属性
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
<form action="action_page.php" method="GET">
<form action="action_page.php" method="POST">何时使用 GET？
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的：
action_page.php?firstname=Mickey&lastname=Mouse
GET 最适合少量数据的提交。浏览器会设定容量限制。
何时使用 POST？
如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
1.27.4 Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
本例只会提交 “Last name” 输入字段：
<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 1.27.5 Name 属性
用 组合表单数据
元素组合表单中的相关数据
元素为 元素定义标题。
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
| onsubmit | onsubmit 属性在提交表单时触发。onsubmit 属性只在<form> 中使用。 |
2 CSS
2.1 CSS
外观美化
布局、定位
2.2. header、footer、center、left、right
头 尾 中间 左 右
2.3. 三种定义样式的方法
#### ①在本文件下的表示方法
<head>
<style type="text/css"> //样式
选择器（即修饰对象）{ //.g{ }
对象属性1：属性值1； //font：
对象属性2：属性值2； //height：50px；
}
</style>
</head>②在1.css文件中的表示方法
<link rel="stylesheet" type="text/css" href="1.css">③直接跟着定义样式
2.4. red = #FF0000 = rgb(255,0,0) 红色
blue = #0000ff = 蓝色
green = #00FF00 = 绿色
#ccc = #cccccc 灰色
#fff = #ffffff 白色
black = #333 黑色2.5. li标签选择器
html:
<li>列表项1</li>（改变标签里的样式类型）
css:
针对所有列表
li{
color: rgb(255,0,0); /*#ff0000 red*/
font-size: 30px;
} color: rgb(255,0,0); 颜色
font-size: 30px; 字体大小2.6. 类选择器 class（把一堆样式划为一类）
div.topBar +Tab = <div class="topBar"></div>当前页面内可以多个同样
html:
<li class="blue">列表项2</li>css:
.blue{
color: #0000ff;
}2.7. ID选择器 id（也可控制某个DIV样式）
当前页面内唯一id；
如果页面内出现多个相同id，虽然可以解析出，但不规范，不建议
<li id="item">列表项1</li>
#item{
color: #00FF00;
font-size:40px;
}| 标签选择器 | 类选择器 | ID选择器 | 优先级 |
|---|---|---|---|
| 1 | 10 | 100 | 权重 |
权重越大，优先级越高，优先级高的覆盖优先级低的
各种选择器可以用在列表li、容器div等中
html:
<div>这是一个Div</div>CSS:
div{
background-color: #ccc;
}2.8. 为CSS单独建立文件（建立链接link）
<link rel="stylesheet" type="text/css" href="style.css">
<link + Enterstyle.css 新建文件
@charset 'utf-8';2.9. font
width: 200px;宽度
font-weight: bold; 字体粗细（粗体）
font-size: 12px; 字体大小
color: #ff7300; 字体颜色
background-color: #ccc; 背景色2.10. 长度单位：px 像素
颜色
十六进制：#ffffff
颜色名称：red
尺寸属性：
Height、max_height、min_height
width、max_width、min_width
字体、字号：
font 缩写形式
font-weight 粗细
font-size 大小
font-family 字体系列
font-style 字体样式
字体颜色
color
opacity 透明度 css3
行距、对齐等
line-height 行高
text-align 对齐
letter-spacing 字符间距
text-decoration 文本修饰
overflow 浮动
text-overflow
text-indent2.11. 列表宽度决定了列表项宽度
height: 100px;
line-height: 100px; 使其上下居中对齐
text-align: right; 水平对齐方式：水平靠右
text-align: center; 水平对齐方式：水平居中
letter-spacing: 10px; 字间距
text-decoration: none; 下划线设置（去除）
white-space: nowrap; 设为一行显示
overflow: hidden;
display: block; 隐藏多余内容2.12. 链接 默认带下划线
2.13.图片
background-image: url(images/1.jpg); 插入图片
background-image: url(../images/1.jpg); 插入上一级文件夹中images文件夹中的图片1.jpg
background-repeat: no-repeat; 图片默认多大就是多大（不加自动复制显示）
background-position: 50px 50px; 移动图片（正数为右下角，负数为左上角）2.14.
<div class=" size show show-1"></div>每个样式间用空格隔开，有三个样式 size、show、show-1
2.15. list-style:none; 去除前面的列表序列号
2.16. 块级元素 默认占一行
★float: left; 浮动 将块级元素变为行级元素 让多行在一行 如果一行放不下，自动转第二行
height: 50px; /*使其上下居中对齐*/
line-height: 50px; /*使其上下居中对齐*/
text-align: center; 水平对齐方式：水平居中
margin-right: 5px; 每个元素间间隔5px
font-size: 20px; 字体大小2.17. background: #fff; 背景为白色
cursor: pointer; 当移动到当前位置时（配合li:hover）变成小手
transition: all 1s ease; 渐变效果（有些浏览器不支持）
-webkit-transition:all 1s ease;
-o-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition: all 1s ease; 对于不支持的浏览器，解决方案2.18. border 边框
2.19.height 高度
width 宽度（可以认为是长度）
font-family：隶书；字体
2.20. 焦点
鼠标移到当前位置时的状态
a:hover{
color: red;
}
/*鼠标激活选定状态*/
a:active{
color: green;
}2.21. border: 1px solid red; 添加边框
2.22.
<div style="clear: both"></div> 用于消除浮动效果导致的顺序错乱2.23. 超链接样式的四种状态
未访问状态 a:link
已访问状态 a:visited
鼠标移上状态 a：hover
激活选定状态 a：active2.24 盒子（矩形方框）
margin（外边距/边界）
border（边框）
padding（内边距/填充）
width 宽度
height 高度
2.25 margin 外边距/边界
margin：1px 2px 3px 4px 外边距/边界（上右下左）
margin：1px 2px 外边距/边界（上下、左右）
margin：1px 外边距/边界（上下左右、通常表现出来上左）
margin
一个值：4边
两个值：上下、左右
四个值：上右下左
margin-left: auto; 左边距自动
margin-left: auto; /水平居中/
margin-right: auto; /水平居中/
margin: 0px auto; /水平居中，有的浏览器不支持/
2.26 默认下，div没有边框border（有颜色）
默认不显示border
border-color: blue;
border-width: 10px;
border-style: solid; 以上三句话使其最终显示 solid实心的
border width style color
border：20px solid green 一句话也可以显示
border-top:30px solid #ccc; 设置上边框属性
2.27 padding-top: 20px; 内边距（上）
padding: 20px; 内边距（上下左右）
padding: 20px 50px; 内边距（上下、左右）
2.28 对同一属性做设置，后面的优先级高
6. 对外边距/边界设置，一般统一格式，不要上边设下边距，下边设上边距；如果设置，按大的显示
margin-bottom: 30px;
2.29
.topbar .search .topabar .link{float:right;} 共用一种样式{浮动 将块级元素变为行级元素}
2.30 解决浮动问题，使用尾类
.fix{*zoom:1;*clear:both;}
.fix:before,.fix:after{
display: table;clear:both;
content: '';
}
<div class="wrap fix"> +fix谁的子元素浮动，就可以清除影响
.fix{*zoom:1;*clear:both;}
.fix:before,.fix:after{
display: table;clear:both;
content: '';
}2.31 定位
position: absolute; 绝对定位
position: relative; 相对定位
参照物是距离最近 定位的父元素2.32 对定位元素显示排序
z-index: 1; 数字越大，优先级越高
设置 鼠标指到哪里，哪里在上边
.c4:hover{
z-index: 3;
}2.33 响应式
viewport
设备方向：Orientation
设备方向：Orientation
2.34
top: 25px; 距离上方25px
left: 15px; 距离左边15px2.35 display: none;不显示
2.36
@media screen and (max-width: 900px){ } 当分辨率小于900px时