1. 一句话概括：html ，xhtml 和 html5；
html指的是html4.01，xhtml是html的过渡版，html5是html的升级版；
2.div和span
div和span没有任何语义
3.id和class
id具有唯一性，一般在logo，导航，主体内容，底部信息栏等结构；对于关键结构建议加上id，以便于搜索引擎识别页面的结构；其他小地方都建议用class；
4.语义化标签
搜索引擎会根据html的标签来识别页面，必须有对应的语义化标签（img，p，table等），否则都不光顾网站；
语义结构良好：有利于开发调试和后期维护；有利于搜索引擎优化；
1.标题语义化：h1只有一个，不要出现断层（不要有h1,h3.h4,而漏掉h2）
2，图片语义化：img表示图片要有alt（给搜索引擎看的，必须写）和title属性（给用户看的，可以不写）；用figure元素和figcaption元素来用作图注文字！使页面的语义更加良好；
3.表格语义化：类似表格的还是用table tr td比较好还有th caption thead tbody tfoot等
4.表单语义化：form表单；label标签（for属性值为所关联的表单元素的id，增强了鼠标可用性，也就是说 我们在点击label的文本时，与其所关联的表单元素也会获得焦点）和fieldset标签和legend标签（增强语义化）；
5.其他语义化标签：换行符<br/>(只能用于p标签内部的换行，不能用于其他的标签）；无序列表ul有序列表ol；strong和em（强调为重要的文本）；del（删除的文本（eg：原价：6元））和ins（更新的文本（eg：现价：4元））两者配合使用；
6.html5新增的结构语义标签：header、nav、aside、footer、artcle、section等
5.css的单位（绝对单位：px 、%、 em（本身）、 rem（根））
6.css的特性（继承性和层叠性）
继承性：（1）文本相关的属性：font-family、font-size、font-style、font-weight、font、line-height、text-align、text-indent、word-spacing；
（2）列表相关属性：list-style-image、list-style-position、list-style-type、list-style；（不常用，几乎没见过！！！！！）
（3）颜色相关属性：color;
层叠性：后来者居上
7.css优先级：
（1）引用方式（行内样式>内部（外部 后来者居上）样式）
（2）继承方式（最近的的祖先元素获胜）
（3）选择器（行内样式>id选择器>属性选择器>伪类>class选择器>元素选择器>伪元素选择器>通配符）
常见的伪元素只有四个：：：before，：：after，：：first-letter，：：first-line；
常见的伪类有：:hover,：first-child等
（4）!important 为可以将样式提升为最高等级！！！！！！
(5）层次选择器：父子(M>N ),后代(M N), 兄弟(M~N) ,相邻(M+N)
8.css引入的方式
外部样式表（link），内部样式表（style），行内样式表（标签style)，@import（导入样式表）
9.css文件命名
良好的文件命名可以方便管理并且有利于seo
1.reset.css 重置样式，重置元素默认样式，用于去除元素的默认样式
2.global.css 全局样式，全站公用，定义页面的基础样式
3.themes.css 主题样式，用于实现换肤的功能的样式
4.module.css 模块样式，用于模块的样式
5.master.css 母版样式，用于母版页的样式
6.columns.css 专栏样式，用于专栏的样式
7.forms.css 表单样式，用于表单的样式
8.mend.css 补丁样式，用于维护和修改的样式
9.print.css 打印样式，用于打印的样式
开发阶段多个css，需要发布的时候整合成一个！！！！
10.id和class的命名
1.驼峰命名（eg：topMain）
2.中划线命名（eg：top-main）
3.下划线命名（eg：top_main)
（1）使用英文名而不是中文
（2）尽量不缩写，除非一眼能看明白的单词
（3）命名统一，规范大型网站一般都是中划线
（4）为了避免class命名的重复 命名建议取父元素的class名作为前缀
11.网页部分命名
最外层（wrapper）头部（header）内容（content）侧栏（sidebar）栏目（column）热点（hot）新闻（news）下载（download）标志（logo）导航条（nav）主体（main）左侧（main-left）右侧（main-right）底部（footer）友情链接（friendlink）加入我们（joinus）版权（copyright）服务（service）登录（login）注册（register）
主导航（main-nav）子导航（sub-nav）边导航（side-nav）左导航（leftside-nav）右导航（rightside-nav）顶导航（top-nav）
菜单（menu）子菜单（submenu）
标题（title）摘要（summary）登陆条（loginbar）搜索（search）标签页（tab）广告（banner）小技巧（tips）图标（icon）法律声明（siteinfolegal）网站地图（sitemap）工具条（tool、toolbar）首页（homepage）子页（subpage）合作伙伴（parter）帮助（help）指南（guide）滚动（scroll）提示信息（msg）投票（vote）相关文章（related）文章列表（list）
12.注释
顶部注释 模块注释 简单注释
13.css盒子
1. border：0和border：none的问题差别在性能差异和兼容差异，差异可以接受，用那个都行！！！
性能差异：border：0虽然页面看不到 但是浏览器会渲染占用内存；border：none浏览器不会做出渲染，不占用内存；
兼容差异：boder：0所有浏览器一样把边框隐藏；boder：none在ie6和ie7边框还显示，其他浏览器会去掉；
2.负margin的用法
图片于文字的对齐：（margin{0 3px -3px 0}
自适应两列布局
元素垂直居中:margin-top:heigth值的一半的负值，margin-left:width值的一半的负值;
tab选项卡：用margin-top：-1px来解决选项卡下边框显示的问题
14.display的问题
display：none：一般用于js动态隐藏元素，被隐藏的元素不占据原来的位置空间；不推荐用来隐藏一些对seo关键的部分，对于搜索引擎来说，搜索引擎会直接 忽略displayLnone隐藏的内容，不把display：none隐藏的内容加入权重的考虑！
visibility：hidden：元素被隐藏之后依然占据原来的的位置，看不见但摸得着！
display:table-cell:具备td元素的特点，用于：1.图片垂直居中的元素（搭配：vertical-align:middle)；2.等高布局；3.自动平均划分元素，并且在一行显示(父级：display：table；子级：display：table-cell）；
display：inlin-block；的间距用父级：font-size：0来去除！！！
15.文本text的问题
text-indent：-9999px；：一般用于logo部分，在搜索引擎优化中，h1是非常重要的标签，一般情况下，我们都把网站的logo图片放到h1标签中，不过我们都知道搜索引擎无法识别图片，只能识别文字，为了更好的优化seo，就让logo作为h1的被禁价格图片然后设置这个属性来隐藏h1的文字内容！！！！！！！
text-align：只对文字，line元素，inline-block元素起作用，对块元素不起作用；
text-align：center在父元素中定义，实现对文字，inline元素和inline-block元素水平居中；，margin：0 auto在当前元素中定义，是实现块元素的水平居中；
line-height：两行文字基线之间的距离；
vertical-align的top，middle ，baseline， bottom，分别对应的就是顶线，中线 ，基线 和底线；取值可以取负值，百分比和关键字；
vertical-align取负值表示元素相对于基线向下偏移2px，常用来解决单选框货复选框与文字垂直对齐的的问题；
vertical-align取百分比（相对于当前元素所继承的line-height的属性值决定的）元素相对于基线向上偏移多少px；
vertical-align取关键字（top，middle ，baseline， bottom）除了常见的这些 还有text-top，text-bottom，super和sub等关键字；
16.表单问题
对齐问题：当文字大小为12px时，我们给单选框或者复选框定义：vertical-align：-3px（对于基线向下偏移3px）即可解决;当文字大小为14px时，我们给单选框或者复选框定义：vertical-align：-2px即可
17.css性能优化
1.属性缩写（盒模型，背景，字体，颜色值等缩写）
2.语法压缩（空白符，结尾分号，url()的引号，属性值为“0”，属性值为“以0开头的小数”，合并相同的定义，利用继承进行合并）
3.图片压缩
4.选择器优化（不要使用通配符*，不要在id选择器以及class选择器前添加元素名，选择器最好不要超过三层，位置靠右的选择条件尽可能精确，避免使用后代选择器，尽量少用子选择器）
5.css模块化
6.压缩工具
7.CSS Sprite技术（雪碧图减少了http的请求数，不要超过200kb 超过的话 最好分割成多个雪碧图较好）
8.性能评估
iconfont图标的使用分四步：（eg：<i class="iconfont">；</i>)
（1）下载好图标文字文件并且放入网站目录中；
（2)在css中，使用@font-face自定义字体；
（3）在html中，元素添加class=“iconfont”；
（4）在元素中添加图标对应的字符串（eg：；）；
iconfont不满足需求的话，可以访问国外的icomoon网站；
18.BFC(块级格式上下文，独立渲染区域）
1.根元素
2.float除了none以外的值（left，right）
3.position属性除了static和relative以外的值（absolute，fixed）
4.overflow属性除了visible以外的值（auto，hidden，scroll）
5.元素类型（即display属性）为inline-block，table-caption，table-cell；
