HTML5响应式网页设计---网页布局

块级标签：标签（h1~h6）、段落（p）、水平线（hr/）、列表(ul、ol、li、dl、dt、dd)、表格（table）、分区(div)、表单（from）
特点：1、总是在新的行上开始，占据一整行 2、高度、行高、外边距和内边距都可控制 3、宽度始终与浏览器的宽度一样，与内容无关 4、它可以容纳联元素与其他元素。
行标签：图像（img/）、范围（span）、换行（br/）、连接（a）
特点：1、和其他元素都在同一行上 2、行高、外边距和内边距部分可以改变 3、宽度和高度只与内容有关 4、行内元素只能容纳文本或者其他行内元素
1、分类导航或菜单等场合，使用div----ul(ol)----li块结构。
2、图文混编场合，使用div----dl----dt----dd块结构。
3、图文布局或显示数据的场合，使用div----table----tr----td块结构。
4、布局表单的场合，使用div----form----table----tr----td块结构。

通用样式

* {    /* 清除标签默认填充和边距 */    margin: 0px;    padding: 0px;}
body {    font-size: 12px;}
a img {    border: none;}
a {    text-emphasis: none;    color: black;}
a:hover {    color: orange;}
ul {    list-style: none;}

粗(b、strong)、下划线（u）、上标（sup）、下标（sub）.

注意：一般情况下，使用margin:0px auto来设置版块的水平居中，而在页面内容在版块中水平居中时使用 text-align：center。内容在垂直方向居中时，一般同时使用height属性和line-height属性，还可以使用vertical-align样式，将其设置在垂直方向居中，但该属性对块级元素无效。

注意:CSS提供了标签的简写形式，如font:bold 12 "宋体"是font-weight、font-size、font-family的简写。如果设置了行高如line-height:24px,则可以进一步简写为font:bold 12px/24px “宋体”。
背景样式的简写：background:#3399ff、url()、repeat-x,background声明中漏掉了哪一个属性的值，就会使用相应属性的默认值。除了font和background外，border、padding和margin同样是简写的样式。

注意：HTML中提供了一个用于改善表单交互方向问题的label标签，label标签的语法：label for="#" accesskey="#" / label，for表示label标签要绑定的HTML元素，当点击该标签时，所绑定的元素将获得焦点，accesskey表示访问label标签所绑定的元素的热键，当按下按键时，所绑定的元素将获取焦点。
注意：当label标签的for属性所指的名称与表单元素的ID值相同时，该标签将与该元素关联，在点击该标签的同时，该元素也将得到响应。
文本框：<input type="text">
密码框：<input type="password" name="" id="">
按钮：<input type="button" value="按钮">
复选框：<input type="checkbox">
单选框：<input type="radio">
提交按钮：<input type="submit" value="提交">
重置按钮：<input type="reset" value="重置按钮">
下拉框：<select name="" id=""> <option value="">1</option> <option value="">2</option> </select>
文本域：<textarea name="" id="" cols="30" rows="10"></textarea>
图片：<input type="image" src="../image/acorn.png">