DIV+CSS基础培训
常用标签
基本标签
<html></html> 创建一个HTML文档
<head></head> 设置文档标题和其它在网页中不显示的信息
<title></title> 设置文档的标题
<p></p> 创建一个段落
<br>换行插入一个回车换行符
<a href="URL"></a> 创建超文本链接
表格标签
<table></table> 创建一个表格
<tr></tr> 表格中的每一行
<td></td> 表格中一行中的每一个格子
<th></th> 设置表格头:通常是黑体居中文字
表单标签
<form></form> 创建表单
action="..."接收数据的服务器的URL
method="..."HTTP的方法(get, post)。其中get是被反对使用的
<select name="name"></select> 创建下拉菜单
<textarea name="name" cols=40 rows=8></textarea> 创建一个文本框区域,列的数目设置宽度,行的数目设置高度
<input type="checkbox" name="name"> 创建一个复选框,文字在标签后面
<input type="radio" name="name" value=""> 创建一个单选框,文字在标志后面
<input type=text name="foo" size=20> 创建一个单行文本输入区域,size设置以字符串的宽度
<input type="submit" value="name"> 创建提交(submit)按钮
<input type="reset"> 创建重置(reset)按钮
<BUTTON></BUTTON> 创建一个按钮
<LABEL></LABEL> 为一个控件提供标签
<TEXTAREA></TEXTAREA> 创建一个允许用户多行输入的区域
实例
名：
<input type="text" name="firstname">
<br />
姓：
<input type="text" name="lastname">
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
我喜欢自行车：
<input type="checkbox" name="Bike">
<br />
我喜欢汽车：
<input type="checkbox" name="Car">
男性：
<input type="radio" checked="checked" name="Sex" value="male" />
<br />
女性：
<input type="radio" name="Sex" value="female" />
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
<textarea rows="10" cols="30">
<input type="button" value="Hello world!">
<input type="submit" value="Submit" />
<input type="submit" value="发送">
<input type="reset" value="重置">
<label>身高：<input type="text" /></label>
<label>体重：<input type="text" /></label>
姓名：<br />
<input type="text" name="name" value="yourname" size="20">
<br />
电邮：<br />
<input type="text" name="mail" value="yourmail" size="20">
<br />
内容：<br />
<input type="text" name="comment" value="yourcomment" size="40">
常用样式
字体属性：(font)
大小 font-size: x-large;(特大) xx-small;(极小)
一般中文用不到，只要用数值就可以，单位：PX、PD
行高 line-height: normal;(正常)
单位：PX、PD、EM
粗细 font-weight:
bold;(粗体) lighter;(细体)
normal;(正常)
修饰 text-decoration:
underline;(下划线) overline;(上划线)
line-through;(删除线) blink;(闪烁)
区块属性： (Block)
对刘text-align: justify;(两端对齐) left;(左对齐)
right;(右对齐) center;(居中)
缩进text-indent:
数值px;
垂直对齐vertical-align: baseline;(基线) sub;(下标)
super;(下标) top; text-top;
middle; bottom; text-bottom;
空格white-space: pre;(保留) nowrap;(不换行)
显示display:block;(块)
inline;(内嵌) list-item;(列表项)
run-in;(追加部分) compact;(紧凑) marker;(标记)
table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)
方框属性： (Box)
width:; height:; float:; clear:both; margin:; padding:;
顺序：上右下左
Padding:10px 9px 8px 7px; padding:10px 5px; padding-left:10px;
边框属性： (Border)
border-style: dotted;(点线) dashed;(虚线)
solid; double;(双线) groove;(槽线)
ridge;(脊状) inset;(凹陷) outset;
border-width:; 边框宽度
border-color:#;
简写方法border：10px solid #fff;
样式继承
父标签中定义css，在子标签中定义css遵循子没有的样式，就继承父的样式，子标签有的，将覆盖父标签的样式；
有些属性是不能继承的；
border属性， Padding（补白），Margin（边界），背景和边框的属性都是不能继承的。
样式遵循就近原则
样式分类
不可使用行内样式，不到万不得已不使用内嵌样式
盒子模型
内联元素和块级元素
block（块）元素的特点：
①总是在新行上开始；
②高度，行高以及外边距和内边距都可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它可以容纳内联元素和其他块元素
<p></p> <div></div>
inline元素的特点：
①和其他元素都在一行上；
②高，行高及外边距和内边距不可改变；
③宽度就是它的文字或图片的宽度，不可改变
④内联元素只能容纳文本或者其他内联元素
例如：<a></a> <span></span>
初步设想：
1. 各块级元素都有固定且唯一的 ID
2. 一级功能模块独立使用一张CSS样式表
3. 常用属性通过class 从公用样式表调用
4. 尽量少使用背景图片
5. 少使用非W3C标准标签或样式
