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

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

news 2026/4/3 19:19:25

目录

  • 一、web标准
  • 二、什么是HTML
  • 三、什么是CSS
  • 四、什么是JavaScript

黑马JAVAWeb飞书在线讲义地址： https://heuqqdmbyk.feishu.cn/wiki/LYVswfK4eigRIhkW0pvcqgH9nWd

一、web标准

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

  1. HTML：负责网页的结构（页面元素和内容）。HTML是一种标记语言，用于定义网页的内容和结构，如标题、段落、列表等。

  2. CSS：负责网页的表现（页面元素的外观、位置等页面样式，如颜色、大小等）。CSS是一种样式表语言，用于控制网页的布局和样式，使网页看起来更美观。

  3. 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标签的特点

  1. 不区分大小写：HTML标签在书写时不区分大小写，但建议使用小写。
  2. 属性值的引用：HTML标签的属性值可以使用单引号（'）或双引号（"），两者都可以。
  3. 语法结构松散：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是完全不同的语言，不论是概念还是设计，但基础语法类似。

组成：

  1. ECMAScript：

    • 规定了JavaScript基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。

  2. BOM（Browser Object Model）：

    • 浏览器对象模型，用于操作浏览器本身，如页面弹窗、地址栏操作、关闭窗口等。

  3. 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>

  1. HTML 结构：

    • 页面包含一个标题 <h1> 和一个按钮 <button>。
    • 标题的 id 属性设置为 greeting，以便在JavaScript中引用。

  2. JavaScript 代码：

    • 定义了一个函数 changeGreeting()。
    • 使用 document.getElementById('greeting') 获取标题元素。
    • 使用 innerHTML 属性更改标题的内容。

  3. 事件处理：

    • 按钮的 onclick 属性绑定到 changeGreeting() 函数。
    • 当用户点击按钮时，会触发该函数，从而更改标题的内容。

相关文章：

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

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

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

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

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

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

卡通风格渲染

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

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

ubuntu各分区的用途

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

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

理解STC15F2K60S2单片机的最小电路

一、STC15F2K60S2与51单片机的区别 STC15F2K60S2和51单片机虽然都基于8051内核&#xff0c;但在多个方面存在显著区别&#xff1a; 1. CPU性能&#xff1a; - STC15F2K60S2&#xff1a;采用增强型8051 CPU&#xff0c;1T单时钟/机器周期&#xff0c;速度比普通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 平台架构图 &#xff08;架构版本&#xff09; 4.安装Docker CentOS | Docker Docs 1.确定你是CentOS7及以上版本 …...

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

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

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

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

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

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

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

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

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

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

贪心算法汇总

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

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

H266/VVC 帧内预测中 ISP 技术

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

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

PyTorch 中的 Dropout 解析

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

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

集中式架构vs分布式架构

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

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

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

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

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

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

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

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

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

文章目录 Pre概述业务流程需求分析的困境统一语言建模事件风暴会议什么是事件风暴&#xff08;Event Storming&#xff09;事件风暴会议 总结 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卡照片数据不小心全部删除了怎么办？有什么方法恢复吗？

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

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

RAG 测评基线

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

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

电商 SEO 优化与社交媒体营销的关系是什么_电商 SEO 优化效果如何评估

电商 SEO 优化与社交媒体营销的关系 在当今互联网时代&#xff0c;电子商务&#xff08;电商&#xff09;已成为全球经济的重要组成部分。电商 SEO 优化和社交媒体营销是两种互补的推广手段&#xff0c;它们之间的关系不仅丰富了电商平台的推广策略&#xff0c;也为企业带来了…...

编程新知 2026/4/3 18:44:21

【Python 3.14 JIT性能调优权威指南】：20年CPython核心开发者亲授3大接入瓶颈突破法

