解密前端三巨头:HTML、CSS和JavaScript的关系

2023年 10月 7日 55.5k 0

Hi!这里是W3Cschool编程狮的小狮妹!

如果你想成为一名Web开发者,或者只是想了解网页是如何构建的,那么你一定会遇到这三个词:HTML、CSS和JavaScript。它们是构建现代网页的三大核心技术,它们虽然看似不同,但在实际中相互协作,共同创造出丰富交互和视觉效果的网页体验。那么,它们分别是什么,又是如何关联的呢?来和小狮妹一起来看看吧。

HTML:网页的身体

HTML(超文本标记语言)是一种用于标记和组织网页内容的语言。它使用一些特殊的符号(称为标签)将页面元素(如标题、段落、图片、链接等)组织起来,告诉浏览器如何显示内容。例如,以下是一个简单的HTML文档:

我的第一个网页欢迎来到我的网站

这是一个简单的示例。

我的logo点击这里访问必应搜索

这个文档包含了以下几个元素:

  • 和:表示文档的开始和结束。
  • 和:表示文档的头部信息,包含了文档的标题、元数据等。
  • 和:表示文档的标题,显示在浏览器的标签栏上。
  • 和:表示文档的主体内容,显示在浏览器的窗口上。
  • 和:表示一个一级标题,通常用于显示最重要的信息。
  • :表示一个段落,通常用于显示正文内容。

  • :表示一个图片,需要指定图片的来源(src属性)和替代文字(alt属性)。
  • 和:表示一个链接,需要指定链接的目标地址(href属性)和显示文字。

可以看到,HTML使用了一对一对的标签来包裹页面元素,每个标签都有一个开始符号(),其中有一个标签名(如html、head、title等),有些标签还有一些属性(如src、alt、href等),用于提供更多的信息。每个开始标签都需要有一个对应的结束标签(除了一些特殊的标签,如img),结束标签在标签名前加上一个斜杠(/)。这样就形成了一个树状的结构,称为DOM(文档对象模型),它描述了页面元素之间的层次关系。

HTML是一种不严格的语言,即使有些标签未闭合或者嵌套错误也不会严重影响页面结构。但是为了保证代码的可读性和可维护性,我们还是应该遵循一些规范和习惯,比如缩进代码、使用小写字母、添加注释等。

HTML主要负责定义网页的内容和结构,但并不关心内容的样式和展示方式。如果我们只使用HTML来编写网页,那么网页可能会显得单调乏味。为了让网页更加美观和个性化,我们需要使用CSS来为HTML添加样式。

CSS:网页的衣服

CSS(层叠样式表)是一种用于为HTML文档添加样式和美化展示的语言。它负责定义页面元素的样式、排版和外观,比如颜色、字体、大小、边距、背景、布局等。例如,以下是一个简单的CSS样式表:


h1 {
  color: blue;
  font-family: Arial;
  font-size: 36px;
}

p {
  color: black;
  font-family: Times New Roman;
  font-size: 18px;
}

img {
  border: 5px solid red;
}

a {
  color: green;
  text-decoration: none;
}

