1html介绍
<meta>定义关于 HTML 文档的元信息。<link>定义文档与外部资源的关系。<style>定义文档的样式信息。<script>定义客户端脚本
2标签（1），代码语义化
<p></p>段落
<hx></hx>标题
<em></em>斜体强调
<strong></strong>粗体更强调
<span></span>设置单独样式
<q></q>短引用“”
<blockquote></blockquote>长引用，居中文本
<br/>回车
空格
<hr/>分割横线
<address></address>斜体地址
<code></code>贴入一行代码
<pre></pre>放入多行代码
3标签（2）
<ul>
<li></li>
</ul>排序，不分先后顺序
<ol>
<li></li>
</ol>排序，从1开始排序
<div></div>划分板块，逻辑独立分出来
<div id=”xxx”></div>给板块命名
<table summary=””>表格，表格简介介绍（不显示出来）
<caption></caption>表格标题
<tbody>表格分块，板块
<tr><th></th></tr>表格行/表格标头
<tr><td></td></tr>表格行/表格单元格
<tr><td></td></tr>
</tbody>
</table>
4标签（3）
<a href=”” title=””> </a>
<a name=”” title=””> </a>锚点
href
title
target=”_blank”
mailto:xx；aa？cc=xx&bcc=xx&subject=xx&body=xx
<img src =”” alt=”” title=””></img>
5使用表单标签，与用户交互
<form> method=”” acion=””</form>表单/方式postget/行为传送到比如save.php
<input type=”text” name=”myname”/>输入标签，文本框
<input type=”password” name=”pass/”>密码框password
type=”” 类型
text文本框
password密码框
submit提交按钮
reset重置按钮
radio单选框
type=”checked” checked=”默认值” 复选框和默认值设置
name=””文本框命名，为后台程序ASP、PHP使用
value=””为文本框设置默认值，为按钮文字
<testarea rows=”10” cols=”50”>在这里输入内容……</textarea>多行文本，rows行cols列
<select>下拉列表框
<option value=”xx” selected=”selected”>xx</option>设置默认 select=”select”，value向服务器提交的值
<option value=”cc” >cc</option>
</select>
<select multiple=”multiple”></select>下拉列表多选，复合multiple
<input type=”submit” vaue=”提交” name=”submit”>
<input type=”reset” value=”重置” name=”reset”>
<label for=”控件id名称”></label>注释，与id关联，for与id对应
6认识css
/**/
7嵌入式css
<style type=”text/css”>
p{ color : red };
</style>
<p style=”color:blue”></p>
<link href=”” rel=”stylesheet” type=”text/css”>
8选择器
.class多次，同时多个样式
{
color : red
};
…
<span class=”a”></span>
#id唯一，只能一个样式样式
{
color : red
};
…
<span id=”a”></span>
*{}
a:hover{}
9.继承
p{color:red;}具有
p{border:1px solid red;}不具体
10.排版
（文字排版——字体）font-family:"宋体",sans-serif;
（文字排版——字号）font-size:12px;color:#666
（文字排版——粗体）font-weight:bold
（文字排版——斜体）font-style:italic;
（文字排版—下划线）text-decoration:underline;
（文字排版—删除线）text-decoration:line-through
（段落排版——缩进）text-indent:2em;
（段落排版—行间距）line-height:2em;
（段落排版—字间距）letter-spacing:50px
（段落排版——对齐）text-align:center;
11.模型
块级元素<div>、 <p>、<h1>、<form>、<ul> 和 <li>
display:block;
内联元素<span>、<a>、<label>、<strong>、<em>
display:inline;
内联块状元素<img>、<input>
display:inline-block
盒子模型
盒子里padding内边距、盒子与盒子的margin外边距
盒子边框border
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：
div{
border:2px solid red;
}
上面是 border 代码的缩写形式，可以分开写：
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意：
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用像素（px）。
现在有一个问题，如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式中允许只为一个方向的边框设置样式：
div{border-bottom:1px solid red;}
同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
盒子填充padding
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：
div{padding:20px 10px 15px 30px;}
顺序一定不要搞混。可以分开写上面代码：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可以这么写：
div{padding:10px 20px;}
盒子边界
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}
也可以分开写：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上右下左的边界都为10px;可以这么写：
div{ margin:10px;}
如果上下边界一样为10px，左右一样为20px，可以这么写：
div{ margin:10px 20px;}
总结一下：padding和margin的区别，padding在边框里，margin在边框外。
12.css布局模型
在网页中，元素有三种布局模型：
1、流动模型（Flow）（默认）
2、浮动模型 (Float)
3、层模型（Layer）
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
absolute和relative
#box3{
width:200px;
height:200px;
position:relative;
}
#box4{
position:absolute;
width:99%;
bottom:0px;
}
13.css代码缩写，减少带宽
（斜体）font-style:italic;
（文字参数）font-variant:small-caps;
（排版粗体）font-weight:bold;
（字号，颜色）font-size:12px;
（行高）line-height:1.6em;
（字体） font-family:"宋体",sans-serif;
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
这么多行的代码其实可以缩写为一句：
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
注意：
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
body{
font:12px/1.5em "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。
14.颜色值
在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：
1、英文命令颜色
前面几个小节中经常用到的就是这种设置方法：
p{color:red;}
2、RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
p{color:rgb(133,45,200);}
每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：
p{color:rgb(20%,33%,25%);}
3、十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。
p{color:#00ffff;}
配色表：
长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
2、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
下面注意一个特殊情况：
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
3、百分比
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
15.css样式设置的小技