当前位置： 首页 > article >正文

什么是HTML、CSS 和 JavaScript？

article 2025/10/11 3:41:46

HTML、CSS 和 JavaScript 是构建网页的三大核心技术，它们分工明确又紧密协作。接下来我将分别介绍三者的定义、功能，并阐述它们如何共同构成网页，最后推荐学习资源。

一、HTML：网页的骨架与内容基础

HTML（HyperText Markup Language，超文本标记语言）是网页的基础，用于描述网页的结构和内容。它就像是建筑物的骨架，定义了网页上有哪些部分，比如标题、段落、图片、链接等。

HTML 使用一系列的 “标签” 来标记内容，这些标签包裹着文本、图像等元素，告诉浏览器如何显示这些内容。例如，<p>标签用于定义段落，<h1> - <h6>标签用于定义不同级别的标题，<img>标签用于插入图片 。以下是一个简单的 HTML 示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>My First Page</title>
</head><body><h1>这是一个一级标题</h1><p>这是一个段落，用于展示网页的文本内容。</p><img src="example.jpg" alt="示例图片"><a href="https://www.example.com">这是一个链接</a>
</body></html>

在上述代码中，<!DOCTYPE html>声明文档类型为 HTML5；<html>标签是整个 HTML 文档的根元素；<head>部分包含了关于文档的元信息，如字符编码（<meta charset="UTF-8">）和网页标题（<title>标签）；<body>部分则是网页实际展示内容的区域，包含了标题、段落、图片和链接等元素。

HTML 的标签还可以包含属性，用来进一步描述元素的特征。比如，<img>标签的src属性指定图片的路径，alt属性用于在图片无法显示时显示替代文本；<a>标签的href属性指定链接的目标地址。通过不同标签的组合和嵌套，能够构建出复杂多样的网页结构。

二、CSS：网页的外观与样式美化

CSS（Cascading Style Sheets，层叠样式表）主要负责网页的外观和样式，它就像给建筑物进行装修，决定了网页的颜色、字体、布局、动画效果等视觉呈现。有了 CSS，相同的 HTML 内容可以呈现出截然不同的视觉风格。

CSS 有三种基本的引入方式：

  1. 内联样式：直接在 HTML 元素的style属性中编写样式规则。例如：<p style="color: blue; font-size: 16px;">这是一个蓝色、16像素字体大小的段落。</p>，内联样式优先级最高，但不利于样式的复用和维护，一般用于临时修改个别元素样式。
  2. 内部样式表：在 HTML 文档的<head>部分使用<style>标签定义样式规则。如下所示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>My Page</title><style>p {color: green;font-family: Arial;}</style>
</head><body><p>这是一个应用了内部样式表的段落。</p>
</body></html>

这种方式可以为当前页面统一设置样式，适用于单个页面的样式调整。
3. 外部样式表：将样式规则编写在单独的.css文件中，然后通过<link>标签引入到 HTML 文档中。例如，创建一个styles.css文件，内容为：

body {background-color: #f4f4f4;
}
h1 {color: red;
}

在 HTML 文档中引入该样式表：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>My Page</title><link rel="stylesheet" href="styles.css">
</head><body><h1>这是一个红色标题</h1><p>页面背景为浅灰色。</p>
</body></html>

外部样式表便于样式的复用和维护，适合多个页面使用相同样式的情况。

CSS 选择器是 CSS 规则的重要组成部分，用于选择要应用样式的 HTML 元素。常见的选择器有：

  • 标签选择器：直接使用 HTML 标签名作为选择器，如p、h1，会选中页面中所有对应的标签元素。
  • 类选择器：以.开头，后跟自定义的类名，如.highlight，通过在 HTML 元素中添加class属性并设置相应类名来应用样式。
  • ID 选择器：以#开头，后跟唯一的 ID 值，如#main-content，每个 ID 在页面中只能使用一次，用于精确选择特定元素。

通过选择器和丰富的样式属性（如color、font-size、width、height、margin、padding等），可以实现从简单的文本样式调整到复杂的页面布局设计。

三、JavaScript：网页的交互与动态功能实现

JavaScript 是一种脚本语言，为网页添加交互性和动态功能，让网页 “活” 起来。它可以实现表单验证、页面元素的动态修改、响应鼠标点击和键盘输入等操作，就像赋予建筑物智能系统，使其具备各种交互能力。

JavaScript 可以通过以下方式嵌入到 HTML 文档中：

  1. 内部脚本：在 HTML 文档中使用<script>标签，将 JavaScript 代码写在标签内部。例如：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaScript Example</title>