这个样式表包含了以下几个部分:

  • h1、p、img、a:表示选择器,用于指定要应用样式的页面元素。这里使用了元素选择器,即直接使用元素的标签名。还有其他类型的选择器,比如类选择器(.class)、ID选择器(#id)、属性选择器([attribute])等,可以更加灵活地选择页面元素。
  • { }:表示声明块,用于包含一组样式声明。
  • color、font-family、font-size、border、text-decoration:表示属性,用于指定要修改的样式特征。
  • blue、Arial、36px、5px solid red、none:表示属性值,用于指定属性的具体值。属性值可以是预定义的关键字(如blue、none)、单位值(如36px)、颜色值(如red或#FF0000)等。

可以看到,CSS使用了一对一对的大括号来包裹一组样式声明,每个声明由一个属性和一个属性值组成,中间用冒号(:)分隔,每个声明后面用分号(;)结束。这样就形成了一个规则集,用于描述页面元素的外观和布局。

CSS与HTML紧密关联,通常不能脱离HTML。为了让CSS生效,我们需要将CSS与HTML关联起来。有三种方法可以实现这一点:

  • 内联样式:在HTML元素中使用style属性,直接写入CSS代码。例如:
欢迎来到我的网站
  • 内部样式表:在HTML文档的head部分使用style标签,写入CSS代码。例如:
h1 {
      color: blue;
      font-family: Arial;
      font-size: 36px;
    }
    /* 其他样式 */
  • 外部样式表:在HTML文档中使用link标签,引入外部的CSS文件。例如:

其中,外部样式表是最常用和推荐的方法,因为它可以实现样式的复用和分离,提高代码的可读性和可维护性。

CSS是一种层叠的语言,即当一个页面元素有多个来源的样式时,它会按照一定的优先级来决定哪个样式生效。优先级由以下几个因素决定:

  • 来源:浏览器默认样式 < 用户自定义样式 < 开发者定义样式 < 内联样式 < !important
  • 特殊性:ID选择器 > 类选择器 > 元素选择器 > 通配符选择器
  • 顺序:后定义的样式 > 先定义的样式

因此,在编写CSS时,我们需要注意避免样式冲突和覆盖,并尽量使用简洁和高效的选择器。

CSS主要负责定义网页的样式和展示方式,但并不关心内容的交互和动态变化。如果我们只使用CSS来编写网页,那么网页可能会显得静态和无趣。为了让网页更加交互和动态,我们需要使用JavaScript来为HTML和CSS添加行为。

三、JavaScript:网页的高级动作

JavaScript是一种用于增强网页的交互性和动态性的语言。它是一种脚本语言,可以运行在客户端和服务器端。通过JavaScript,我们可以实现表单提交、动画效果、弹窗、数据处理等交互行为。例如,以下是一个简单的JavaScript代码:

// 获取页面元素var title = document.getElementById("title");
var button = document.getElementById("button");

// 定义一个函数,用于改变标题的颜色function changeColor() {
  // 生成一个随机的颜色值var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
  // 将标题的颜色设置为随机颜色
  title.style.color = randomColor;
}

// 给按钮添加一个点击事件,当点击时调用changeColor函数
button.addEventListener("click", changeColor);

这个代码包含了以下几个部分:

  • //:表示注释,用于解释代码的作用,不会被执行。
  • var:表示变量,用于存储数据。
  • document.getElementById:表示一个方法,用于获取页面元素。
  • function:表示一个函数,用于封装一段可重复执行的代码。
  • Math.floor、Math.random、toString:表示一些内置的对象和方法,用于进行数学运算和转换。
  • style:表示一个属性,用于获取或设置元素的样式。
  • addEventListener:表示一个方法,用于给元素添加事件监听器。

可以看到,JavaScript使用了一些变量、函数、对象、方法、属性等来操作页面元素和数据。每个语句后面用分号(;)结束。这样就形成了一个脚本,用于描述页面元素的行为和逻辑。

JavaScript可以独立存在,但通常用于操作HTML和CSS,以实现交互性和动态效果。为了让JavaScript生效,我们需要将JavaScript与HTML关联起来。有两种方法可以实现这一点:

  • 内部脚本:在HTML文档中使用script标签,写入JavaScript代码。例如:
// JavaScript代码
  • 外部脚本:在HTML文档中使用script标签,引入外部的JavaScript文件。例如:

其中,外部脚本是最常用和推荐的方法,因为它可以实现脚本的复用和分离,提高代码的可读性和可维护性。

JavaScript是一种灵活和强大的语言,它有很多特性和特点,比如:

  • 动态类型:不需要声明变量的类型,可以随时改变变量的值和类型。
  • 函数式编程:可以将函数作为参数或返回值传递给其他函数,实现高阶函数和闭包等特性。
  • 原型继承:可以通过原型链来实现对象之间的继承关系,而不是通过类和构造函数。
  • 异步编程:可以通过回调函数、事件循环、Promise等机制来实现非阻塞的代码执行。

因此,在编写JavaScript时,我们需要注意理解和掌握这些特性和特点,并尽量遵循一些规范和习惯,比如使用严格模式(“use strict”)、避免全局变量、使用===而不是==等。

HTML、CSS和JavaScript是构建现代网页的三大核心技术,它们虽然看似不同,但在实际中相互协作,共同创造出丰富交互和视觉效果的网页体验。理解这三者之间的协作和关系对于成为一名优秀的Web开发者至关重要。

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论