第一章&#xff1a;Python 3.14 JIT编译器的演进脉络与接入价值Python 3.14 引入了实验性但高度集成的内置 JIT&#xff08;Just-In-Time&#xff09;编译器&#xff0c;标志着 CPython 运行时首次在官方发行版中提供可生产级启用的动态编译能力。该 JIT 并非独立运行时或第三方…...

编程新知 2026/4/3 18:42:20

BCI Competition IV 2a数据集深度解析：脑机接口EEG信号处理实战指南

BCI Competition IV 2a数据集深度解析&#xff1a;脑机接口EEG信号处理实战指南 【免费下载链接】bcidatasetIV2a This is a repository for BCI Competition 2008 dataset IV 2a fixed and optimized for python and numpy. This dataset is related with motor imagery 项目…...

编程新知 2026/4/3 17:59:28

2026届学术党必备的六大降重复率工具推荐榜单

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 基于自然语言处理技术的智能应用是AI写作工具&#xff0c;它能辅助用户完成文本生成、语法纠…...

编程新知 2026/4/3 17:43:18

封不住！Claude Code爆改Python版加冕最快10万星，且clone且珍惜

Jay 发自 凹非寺量子位 | 公众号 QbitAI还活着&#xff01;两天过去&#xff0c;Claude Code源码克隆项目不仅健在&#xff0c;还成了史上最快10万星项目。太恐怖了&#xff0c;揽星速度比之前的OpenClaw还要猛&#xff0c;火到连作者的妈妈都出来喊话&#xff0c;催他赶紧去申…...

编程新知 2026/4/3 17:19:03

机械键盘连击终结者：三分钟搞定键盘“鬼键“问题

机械键盘连击终结者&#xff1a;三分钟搞定键盘"鬼键"问题 【免费下载链接】KeyboardChatterBlocker A handy quick tool for blocking mechanical keyboard chatter. 项目地址: https://gitcode.com/gh_mirrors/ke/KeyboardChatterBlocker 还在为机械键盘的&…...

编程新知 2026/4/3 17:14:49

Ai2Psd终极指南：如何将Illustrator矢量图层完美导出到Photoshop

Ai2Psd终极指南&#xff1a;如何将Illustrator矢量图层完美导出到Photoshop 【免费下载链接】ai-to-psd A script for prepare export of vector objects from Adobe Illustrator to Photoshop 项目地址: https://gitcode.com/gh_mirrors/ai/ai-to-psd 还在为AI到PSD的格…...

编程新知 2026/4/3 15:57:44

游戏脚本助手，电脑点击器，脚本自动点击识图找图_无限试用版

熊猫精灵脚本助手 分类功能项其他功能管理、插件、生成、中控、进程守护、护盾配置、坐标工具脚本设置窗口设置、绑定设置、运行设置、变量设置、程序设置图色识别Yolo识别、找图识别、点色找色文字识别ocr识别找字、字库识别、验证码识别键鼠操作鼠标操作、键盘操作、录制脚本…...

编程新知 2026/4/3 15:55:41

每日一题 力扣 3418. 机器人可以获得的最大金币数 力扣 215. 数组中的第K个最大元素 动态规划 TopK问题 C++ 题解

文章目录力扣 3418. 机器人可以获得的最大金币数题目描述思路简介代码实现复杂度分析力扣 215. 数组中的第K个最大元素题目描述思路简介代码实现复杂度分析踩坑记录力扣 3418. 机器人可以获得的最大金币数 题目描述 力扣 3418. 机器人可以获得的最大金币数 示例 1&#xff1…...

编程新知 2026/4/3 15:49:36

AI 模型训练中的梯度裁剪技巧

AI模型训练中的梯度裁剪技巧 在深度学习的模型训练过程中&#xff0c;梯度爆炸是一个常见的问题&#xff0c;它会导致模型参数更新过大&#xff0c;进而使训练过程变得不稳定甚至无法收敛。为了解决这一问题&#xff0c;梯度裁剪&#xff08;Gradient Clipping&#xff09;技术…...

编程新知 2026/4/3 15:41:32