</head><body><button id="myButton">点击我</button><script>const button = document.getElementById('myButton');button.addEventListener('click', function () {alert('你点击了按钮！');});</script>
</body></html>

在上述代码中，通过document.getElementById获取 HTML 页面中 ID 为myButton的按钮元素，然后使用addEventListener方法为按钮添加点击事件监听器，当按钮被点击时，弹出一个提示框。
2. 外部脚本：将 JavaScript 代码编写在单独的.js文件中，然后在 HTML 文档中通过<script>标签的src属性引入。例如，创建一个script.js文件，内容为：

function showMessage() {alert('这是外部脚本中的消息！');
}

在 HTML 文档中引入该脚本：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaScript Example</title>
</head><body><button onclick="showMessage()">点击执行外部脚本函数</button><script src="script.js"></script>
</body></html>

JavaScript 提供了丰富的 API 来操作 HTML 文档（DOM，Document Object Model）和浏览器对象（如window对象）。通过 DOM 操作，可以动态地创建、修改和删除 HTML 元素，更新页面内容；利用浏览器对象，可以实现页面跳转、获取浏览器信息等功能。

四、HTML、CSS 和 JavaScript 如何共同构成网页

当浏览器获取到一个网页的 HTML 文件后，会首先解析 HTML 代码，构建出 DOM 树，将 HTML 中的各个元素以树形结构表示。同时，浏览器会解析 CSS 代码，无论是内部样式表、外部样式表还是内联样式，都会生成 CSSOM（CSS Object Model，CSS 对象模型）树。

然后，浏览器将 DOM 树和 CSSOM 树结合起来，构建出渲染树（Render Tree），渲染树只包含页面中可见的元素及其样式信息。基于渲染树，浏览器计算出每个元素在页面中的位置和大小，进行布局计算，并最终将页面绘制出来。

在页面加载完成后，JavaScript 代码开始执行。它可以通过操作 DOM 来修改页面内容，例如添加新的元素、修改元素的文本或样式；也可以监听各种事件（如鼠标点击、键盘输入、页面滚动等），根据用户的操作动态地更新页面，实现交互功能。

三者紧密协作，HTML 提供内容和结构，CSS 负责样式呈现，JavaScript 赋予交互能力，共同打造出丰富多彩、功能强大的网页。

五、学习资源推荐

  1. 官方文档
    • HTML 官方文档：W3C（万维网联盟）是制定 Web 标准的组织，其官网（HTML Standard）提供了权威的 HTML5 标准文档，详细介绍了 HTML 的各个标签、属性及其用法，但内容较为专业，适合有一定基础后深入研究。
    • CSS 官方文档：同样在 W3C 官网（CSS Snapshot 2024）可以找到 CSS 标准文档，涵盖了 CSS 的各种属性、选择器以及布局规范等内容。另外，Mozilla 开发者网络（MDN）上的 CSS 文档（CSS：层叠样式表 | MDN）也非常优秀，它以更通俗易懂的方式讲解 CSS 知识，并提供了大量示例和兼容性说明。
    • JavaScript 官方文档：ECMA 国际（ECMAScript® 2026 Language Specification）制定了 JavaScript 语言的标准规范（ECMAScript），不过其文档专业性较强。MDN 上的 JavaScript 文档（JavaScript | MDN）是很好的学习资源，它从基础语法到高级特性都有详细讲解，还包含了丰富的示例和实际应用场景分析。
  2. 学习网址
    • W3Schools：网址为W3Schools Online Web Tutorials，是一个非常适合初学者入门的网站。它以简洁明了的方式介绍 HTML、CSS 和 JavaScript 知识，每个知识点都配有详细的文字说明、示例代码和在线编辑测试功能，方便读者边学边练，快速掌握基础知识。
    • 菜鸟教程：网址是菜鸟教程 - 学的不仅是技术，更是梦想！，该网站的 HTML、CSS 和 JavaScript 教程内容全面，讲解通俗易懂，并且提供了大量的实例和练习题，适合快速入门和查漏补缺。同时，它还包含了很多常见问题的解答和实用技巧分享。
    • MDN（Mozilla 开发者网络）：MDN Web Docs 不仅有权威的技术文档，还提供了很多学习指南和案例分析，从基础到进阶的内容都有覆盖。对于想要深入理解 Web 技术原理和进行实际项目开发的学习者来说，是一个不可多得的优质资源。
    • Codecademy：网址为https://www.codecademy.com/，是一个互动式的在线编程学习平台。它通过有趣的项目和实践任务引导学习者学习 HTML、CSS 和 JavaScript，在完成任务的过程中逐步掌握知识和技能，适合喜欢通过实践学习的人群。

