新手理解HTML、CSS、javascript之间的关系

最准确的网页设计思路是把网页分成三个层次,即:结构层(HTML)、表示层(CSS)、行为层(Javascript)。

 

一、HTML、CSS、JavaScript简介及简单分工

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。

1、什么是HTML(超文本标记语言 Hyper Text Markup Language),HTML 是用来描述网页的一种语言。
2、CSS(层叠样式表 Cascading Style Sheets),样式定义如何显示 HTML 元素,语法为:selector {property:value} (选择符 {属性:值})
3、JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

对于一个网页,HTML定义网页的结构,CSS描述网页的样子,JavaScript设置一个很经典的例子是说HTML就像 一个人的骨骼、器官,而CSS就是人的皮肤,有了这两样也就构成了一个植物人了,加上javascript这个植物人就可以对外界刺激做出反应,可以思 考、运动、可以给自己整容化妆(改变CSS)等等,成为一个活生生的人。如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+CSS是植物人,没有Javascript、CSS是个毁容的植物人。
如果说HTML是建筑师,CSS就是干装修的,Javascript是魔术师。

二、HTML、CSS、JavaScript发展
1、HTML的版本
超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准):
HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日,W3C推荐标准
html 5
html 5
HTML 4.0——1997年12月18日,W3C推荐标准
HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准
HTML 5——2014年10月28日,W3C推荐标准[4]

现在我们只说HTML 4.01和HTML5,因为2000年国际万维网联盟(W3C)公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言,目的是基于XML应用。而XHTML 与 HTML 4.01 几乎是相同的,HTML从最初发展到XHTML的过程中变得更加的严谨,更加的灵活,与CSS结合的更好。原则上说现在能看到的大部分网页是使用HTML4或者HTML5这两个版本的。

总结 html 原本最终是要过渡到xml的, 于是有了html->xhtml[html4]->xml 但是过渡不成功。所以直接有了html5。

HTML5
它是对HTML5的一次重大的修改,虽然HTML5 标准还在制定中,但不能阻碍其势不可挡的脚步。

2、CSS的版本(Level)

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

1996年W3C正式推出了CSS1;
1998年W3C正式推出了CSS2;
CSS2.1是W3C现在正在推荐使用的;
CSS3现在还处于开发中。

3、JavaScript的前世今生

JavaScript一种直译式脚本语言,它的解释器被称为JavaScript引擎,是浏览器的一部分,即:JavaScript是由客户端的浏览器解释执行的,所以在谈JavaScript的历史之前我们要先说一下浏览器,最早的web浏览器是创建于1991年的WorldWideWeb,后来改名为Nexus,之后出现了各类浏览器,直到1994年,网景公司(Netscape)发布了Navigator浏览器0.9版,这是历史上第一个比较成熟的网络浏览器,随后的1995年微软推出了IE浏览器,从此掀起了浏览器大战,微软采取操作系统捆绑IE浏览器,最终获得压倒性胜利,战争失利的Netscape在之后被收购、合并、解散。之后一段时间IE独领风骚,之后被Opera,Safari,Firefox,Chrome陆续瓜分掉一些市场份额,改变了一家独大的局面。

但是谈到JavaScript的历史,必须提到一个公司和一个人,那就是Netscape公司及其员工Brendan Eich,网景公司在发布了Navigator之后,急于解决浏览器与用户交互这个问题,Javascript之父Brendan Eich只用了10天的时间发明了livescript(让我辈情何以堪),由于网景高层是java的粉丝,或者说为了抱上当时热炒的java的大腿,livascript更名为javascript,Brendan Eich他的思路是:
      (1)借鉴C语言的基本语法;

  (2)借鉴Java语言的数据类型和内存管理;

  (3)借鉴Scheme语言,将函数提升到”第一等公民”(first class)的地位;

  (4)借鉴Self语言,使用基于原型(prototype)的继承机制。
所以,Javascript语言实际上是两种语言风格的混合产物—-(简化的)函数式编程+(简化的)面向对象编程。
Javascript 1.0获得了巨大的成功,Netscape随后推出了1.1,之后作为竞争对手的微软在自家的 IE3 中加入了名为 JScript (名称不同是为了避免侵权)的JavaScript实现。由此JavaScript 的规范化被提上日程,1997年,以 JavaScript1.1 为蓝本的建议被提交给了 欧洲计算机制造商协会 (ECMA),ECMA牵头经过数月的努力完成了 ECMA-262 ——定义了一种名为 ECMAScript 的新脚本语言的标准。

虽然 JavaScript 和 ECMAScript 通常被人用来表达相同的意思,但 JavaScript 的含义去比 ECMA-262 中规定的多得多。

一个完整的 JavaScript 实现应由三个部分组成:

(1)核心(ECMAScript), 描述了该语言的语法和基本对象。

(2)文档对象模型(DOM),描述处理网页内容的方法和接口。

(3)浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。

 

 


关注公众号,了解更多it技术(it问答网

jquery tab切换效果,css样式自己定义下即可。

<!doctype html>
<html>
<head >
<meta charset="utf-8">

<title>jQuery tab切换</title>

<style>
	.inform-text{display:none;}
	.inform-text.show{display:block;}
</style>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>
<body>

<div class="mobile-wrap center mobile-wrap-mb">


		<div class="inform">			
			<div class="inform-list">
				<ul>
					<li class="acti">个人信息</li>
					<li>修改资料</li>					
				</ul>
			</div>
			<div class="inform-text show">
				dddddd
			</div>
			<div class="inform-text">
				sss
			</div>	
		</div>


</div>

<script type="text/javascript">
	$('.inform-list ul li').click(function(){
		var n=$(this).index();
		$(this).addClass('acti').siblings().removeClass('acti');
	
		//$('.inform-text').fadeOut();
		//$('.inform-text').eq(n).fadeIn();
		
		$('.inform-text').hide();
		$('.inform-text').eq(n).show();

	})
</script>
</body>
</html>

 


关注公众号,了解更多it技术(it问答网

表格自动适应浏览器大小(页面自适应浏览器大小)

表格自适应浏览器大小

之前写了个页面,将width和height值给定死了,这样导致浏览器缩小时,表格不会跟着自动适应浏览器大小。

解决方法:

1.一般是给表格整体使用样式:table-layout:fixed;

2.将表格中的各个单元格的width和height属性值设为比例,而不是给定值。

提示:给嵌套到td中的表格 设置100%宽度哦。


关注公众号,了解更多it技术(it问答网