前端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=“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="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声明。

前端html、Javascript、CSS技术小结,布布扣,bubuko.com

时间： 2024-10-10 10:09:07

前端html、Javascript、CSS技术小结的相关文章

JavaScript基础--事件驱动和访问CSS技术(十)

1.原理: 2.快速入门案例 js中的事件主要分为4种: 案例:监听鼠标点击事件,并能够显示鼠标点击的位置x,y <script language="javascript" type="text/javascript"> function test1(e){ window.alert('x='+e.clientX+'y='+e.clientY); } function test2(e){ window.alert('x='+e.clientX+'y='+

如何提升我的HTML&amp;CSS技术，编写有结构的代码

前言 之前写了四篇HTML和CSS的知识点,也相当于是一个知识点汇总.有需要的可以收藏,平时开发过程中应该会遇到这些点,到时候再查看这些博客可能更容易理解.从这篇开始更多的介绍开发过程经常让人头痛的前端问题,以及如何编写性能比较高的前端代码.本人也是刚入门前端的小菜,希望各位前端大牛多多纠正内容中写的不对的地方,让我提升的更快.最近看到博客园中好多前端大牛,都是在各大bat公司工作,这也是我做开发的梦想... 导航 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知

探真无阻塞加载javascript脚本技术，我们会发现很多意想不到的秘密

原文:探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密 下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问百度首页的情景. 在firefox的请求瀑布图里有个表现非常之明显:就是javascript文件下载完毕后,有一段时间是没有网络请求被处理的,这段时间过后http请求才会接着执行,这段空闲时间就是所谓的http请求被阻塞

作为一个前端工程师，CSS是最基本的入门课，你都能做出来吗？

CSS在很多程序员看来那只不过是雕虫小技, 实际上CSS3发展到今天已经强大到超乎你的想象, 当然对于低端浏览器使用者来说,还是以前那样——囧 有时候搞CSS开发确实需要很多想象力,下面一组纯CSS3特效足以描述这一点 以下内容转载自[http://design.yesky.com/show/466/11497966_3.shtml] 设计欣赏:纯CSS3「绘制」的图形图标 IE 标志 作者: Andreas Jacob 在 Firefox 3.6+ 以及Safari 5 上显示最佳.使用了圆角

Javascript基础篇小结

Javascript基础篇小结 字数9973 阅读3975 评论7 喜欢28 转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课时 入门基础 知识点: 操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器本身也是一个应用程序 浏览器本身只懂得解析HTML 调用浏览器这个应用程序的一个功能绘制 1.javascript介绍 JavaScript操作DOM的本质是=获取+触发+改变 目的:就是用来操作内存中的DOM节点 修改D

JavaScript常见技术点

今天看到一篇博客讲解了几个JavaScript的技术点,感觉很实用. 原地址:Javascript常见技术点 1.javascript面向对象中继承实现 javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链,简单的代码如下: <span style="font-family:Microsoft YaHei; font-size:12px"> function Animal(name) { this.name = name; } Anima

web前端之JavaScript高级程序设计六：事件

web前端之JavaScript高级程序设计六:事件 JavaScript 与 HTML 之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(JavaScript 代码)与页面的外观(HTML 和 CSS 代码)之间的松散耦合. 事件流: 事件流描述的是从页面中接收事件的顺序.但有意思的是, IE 和 Netscape 开发团队居然提出了

必知干货：Web前端应用十种常用技术你全都知道吗？

Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您精心推荐十种最常见的web界面应用技术. Web应用程序的界面设计,其核心就是网页设计 ,但它的重点主要是在功能方面.要超越桌面应用程序, Web应用程序必须提供简单.直观和即时响应的用户界面,让他们的用户花更少的精力和时间去完成事情. 以前,我们并没有注意到web应用程序这个方式,但是现在是时候仔

Web前端十种常用的技术

Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您精心推荐十种最常见的web界面应用技术. Web应用程序的界面设计,其核心就是网页设计 ,但它的重点主要是在功能方面.要超越桌面应用程序, Web应用程序必须提供简单.直观和即时响应的用户界面,让他们的用户花更少的精力和时间去完成事情. 以前,我们并没有注意到web应用程序这个方式,但是现在是时候仔