相关文章：

什么是HTML、CSS 和 JavaScript？

HTML、CSS 和 JavaScript 是构建网页的三大核心技术&#xff0c;它们分工明确又紧密协作。接下来我将分别介绍三者的定义、功能&#xff0c;并阐述它们如何共同构成网页&#xff0c;最后推荐学习资源。 一、HTML&#xff1a;网页的骨架与内容基础 HTML&#xff08;HyperText …...

编程日记 2025/7/31 7:33:48

手机网页提示ip被拉黑名单什么意思？怎么办

‌当您使用手机浏览网页时&#xff0c;突然看到“您的IP地址已被列入黑名单”的提示&#xff0c;是否感到困惑和不安&#xff1f;这种情况在现代网络生活中并不罕见&#xff0c;但确实会给用户带来诸多不便。本文将详细解释IP被拉黑的含义、常见原因&#xff0c;并提供一系列实…...

编程日记 2025/9/18 10:12:03

CCF编程能力等级认证 一级 第一次课

介绍 CCF 编程能力等级认证&#xff08;GESP&#xff09;为青少年计算机和编程学习者提供学业能力验证的规则和平台&#xff0c;由中国计算机学会发起并主办。 每年考试分四次&#xff0c;时间是每年的3月、6月、9月、12月&#xff0c;以当年每期公布的时间为准。 GESP适用年…...

编程日记 2025/9/24 3:49:10

SpringBoot 讯飞星火AI WebFlux流式接口返回 异步返回 对接AI大模型 人工智能接口返回

介绍 用于构建基于 WebFlux 的响应式 Web 应用程序。集成了 Spring WebFlux 模块&#xff0c;支持响应式编程模型&#xff0c;构建非阻塞、异步的 Web 应用。WebFlux 使用了非阻塞的异步模型&#xff0c;能够更好地处理高并发请求。适合需要实时数据推送的应用场景。 WebClie…...

编程日记 2025/10/3 17:11:48

Python爬虫中time.sleep()与动态加载的配合使用

一、动态加载网页的挑战 动态加载网页是指网页的内容并非一次性加载完成&#xff0c;而是通过JavaScript等技术在用户交互或页面加载过程中逐步加载。这种设计虽然提升了用户体验&#xff0c;但对于爬虫来说&#xff0c;却增加了抓取的难度。传统的爬虫方法&#xff0c;如简单…...

编程日记 2025/10/8 12:15:46

学习Cesium Entities

🌐 Cesium中的Entities系统趣味学习 📊 Entities系统架构流程图 #mermaid-svg-Lkue5O3gYOkEVSbD {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Lkue5O3gYOkEVSbD .error-icon{fill:#552222;}#mermaid-svg-Lku…...

编程日记 2025/9/22 7:23:49

如何减少锁竞争并细化锁粒度以提高 Rust 多线程程序的性能？

在并发编程中&#xff0c;锁&#xff08;Lock&#xff09;是一种常用的同步机制&#xff0c;用于保护共享数据免受多个线程同时访问造成的竞态条件&#xff08;Race Condition&#xff09;。然而&#xff0c;不合理的锁使用会导致严重的性能瓶颈&#xff0c;特别是在高并发场景…...

编程日记 2025/8/25 18:01:55

Logback官方文档翻译章节目录

Logback官方文档翻译章节目录 第一章 Logback简介 第二章 Logback的架构&#xff08;一&#xff09; Logback的架构&#xff08;二&#xff09; Logback的架构&#xff08;三&#xff09; 持续更新中…...

编程日记 2025/8/29 9:11:49

AtCoder Beginner Contest 404 A-E 题解

还是ABC好打~比ARC好打多了&#xff08; 题解部分 A - Not Found 给定你一个长度最大25的字符串&#xff0c;任意输出一个未出现过的小写字母 签到题&#xff0c;map或者数组下标查询一下就好 #include<bits/stdc.h>using namespace std;#define int long long #def…...

编程日记 2025/10/9 1:36:25

【mysql】常用命令

一 系统mysql用户密码查询 1、在工程目录如/usr/local/httpd/下的*.php中查找类似有db.inf的文件 以php为例。 2、在代码文件中确认有数据库连接的的功能实现 例如&#xff1a; $dbconf parse_ini_file(/usr/local/httpd/conf/db.inf); $link mysql_connect($dbconf[d…...

编程日记 2025/9/23 2:05:16

macOS Arduino IDE离线安装ESP8266支持包

