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

简要认识JAVAWeb技术三剑客：HTMLCSSJavaScript

news 2026/1/2 12:33:41

一、web标准

Web标准也称网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Consortium，万维网联盟）负责制定。它主要包括三个组成部分：

HTML：负责网页的结构（页面元素和内容）。HTML是一种标记语言，用于定义网页的内容和结构，如标题、段落、列表等。
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如颜色、大小等）。CSS是一种样式表语言，用于控制网页的布局和样式，使网页看起来更美观。
JavaScript：负责网页的行为（交互效果）。JavaScript是一种编程语言，用于实现网页上的动态效果和交互功能，如响应用户操作、动画效果等。

通过这三种技术的结合使用，可以创建出结构清晰、样式美观且具有交互性的网页。
在这里插入图片描述

二、什么是HTML

什么是HTML

HTML（HyperText Markup Language）是一种超文本标记语言。它主要用于创建和设计网页内容。

超文本

超文本：超越了普通文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
- 例如，你可以使用HTML在网页中插入图片、播放音频或视频，甚至嵌入其他网页。

标记语言

标记语言：由标签（<标签名>）构成的语言。
- HTML中的标签通常成对出现，如<p>和</p>用于表示段落，<img>用于插入图片等。
- 这些标签告诉浏览器如何显示页面上的内容。
- HTML语法参考网站

在这里插入图片描述

示例代码

<!DOCTYPE html>
<html>
<head><title>我的第一个HTML页面</title>
</head>
<body><h1>欢迎来到我的网站！</h1><p>这是一个简单的HTML页面。</p><img src="example.jpg" alt="示例图片"><audio controls><source src="example.mp3" type="audio/mpeg">您的浏览器不支持音频元素。</audio><video controls width="320" height="240"><source src="example.mp4" type="video/mp4">您的浏览器不支持视频元素。</video>
</body>
</html>

<!DOCTYPE html>：声明文档类型为HTML5。
<html>：HTML文档的根元素。
<head>：包含文档元数据，如标题。
<title>：设置页面的标题。
<body>：包含页面的实际内容。
<h1>：一级标题。
<p>：段落。
<img>：插入图片。
<audio>：插入音频文件。
<video>：插入视频文件。

通过这些标签，HTML可以创建丰富的网页内容，并且可以通过CSS和JavaScript进一步增强页面的功能和样式。

HTML标签的特点

不区分大小写：HTML标签在书写时不区分大小写，但建议使用小写。
属性值的引用：HTML标签的属性值可以使用单引号（'）或双引号（"），两者都可以。
语法结构松散：HTML的语法结构相对松散，但这并不意味着可以随意书写。为了代码的可读性和规范性，建议遵循一定的书写规范。

三、什么是CSS

CSS（Cascading Style Sheet）是一种层叠样式表，用于控制网页的样式（表现）。它允许开发者定义页面元素的外观，如颜色、字体、布局等，从而使得网页内容更加美观和易读。

主要特点

样式控制：CSS可以控制HTML元素的样式，包括颜色、字体、边框、背景等。
分离内容与样式：通过将样式从HTML内容中分离出来，CSS使得网页更容易维护和更新。
层叠性：多个CSS规则可以层叠在一起，浏览器会根据优先级决定最终应用哪个规则。
继承性：子元素会继承父元素的部分样式属性。

示例代码

/* CSS 样式 */
body {background-color: lightblue;
}h1 {color: navy;margin-left: 20px;
}p {font-family: verdana;font-size: 20px;
}

<!DOCTYPE html>
<html>
<head><title>我的第一个CSS页面</title><style>body {background-color: lightblue;}h1 {color: navy;margin-left: 20px;}p {font-family: verdana;font-size: 20px;}</style>
</head>
<body><h1>欢迎来到我的网站！</h1><p>这是一个使用CSS样式的HTML页面。</p>
</body>
</html>

body：设置整个页面的背景颜色为浅蓝色。
h1：设置一级标题的颜色为海军蓝，并且左边距为20像素。
p：设置段落的字体为Verdana，字体大小为20像素。

通过这些CSS样式，可以有效地控制网页的外观，使其更加美观和专业。

在这里插入图片描述

四、什么是JavaScript

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，主要用于控制网页行为，实现页面的交互效果。JavaScript和Java是完全不同的语言，不论是概念还是设计，但基础语法类似。

组成：

ECMAScript：
- 规定了JavaScript基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
BOM（Browser Object Model）：
- 浏览器对象模型，用于操作浏览器本身，如页面弹窗、地址栏操作、关闭窗口等。
DOM（Document Object Model）：
- 文档对象模型，用于操作HTML文档，如改变标签内的内容、改变标签内字体样式等。

示例代码

HTML 文件 (index.html)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript Example</title>
</head>
<body><h1 id="greeting">Hello, World!</h1><button onclick="changeGreeting()">Click Me!</button><script>function changeGreeting() {var greeting = document.getElementById('greeting');greeting.innerHTML = 'Welcome to JavaScript!';}</script>
</body>
</html>

