HTML，CSS，JavaScript各自的角色

2021/7/5 14:12:50

编程Tag： javascript 浏览器网页 css 页面 html

本文主要是介绍HTML，CSS，JavaScript各自的角色，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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>

代码显示效果：

这篇关于HTML，CSS，JavaScript各自的角色的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

HTML，CSS，JavaScript各自的角色

HTML所扮演的角色

CSS所扮演的角色

JavaScript所扮演的角色

相关编程文章