以正确的DOCTYPE和名字空间开始
使用的meta内容元素声明你的内容编码语言
用小写字母写所有的元素和属性名称
给所有属性值加引号
给所有属性赋值
关闭所有标签
用空格和斜杠关闭标签
不要在注释内容中使用“--”
把所有符号编码化
CSS样式表调用方式
1、利用@import引入
例如：<style type="text/css">
@import:url(将引入的样式表的路径/文件名.css);
</style>
2、基本的命名规范
页眉：header
容器：container
版权：copyright
主导航：mainMenu
标志：logo
标题：title
图标：icon
搜索：search
登陆：login
信息框：message
内容：content
页脚：footer
导航：menu
子导航：subMenu
标语：banner
侧边栏：sidebar
按钮：btn
链接：link
3、每个选择器的样式独占一行
这样能够大幅度的缩减代码的行数，便于查找选择器
每类选择器的样式放在一起
可防止重复定义，方便后期的维护
派生选择器按派生层数在前面加tab键空格
多少层就加多少个tab键，这样可使代码层次清楚
4、text-indent:2em;段前缩进
5、块级元素标签
address 地址
center 居中对齐块
dl 定义列表
h1 大标题
h3 3级标题
h5 5级标题
hr 水平分隔线
ol 排序表单
pre 格式化文本
ul 非排序列表
div 常用块级容器，也是CSS layout的主要标签
form 交互表单（只能用来容纳其他的块级元素）
noframes -frames可选内容，（对于不支持frames的浏览器显示此区块内容）
noscript 可选脚本内容（对于不支持script的浏览器显示此区内容）
blockquote 块引用
dir 目录列表
fieldset form控制组
h2 副标题
h4 4级标题
h6 6级标题
menu 菜单列表
p 段落
table 表格
内联元素：
a 锚点
acronym 首字
big 大字体
br 换行
dfn 定义字段
font 字体设定（不推荐）
img 图片
kbd 定义键盘文本
q 短引用
strike 中划线
sub 下标
var 定义变量
tt 电传文本
samp 定义范例计算机代码
code 计算机代码（在引用源码的时候需要）
span 常用内联容器，定义文本区块
abbr 缩进
b 粗体
small 小字体文本
cite 引用
em 强调
i 斜体
input 输入框
label 表格标签
s 中划线（不推荐）
strong 粗体强调
sup 上标
tesxtarea 多行文本输入框
u 下划线
select 项目选择
font字体
font 可选
可选
_____________|____________
| | |
font:italic small-caps bold
| |
font:style font-weight
| font:variant |
|____________|___________|
必选
_____________|____________
| | |
| |
34px/100px; |
| | |
|line-height font-family
|
font:style
2012年04月10号
网站的基础知识
web前端工程师简介
网站的三成结构 （ 数据层 逻辑/业务层 表现层）
表现层 （结构层 表现/样式层 行为层 ）
<html>
<head>
<body>
<title>
<div>
<style>
png 支持透明
bmp 无压缩格式
gif 支持透明，动画
jpeg 质量好，但不支持透明
pdf 可以做印刷的影印格式
psd ps的基本格式
分辨率指的是单位长度中所具有的像素数目
2012年04月11号 html的入门知识
<link herf="css/main" rel="stylesheet" type="text/css"
<meta name="keywords" content="美食，尽享圣诞温情，吃尽巴渝美食，重庆美食，重庆火锅，水果拼盘，重庆小吃，重庆有哪些特色小吃" />
pre 预编辑（带格式）
hr 标签 在文章和文章之间的线
cite 标签 （定义引用）使用的是斜体字
br 换行标签
<i></i>斜体字
<sub>平方公式
<sup>脚本公式H2O
dl
dt
dd
表单标签
from
input
select
option
button
表格
table
tr标签
td标签
th标签 表格头
caption标签 标题
cellpadding边距 bordercolorlight亮面 bordercolordark阴面 colspan跨行 rowspan跨列
<meta name=" robots" content="none">
content参数 all index noindex follow none nofollow。默认的值是all。
<meta name=" auther" content="Kidlts">
<meta http-equiv="expires" content="Fri,12 Jan 2001">期限设置
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=IE7/8/9/6">
<Link href=“sion.ico”rel="Shortcut Icon">
<Base href="http://www.taobao.com" taeget="_blank">
2012年04月12号
内嵌 优点（权重高） 缺点 （结构混乱 代码臃肿 个别中断 显示混乱）
内部样式 优点（重构性高优先加载）缺点（html代码臃肿 不会缓存 样式文件）
外部样式标签<link rel ="stylesheet" href="文件路径".css type="text/css"优点（重构性高 代码简洁） 缺点（网络差时 加载页面 可能连接）
针对当前的页面有效<style type="text/css">样式规则表<style/>
<style type="text/css">@import url(将引入的样式表路径/文件名.css);</style>（样式表中导入其他的样式）优点（重构性高 代码简洁）缺点（继承外部 调用缺点 最后加载）
css的写法要点
selectors{property(属性):value（值）;}
font-style:字体风格；
概要
作用 优势 特点
标签 默认初始化 一次可以定义全页面所有的标签 权重最低 其他样啊是可以覆盖
类
ID
派生选择器：可以使用派生选择器给一个元素里的子元素定义样式。
标签：权重固定为1
类:权重固定为10
ID:权重固定为100
派生选择器：权重为内含所有选择器权重之和。
伪类：link vistited(访问过后是什么样子的) active（访问之前是什么样子） hover （鼠标移到是什么颜色）
文件名的规范 ： global
框架布局
字体样式
链接样式
打印样式
初始样式：
页眉：header
容器：container
版权：copyright
主导航：mianMenu
标志：logo
标题：title
图标：icon
搜索：search
登陆：login
信息框：message
内容：content
页脚：footer
导航：menu
子导航：subMenu
标语：banner
侧边栏：sidebar
注释：note
按钮：btn
链接：link
网页外面的整体布局的宽度:wrapper
loginbar
注释书写规范/*................*/
每个选择器的样式独占一行
每一类的选择器的样式放在一起
派生选择器安派生层数在前面加ＴＡＢ键空格
第七章 盒模型
content(内容) border（边框） padding（内间距） margin（外间距）
上下的距离会叠加的。
2012年04月14号 什么是内联元素与垮元素
内联元素（inlline() element）又叫行内元素、行级元素
垮元素的分类
1、结构化
2、终端垮状
3、多目标
结构化：特点：没有语义化含义：仅仅划分出了文档的组织方式
终端：结构转向内容，都有语义含义。不能包含其他的垮元素，只能包含文本和行级元素
<blockquote>断录引用
多目标：可以自由扩展或嵌套文档的结构，但是不能同时包含2种元素，受限制。
<noscript>弹出输入框
垮元素的 特点就是独占一行。
内联元素与垮元素的特点
block块级元素的特点：
总是独占一行，高度 行高 及顶、底边距都可以控制，宽度缺省是他所在容器的100%除非设定一个宽度
inline内联元素的特点：
和其他元素都在一行上，高度 行高 及顶 底边距都可以不变，高度就是他所容纳的文字或图片的宽度 不可以改变。
块元素（block element）通常作为其他元素的容器，它可以容纳内联元素和其他元素。
div:是同是加载的，
table:最后加载
块状元素的标签明细
address：地址
center居中对奇块
di：定义列表
h1：大标题
h3：3级标题
h5：5级标题
hr：水平分割线
ol：排序列表
pre：格式化文本
ul：非排序列表
div：常用块级容易
form：交互表单（只能用来容纳其他元素）
nofranes-frames:可选内容（对于不支持的frame的浏览器显示此区内容）
blockquote：快引用
dir：目录列表
fieldest-form：控制组
h2：副标题
h4：4级标题
h6：6级标题
menu：菜单列表
p：段落
table:表格
内联元素标签明细
a：描点
acronym：首字
big：大字体
br：换行
dfn：定义字段
font：字体设定
img：图片
kbd：定义键盘文本
q：短引用
strike：中划线
sub：下标
var：定义变量
tt：电传文本
samp：定义范例计算机代码
code：计算机代码（在引用源代码的时候需要）
span：常用的内敛容器
abbr：缩写
b：粗体
small：小字体文本
cite：引用
em：强调
i：粗体
input：输入框
label：表格标签
s：中划线（不推荐）
strong：粗体强调
sup：上标
textarea：多文本输入框
u：下划线
select:项目选择
块元素：上下排列，内联元素：左右。
border:groove red
这样写也能行啊。
概要
有序列表(ul) 无序列表 （ol） 定义列表（dl） 其他列表 列表的实例讲解
dl
type的li前面的装饰：square方点 circle圆圈 disc圆点 I(罗马字母) type= list-style-image:在li前面加上小图标。
有序列表
概要
什么是浮动
三块元素
块元素与内联元素
盒模型Z轴3D示意图
盒模型相关样式详解
盒模型的布局
float none left
坐标判断float（文档流）
clear属性的参数
both：秦楚所有浮动
left：清楚左浮动
right：清楚有浮动
none:不清楚浮动
浮动与内敛元素的区别
浮动 内联元素
共同点 取消块元素的换行属性 可以让块元素到同一行
不同点 可以左右浮动
浮动可以是块
可以含块元素
2012年04月16号
排版 概要
字体样式（单位有 em（以倍数增加） px pt（棒）） 文字样式 段落大小 行高设置 首字下沉 图文混排
normal bold bolder lighter(细的)
font-variant 字体大小写：
（font-style: font-weight:） font-variant: line-height: font-family: font-size:。
文字样式：text-align:left text-align:right text-align:center text-align:justify（两端对齐） text-align:inherit继承父元素祖元素
text-decoration:underline(下划线) text-decoration:overline（上划线） text-decoration:line-through（中划线）
text-decoration:blink（字体连接的跳动） text-decoration:normal（删除线）
text-Shadow（文字阴影）
段落:Robert Bringhurst的方法（文字大小*30，也即是360；）
行高就是用来限制行与行的距离（一般就只是在文字大小）后面+6
首字下沉
背景偏移与实例
北京的属性
北京的定位，及背景偏移。
背景偏移量技术的应用。
background-postion:背景图片的位子
background-repeat：背景图片是否重复
background-attachment:fixed： 背景图是否随页面滚动
背景会占据背景的所有元素和内容包含padding和border
overflow的样式详解
overflow属性的作用：
vidible溢出 hidden隐藏 scroll滚动条 auto
2012年04月17号 绝对定位和相对定位
position的五个值：ststic relative absolute fixed inherit
ststic ：显示方式为按文本流的顺序从上至下，从左到右顺序显示。
relative：偏移了原来的文本流的最初位子。
absolute：产生了偏移，脱离文本流。进入了该层的父容器的坐标原点，要在div的属性里面加上一个relative才有效果的。
inherit：继承
fixed ：浮动广告
概要 css hack
主流浏览器
以盒模型宽度差异为列讲述浏览器的兼容问题
css hack表
css hack优缺点