家好，我是拾光；感谢大家阅读本文。如果大家觉得写的不错，希望大家能够点赞，收藏，转发以及关注我的头条号：全栈开发者。在此感谢大家的支持。

随着前端的需求增多，前端开发者也相继的增加，码农多的是，现在很多不管是线上还是线下的培训机构都招收了大量的学员，什么热门教什么，但是出去的程序猿到公司之后表现并不是很好，并且又一些部分程序猿到了那里过了没多久就有因为很多原因而被辞。我们有的时候可以想一想，思考一下自身需要提高一些哪些技能；

对于程序猿本身来说，就是想求得一份高薪的工作。当然了，应届生或者毕业不久的人来说，薪资不是特别高，需要熬一段时间，需求高薪的旅途上，面试是一个途径，如果面试很不错，可以有一个好的谈判资本。当然了，这需要量力而行。话不说的太多了，下面开始了。

首先给大家介绍的是开发规范，内容比较多，大家可以先行收藏之后进行查看，也可以经常去搜集源码以及看API，看一看经验老道的开发人员是怎样进行开发的。再次发布一些根据自己的经验以及搜集的资料来给大家整理的一些规范，如果有误，请大家在评论中给予指正，我会马上进行修改错误并及时更新，在此先行感谢大家进行的反馈。

前端命名规范：

1、HTML文件命名规范：

1）统一用小写的英文字母、数字和下划线，不得使用汉字、空格以及特殊字符；

2）使用index进行文件命名，索引文件名

3）各页面命名的规则：

1、统一使用翻译的英文命名，或英文简写

2、统一使用拼音命名，或拼音简写

3、注意：不要英文拼音混合使用

2、图片命名规则：

1）图片的命名分为头尾两部分，用下划线隔开，前半部分使用图片的大类性质，例如：广告，标志，菜单，按钮等

2）放置在页面顶部的广告，装饰图案等长方形的图片取名：banner

3）标志性的图片取名为logo

4）在页面上位置不固定并且带有链接的小图片取名为：button

5）在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名为：menu

3、脚本文件命名规则：

1）实际模块：例如：广告-->ad.js，弹框-->pop.js

2）公用模块：英文名，如：common.js，basic.js

4、动态语言命名规则：

1）以性质_描述可以有多个单词，性质一般是页面的概要，

2）示例：register_form.jsp,show_userlist.jsp

5、文件位置存放规范：

1）flash存放flash文件

2）images存放图片文件

3）inc存放include文件

4）library存放DW库文件

5）media存放多媒体文件

6）script存放外部JQuery文件

7）js存放手写js文件

8）css存放css文件

6、CSS属性设置：

1）字体颜色值：类似#000000可以使用简写#000;

2）backgraund-img : *;background-color: *;可以使用简写：background:#000 url("images/logo.png");

7、Class命名规则：

1）页面结构：

1)容器：container/warp

2)整体宽度：wapper

3)页头：header

4)内容：content

5)页面主体：main

6)页尾：footer

7)侧栏：sidebar

8)l栏目：column

9)中间内容：center

2）导航：

1)导航：nav

2)主导航：mainnav，globalnav

3)子导航：subnav

4)顶导航：topnav

5)边导航：sidebar

6)左导航：leftsidebar

7)右导航：rightsidebar

8)边导航图标：sidebaricon

9)菜单：menu

10)子菜单：submenu

11)标题：titile

3）功能：

1)标志：logo

2)登陆：login

3)登录条：loginbar

4)注册：registe

5)产品：products

6)产品价格：products_prices

7)产品评论：products_review

8)编辑评论：editor_review

9)广告/标语：banner

10)摘要：summary

11)生产商：publisher

12)缩略图：screenshot

13)常见问题：fags

14)关键字：keyword

15)博客：blog

16)论坛：forum

17)搜索：search

18)搜索输入框：search_input

19)搜索输出：search_output

20)搜索结果：search_results

21)加入我们：joinus

22)状态：status

23)按钮：btn

24)滚动:scroll

25)标签页：tab

26)文章列表：list

27)提示信息：msg/message

28)当前的：current

29)小技巧：tips

30)皮肤：skin

31)活动：activities

