由来
HTML（1993.6~2013.5.6）
W3C （万维网联盟）1994年成立 （中立性）
快捷方式&基本标签
想要获取 清空样式CSS 请单击我
运行：Ctrl+r
补全语法：Tab
标签：<h1>~<h6>
段落：<p></p>
换行：</br>
水平线：</hr>
加粗：<strong>或<b>
斜体：<em>或<I>
&符号的多种用法
空格： ；
>号：&+gt;
<号：&+lt；
双引号：quot；
©:版权符号
版权符号：copy；
多种多样的连接
图片链接：
<img src="图片路径",title="图片标题",alt="图裂时显示的内容",weight="图片宽度",height="图片高度"/>
超链接：可以添加图片
<a href=" 链接地址（跳转到哪里）",target="打开方式（跳转新页面打开还是从当前页面打开，默认为当前页面打开）">在这里写要显示的内容\</a>
_self : 是从当前页面打开，也就是从自身打开
_blank : 是从新建页面打开
锚链接：先创建锚点，在创建链接
锚点：<a name = “”> 我是锚点</a>,name中的内容为自定义内容
链接方式一：<a href = " " > </a>
连接方式二：<a href = " " # " " > </a>
加#号为跳转到某个页面的具体位置（跳转到某个页面的具体位置必须加#号）
小知识：
- 图片后缀为PNG的为：背景透明，Ctrl+ / :注释语句
- 块元素独占一行，行内元素不独占一行
- </span>:span是一个空标签，用来声明属性，配合style使用。
选择器
Id>class>标签
标签选择器：
<> <>(又可分为单标签和双标签)
类选择器：
class选择器（以.开头）
Id选择器：
一个Id在一个页面中只能用一次（以#开头）
font：
font-family:设置字体类型
font-size:设置字体大小
font-style：设置字体风格
font-weight:设置字体粗细
font 在一个声明中设置所有字体属性：
font：style（风格），weight（粗细），size（大小），family（类型）；
text-shadow:X轴偏移量，Y轴偏移量，阴影范围，颜色
text-indent:首行缩进 ➡➡➡px（像素），em（字符）
text-align：元素水平对齐方式
center：居中，left：左，right：右，justify：两端
line（行）-height：行高
text-decoration：文本装饰 （none：没有任何装饰）
RGB 0-255(0,0,0) RGBA(透明0-1)（0，0，0，1） #FF FF FF 颜色相应单词（color：red，green，blue，0-1（透明度））
background：
背景颜色， style：类型， link：外部CSS嵌入
background-color:背景颜色
background-image：url（路径）（可插入背景图片）
background-repeat:背景图片平铺
background：no-repeat：不平铺
background-position：（x,y）背景图定位 正右负左
background：图片，定位（x,y），平铺，颜色（可乱序)
图文垂直居中（给图片用）：vertical-align：middle
快速生成标签：例：span*数量/p*数量>span.a/#a
鼠标悬浮其上实现效果：例：hover{样式名：样式值；}
a:link 为单击访问
a:visited单击访问后
a:hover鼠标悬浮其上
a:active鼠标单击未释放
H5内连CSS：<link href="",rel="",type="">
小知识：
图片在背景色之上（跟PS图层似的）
列表
无序列表
ul：列表声明 li：列表项
list-style：none；
列表 样式 无样式
有序列表
ol：列表声明 li：列表项
定义列表
dl：列表声明 dt：列表标题 dd：列表内容
表格
表格：<table></table>
属性：border边框
标题：<th></th>
行：<tr></tr>
单元格：<td></td>
（合并）<td colspan="1"></td> 向右占1格
（合并）<td rowspan="1"></td> 向下占1格
层次选择器
1. 后代选择器
父选择器 子孙选择器{ }
2. 子选择器
父选择器>子选择器
如：h1>span{}
form表单声明
form action = " " method = " "
action:数据提交的地址
method:提交的方法（get/post）
get：提交会将表单数据直接展示到地址上
post：提交会将清单数据加密不展示
input：表单上的一个元素
type = input 元素的类型
用户名：<input type = "text"/>
密码：<input type = "password"/>
name属性：给表单一个名字，让后台能知道当前的是什么数
------------------------------------------
男：\<input type = "radio"/>
女：\<input type = "radio"/>
单选按钮，实现单选要name相同，起name为sex（性别）
------------------------------------------
多选按钮
<input type = "check(多个) box（盒子）" />
多个复选框按钮，name一定要相同
------------------------------------------
列表框
select：下拉列表框声明 option：下拉列表框的选框
<select>
<option> </option>
</select>
默认选中：
<option selected = "selected">
------------------------------------------
重置按钮
属性：reset value：元素的值
<input type = "reset" value = "重置">
------------------------------------------
提交按钮 submit
<input type = "submit"/>
get提交：会将表单数据直接展示到地址栏上（效率高）
post提交：会将表单数据进行加密，不展示（安全性高）
------------------------------------------
图片按钮（图片提交）
<input type = "image(图片)" src="路径"/>
按钮：<input type = "button"/>
------------------------------------------
协议框
<textarea name ="" rows="几行" cols="几列"/>
------------------------------------------
（复/单选按钮默认选中）
checked = "checked";
单选框<input type:"checkbox"/>
size：" " ; 框的长度
maxlength=""; 文本框能输入最大字符数
<input type = " " value=""/>
type中的内容：
隐藏域：hidden
只读：readonly
禁用：disabled
------------------------------------------
文本框提示信息：placeholder=" ";
latel for="";
latel:点击label中的内容，可以直接选中for的那个标签（聚焦）；
如：<label for ="nan">男</label>
<input id = "nan" type=""/>
box模型
边框
border-color:red;
border-width:1px;
border-style:solid;
（solid:实线，double:双实线，dashed:虚线，none:无边框）
一个值:上下左右; 两个值：上下，左右;三个值：上，左右，下；四个值：上，右，下，左
border-方向-样式：值;(如：border-top-color：green；)
外边距（margin）：元素的边框到另一个元素边框的距离。
内边距（padding）：内边距和外边距会改变元素尺寸大小。（边框到里面内容的距离）
块级元素水平居中
1. 必须有宽度(如：border-width：1px;)
2. margin：0 auto（自动）
box-sizing:border-box;
(用来解决盒子尺寸改变的问题（边框，内边距）)
（通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。）
小知识：linear-gradient：线性渐变；
DIV（盒子（非常干净（没有任何样式的）块级元素））
display：用于改变元素等级（行内变块级）
display：block；
display：inline；
行内块：（即在一行内，还能设宽高）
display：inline-block；
小知识：（写网页时候要从外到内，从上到下写）form表单（提交用）
高级选择器
#box dt：nth-of-type（下标）{背景图}
#box dd：last-of-type{border：none}
超出部分隐藏/滚动条
overflow：hidden/scroll
解决文本框塌陷
1. 造个子类（造个儿子）
2. 给它加宽度
3. 隐藏/添加滚动条
4. 给塌陷元素添加：
#box：after{
content："";
display:block;
clear:both;
}
并集选择器：
p，h1{color:red;} 交集选择器：<p class=“a b c d e”> 元素隐藏:display:none;
标准文档流（让元素按照自己本身级别进行自然排序）
脱标：脱离标准文档流
浮动的特性：贴靠特性
1. 当一行内能放下浮动的元素时，就会放到这一行内，紧贴着上一行浮动元素
2. 浮动会直接将元素变成行内块
3. 当浮动的前面是标准文档流时，浮动元素会排在下一排
4. 当前面是浮动元素时，标准文档流会自动向上补位
1. 浮动-float属性
float：left；左浮动
right；
none；
2. clear：left；清除左浮动
right；
both；
（告诉当前元素，你的上一个元素没有浮动）
3. 父元素：hover 子元素{ }
当鼠标放在父元素上时，子元素发生什么变化
例：#box：hover div{display：bloch；}
4. 边框弧度：
border-radius：50%（圆）
5. border：1px solied red;
box-sizing:border-box;
(边框也算作Div大小的一部分)
6. margin：0 auto；（块级元素居中）
7. height：27px；
line-height：27px；
（高度和行高保持一致，文字在行内垂直居中）
8. #box>p>a:first-of-type;
9. vertical-align:middle;(图文垂直居中)