跳到主要内容

网页设计基础：HTML、CSS 和 JavaScript 如何工作？

提示
  1. 网页设计的三大核心技术：HTML (超文本标记语言) 用于构建网页内容的结构；CSS (级联样式表) 用于定义网页的样式，如布局、颜色和字体；JavaScript (JS) 用于添加网页的交互性和动态特性。
  2. HTML的作用：HTML 使用各种标签定义网页上的元素，如标题、段落和链接，提供网页的基本结构。
  3. CSS和JavaScript的结合：CSS 用于美化网页，改变元素的外观，而 JavaScript 用于实现网站的互动功能，如响应按钮点击事件。

网页设计指的是创建和设计网站外观的过程。构建现代网站和网络应用程序有 3 种基本技术，它们是：

  • HTML
  • CSS
  • JS

这些技术共同为网页提供结构、样式和交互性。

HTML​

HTML（超文本标记语言）是一种用于构建和组织网页内容的标记语言。它使用各种标签来定义页面上的不同元素，如标题、段落和链接。让我们看一个例子：

<!doctype html>
<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    <h1>mashangxue123</h1>
    <p>我们创建易于理解的编程教程。</p>
  </body>
</html>

浏览器输出

HTML 运作示例。

这里，我们有一个 HTML 文档，其中：

  • <h1> - 文档的标题
  • <p> - 文档的段落

上述代码中的标题和段落标签有助于创建网页结构。

CSS​

CSS（级联样式表）是一种样式表语言。它用于设置 HTML 文档的样式。

它指定了 HTML 元素的外观，包括它们的布局、颜色和字体。我们使用 <style> 标签在 HTML 文档中添加 CSS。让我们为前面的 HTML 代码添加一些 CSS。

<!doctype html>
<html>
  <head>
    <title>页面标题</title>
    <style>
      h1 {
        color: blue;
      }
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>mashangxue123</h1>
    <p>我们创建易于理解的编程教程。</p>
  </body>
</html>

**浏览器输出 **

CSS 运作示例。

在上述代码中，我们对 <h1> 和 <p> 标签应用了 CSS 来改变它们的文本颜色。注意这段代码，

h1 { color: blue; }

这段 CSS 代码将所有 <h1> 元素的文本颜色变为 蓝色。

类似地，

p { color: red; }

这段 CSS 代码将所有 <p> 元素的文本颜色变为 红色。

JavaScript​

JavaScript (JS) 是一种使网站变得互动和动态的编程语言。它主要用于 Web 浏览器中，用来创建下拉菜单、表单验证、互动地图和网站上的其他元素。

我们将 JavaScript 与 HTML 和 CSS 一起使用，创建更加动态和用户友好的网站。我们使用 <script> 标签将 JS 添加到 HTML 中。例如，

<!doctype html>
<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    <button onclick="displayAlert()">点击我！</button>

    <script>
      function displayAlert() {
        alert("从 mashangxue123 Pro 学习编程");
      }
    </script>
  </body>
</html>

浏览器输出（点击按钮前）

JS 运作示例。

**浏览器输出（点击按钮后） **

JS 运作示例。

在上述示例中，我们创建了一个点击时调用 displayAlert() 的按钮。

注意这段代码，

<script>
  function displayAlert() {
    alert("从 mashangxue123 Pro 学习编程");
  }
</script>

这个函数简单地显示带有消息 从 mashangxue123 Pro 学习编程 的警告框。

HTML、CSS 和 JavaScript 如何协同工作？​

让我们看一个 HTML、CSS 和 JS 协同工作为用户提供友好网页体验的示例。看一个例子，

<html>
  <head>
    <title>我的网页</title>
    <style>
      body {
        text-align: center;
      }
      h1 {
        color: #333;
      }
    </style>
  </head>
  <body>
    <h1>你好，世界！</h1>
    <p>这是一个简单的 HTML、CSS 和 JavaScript 网页。</p>
    <button onclick="displayAlert()">点击我！</button>
    <script>
      function displayAlert() {
        alert("你好，世界！");
      }
    </script>
  </body>
</html>

浏览器输出（点击按钮前）

HTML、CSS 和 JS 运作示例。

浏览器输出（点击按钮后）

HTML、CSS 和 JS 运作示例。

在上述示例中，我们创建了一个简单的网页。我们现在可以学习更多的 HTML、CSS 和 JS 来创建更好的网站。

最后于 更新