HTML 结构：
- 页面包含一个标题 <h1> 和一个按钮 <button>。
- 标题的 id 属性设置为 greeting，以便在JavaScript中引用。
JavaScript 代码：
- 定义了一个函数 changeGreeting()。
- 使用 document.getElementById('greeting') 获取标题元素。
- 使用 innerHTML 属性更改标题的内容。
事件处理：
- 按钮的 onclick 属性绑定到 changeGreeting() 函数。
- 当用户点击按钮时，会触发该函数，从而更改标题的内容。

简要认识JAVAWeb技术三剑客：HTMLCSSJavaScript

目录一、web标准二、什么是HTML三、什么是CSS四、什么是JavaScript 黑马JAVAWeb飞书在线讲义地址： https://heuqqdmbyk.feishu.cn/wiki/LYVswfK4eigRIhkW0pvcqgH9nWd 一、web标准 Web标准也称网页标准，由一系列的标准组成，大部分由W3C&…...

编程日记 2025/1/15 11:30:28

C# 修改项目类型应用程序程序改类库

初级代码游戏的专栏介绍与文章目录-CSDN博客我的github：codetoys，所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。这些代码大部分以Linux为目标但部分代码是纯C的，可以在任何平台上使用。源码指引：github源…...

编程日记 2025/1/15 11:29:27

卡通风格渲染

1、卡通风格渲染是什么卡通风格渲染（Cartoon Shading），也称为非真实感渲染（NPR）或卡通渲染（Toon Shading） 主要目的是使3D模型看起来更像手绘的二维卡通或漫画风格，而不是逼真写实…...

编程日记 2025/1/15 11:28:26

ubuntu各分区的用途

在 Ubuntu 中，分区是将硬盘划分为多个逻辑部分的过程，每个分区可以用于不同的用途。合理分区可以提高系统性能、数据安全性和管理效率。以下是 Ubuntu 中常见分区及其用途的详细说明： 1. 根分区 (/) 用途：存放操作系统核心文件、…...

编程日记 2025/1/15 11:26:24

理解STC15F2K60S2单片机的最小电路

一、STC15F2K60S2与51单片机的区别 STC15F2K60S2和51单片机虽然都基于8051内核，但在多个方面存在显著区别： 1. CPU性能： - STC15F2K60S2：采用增强型8051 CPU，1T单时钟/机器周期，速度比普通8051快8-12倍…...

编程日记 2025/1/15 11:25:22

Docker官网安装

1.官网官方文档 https://www.docker.com/ Docker Hub官网镜像 https://hub.docker.com/ 2.Docker 的三要素 1、镜像 2、容器 3、仓库小总结 3.Docker 平台架构图 （架构版本） 4.安装Docker CentOS | Docker Docs 1.确定你是CentOS7及以上版本 …...

编程日记 2025/1/15 11:24:21

成功案例分享 — 芯科科技助力涂鸦智能打造Matter over Thread模块，简化Matter设备开发

芯科科技（Silicon Labs）的愿景之一是让开发者每天都能够更轻松地开发无线物联网（IoT）。特别是在拥有相同愿景的合作伙伴的帮助下，我们每天都在取得进步。但是要想弥合知识水平和物联网开发之间的差距仍会面临一定的挑战…...

编程日记 2025/1/15 11:21:19

基于Python机器学习、深度学习技术提升气象、海洋、水文领域实践应用-以ENSO预测为例讲解

1. 背景与目标 ENSO（El Nio-Southern Oscillation）是全球气候系统中最显著的年际变率现象之一，对全球气候、农业、渔业等有着深远的影响。准确预测ENSO事件的发生和发展对于减灾防灾具有重要意义。近年来，深度学习技术在气象领域…...

编程日记 2025/1/15 11:20:17

【Rust自学】12.6. 使用TDD(测试驱动开发)开发库功能

12.6.0. 写在正文之前第12章要做一个实例的项目——一个命令行程序。这个程序是一个grep(Global Regular Expression Print)，是一个全局正则搜索和输出的工具。它的功能是在指定的文件中搜索出指定的文字。这个项目分为这么几步： 接收命令行参数读取…...

编程日记 2025/1/15 11:18:14

贪心算法汇总

1.贪心算法贪心的本质是选择每一阶段的局部最优，从而达到全局最优。如何能看出局部最优是否能推出整体最优靠自己手动模拟，如果模拟可行，就可以试一试贪心策略，如果不可行，可能需要动态规划。如何验证可不可以…...

编程日记 2025/1/15 11:17:13

H266/VVC 帧内预测中 ISP 技术

帧内子划分 ISP ISP 技术是在 JVET-2002-v3 提案中详细介绍其原理，在 VTM8 中完整展示算法。ISP是线基内预测（LIP）模式的更新版本，它改善了原始方法在编码增益和复杂度之间的权衡，ISP 算法的核心原理就是利用较近的像…...

编程日记 2025/1/15 11:15:09

PyTorch 中的 Dropout 解析

