-
HTML所扮演的角色
HTML(Hyper Text Markup Language)是Internet上用于设计网页的主要语言。网页包括动画,多媒体,图形等各种复杂的元素,其基础架构都是HTML。
注意:HTML只是一种标记语言,他只能建议浏览器以什么方式或结构显示网页内容,不同于程序设计语言。HTML中的标记是不区分大小写的。
-
CSS所扮演的角色
css(Cascading Style Sheets)译为层叠样式表,简称样式表,他是一种制作网页的新技术。“样式”就是指网页指文字大小,颜色,图片位置等格式,“层叠”的意思是,当在HTML中引用了多个样式文件(css文件)时,当样式文件中的样式发生冲突时,浏览器将依据层叠顺序处理。
css扮演的角色:是目前唯一的网页页面排版样式标准。他能使任何浏览器都听从指令,知道该以何种布局,格式显示各种元素及其内容。
1、在HTML语言中可以直接编写css代码
2、css能帮助用户对页面的布局加以更多的控制。
3、css可以控制网页字体变化和大小。
4、css弥补了HTML对网页格式化方面的不足,起到排版定位的作用。
5、css可实现页面格式的动态更新。
-
JavaScript所扮演的角色
先了解一下HTML和css的缺陷:
HTML和css配合使用,提供给用户的只是一种静态的信息,缺少交互性。用户已不满足于只是坐在那里浏览信息,如果网页中有更多的交互性,那就更方便,更有意思了,web游戏就是一个交互的典型例子。
JavaScript实现了一种实时的,动态,交互的页面功能。有了JavaScript,静态的HTML页面也逐渐被客户端做出响应的动态页面所取代。
在浏览网页时,网页有时会弹出一个提示框,让输入一些个人信息或别的东西,这就可能是JavaScript所赐。
JavaScript是一种基于对象的脚本语言,他的角色:用于开发Internet客户端的应用程序。他可以结合HTML,css,实现在一个web页面与web客户端交互的功能。
1、一种脚本编写的语言:JavaScript是一种脚本语言,可以和HTML语言结合,在HTML中可以直接编写JavaScript代码。
2、动态性:他可以直接对用户或客户的输入做出响应,无须经过web服务程序。因此,可以实现类似弹出提示框这样的交互性网页功能。他对用户的响应是以“事件”做驱动的,比如,“单击网页中的按钮”这个事件可以引发对应的响应。
3、跨平台性:JavaScript依赖于浏览器,与操作系统无关。因此,只要在浏览器的计算机上,且浏览器支持JavaScript,就可以对其正确执行。
HTML代码以<html>开始,以</html>结束。
CSS代码,通常位于<head>与</head>之间,以<style>开始,以</style>结束。
JavaScript代码,以<script type="text/javascript">开始,以</script>结束。
栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>博文观点</title>
</head>
<body>
<p>
<img src="Sources/TIM图片20190105213020.png" width="652" height="142" alt="broadview banner"/>
</p>
<!--<img src="Sources/TIM图片20190105192743.png" width="652" height="142" alt="broadview banner"/></p>-->
<p>博文视点好书不断,为读者提供最优秀的IT专业图书</p>
<table width="650" border="1">
<tr>
<td>
html/css/javascripts 完全学习手册<br />
作者:王占全 黄海 编著<br />
定价:49.00元<br />
出版:2007-04
<div>
<input type="button" name="name" value="点击借阅" />
</div>
</td>
<td>
<img src="Sources/94623cdcef8afeddcb7e3a6a9af463df.jpg" height="92" alt="html/css/javascript"/>
<!--<img src="Sources/01.bmp" height="92" alt="html/css/javascript"/>-->
</td>
</tr>
<tr>
<td>
搜索引擎营销——网站流量大提速<br />
作者:(美)莫兰(Moran.M.)(美)亨特<br />
译者:董大金 祝贺 译<br />
定价:69.80元<br />
出版:2007-04
<div>
<input type="button" name="name" value="点击借阅" />
</div>
</td>
<td>
<img src="Sources/31275d1bbc440d516c9edf1132e90d5c.jpg" width="69" height="92" alt="search"/>
<!--<img src="Sources/dog.jpg.jpg" width="69" height="92" alt="search"/>-->
</td>
</tr>
</table>
</body>
</html>
代码显示效果: