html
div+css
本文编辑太烂太懒，很多内容需要自行百度或谷歌，同样懒症后期者，慎入！！
加粗文字自行百度，
html是一个可以标记并加链接的文本，，文本就会有内容和样式。
做图你要构图吧，写html也要构图，它叫布局，用盒模型
在ps里，魔棒和钢笔等工具帮你选中选区，在html里面ID选择器和class选择器帮你选中内容。
作logo，你会用三角形，矩形，圆形相加或或减，html样式里，就有文本控制，段落控制，背景控制。统称为css效果。
广告图由图片和文案组成，也可以是纯图片或文字。需要构图吧
html由内容和样式组成，也可以是纯内容，纯样式。它需要布局。
一 熟悉的HTML网页基础结构
由头部和主体构成：即head和body
<!DOCTYPE heml PUBLIC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>网页前端设计（xhtml）</title>
<style>
#main .pin{
width:225px;
height:auto;
padding:15px 0px 0px 15px;
float:left;
}
</style>
</head>
<body>
<div id="main">
<div class='pin'>
<div class='box'>
<img src="1.jpg" />
</div>
</div>
</div>
</div>
</body>
</body>
<html>
完整目录：
一.WED标准与布局
二.XHTML与CSS基础
三.CSS网页布局与定位
四.CSS网站元素设计
五.CSS内容排版
六.CSS高级应用于技巧
七.浏览器兼容与解析问题
八.CSS可视化开发与调试
九.CSS布局应用实例解析
（我可没做完整的笔记）
一WED标准与布局
1.2wed标准的构成
三大部分：结构（structure)，表现（presentation），行为（behavior）
结构：
html超文本标记语言（html标签可说明文字.图形.动画.声音.表格.连接等）
xml可扩展标记语言，用于网络数据的转换与描述
xhtml可扩展超文本语言，html向xml的过渡
表现：
对信息的控制，包括版式.颜色.大小.位置等样式控制
css层叠样式表
行为：
DOM（文档对象模型）：访问数据，脚本，表现层对象。
ECMAs cript（Javas cript的扩展脚本语言）
xhtml元素三大类：
1辅助布局设计元素（div.span）
2结构化元素.信息元素（table.ul.pre.code）
3特殊功能类（a.meta元件）
二xhtml与css基础
DOCTYPE 文档类型指定文件
meta标签说明网页类型
DTD文档类型— —三大文档类型：Transitional. Strict. Frameset
合适的标签— —1.布局：div；2.文本：h1-h6标签，p段落，strong加粗；3.其他对象：图片img，flash object4.列表元素：ul,ol,dl,dt,dd;
css语法结构— —选择符（selector）+属性（property）+值（value）
选择符：id,class。属性：颜色，大小，浮动，定位。值：范围值和具体值。
类型选择符，群组选择符（用“，”分隔），包含选择符（用空格分隔）
id选择符，仅使用一次，“#”。class选择符，多次使用，“.”
伪类和伪对象 通配符“*”
css数据单位：像素，厘米，颜色，字体尺寸。。。
css应用：
1行间样式表<h1 style="font-size:12px;color:#000fff;font-weight:normal">
2内部样式表h1{font-size:12px;color:#000fff;font-weight:normal}
3外部样式表<link rel=stylesheet" rev="stylesheet href="style.css" type="text/css" />link标签表用外部样式表，href指定样式表文件路径
样式优先权问题：
1.写入法优先权：行内样式表>内部样式表>外部样式表
2.选择符优先权：id>class>类型选择器
3.！important语法：多行相同样式，执行最后那个。
important提升样式表重要性，使其优先执行。
div{ background-color:red;!important
background-color:green;
}
代码注释：/*(开始)*/（结束）
三.网页布局与定位
block块状对象：占据整行。
in-line行间对象：与下一对象共享一行。
xhtml标签与功能
结构标签：
HTML HTML根元素
head html头部区域
body html主体区域
div 区块定义标签
meta信息：
DOCTYPE 文档类型指定
title 浏览器标题栏
link 链接到扩展资源
meta meta信息
vstyle 样式表区域
文本控制：
p 段落
h1~h6 标题1~6级
strong 加重重点
em 重点/强调
abbr 定义文本的简写词
acronym 定义首字母的简写词
bdo 字母顺序左右反转
blockqute 块状引用内容
cite 行间引用内容
q 行间小型的引用
code 源代码区
ins 编辑注解：插入内容
del 编辑注解：删除内容
dfn 文本术语注释
kbd 文本需要键盘输入
pre 预格式化文本
samp 举例
var 文本是一个变量
br 回车
链接
a 链接
vbase 基础链接类
图像和对象
img 插入图像
area 图像热区细节
map 图像热区
odject 插入对象
param 对象的参数
列表
ul 无序列表
ol 有序列表
li 列表项
dl 带描述的列表
dt 描述列表中的名词
dd 描述列表中的描述
表格
table 表格
tr 行
td 单元格
th 表头
tbody 表格主体
thead 表格头部
tfoot 表格底部
col 表格列
colgroup 表格列的集合
caption 表格标题
表单
from 表单区域
input 输出框
textarea 文本域
select 下拉列表
option 下拉列表项
optgroup 下拉列表项的集合
button 按钮
label 标签
fieldset 标签页
legent 标签页的标题
脚本
s cript 脚本区域
nos cript 无法执行脚本的替代
表现
b 加粗
i 斜体
tt 打字机字体
sub 下标
sup 上标
big 加大
small 减小
hr 分割线
基本布局类型
1一列固定宽度
2一列宽度自适应
3一列固定宽度居中
4二列固定宽度（float:none,left,right）
5二列宽度自适应
6二列右列宽度自适应
7二列固定宽度居中
8三列浮动中间列自适应（绝对定位position:static.absolute(top,eight,bottom,left),relative）
9高度自适应（margin:0px;height:100%）
盒模型（box model）
css提供内边距（padding），外边距（margin），边框（border），用于控制对象的显示细节。
宽度=左外边距+左边框宽+做内边距+宽度+右内边距+右边框宽+右外边距
上下外边距（margin）：空白边叠加规则（两者取大值），float属性除外
深入浮动：
（懒症又犯，暂停一会。）
