7

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

 11 months ago
source link: https://www.51cto.com/article/768774.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

作者：小狮妹 2023-10-07 10:24:56
HTML、CSS和JavaScript是构建现代网页的三大核心技术，它们虽然看似不同，但在实际中相互协作，共同创造出丰富交互和视觉效果的网页体验。

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

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

b9bbc58709c3edc4cb8949651a67d847d66950.jpg

HTML：网页的身体

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

<html><head><title>我的第一个网页</title></head><body><h1>欢迎来到我的网站</h1><p>这是一个简单的示例。</p><img src="logo.png" alt="我的logo"><a href="https://www.bing.com">点击这里访问必应搜索</a></body></html>

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

  • <html>和</html>：表示文档的开始和结束。
  • <head>和</head>：表示文档的头部信息，包含了文档的标题、元数据等。
  • <title>和</title>：表示文档的标题，显示在浏览器的标签栏上。
  • <body>和</body>：表示文档的主体内容，显示在浏览器的窗口上。
  • <h1>和</h1>：表示一个一级标题，通常用于显示最重要的信息。
  • <p>和</p>：表示一个段落，通常用于显示正文内容。
  • <img>：表示一个图片，需要指定图片的来源（src属性）和替代文字（alt属性）。
  • <a>和</a>：表示一个链接，需要指定链接的目标地址（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代码。例如：
<h1 style="color: blue; font-family: Arial; font-size: 36px;">欢迎来到我的网站</h1>
  • 内部样式表：在HTML文档的head部分使用style标签，写入CSS代码。例如：
<head><style>h1 {
      color: blue;
      font-family: Arial;
      font-size: 36px;
    }
    /* 其他样式 */</style></head>
  • 外部样式表：在HTML文档中使用link标签，引入外部的CSS文件。例如：
<head><link rel="stylesheet" href="style.css"></head>

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

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代码。例如：
<script>// JavaScript代码</script>
  • 外部脚本：在HTML文档中使用script标签，引入外部的JavaScript文件。例如：
<script src="script.js"></script>

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

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

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

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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK