前端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技术小结的更多相关文章
- 零基础:如何快速学习JavaScript,html+css技术
前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML.CSS和JavaScript这些基础知识点,但达妹今天想强调一下,学前端开发除了要学这些基础知识外,学员还要在这之上进行延伸和深入的去学,而 ...
- 前端CSS技术全解(一)
一.概述 1)用HTML完成样式工作 哪个标签有哪个属性难以记忆 需求变更影响较大(例如像修改成功法则以下的文字颜色需要修改4个地方) <h1 align="center"& ...
- 探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密
下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问 ...
- Javascript本地存储小结
前言 总括:详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法. 人生如画,岁月如歌. 原文博客地址:Javascript本地存储小结 知乎专栏&& ...
- 5. web前端开发分享-css,js深化篇
一. css练习网易专题: 1. http://news.163.com/ 新闻 跟腾讯的新闻版式大体没有大的变化,只是细节. 2. http://news.163.com/photo/#Curren ...
- 如何提升我的HTML&CSS技术,编写有结构的代码
前言 之前写了四篇HTML和CSS的知识点,也相当于是一个知识点汇总.有需要的可以收藏,平时开发过程中应该会遇到这些点,到时候再查看这些博客可能更容易理解.从这篇开始更多的介绍开发过程经常让人头痛的前 ...
- 前端Html和Css面试题
前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
- 常用CSS技术收藏
常用CSS技术收藏 必须要掌握的技术 盒子模型 定位模型 定位模型 css sprite(雪碧/css精灵)相关 css sprite 坐标定位为何为负以及定位方法 布局 圣杯布局小结 规范 BEM ...
- Canvas:技术小结
Canvas:技术小结 资料 [教程:MDN官方中文教程] https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial [ ...
随机推荐
- (转载)python2+selenium自动化测试系列(一)
1.Selenium2+python自动化1-环境搭建 2.Selenium2+python自动化2-pip降级selenium3.0 3.Selenium2+python自动化3-解决pip使用异常 ...
- 网站appache的ab命令压力测试性能
①:相关不错的博文链接:http://johnnyhg.iteye.com/blog/523818 ②:首先配置好对应的环境上去,有对应的命令 ③:压力测试的指令如下: 1. 最基本的关心两个选项 - ...
- SQL基本语句以及示例
基本语句: /*dorp colunm*/ 语法:ALTER TABLE 表名 DROP COLUMN 要删除的字段 验证财务转换的正确性,查询以下两个表是否有数据 /*表连接inner jion ...
- JS--垒房子
垒房子的小游戏,还没加上得分选项,这是自己的练习笔记,留作笔记随时查看. <!DOCTYPE html><html> <head> <me ...
- .NET使用Com组件的一点点教训笔记~
中控IFACE系列的产品,二次开发包 zkemkeeper.dll 在system32 ,SySWoW64都注册了,就是他妈的用不了. 最后,在 system32 ,SySWoW64 注册了,然后把需 ...
- git更换仓库地址
1. 从原始地址 clone 一份不包含 work copy的仓库: git clone --bare bitbucket_project_address 2. 在os china上创建同名项目. ...
- Ajax用法总结
ajax: AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX ...
- 学习html心得
最近我们小组在搞一个网站项目,每个组员都在学习html与css. 我们先找到相关网站寻找信息进行学习,内容不多,我很快就把html的教程看完了.感觉还不错,就下载了html编辑器Notepad++进行 ...
- Linux_arm驱动之按键模拟脉冲实现定时器的精确计时
/***************************************************************** 内核驱动部分button_ker.c ************** ...
- C# Susan边缘检测(Susan Edge Detection)
Susan边缘检测,方法简单,效率高,具体参照 The SUSAN Edge Detector in Detail, 修改dThreshold值,可以改变检测效果,用参照提供的重心法.力矩法可得到边缘 ...