32)推广：promotion

33)公告：announcement

34)排行：raking

35)公司简介：company_profile

36)公司设备：equipment

37)公司荣誉：glories

38)企业文化：culture

39)企业规模：scale

40)营销网络：sales_network

41)组织机构：organization

42)技术力量：technology

43)分支机构：branches

44)企业资质：enterprise_qualification

45)公司实力：strength_strength

46)经营理念：operation_principle

47)经理致辞：manager_oration

48)分类浏览：browse_by_category

49)分类浏览：browse_by_category

50)人力资源：human_resource_hr

51)领导致辞： leader_oration

52)客户留言：customer_message

53)客户服务：customer_service

54)您的要求：your_requirements

55)销售信息：sales_information

56)招商：enterprise_establishing

57)教育培训：education_training

58)在线交流：online_communication

59)质量认证：quality_certification

60)合作加盟：joinIn_cooperation

61)产品描述：products_description

62)业务范围：business_scope

63)产品销售：product_sales

64)联系我们：contact_us

65)信息发布：information

66)返回首页：homepage

67)产品定购：order

68)电子商务：e_business

69)版权所有：copy _right

70)友情连结：hot_link

71)行业新闻：trade_news

72)行业动态：trends

73)邮编：postal_code_zipcode

74)新闻动态：news_trends

75)公司名称：company_name

76)销售热线：sales_hotline

77)联系人：contact_person

78)建设中：in_construction

79)证书：certificate

80)地址：add

81)电话：tel

82)传真：fax

83)产品名称：product_name

84)产品说明：description

85)价格：price

86)品牌：brand

87)规格：specification

88)尺寸：size

89)生产厂家：manufacuturer

90)型号：model

91)产品标号：item_no

92)技术指标：technique_data

93)产品描述：description

94)产地：production_place

95)用途：application

96)论坛：forum

97)在线订购：on_line_order

98)招标：bidInviting

99)综述：general

100)业绩：achievements

101)大事：great_event

102)动态：trends

103)服务：service

104)投资：investment

105)行业：industry

106)规划：programming

107)环境：environment

108)发送：delivery

109)提交：submit

110)重写：reset

111)社区：community

112)业务：business

113)在线调查：online_inquiry

114)下载中心：download

115)意见反馈：feedback

116)常见问题：faq

117)中心概况：general_profile

118)游乐园：amusement_park

119)专题报道：special_report

120)图标: icon

121)注释：note

122)指南：guild

123)服务：service

124)热点：hot

125)新闻：news

126)下载：download

127)投票：vote

128)商标：label/branding

129)：breadcrumb/loc

130)购物车：shop

131)标签：tag

132)信誉：siteinfo_credits

133)网站信息：siteinfo

134)法律声明：siteinfo_legal

135)合作伙伴：partner

136)友情链接：friendlink

137)版权：copyright

8、head区域代码规范：

1）关键字：<meta name="keyword" content="this is key words"/>

2）外部引入css层叠样式表：<link href="css/style.css" rel = "stylesheet" type="text/css"/>

3）网页字符集设置：<meta http equiv ="Content Type" content ="text/html;charset=utf-8">

4）网页标题：title的设置

5）公司版权注释

5）网页制作者信息

6）网站简介

7）网页机器人搜索，蜘蛛抓取，告诉 它，哪些是需要抓取的，哪些是不需要抓取的；

9、字体规范：

1）在设定字体样式时对于文字字号样式和行间距应必须使用CSS样式表。禁止在页面中出现 <font size=?> 标记。

2）字体大小：在网页中中文应首选使用宋体。英文和数字首选使用verdana 和arial两种字体。一般使用中文宋体的9pt和11pt或12px

和14.7px这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt 和14.7px 的字号比较合适。

3）为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用<br> 来人工干预分段。

4）不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外， 汉字之间的标点要用全角标点，英文字母和

数字周围的括号应该使用半角括号。

5）请不要在网页中连续出现多于一个的空格，也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用

text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。

6）行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.

7）排版中我们经常会遇到需要进行首行缩进的处理，不要使用 或者全角空格来达到效果，规范的做法是在样式表中定义 p {

text-indent: 2em; } 然后给每一段加上 <p> 标记，注意，一般情况下，请不要省略 </p> 结束标记