其实吧&#xff0c;本来用platformio也是可以的&#xff0c;不过有时候用Arduino IDE可能更快一些&#xff0c;因为以前一直是Arduino.app和Arduino IDE.app共存了一段时间&#xff0c;后来下决心删掉Arduino.app并升级到最新的Arduino IDE.app。删除了旧的支持板级支持包之后就…...

编程日记 2025/10/4 19:08:42

网络靶场基础知识

一、网络靶场的核心概念 网络靶场&#xff08;Cyber Range&#xff09;是一种基于虚拟化和仿真技术的网络安全训练与测试平台&#xff0c;通过模拟真实网络环境和业务场景&#xff0c;为攻防演练、漏洞验证、安全测试和人才培养提供安全可控的实验空间。其核心目标是通过“虚实…...

编程日记 2025/9/25 16:15:55

基于Partial Cross Entropy的弱监督语义分割实战指南

一、问题背景：弱监督学习的挑战 在计算机视觉领域，语义分割任务面临最大的挑战之一是**标注成本**。以Cityscapes数据集为例，单张图像的像素级标注需要约90分钟人工操作。这催生了弱监督学习（Weakly Supervised Learning）的研究方向，其中partial cross entropy loss（部…...

编程日记 2025/6/3 17:10:24

【算法基础】选择排序算法 - JAVA

一、算法基础 1.1 什么是选择排序 选择排序是一种简单直观的排序算法&#xff0c;它的工作原理是&#xff1a;首先在未排序序列中找到最小&#xff08;或最大&#xff09;元素&#xff0c;存放到排序序列的起始位置&#xff0c;然后再从剩余未排序元素中继续寻找最小&#xf…...

编程日记 2025/5/25 15:51:28

电商平台的流量秘密：代理IP在用户行为分析中的角色

在电商江湖中&#xff0c;流量是氧气&#xff0c;用户行为数据是DNA。当你在电商平台点击商品、加入购物车时&#xff0c;背后有一套精密的系统正在分析你的每个动作。而在这套系统的运作中&#xff0c;代理IP正扮演着"隐形推手"的角色——它既是数据采集的"隐身…...

编程日记 2025/8/9 23:45:45

批量清洗与修改 YOLO 标签：删除与替换指定类别

在使用 YOLO 格式的数据进行训练或部署前&#xff0c;常常需要对标签文件进行清洗或修改。本文整理了两种常见场景的 Python 脚本&#xff1a;删除指定类别 和 修改某类为其他类&#xff0c;并支持自动打印检测到该类别的文件名&#xff0c;帮助你快速定位问题数据。 &#x1f…...

编程日记 2025/10/1 5:48:34

Python项目源码57：数据格式转换工具1.0（csv+json+excel+sqlite3）

1.智能路径处理&#xff1a;自动识别并修正文件扩展名&#xff0c;根据转换类型自动建议目标路径&#xff0c;实时路径格式验证&#xff0c;自动补全缺失的文件扩展名。 2.增强型预览功能&#xff1a;使用pandastable库实现表格预览&#xff0c;第三方模块自己安装一下&#x…...

编程日记 2025/10/9 10:26:23

TypeScript 中，属性修饰符

在 TypeScript 中&#xff0c;属性修饰符&#xff08;Property Modifiers&#xff09;是用于修饰类的属性或方法的关键字&#xff0c;它们可以改变属性或方法的行为和访问权限。TypeScript 提供了三种主要的属性修饰符&#xff1a;public、private 和 protected。此外&#xff…...

编程日记 2025/7/4 0:59:19

雷赛伺服电机

ACM0经济 编码器17位&#xff1a; ACM1基本 编码器23位磁编&#xff0c; ACM2通用 编码器24位光电&#xff0c; 插头定义&#xff1a;...

编程日记 2025/10/4 21:13:18

基础编程题目集 6-8 简单阶乘计算

本题要求实现一个计算非负整数阶乘的简单函数。 函数接口定义&#xff1a; int Factorial( const int N ); 其中N是用户传入的参数&#xff0c;其值不超过12。如果N是非负整数&#xff0c;则该函数必须返回N的阶乘&#xff0c;否则返回0。 裁判测试程序样例&#xff1a; #in…...

编程日记 2025/5/26 15:51:24

【deepseek教学应用】001：deepseek如何撰写教案并自动实现word排版

本文讲述利用deepseek如何撰写教案并自动实现word高效完美排版。 文章目录 一、访问deepseek官网二、输入教案关键词三、格式转换四、word进一步排版 一、访问deepseek官网 官网&#xff1a;https://www.deepseek.com/ 进入主页后&#xff0c;点击【开始对话】&#xff0c;如…...

