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

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

news 2025/11/13 14:10:17

目录

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

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2025/9/22 20:29:32

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/10/23 14:31:06

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2025/11/13 13:42:14

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/9/17 19:16:20

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/11/8 6:28:09

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2025/11/12 8:21:20

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/11/12 11:31:15

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2025/11/12 13:18:03

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2025/11/12 15:00:55