1html Introduction
<Meta> define the meta-information about the HTML document. <Link> definitions document the relationship with external resources. <Style> style information defined in the document. <Script> Custom Client Script
2 tag (1), semantic codes
<P> </ p> Paragraph
<Hx> </ hx> title
<Em> </ em> italic emphasis on
<Strong> </ strong> more emphasis on bold
<Span> </ span> style separately provided
<Q> </ q> Short Reference ""
<Blockquote> </ blockquote> quoted long, centered text
Enter <br/>
& Nbsp; space
<Hr /> horizontal division
<Address> </ address> Address italics
<Code> </ code> paste into the line of code
<Pre> </ pre> lines of code into the
3 tag (2)
<ul>
<li></li>
</ Ul> sort, regardless of the order
<ol>
<li></li>
</ Ol>, the sort starting 1
<Div> </ div> partitioning plate, logically independent sub-out
<Div id = "xxx"> </ div> named to the plate
<Table summary = ""> table, the table describes the profile (not shown)
<Caption> </ caption> Table title
<Tbody> block form, plate
<Tr> <th> </ th> </ tr> table row / table headers
<Tr> <td> </ td> </ tr> Table row / table cell
<tr><td></td></tr>
</tbody>
</table>
Label 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 Using the form tags, and user interaction
<Form> method = "" acion = "" </ form> Form / mode postget / acts to transfer such save.php
<Input type = "text" name = "myname" /> tag input text box
<Input type = "password" name = "pass /"> Password password box
type = "" type
text text box
password password box
submit submit button
reset reset button
radio radio button
"Checked" checked = "Default" check box and set the default value type =
name = "" text box named for the daemon ASP, PHP use
value = "" text box to set the default value for the button text
<Testarea rows = "10" cols = "50"> here typing ...... </ textarea> multi-line text, rows cols column line
<Select> drop-down list box
<Option value = "xx" selected = "selected"> xx </ option> Set Default select = "select", the value of the value submitted to the server
<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样式设置的小技