一.HTML页面骨架
1.常用html标签：
文件标记标签：head、title、body
排版标记标签：p、br、hr、center、div
字体标记标签：stronger、b、i、u、H1、H2、H3、H4、H5、H6、font
清单标记标签：ol、li、ul、dl、dt、dd
表格标记标签：table、tr、td、th
表单标记标签：form、input、select、option、textarea
框架标记标签：iframe（页内框架）、frameset（设定框架）、frame
超链接标签：a
其它标签：embed（插入声音或影像）、img、link、meta、marquee（跑马灯）
2.html的头为<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
Html5的头为<!DOCTYPE HTML>
二. CSS页面样式
1.css特点：丰富的样式定义、易于使用和修改、多页面应用、层叠、页面压缩
2.css语法由三部分构成：选择器、属性和值 exp: selector{property: value}
3.选择器分类：
四大基本选择器：
通配符选择器：*{property:value}
标签选择器：标签名{property:value}
id选择器：#id名{property: value}
class选择器：class名{property: value}
注：挂类法
类就是被重用的
一个标签可以有多个类
一个类可以用在多个标签上
三大复杂选择器：
后代选择器格式：E F{property:value}
交集选择器格式：EF{property:value} 如：div.classname{}
并集选择器格式：E,F,G{property:value}
三个非常用选择器：（E、F为基本选择器）
子元素选择器： E>F{property:value}选取符合F选择器的所有E子元素
直接相邻选择器：E+F{property:value} 选取与紧随E元素的下一个符合F选择器的元素
普通相邻选择器：E~F{property:value} 当前选中E元素后的所有符合F选择器的元素
伪类选择：（E、F为基本选择器）
伪对象选择器主要是对当前选择的内容进行操作
例：超链接选择：:link、:visited、:hover、:active
第一个子元素：E:first-child
结构性伪类：
:last-child
:nth-child
:first-of-type
:last-of-type
:nth-of-type
:empty
伪对象/伪元素选择：（E、F为基本选择器）
文字选择：E::first-letter、E::first-line
插入内容：E::before、E::after
属性选择器
具有某个属性 [属性名]
属性为指定的值 [type="checkbox"]
属性值包含某个字符串 [href*="example"]
属性值以空格分割后包含某个字符串 [lang~＝"zh-cn"]
属性值以某个字符串开头 [href^="http:"]
属性值以某个字符串结束 [href$="jpg"]
4.属性
•背景：background-color、background-image、background-repeat、background-position:center
•文本：text-indent、text-align、word-spacing、letter-spacing、text-decoration、color、direction、line-height
•字体：font-family、font-size、font-style、font-weight
•列表：list-style、list-style-image、list-style-type
•内边距：padding-top、padding-right、padding-bottom、padding-left
•外边距：margin-top、margin-right、margin-bottom、margin-left
•边框：border、border-style、border-width、border-color
•定位：position、top、right、bottom、left、overflow、z-index、float
•尺寸：width、height、max-height、max-width、min-height、min-width
margin属性：
塌陷现象：通过margin设置外边距的时候，如果重叠，则取大值
Margin和padding如何区别使用：兄弟元素用margin，父子元素用padding
注意点：
如果父子元素设置内边距，用margin来做，margintop是会存在问题
解决方式1）给父盒子设置一个边框即可
2）添加overflow属性，值位hidden
5.css继承性
后代元素对文本样式设置的基本属性才能被继承（颜色color\样式text\字体font\行属性line）
所有关于对于盒子模型（div、span等）的属性设置（border、定位、布局）都不能被继承
6.样式层叠
6.1样式根据规则来源，优先级从低到高：
浏览器预设用户设置
网页样式
含 !important 的网页样式
含 !important 的用户设置
6.2 层叠性指的是样式的优先级，当产生冲突时以优先级高的为准
6.3 权值高低：id>class>标签
6.4 优先级区分：
三.web前端编程规范
1html.命名规范：
①Html class名统一用小写的字母、数字和下划线的组合
②页面文件名命名规则：
首页统一取名为：index或者home，一般默认都是用index为首页命名
其他子页面统一用英文翻译或者中文拼音取名，但是不建议英文和中文拼音混合使用
2.图片文件命名：
放在页面首部的广告、装饰图等长方形大图取名：banner
标志性图片取名：log
有链接的图片取名：button
没有链接的标题图片取名：title
装饰用的照片取名：pic
在页面上连续出现、性质相同的栏目图片取名：menu
3.js命名规范
自定义js文件模块：模块.描述.js格式，如：check.js（校验）、login.js、regist.js、pop.js（跳转）
公用文件模块：commom.js或者basic.js
外部资源模块：Jquery.min.js、Jquery.js
4.文件目录规范
js：存放编写的js文件
css：存放编写的css文件
image：存放需要使用的图片文件
flash：存放需要使用的flash文件
media：存放需要使用的多媒体文件，包括视频和音频
library：存放一些库文件，包括js库和css库
根据规则来源，优先级从低到高：
浏览器预设用户设置
网页样式
含 !important 的网页样式
含 !important 的用户设置