HTML+CSS+JavaScript网页设计实用教程
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.3 HTML、CSS与JavaScript

想要学好网页设计制作，就必须掌握HTML、CSS样式和JavaScript这三种语言。这三种语言在网页设计制作过程中起着非常重要的作用。本节将向读者介绍HTML、CSS样式和JavaScript的关系，以及在网页设计制作过程中的作用。

1.3.1 HTML、CSS和JavaScript代码

在网页中使用HTML和CSS样式相互结合，才能够表现出多姿多彩的网页效果。如果想在网页中实现一些动态的交互效果，则必须在网页中加入相应的JavaScript脚本。

知识点：HTML代码

在操作系统中，打开记事本，在记事本中编写如下的HTML代码。

      <html>
      <head>
        <title>一个简单的HTML页面</title>
      </head>
      <body>
        <h1 align="center">HTML页面</h1>
        <hr />
        <p>这是一个简单的HTML页面</p>
      </body>
      </html>

这里编写的是一个基础的HTML页面，完整的HTML代码，以<html>标签开始，以</html>标签结束。在该页面中并没有包含CSS样式和JavaScript脚本。

在编写HTML的记事本中执行“文件>另存为”命令，将其保存为．html格式文件，使用IE浏览器打开该网页文件，可以看到网页效果，如图1-6所示。

图1-6

通过上面的操作可以发现，使用记事本就可以编写HTML代码，不需要任何专业软件工具，并且使用IE浏览器可以查看网页（.html文件）的效果。

知识点：CSS样式代码

在记事本中打开刚刚编写的HTML文件，在<head>与</head>标签之间添加如下的CSS样式代码，这是内部CSS样式的完整形式，以<style>标签开始，以</style>标签结束。

      <style type="text/css">
      <! --
      h1 {
          font-family：微软雅黑；
          font-size: 30px；
          font-weight: bold；
          color: #F00；
      }
      -->
      </style>

保存网页代码，在IE浏览器中预览页面，可以看到页面的效果，如图1-7所示。

图1-7

通过与前面没有使用CSS样式的网页相比较，可以发现网页标题文字发生了变化，这就是CSS样式起到的作用。

知识点：JavaScript代码

使用记事本打开刚刚编写的HTML页面，在<head>与</head>标签之间添加如下的JavaScript脚本代码。JavaScript脚本代码是以<script language="javascript">开始，以</script>标签结束。这里所添加的JavaScript脚本代码用来在打开网页时弹出一个提示框。

      <script language="javascript">
      <! --
        alert （"这是JavaScript实现的弹出窗口"）；
      -->
      </script>

保存网页代码，在IE浏览器中预览页面，可以看到使用JavaScript实现的弹出提示窗口的效果，如图1-8所示。

图1-8

使用JavaScript脚本代码可以在网页中实现许多动态交互效果。JavaScript脚本代码可以直接编写在HTML代码中。

1.3.2 HTML在网页中的作用

HTML的英文全称是HyperText Markup Language，中文称为“超文本置标语言”，也称“超文本标记语言”。使用HTML就可以制作标准的网页。注意，HTML只是一种标记语言，它只能建议浏览器以什么方式或结构显示网页内容，这不同于程序设计语言。因此，HTML是比较简单易学的，初学者只需要掌握HTML的一些常用标签即可。

HTML是Internet上用于设计制作网页的主要语言。网页中所包括的图像、动画、表单和多媒体等复杂的元素，其基础本质都是HTML。图1-9所示为腾讯网的首页，其中包括了多种复杂的网页元素，在网页空白位置单击鼠标右键，在弹出菜单中执行“查看源”命令，可以在记事本中看到该网页的源代码依然为HTML，如图1-10所示。

图1-9

图1-10

1.3.3 CSS在网页中的作用

网页发展的前期，HTML语言是可以标记页面文档中的段落、标题、表格和链接等格式的，但随着网络的快速发展，HTML语言越来越不能满足网页效果多样化的需求。为了解决这个问题，1997年万维网联盟（W3C）颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1。随后，CSS样式又得到了更多的完善和充实。

CSS样式是目前唯一的网页排版布局样式标准。CSS样式可以使任何浏览器都按所设置的属性显示网页元素的布局和外观格式。

1.3.4 JavaScript在网页中的作用

HTML和CSS样式相互结合，可以制作出精美的静态网页，但这样的静态网页缺少交互性。随着用户对于网页需求的不断提升，网页如果缺少一定的交互性，也就无法吸引浏览者。

出于这样一种需求，越来越多的网页开发者在网页中加入JavaScript来实现网页中的交互效果。在网页中加入JavaScript使得用户与信息之间不只是一种浏览与显示的关系，而是实现了一种实时、动态和交互的页面功能。

JavaScript是一种基于对象的脚本语言，JavaScript在网页中用于开发Internet客户端的应用程序。JavaScript可以与HTML和CSS样式相结合，在网页中实现与Web用户的交互功能。

上一章目录下一章