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

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

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

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

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

<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）等。