文章目录一、Dropout 的核心作用数值示例：置零与缩放**训练阶段****推理阶段** 二、Dropout 的最佳使用位置与具体实例解析1. 放在全连接层后2. 卷积层后的使用考量3. BatchNorm 层与 Dropout 的关系4. Transformer 中的 Dropout 应用三、如何确定 Dropout 的位置…...

编程日记 2025/1/15 11:14:07

集中式架构vs分布式架构

一、集中式架构如何准确理解集中式架构 1. 集中式架构的定义集中式架构是一种将系统的所有计算、存储、数据处理和控制逻辑集中在一个或少数几个节点上运行的架构模式。这些中央节点（服务器或主机）作为系统的核心，负责处理所有用户请求和…...

编程日记 2025/1/15 11:11:03

微服务主流框架和基础设施介绍

概述微服务架构的落地需要解决服务治理问题，而服务治理依赖良好的底层方案。当前，微服务的底层方案总的来说可以分为两种：微服务SDK （微服务框架）和服务网格。微服务框架运行原理： 应用程序通过接入 SD…...

编程日记 2025/1/15 11:08:57

4.5.1 顺序查找、折半查找（二分查找）

文章目录基本概念顺序查找折半查找（二分查找）索引顺序查找基本概念查找表：由同类元素构成的集合。查找表按照是否可以修改数据表，可分为静态查找表、动态查找表。静态查找表：不能修改数据表，可进行查询…...

编程日记 2025/1/15 11:06:49

DDD - 微服务设计与领域驱动设计实战(上)_统一建模语言及事件风暴会议

文章目录 Pre概述业务流程需求分析的困境统一语言建模事件风暴会议什么是事件风暴（Event Storming）事件风暴会议总结 Pre DDD - 软件退化原因及案例分析 DDD - 如何运用 DDD 进行软件设计 DDD - 如何运用 DDD 进行数据库设计 DDD - 服务、实体与值对…...

编程日记 2025/1/15 11:04:42

基于Piquasso的光量子计算机的模拟与编程

一、引言在科技飞速发展的当下，量子计算作为前沿领域，正以前所未有的态势蓬勃崛起。它凭借独特的量子力学原理，为解决诸多经典计算难以攻克的复杂问题提供了全新路径。从优化物流配送网络，以实现资源高效调配，到药物分子结构的精准模拟，加速新药研发进程；从金融风险的…...

编程日记 2025/1/15 11:03:38

44_Lua迭代器

在Lua中，迭代器是一种用于遍历集合元素的重要工具。掌握迭代器的使用方法，对于提高Lua编程的效率和代码的可读性具有重要意义。 1.迭代器概述 1.1 迭代器介绍迭代器是一种设计模式，它提供了一种访问集合元素的方法，而不需要暴露其底层结构。在Lua中，迭代器通常以一个函…...

编程日记 2025/1/15 10:58:28

相机SD卡照片数据不小心全部删除了怎么办？有什么方法恢复吗？

前几天，小编在后台友收到网友反馈说他在整理相机里的SD卡，原本是想把那些记录着美好瞬间的照片导出来慢慢欣赏。结果手一抖，不小心点了“删除所有照片”，等他反应过来，屏幕上已经显示“删除成功”。那一刻，…...

编程日记 2025/1/15 10:57:17

RAG 测评基线

RAG (Retrieval-Augmented Generation) 概述 RAG 是一种大模型的技术，旨在通过将信息检索与生成模型（如 GPT）结合，增强模型的生成能力。传统的生成模型通常依赖于内部的训练数据来生成答案，但这种方式往往存在回答准确…...

编程日记 2025/1/15 10:55:13

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/11/1 5:21:39

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/12/27 23:53:59

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

编程新知 2025/12/26 0:50:26

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户，但你不希望用 root 权限运行 ns-3（这是对的，ns3 工具会拒绝 root），你可以按以下方法创建一个非 root 用户账号并切换到它运行 ns-3。一次性解决方案：创建非 roo…...

编程新知 2025/9/11 11:00:29

C++ 基础特性深度解析

目录引言一、命名空间（namespace） C 中的命名空间与 C 语言的对比二、缺省参数 C 中的缺省参数与 C 语言的对比三、引用（reference） C 中的引用与 C 语言的对比四、inline（内联函数…...

编程新知 2025/10/17 0:18:22

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。主要功能：服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/12/31 16:08:24

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/12/31 5:06:53

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识主要参考博文： 一文入门汽车毫米波雷达基本原理 ：https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2026/1/1 10:04:33

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端（即页面 JS / Web UI）与客户端（C 后端）的交互机制，是 Chromium 架构中非常核心的一环。下面我将按常见场景，从通道、流程、技术栈几个角度做一套完整的分析，特别适合你这种在分析和改…...

编程新知 2026/1/1 5:07:41

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里，Bessie 有一个烤箱，可以在 t C t_C tC 的时间内生产一块饼干或在 t M t_M tM 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC,tM≤109)。由于空间…...

编程新知 2025/7/7 14:36:50

目录

一、web标准

二、什么是HTML

三、什么是CSS

四、什么是JavaScript

相关文章：