10、链接和表格的使用规范：

1）链接使用规范：

1）网站中的链接路径全部采用相对路径

2）一般链接到某一目录下的缺省文件的链接路径不必写全名：例如：<a href=”aboutus/index.htm”> 而应该这样

：<a href=”aboutus/”>

3）在浏览器里，当我们点击空链接时，它会自动将当前页面重置到首端， 从而影响用户正常的阅读内容， 我们用

代码“javascript：void(null)”代替原来的“#”标记

2）表格使用规范：

1）尽量避免表格嵌套过多--->后果会对浏览器加载延长时间， 带来不友好的用户体验

2）在写 <table> 互相嵌套时，严格按照的规范，对于单独的一个<table>来说，<table><tr>对齐，<td> 缩进两个

半角空格，<td>中如果还有嵌套的表格，<table>也缩进两个半角空格， 如果<td>中没有任何嵌套的表格，</td> 结束标记应该与<td>处于同一行，不要

换行

11、下载和浏览速度规范：

1）文件下载可以通过 a标签href指向路径直接实现

2）首页Flash网页大小应限定在200K以下， 尽可能的使用矢量图形和Action来减小动画大小。

3）非首页静态页面含图片大小应限定在70K 左右，尽可能的使用背景颜色替换大块同色图片。

4）能够用背景色替代图片，尽量使用背景色

5）尽量切小图片，进行平铺

12、alt以及titile的使用规范：

1）alt一般对图片进行提示

2）titile一般对文字进行提示

13、缓存：

1）缺点：

1）对于一些涉及用户重要信息的页面如果页面被缓存则很危险

2）占用大量硬盘资源

2）优点：

1）可以提高浏览器浏览页面的效率

3）相关设置：

1）<META HTTP-EQUIV="pragma" CONTENT="no-cache">

2）<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

3）<META HTTP-EQUIV="expires" CONTENT="0">

14、浏览器兼容：

1）所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析， 造成页面显示效果不统一的情况。

2）不同浏览器的标签默认的外补丁和内补丁不同

1）问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%，解决

方案：CSS里 *{margin:0;padding:0;}，备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设

置各个标签的内外补丁是0。

3）浏览器兼容问题二：块属性标签float后， 又有横行的margin情况下，在IE6显示margin比设置的大:

1）问题症状:常见症状是IE6中后面的一块被顶到下一行，碰到频率：90%（稍微复杂点的页面都会碰到，float布局

最常见的浏览器兼容问题），解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性，备注：我们最常用的就是div+CSS布局了

，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼

容性问题。

4）设置较小高度标签（一般小于10px）， 在IE6，IE7，遨游中高度超出自己设置高度：

1）问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度，碰到频率：60%，解决方案：给超出

高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。备注：这种情况一般出现在我们设置小圆角背景的标签里。 出现这个

问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。 即使你的标签是空的，这个标签的高度还是会达到默认的行高。

5）元素水平居中问题：

1）1. FF: margin:0 auto;IE: 父级{ text-align:center; }

6）const问题：

1）说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.解决方法：

统一使用var关键字来定义常量.

7）模态和非模态窗口问题：

1）说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能. 解决方法

：直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访

问父窗口，例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

8）float的延续性：

1）说明：在i.e.浏览器中，如果使用float设置元素浮动对齐。如果不关闭浮动，将会对后面的元素标签延续浮动。

解决方法：在设置float的元素后面加上clear:both，关闭浮动。

15、LOGO设计：

1）其中关于网站的LOGO，目前有三种规格：

1）88*31 这是互联网上最普遍的LOGO规格。

2）120*60 这种规格用于一般大小的LOGO。

3）120*90 这种规格用于大型LOGO。

16、JavaScript使用规范：

1）书写：书写过程中,每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代

码污染(沉冗代码 || 与现有代码冲突 ||...);

2）变量命名格式：变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun; jQuery变量要求首字

符为'_', 其他与原生JavaScript规则相同, 如: _iTaoLun; 另,要求变量集中声明,避免全局变量.

