Html+css+javascript的浅析

最新推荐文章于 2025-07-09 19:35:54 发布

原创最新推荐文章于 2025-07-09 19:35:54 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

一个web全栈的修行者专栏收录该内容

49 篇文章

订阅专栏

本文介绍了前端开发的基础技术HTML、CSS及JavaScript的作用与应用。HTML用于网页内容的构建，CSS负责美化内容，JavaScript则使网页具备交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言

我们知道想做前端，html、css、javascript这三样是必学的，并且这三个的学习是递进的，也就是说先学html才能理解css，学了html+css才知道javascript到底在前端中中到底扮演着什么样的角色。笔者这里浅淡一下html+css+javascript，希望对想学前端或想了解前端的童鞋有所帮助。

HTML

先是html，稍微了解一点的都知道，html不是编程语言，而是一种超文本标记语言。为什么这样说，是因为html不具备编程语言的特性，编程顾名思义编写程序，程序一定是具备一定逻辑的代码的集合，而html是没有逻辑可言的。html更像是用带标签的代码来可视化的排版内容，它基本语句就是标签+属性+内容。html通过标签来告诉浏览器我需要什么，标题、段落、logo、图片还是链接还是一个表单等等，然后在用属性来为所加入的内容添加属性，闭合标签内部就是内容。所以说html是一个网页内容的代码体现。一个html5+css+javascript的文件模板如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网页标题栏的标题</title>
        <!--引入外部文件-->
        <link rel="" href=""/>
        <script>
        <!--这里写入js脚本-->
        </script>
        <style>
        <!--这里写入css样式-->
        </style>
    </head>
    <body>
    <!--这里写入html代码-->
    </body>
</html>

如你所见，html文件是有一定的格式，一定的缩进可以让html代码美观易读。并且css和javascript代码是可以嵌入html中的，只要用<style></style>和<script></script>标签包裹就好了。

CSS

下面，介绍css样式，css样式文件后缀为.css，CSS 指层叠样式表 (Cascading Style Sheets)。同样css也不是编程语言，而只是一个离了html就没什么意义的样式表。那么css到底是干啥的？我打个比方，如果说html是素颜出镜，那加上了css的html就是盛装出席。html对于网页是内容的体现，而css就是为了装饰内容使其更加美观而存在的。其实html中的属性也可以为内容添加一些样式，但是如果仅仅靠属性，代码的重用性就很低，并且在一些块<div>的样式设置上会比较繁琐，css就可以很好的解决这两个问题。为什么这样说呢，这要看css的语法：
css的基本语法其实超级简单，CSS 规则由两个主要的部分构成：
选择器，以及一条或多条声明。
选择器通常是您需要改变样式的 HTML 元素。
每条声明则是由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被一个冒号分
这里写图片描述。
这样，如上图，选择器可以定位到html中的任何一个元素，任何的块，并且因为样式是将所需属性封装起来，提高了代码的重用性和易读性。

JavaScript

最后说一下javascript，js是一种编程语言，js和其它的OOP语言一样是一种面向对象的轻量级编程语言，同时也是一种脚本语言，广泛应用于web开发中。js有if else 条件语句，for while switch循环语句等等和其他编程语言是一样的，但又因其是脚本语言，所以可以嵌入html中。那js在网页开发中是干啥的呢？其实你可以这样想，js是编程语言，有一定的逻辑性，那么一个有了逻辑思维的网页就可以“思考”了，html只是内容的堆砌，css是加了点装饰，那js就是让网页动起来，为网页添加一些动画效果，对一些鼠标点击、鼠标移动和键盘的事件做出反应等等。js有一个库叫jquery，集成了许多函数，语法也大有所不同，不过很好用，值得一学。
如果想学习这些内容，可以访问下面的网站：
https://www.w3cschool.cn/tutorial