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

news2025/1/15 11:12:50

一、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() 函数。
- 当用户点击按钮时，会触发该函数，从而更改标题的内容。