首页 > 代码库 > 前端html、Javascript、CSS技术小结
前端html、Javascript、CSS技术小结
简单地总结了一下前端用过的html、javascript、css技术，算是清点一下，做个大略的小结，为进一步的学习给个纲领。
一、HTML
由于HTML5的兴起，简单地判断一个网页是否是html5网页，只需要找找内部是否有html5的标志性标签就行了。然而平时虽然写了不少html，却没怎么关注它的发展史：
| GML（Generalized Marcup Language）通用标记语言 和SGML（Standard Generalized Markup Language）标准通用标记语言。 | ||
| 由Tim Berners-Lee于1982年创建，由IETF用简化的SGML（标准通用标记语言）语法进行进一步发展的HTML，后来成为国际标准，由万维网联盟（W3C）维护。 .htm后缀是由于DOS等旧操作系统限制的扩展名最多为3个。 | ||
| 1.0 | 在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准） | 不含img标签 |
| 2.0 | 1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时 |
|
| 3.2 | 1997年1月14日，W3C推荐标准 | 3.0表格、文字绕排和复杂数学元素的显示 |
| 4.0 | 1997年12月18日，W3C推荐标准 |
|
| 4.01 | 1999年12月24日，W3C推荐标准 |
|
| XHTML1.0 | 发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布 | 语法如同XML严格 |
| XHTML1.1 | 于2001年5月31日发布，W3C推荐标准 | 完全的XML，无法利用text/html mime-type直接输出 |
| XHTML 5 | ，从XHTML 1.x的更新版，基于HTML 5草案。 |
|
| 5.0 | 2008年1月22日草案，2012年12月17日正式定稿 | Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。集成SVG可缩放矢量图形 |
| 5.1 | 2013年5月6日正式草案 | |
由于浏览器内核的不同，平时写网页的时候，总是时不时地需要判断一下当前的浏览器
<!--[if lte IE 6]> / 如果IE版本小于等于6 /<![endif]-->
<!--[if !IE]> / 如果浏览器不是IE /<![endif]-->
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同.
二、Javascript
貌似最近遇到了各种JS，对于一个JS的门外汉来说，实在是头疼。JQuery、Extjs、Mobile JS相关的各种框架等，看着略略地发愁，而且各种JS库的写法也不一样，虽然知道是当前的库内部定义的一些函数，调用方法等也是五花八门，使用文档很多，介绍更多，可是更乱了。想了想还是找找最原始的JS，看看它的原生态面貌，不管怎样，总结总结也知道其中的门道了。
| 背景 | |||||
| 前身 | 开发商 | 内容 | 特点 | 是否区分大小写 | 基本功能 |
| Livescript | Netscape (Brendan Eich) | ECMAScript、 文档对象模型、(DOM) 浏览器对象模型(BOM) | 用于客户端、基于对象、 事件驱动 | 区分，动态、弱类型、基于原型、内置支持类 | 数据验证、给HTML网页添加动态功能 |
| 库及工具 | ||||
| 前端JS类型 | Javascript库 | 测试工具 | 调试工具 | 压缩工具 |
| Netscape Navigator 3.0 的 Javascript； IE 的 Jscript； CEnvi 的 ScriptEase。
| JQuery JSer Dojo Prototype YUI Extjs (避免CGI验证) | JSLint JsUnit YUITest Obtrusive JS Checker Cross Check JSLitmus | Firebug：Firefox Venkman:Gecko NitobiBug DamnIT JS Bin Blackbird | Online Javascript Compression Tool； Scriptalizer； Dojo ShrinkSafe； YUI Compressor |
| 引用方式 | |||
| 直接方式 | 代码行 | <a href="javascript:alert(1)">aa</a> | 调试工具 |
| 代码块 | <script language="javascript" type="text/javascript"><!--//--><!CDATA[[//><!--//javascript代码//--><!]]></script> | !--//--用于注释html； CDATA用于纯文本化中间的内容 | |
| 引用方式 | 外部文件 .js后缀 | <script src=http://www.mamicode.com/“url” type="text/javascript"></script> | 指定了src的标签中的内容均不显示 |
三、CSS
刚刚开始了解前端的时候，单纯地以为所有的效果都是由html写出来的，后来才知道很多漂亮的效果都是CSS的功劳。平时都是需要什么特效，就从各种猪八戒、源码爱好者、站长之家等地方随便弄点来用，从来都没有对css做过系统的了解。直到毕业找工作时，决定做前端的那几天，才突然发现这个东西还是有它的成长期的，比如版本，各种特效的滑动效果等的发展状况。
| CSS主要特点概览 | ||
| CSS的目前版本是CSS3。CSS的功能是将网页的表现与内容分离。百度了一下，关于CSS的版本年代表很长，所以就不单独地研究它的“历史”了，那就研究一点别的地方。 | ||
| 对象位置的像素级精确控制 | 支持所有字体字号 | 网页对象模型样式编辑、简单交互 |
| 选择器分组： | h1,h2,h3,h4,h5,h6{color:green;} | |
| 继承：嵌套支持 | 并不是所有属性都能继承，比如CSS盒子模型相关属性就是不能继承的 | |
| CSS版本 | ||
| 版本 | 时间 | 特点 |
| CSS1 | 发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订 |
|
| CSS2 | 发布于 1999年1月11日 | 添加了对媒介（打印机和听觉设备）和可下载字体的支持。 |
| CSS3 | 2001 年 5 月 23 日 | 计划将 CSS 划分为更小的模块 |
| Id、class选择器：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。CSS 对大小写不敏感；与html一起时，class 和 id 名称大小写敏感。 | ||
| 类型 | 定义 | 实例 |
| id
| # | Html: id="para1" Css: #para1 { text-align:center; color:red;} |
| class | . | Html: class="center" Css: .center{text-align:center;} 在标签(p)内则: p.center{……} |
| 使用方法 | 举例 | 备注 |
| 外部样式， 扩展名.css | <linkhref="http://www.mamicode.com/style.css"rel="stylesheet"type="text/css"/> | 统一简洁地更改所有引用了文件的页面 |
| 内页样式， Html<head>标签内 | <style type="text/css"> <!--/*把声明的样式包含在一个网页注释中，这样可以解决较老的浏览器不识别style的问题*/ body{background:grey;} --> </style> | 只能用于当前网页，内嵌的多了，蜘蛛不好爬，网站SEO大忌。div+CSS比table更易浏览器不兼容，但是SEO优化友好，易抓。 |
| 行内样式 | <p style="border-style: solid"> <p style="@importurl(‘BaiduBaike_Daima_Shili.css‘);">层叠样式表文档</p> <!--不能在“样式”style属性中使用@import，这一种我没有用过，是百度百科里的，先放着--> | 属性设置的自动嵌入 |
| Css+div 常见错误及改正方法 | |
| 1. 检查HTML元素是否有拼写错误、是否忘记结束标记 | 用dreamweaver的验证功能检查 |
| 2. 检查CSS是否书写正确 | 用CleanCSS来检查 CSS的拼写错误 |
| 3. 用删除法确定错误发生的位置 | 逐个删除div块 |
| 4. 利用border属性确定出错元素 | 添加border属性确定元素边界 |
| 5. float元素的父元素不能指定clear属性 | MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug |
| 6. float元素务必指定width属性 | 很多浏览器在显示未指定width的float元素时会有bug。 |
| 7. float元素不能指定margin和padding等属性 | IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。 |
| 8. float元素的宽度之和要小于100% | 如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。 |
| 9. 是否重设了默认的样式 | 某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。 |
| 10. 是否忘记了写DTD | 如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下DTD声明。 |