3）函数命名： 首字母小写驼峰式命名. 如iTaoLun();

4）代码结构明了,加适量注释.提高函数重用率；注重与html分离,减小reflow, 注重性能

5）文件书写：JavaScript程序应独立保存在后缀名为.js的文件中。应尽量减少在HTML 中的JavaScript代码，因为存在与HTML中的

JavaScript代码会明显增加文件大小，且不能对其进行缓存和压缩。filename.js或JavaScript的代码应尽量放到body的后面。 这样可以减少因为载入脚

本而造成其他页面内容载入也被延迟的问题。

6）缩进：缩进的单位为四个空格。避免使用Tab键来缩进。 因为始终没有个统一的Tab长短标准。虽然使用空格会增加文件的大小，

但在局域网中几乎可以忽略，且在最小化过程中也可被消除掉。

7）避免每行超过 80 个字符。当一条语句一行写不下时，请考虑折行。在运算符号，最好是逗号后换行。 在运算符后换行可以减少因

为复制粘贴产生的错误被分号掩盖的几率。

8）所有的变量必须在使用前通过var进行声明。JavaScript并不强制必须这么做， 但这么做可以让程序易于阅读，且也容易发现那些

没声明的变量(它们会被编译成全局变量)。 将var语句放在函数的首部。最好把每个变量的声明语句单独放到一行，并加上注释说明。 var

currentEntry;//当前选择项 var　level;//缩进程度　 var size; // 表格大小，尽量减少全局变量的使用。不要让局部变量覆盖全局变量。

9）函数声明：所有的函数在使用前进行声明。内函数的声明跟在var语句的后面. 这样可以帮助判断哪些变量是在函数范围内的。

10）使用{}代替new　Object()。使用[]代替new　Array()。这样便于书写且能提高一点执行效率。当成员名是一组有序的数字时使用

数组来保存数据。当成员名是无规律的字符串或其他时使用对象来保存数据。

11） event.srcElement问题：问题说明：I.E.下，even对象有srcElement属性，但是没有target属性； Firefox下，even对象有

target属性，但是没有srcElement属性。解决方法：使用 var obj=event.target||window.event.srcElement;

12）parentElement问题：firefox与I.E.的父元素(parentElement)的区别，IE：obj.parentElement，firefox：obj.parentNode，解

决方法: 因为firefox与I.E.都支持DOM,因此使用obj.parentNode是不错选择.

17、图片的使用规范：

1）存放位置：所有页面元素类图片均放入images文件夹, 测试用图片放于img/demoimg文件夹

2）格式：图片格式仅限于gif || png || jpg；

3）命名：命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队

其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;

4）在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间；

5）运用css sprite技术集中小的背景图或图标, 减小页面http请求,但注意,请务必在对应的spritepsd源图中划参考线, 并保存至

img/images目录下.

18、注释的规范：

1）html--------->注释格式 <!--这儿是注释-->, '--'只能在注释的始末位置,不可置入注释文字区域;

2）css--------->注释格式 /*这儿是注释*/;

3）javascript

1）单行：单行注释使用//这儿是单行注释 ,

2）多行：多行注释使用 /* 这儿有多行注释 */;

19）浏览器兼容css：

1）CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的

CSS效果。

2）

div{background-color:green;*background-color:red;(bothIE6%%IE7)}

上面的css在firefox中，它是认识不了后面的那个带星号的东西是什么的， 于是将它过滤掉，不予理睬，解析得到

的结果是:div{background:green}, 于是理所当然这个div的背景是绿色的。 在IE6中呢，它两个background都能识别出来， 它解析得到的结果是:div

{background:green;*background:red;} ,于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。

3）区别不同浏览器，CSS hack写法：

1）IE6与FF：background:orange;*background:blue;

2）区别IE6与IE7：background:green!important;background:blue;

3）区别IE7与FF：background:orange;*background:green;

4）区别FF，IE7，IE6：background:orange;*background:green;_background:blue;

background:orange;*background:green!important;*background:blue;

5）IE都能识别*，标准浏览器不能识别（如 FF）；IE6能识别*，不能识别!import；IE7能识别*，能识别!import；

FF不能识别*，单能识别!import；

------------华丽的分割线---------------

