1------------------------------------------
<html>开始和结束</html>
<title>用来设置网页标题</title>
<meta> 设置网页编码方式
<hn>标题标签</hn>
<p>段落标签</p>
<span>组合行内元素</span>
<label>为 input 元素定义标注</label>
<i>斜体文本</i>
<b>加粗文本</b>
<strong>strong 标签同样加粗</strong>
<u>文本自带下划线</u>
<s>>删除线文本</s> <del>删除文本</del>
下标 上标
换行
分割线
<ul>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
</ol>
<img src="路径"> 图片标签
2-------------------------------------------
<table>表格</table>
<thead>表格的头部信息</thead>
<tbody>表格内容</tbody>
<tfoot>表格尾部信息</tfoot>
<caption>表格标题必须为表的第一个元素</caption>
<tr></tr>
<td></td>
<th>用法与td一样，自带文本居中和加粗效果</th>
<table border="1px" width="500" height="300" bgcolor="#EF82EF" align="center" valign="middle>
<caption>表格标题</caption>
<tr>
<td colspan='3'></td>
</tr>
</table>
colspan 表示跨列合并
rowspan 表示跨行合并
cellspacing:设置表格与边框之间的距离
cellpadding:设置单元格内容与边框之间的距离
<style type="text/css">样式设置</style>
<div>容器标签 块级元素</div>
<form action="文件的路径" method="提交方式" >表单</form>向服务器发送数据
提交方式 get/post
<input type="text(显示输入)" name="uname" placeholder="提示文本" maxlength="最大字符数" />
<input type="password(隐式输入)" name="upwd"/>
<input type="radio" name="gender(用来分组)" value="male(发送给服务端)" checked="默认选中状态">
radio 表示单选按钮
checkbox 表示复选框
hidden 隐式发送一些附加信息，用户不可见
file 文件上传
submit 提交按钮
reset 重置按钮
button 普通按钮
<textarea name="uinfo" cols="20(默认列数)" rows="5(行数)" disabled(禁用表单控件)></textarea>
class 规定类名
id 规定元素唯一id
lang 规定元素内容的语言
style 规定行内css样式
空格
¥ 人民币符号
© 版权符号
<>小于，大于
3------------------------------
<style>样式</style>
<link rel="stylesheet" href="url"> 引入外部CSS代码
1.块级元素：不与其他元素共行，可以手动设置宽高
代表元素：div hn p ul ol dl li table form
2.行内元素：可以与其他元素共行，不能手动设置宽高，大小由内容多少决定
代表元素 span lable a i b strong
3.行内块元素 既可以共行也可以手动设置宽高
代表元素 img input
开头 id选择器
. 开头 类选择器
，分隔 群组选择器
空格分隔 后代选择器
子代选择器
- 匹配文档中所有元素
:开头伪类选择器
:link 表示超链接未被访问时的状态
:visited 表示超链接被访问过后的样式
:hover 鼠标悬停时的状态
:active 鼠标点按时的状态
:focus 元素获取到焦点时的样式，常见于输入框
按顺序设置 LVHA 爱恨原则
a:active{
color: blue;
}
4-----------------------------
选择器权重 # > . > 普通
overflow 内容溢出处理- visible 默认值,溢出部分可见
- hidden 溢出部分隐藏不可见
- scroll 设置内容滚动显示,显示滚动条
- auto 自动 当内容溢出时,自动添加滚动条并且可用
border 边框
border : 5px solid red;
border-width :设置边框线的宽度
border-style :设置边框线的样式,取值 - solid 实线
- dashed 虚线
- dotted 点线
- double 双线 (不常用)
上右下左四个方向的边框
border-top/right/bottom/left :
网页三角标
元素尺寸为0，其他三边为透明transparent
border-radius 圆角边框
border-radius : 5px 10px;第一个上下，第二个左右
边框阴影 box-shadow : h-offset v-offset blur spread color;
h-offset:阴影的水平偏移距离 取值为正，阴影向右
v-offset:阴影的垂直偏移距离 取值为正，阴影向下
blur:阴影的模糊程度 值越大，越模糊
spread:阴影扩大或是缩小的距离 取值为正，阴影会扩大
color:设置阴影颜色
外边距margin 边框border 内边距padding
margin:0 auto;表示自动，可以用来设置元素居中
四个方向可单独设置外边距 margin-top/right/bottom/left:
具有默认外边距的元素 body,h1,h2,h3,h4,h5,h6,p,ul,ol
具有默认内边距的元素 ol,ul,input
display 元素类型转换
inline 行内元素
block 块元素
inline-block 行内块
none 元素隐藏 元素在文档中就不占位了
水平居中:text-align : center;
垂直居中：设置元素 高度height 与行高line-height 保持一致
5-----------------------------
outline 轮廓线
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片重复平铺显示
repeat-x
no-repeat 不平铺
background-size 背景图片尺寸
cover 图片完全覆盖元素，多出部分裁剪
contain 图片刚好容纳，不足的部分不管
auto 自动
background-position 背景图片位置 上下左右
background-attachment 背景图片是否固定
scroll 默认值 跟随滚动
fixed 固定位置
background 背景属性简写
background:red url('') right no-repeat 100% 100% scroll;
font-family 指定字体
font-weight 字体粗细
lighter(100)/nomal(400)/bold(700) nomal正常粗细
font-size 字体大小
font-style 字体样式(斜体)
italic 斜体
line-height 行高
使用简写，有必填的属性值 family
font:style weight size family;
font:family size/line-height;
text-decoration 文本装饰线
1.underline 下划线
2.none 取消装饰线
3.overline 上划线
4.line-through 删除线
text-indent 首行缩进 em为单位
border:1px solid black; 表格添加边框
border-collapse 表格边框合并
1.separate (默认)
2.collapse (边框合并)
border-spacing 边框边距
list-style-type 设置项目符号
list-style-position:
设置项目符号的位置 默认outside 项目符号与内容框分离
设置inside 项目符号调整到内容框中
list-style-image：url() 自定义项目符号
transition-property: 指定过渡属性 all能过渡就过渡
transtion-duration 指定过渡时长
transition-timing-function
1.ease默认值 慢速开始，快速变快，缓慢结束
2.linear匀速变化
3.ease-in 慢速开始，加速结束
4.ease-out 快速开始，慢速结束
5.ease-in-out 慢速开始和结束，中间先加速后减速的过程
tarnsition-delay 指定过渡效果的延迟时间
transition:property duration timing-fun delay; 属性简写
float 浮动布局 left 元素向左浮动
6------------------------------------------------
clear 清除浮动带来的影响
1.none 默认不做任何处理
2.left 清除前面元素左浮动带来的影响
3.right 清除前面元素右浮动带来的影响
4.both 清除所有
position 定位布局
1.relative 相对定位
2.absolute 绝对定位
3.fixed 固定定位
4.static 静态布局(默认值)
top:以元素上边为基准进行偏移
right:以元素右边为基准进行偏移
bottom:以元素下边为基准进行偏移
left:以元素左边为基准进行偏移
z-index 元素堆叠次序 取值 数字，无单位，值越大，元素越靠上
display:none/inline/block/inline-block 元素的隐藏与显示
1.none元素隐藏不显示，在文档中不占位
2.inline 显示为行内元素
3.block 显示为块元素
4.inline-block 显示为行内元素
visibility 元素显示效果
1.visible 默认值 可见的
2.hidden 隐藏，元素隐藏仍然在文档中占位
opacity 透明度 可被子元素继承
0(完全透明)~1(不透明)
vertical-align 元素的垂直对齐方式
top / middle / bottom / baseline(默认值，基线对齐)
cursor 光标外观
1.default
2.pointer 小手形状
3.text 显示为 I 样式
7----------------------------------------------------
translate() 转换函数
1.translate(x) 元素沿水平方向进行移动等价于 translateX()
2.translate(x,y) 元素沿水平方向移动x，沿垂直方向移动y
3.translateY() 元素沿垂直方向平移
scale(x) 元素x轴和y轴都缩放 取值为负值，元素会反转
scaleX(x) 元素沿X轴缩放
scaleY(x) 元素沿Y轴缩放
rotate(ndeg) 旋转
transform-origin:left bottom 以左下角为旋转原点
transform:rotate(45deg); 旋转45°
作者：zh__quan
来源：CSDN
原文：https://blog.csdn.net/zh__quan/article/details/81461272
新人引用 以便后续查询
html块标签与行内标签
转自：http://blog.csdn.net/yuyanqiao/article/details/8558118
块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。
如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了 查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快 速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。
你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。.
内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属 性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。
可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。
关于inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。
块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element)
* a - 链接
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
