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

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

news 2025/6/15 17:52:03

目录

  • 一、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

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/6/12 21:22:09

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/6/15 4:15:39

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/6/15 1:40:36

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/6/15 14:07:28

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/6/15 13:07:03

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/6/12 15:27:14

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2025/6/15 9:45:47

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2025/6/15 2:59:25

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

编程新知 2025/6/15 2:15:04

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

编程新知 2025/6/15 0:27:59