下面就是整理过后的面试题了，下面献给客官们。

html部分

说说你对语义化的理解？

1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构 2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重； 3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页； 4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。 （2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 （3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 （4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

你知道多少种Doctype文档类型？

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。 HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。 XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。 Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

HTML与XHTML——二者有什么区别

区别： 1.所有的标记都必须要有一个相应的结束标记 2.所有标签的元素和属性的名字都必须使用小写 3.所有的XML标记都必须合理嵌套 4.所有的属性必须用引号""括起来 5.把所有<和&特殊符号用编码表示 6.给所有属性赋一个值 7.不要在注释内容中使“--” 8.图片必须有说明文字

常见兼容性问题？

* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理. * 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。 * IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 * 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别) * 渐进识别的方式，从总体中逐渐排除局部。 首先，巧妙的使用“”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 css .bb{ background-color:#f1ee18;/*所有识别*/ .background-color:#00deff; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ } * IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性. * IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. * 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。 * Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决. * 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} * 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法：`<doctype html>` * 上下margin重合问题 ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。 解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。 * ie6对png图片格式支持不好(引用一段脚本处理)

解释下浮动和它的工作原理？清除浮动的技巧

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。 1.使用空标签清除浮动。 这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。 2.使用overflow。 给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。 3.使用after伪对象清除浮动。 该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

浮动元素引起的问题和解决办法？

浮动元素引起的问题： （1）父元素的高度无法被撑开，影响与父元素同级的元素 （2）与浮动元素同级的非浮动元素会跟随其后 （3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：

使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix{display: inline-block;} /* for IE/Mac */

清除浮动的几种方法：

1，额外标签法，<div style="clear:both;"></div>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。） 2，使用after伪类 #parent:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; } 3,浮动外部元素 4,设置`overflow`为`hidden`或者auto

IE 8以下版本的浏览器中的盒模型有什么不同

IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

（1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 （2）添加、移除、替换、插入 appendChild() removeChild() replaceChild() insertBefore() //在已有的子节点前插入一个新的子节点 （3）查找 getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的) getElementById() //通过元素Id，唯一性

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 * 拖拽释放(Drag and drop) API 语义化更好的内容标签（header,nav,footer,aside,article,section） 音频、视频API(audio,video) 画布(Canvas) API 地理(Geolocation) API 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除 表单控件，calendar、date、time、email、url、search 新的技术webworker, websocket, Geolocation * 移除的元素 纯表现的元素：basefont，big，center，font, s，strike，tt，u； 对可用性产生负面影响的元素：frame，frameset，noframes； 支持HTML5新标签： * IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式： * 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> 如何区分： DOCTYPE声明\新增的结构元素\功能元素

iframe的优缺点？

1.<iframe>优点： 解决加载缓慢的第三方内容如图标和广告等的加载问题 Security sandbox 并行加载脚本 2.<iframe>的缺点： *iframe会阻塞主页面的Onload事件； *即时内容为空，加载也需要时间 *没有语意

如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式

webSocket如何兼容低浏览器？

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR

今天的内容很多，大家看的是否有些累呢？

下面就是惯例——让大家乐呵的时间了。

1、丑小鸭生来就很丑，谁都不喜欢它，它从小被其他鸭子欺负。

它无奈离开了妈妈，独自流浪，遇到狂风、暴雨、猎狗……

但丑小鸭没有畏惧，它顽强拼搏，努力学习，最终，人们发现，它虽然不好看，但还挺好吃的

2、又一次被老婆打破头住院了！朋友们来看我时都在劝我，临床的一病友大爷也跟着劝我：小伙子，你这已经不错了！上个月一小伙子被她老婆打的浑身被绷带包的跟木乃伊似的！听完大爷的话我当时就哭了！：大爷，上个月的那个人也是我！

3、刚网管给我发了一个信息： 大哥，你把鞋穿上我多给你加 一个小时……

4、有个妹纸的个性签名是我是一个不高，不瘦，行踪不定的小神经。……尼玛…我头一次见到有人把又矮又粗，还喜欢瞎跑乱逛说的这么清新脱俗的！。。

今天的内容就到这里了，希望得到大家的支持。