编程日记 2025/9/28 3:33:48

CH32V208GBU6沁恒绑定配对获取静态地址

从事嵌入式单片机的工作算是符合我个人兴趣爱好的,当面对一个新的芯片我即想把芯片尽快搞懂完成项目赚钱,也想着能够把自己遇到的坑和注意事项记录下来,即方便自己后面查阅也可以分享给大家,这是一种冲动,但是这个或许并不是原厂希望的,尽管这样有可能会牺牲一些时间也有哪天原…...

编程日记 2025/9/28 4:25:04

【C/C++】RPC与线程间通信：高效设计的关键选择

文章目录 RPC与线程间通信&#xff1a;高效设计的关键选择1 RPC 的核心用途2 线程间通信的常规方法3 RPC 用于线程间通信的潜在意义4 主要缺点与限制4.1 缺点列表4.2 展开 5 替代方案6 结论 RPC与线程间通信&#xff1a;高效设计的关键选择 在C或分布式系统设计中&#xff0c;…...

编程日记 2025/7/4 4:38:24

跨线程和跨进程通信还有多种方式对比

📊 常见通信机制对比 通信方式跨线程支持跨进程支持同步/异步性能编程复杂度特点与适用场景SendMessage✅✅（同桌面）同步较高（阻塞）低简单窗口通信、控制PostMessage✅✅（同桌面）异步高低通知、事件触发COM/DCOM✅✅同步/异步中中高系统级服务、进程间服务封装Socket✅…...

编程日记 2025/7/6 2:16:29

RT Thread Studio创建软件和硬件RTC工程

MCU型号&#xff1a;STM32F103RET6 一.配置软件模拟RTC 1.生成一个带串口输出的工程文件&#xff0c;新建RT-Thread项目工程文件。 2.查看电路图中的串口输出管脚&#xff0c;根据STMCubeMx软件可知此串口为USART1&#xff0c;选择芯片型号为STM32F103RET6&#xff0c;控制台…...

编程日记 2025/10/1 18:01:37

Oracle EBS AP发票被预付款核算创建会计科目时间超长

背景 由于客户职能部门的水电、通信和物业等等费用统一管理或对接部门报销费，在报销费的时候，用户把所有费用分摊到各个末级部门，形成AP发票行有上千行， 问题症状 1、用户过账时，请求创建会计科目一直执行20多个小时未完成，只能手工强行取消请求。 2、取消请求以后，从后…...

编程日记 2025/7/8 1:29:59

驱动开发硬核特训 · Day 30（下篇）： 深入解析 lm48100q I2C 音频编解码器驱动模型（基于 i.MX8MP）

作者&#xff1a;嵌入式Jerry 视频教程请关注 B 站&#xff1a;“嵌入式Jerry” 一、背景与目标 在本篇中&#xff0c;我们围绕 TI 的 lm48100q 音频编解码器 展开&#xff0c;深入讲解其作为 I2C 外设如何集成至 Linux 内核音频子系统&#xff08;ASoC&#xff09;&#xff0…...

编程日记 2025/6/6 14:32:58

运维--计划任务

计划任务分为一次性和循环性的计划任务 1.date的用法 date 月日时分年 eg:date 100118222023 date:查看时间和日期、修改时间和日期 获取当前日期：date +%F F：日期 获取当前时间：date +%H:%M:%S H：时 M：分 S：秒 获取周几： date +%w w：周 …...

编程日记 2025/6/21 17:05:54

苍穹外卖心得体会

1 登录认证 技术点&#xff1a;JWT令牌技术&#xff08;JSON Web Token&#xff09; JWT&#xff08;JSON Web Token&#xff09;是一种令牌技术&#xff0c;主要由三部分组成&#xff1a;Header头部、Payload载荷和Signature签名。Header头部存储令牌的类型&#xff08;如JW…...

编程日记 2025/10/4 8:15:26

Python爬虫实战：获取jd商城最新5060ti 16g显卡销量排行榜商品数据并做分析，为显卡选购做参考

一、引言 1.1 研究目的 本研究旨在利用 Python 爬虫技术，从京东商城获取 “5060ti 16g” 型号显卡的商品数据，并对这些数据进行深入分析。具体目标包括： 实现京东商城的模拟登录，突破登录验证机制，获取登录后的访问权限。高效稳定地爬取按销量排名前 20 的 “5060ti 16g…...

编程日记 2025/9/14 12:42:06