有关表单与CSS的基础知识及实例应用（新手，有待完善...）

表单的提交以及传参方式
<form action="" method="get">
  ....
</form>

只有含有name属性的表单组件才可以
向服务端传递参数。

某些表单组件如果想要正确传递参数，
需要设置value属性:
radio  checkbox  select

如何设置表单组件的默认值：
<input type="text" value=""/>
<input checked="checked" type="radio"/>
<input checked="checked" type="checkbox"/>
<select>
  <option></option>
  <option selected="selected"></option>
  <option></option>
</select>

HTML中的列表标签：
<ul>    描述一个列表
  <li></li>   描述一个列表项
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS 级联样式表
1>搭建页面的整体布局。
2>对页面标签组件的样式渲染。

CSS代码的组成部分：
css选择器
 选出当前页面中的一个或多个标签。
css样式属性
 当使用选择器选出标签后，在{}中
 使用样式属性渲染这些标签。
 

CSS选择器：
 选出当前页面中的一个或多个标签。

1>通配符选择器：
  选出当前页面中的所有标签。
  *{ ... }
 
css代码的基本写法：
i)创建外部css文件，后缀名需为.css
  在该文档中编写css代码。
ii)在html页面中使用link标签把外部
  的css文档引入HTML页面。
 
2>标签选择器
  选出当前页面中标签名称符合要求的
  所有标签。
  li {}
  h3 {}

3>id选择器
  选出当前页面中id属性值符合要求的
  唯一标签。
  #li2 { .. }
  id选择器的优先级是最高的

4>class选择器  (类选择器)
  先定义一类样式，如果页面中的某些
  标签需要这一类样式，只需要设置
  这些标签的class属性即可。
  .c1 { width:100px; }
  .c2 { height:200px; }
  <h3 class="c1 c2 c3"></h3>

  .li{paddingleft:10px; background-image:上箭头;}
  <li class="li"></li>

5>分组选择器
  把多个选择器选出的标签当成一组，
  然后给这1组标签加样式。
  h1,h2,h3,h4,div,#li2,.w100 {.}

6>派生选择器
  通过父标签找到子标签，然后给这些
  子标签添加样式。
  <ul>
    <li class="w100"></li>
    <li class="w200"></li>
  </ul> 
  <div class="w100"></li>
  派生选择器选出ul中的li：
  ul li{ .... }
  ul .w100 { }

css样式属性
 当使用选择器选出标签后，在{}中
 使用样式属性渲染这些标签。

布局属性
背景属性
字体属性
文本属性
边框属性
列表属性

布局属性
BOX模型(盒子模型)
div  width:200; height:200;
      padding:20px;

width:  宽度
height:  高度
margin: 外边距
  margin:10px;  四个方向全部是10px
  margin:10px 20px; 上下10px 左右20px
  margin:0px auto; 居中
  margin:apx bpx cpx dpx; 上 右 下 左
  margin-left:
  margin-top:
  margin-bottom:
  margin-right:

padding: 内边距
  padding: 10px;
  padding:10px 20px;
  padding:a b c d;  上 右 下 左
  padding-top:
  padding-bottom:
  padding-right:
  padding-left:
 
背景属性 background
background-color: 背景颜色
  red | blue | yellow | .....
  #ffffff 
  #abc  --> #aabbcc
  rgb(255,255,255)
background-image: 背景图片
  url(图片路径)
background-repeat: 背景图片的平铺方式
  repeat  默认值
  repeat-x  沿x轴平铺
  repeat-y  沿y轴平铺
  no-repeat  不平铺
background-position: 背景图像的定位
  10px 20px;

字体属性：font
font-size:  字体大小
  15px
  1em    0.9em   1.1em
font-family: 字体
  font-family: 黑体;
font-style: 字体样式
  normal: 普通
  italic: 斜体字
font-weight: 字体磅值  (粗细)
  100~900 值越大字越粗
  lighter 细的
  normal  普通
  bold    加粗
  bolder  更粗
 
文本属性：text
color: 文本颜色
  red | blue | ....
  #ffffff
  #abc
  rgb(255,255,255)
text-align: 文本的对齐方式
  left | center | right
line-height: 行高

text-decoration:  文本的装饰
  none  没有装饰
  underline
  overline
  line-through
 

边框属性：
border: 1px  solid  black;
border-width: 边框宽度
border-top-width:
border-bottom-width:
border-left-width:
border-right-width:

border-style: 边框样式
border-top-style:
border-bottom-style:
border-left-style:
border-right-style:

border-color: 边框颜色
border-top-color:
border-bottom-color:
border-left-color:
border-right-color:

列表属性：
list-style: 控制列表项的显示方式

css复杂属性：
display: 控制组件的显示方式
  none:把控件隐藏。
  block:把控件按照块级标记的方式显示。
 
块级标记：
  div  ul  li  p  h1 h2 h3 ..... 
  一个标签占用1整行
行级标记：
  i  u  s  a  img .....
  一行中可以输出多个行级标记
 
我们有很多情况下，需要把行级标记
按照块级标记来显示。 因为只有块
级标记才可以设置width和height属性。
 

float: 浮动
  可以实现块级标记横向排列。
  left 
  right

简单的实例演示CSS的功能：

显示成品图：