2022年8月9日：使用 ASP.NET Core 为初学者构建 Web 应用程序--使用 HTML、CSS 和 Javascript 构建简单的网站

最新推荐文章于 2024-07-28 14:03:24 发布

DXB2021

最新推荐文章于 2024-07-28 14:03:24 发布

阅读量1.5k

点赞数

分类专栏： .NET ASP.NET C# 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/DXB2021/article/details/126246937

版权

C# 同时被 3 个专栏收录

48 篇文章 37 订阅

订阅专栏

ASP.NET

13 篇文章 0 订阅

订阅专栏

.NET

5 篇文章 0 订阅

订阅专栏

通过了解如何使用 HTML、CSS 和 JavaScript 构建网站开始 Web 开发，以及使用浏览器中的开发人员工具检查你的工作。

设置Web应用的结构

为网站新建一个文件夹

打开 Visual Studio Code 时，会打开“开始”页面。请注意，可以在“开始”列表中创建新文件或打开文件夹。

如果看不到“开始”页面，可以通过选择菜单上的“帮助”>“开始”来显示它。（或者，可以通过使用键盘快捷方式 Shift+Ctrl+P（在 Windows 计算机上）或 Shift+Cmd+P（在 macOS 上）打开“命令面板”，或者通过从 Visual Studio Code 菜单中选择“查看”>“命令面板”来显示“开始”页面。当显示“命令面板”时，在搜索字段中输入“>帮助: 开始”，打开“开始”页面。）

在“开始”页面的“开始”列表中选择“打开文件夹”，或者从 Visual Studio Code 菜单中选择“文件”>“打开文件夹”。

打开文件夹时，操作系统会提供用于创建新文件夹的菜单选项。

导航到要在其中为网站创建新文件夹的位置，然后选择“新建文件夹”。

将文件夹命名为 simple-website，然后选择“选择文件夹”。

创建一些文件

创建新文件时，从菜单中选择“文件”>“新建文件”，或在 Windows 上使用 Control+N，或在 macOS 上使用 Command+N。

在 Windows 上选择 Control+S，或在 macOS 上选择 Command+S 来保存文件。

输入 index.html 作为文件名，然后选择“保存”。

重复上述步骤，再创建两个文件，main.css 和 app.js。完成后，在 Visual Studio Code 资源管理器中，会看到项目文件夹 simple-website 包含以下文件，它们构成网站：

index.html
main.css
app.js

生成网站时，可以在单个文件中包括所有 HTML、CSS 样式和 JavaScript 代码。

使用 HTML 文件作为内容结构，使用 CSS 文件进行样式设置，并使用 JavaScript 文件实现交互性。

安装扩展或包

对于 Web 开发，现在只需“open in browser”。此扩展可帮助在默认浏览器中快速打开网站，而不是将文件 URL 复制并粘贴到浏览器中。

选择垂直“活动栏”（左窗格）上的“扩展”图标。

在搜索框中输入“打开方式”，然后选择 TechER 发布的“在浏览器中打开”扩展。

选择“安装”，Visual Studio Code 将安装扩展。

单击“活动栏”中的顶部图标，或在 Windows 上使用 Control+Shift-E，或在 macOS 上使用 Command+Shift-E 切换回“资源管理器”。

将基本HTML添加到Web应用

目标是使用超文本标记语言 (HTML) 来描述客户的浏览器应显示的 Web 页面。

添加一些HTML代码

在 Visual Studio Code 中打开你的网站，然后在“资源管理器”中选择 index.html 文件来打开 index.html 文件。

在 index.html 页中键入 html:5，然后选择 Enter。 HTML5 模板代码将添加到文件中。

在 Windows 上选择 Control+S，或在 macOS 上选择 Command+S 来保存文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

doctype<!DOCTYPE html> 指示此 HTML 文档包含 HTML5 代码。

meta 标记表明通常不会对查看者可见的元数据信息，除非查看者查看浏览器中的源代码。元元素或标记提供关于网页的描述性信息。

编辑标头

HTML 代码中的 <head> 元素包含浏览器标签页中不可见的网站相关信息。

元数据定义有关 HTML 文档的数据，例如字符集、脚本以及在其中打开网页的浏览器。

网页的标题显示在浏览器窗口的顶部，在某些方面具有重要意义。

在编辑器中，修改 <title> 元素，使其类似于以下示例。

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Simple website</title>
...

在“VS Code”编辑器中，在 <title> 元素后面添加一个空白行，键入 link，然后选择 Enter。 VS Code 应将以下行添加到 index.html 文件中。

<link rel="stylesheet" href="">

将 href= 更新为 href="main.css"，并选择 Control+S (Windows) 或 Command+S (macOS) 保存文件。

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Task List</title>
  <link rel="stylesheet" href="main.css">
</head>
...

接下来立即开始填写 <body> 元素。

<body> 元素包含你的客户在其浏览器中可见的网站内容。

添加一个标题<h1>元素，后跟一个段落<p>元素，然后创建一个包含多个列表项<li>元素的无序列表<ul>。

编写代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

ID 属性（在 <p> 元素中使用）可用于样式化单个元素，而类属性（在 <li> 元素中使用）用于样式化同一类的所有元素。

在继续下一步之前，请确保选择 Control+S 或 Command+S 保存文件。

ID 属性（在 <p> 元素中使用）可用于样式化单个元素，而类属性（在 <li> 元素中使用）用于样式化同一类的所有元素。

在继续下一步之前，请确保选择 Control+S 或 Command+S 保存文件。

用浏览器打开

若要使用 Visual Studio Code 进行预览，请右键单击 index.html 并选择“使用默认浏览器打开”，或选择 index.html 文件并使用键盘快捷方式 Alt+B。

使用开发人员工具查看页面

右键单击网页并选择“检查”以打开开发人员工具，或尝试以下快捷方式：

按“开发人员工具”的键盘快捷方式 F12。
在 Windows 和 Linux 上按 Ctrl+Shift+I，在 Mac 上按 Option+Command+I。

这些键盘快捷方式适用于 Microsoft Edge、Chrome 和 Firefox。

选择“元素”选项卡。

将鼠标移到“元素”选项卡中显示的 HTML 元素上，然后展开各种元素的内容。

开发人员工具中的“元素”选项卡将显示在浏览器中呈现的文档对象模型 (DOM)。调试时，查看浏览器如何解释你的源代码通常十分重要。

检查浏览器中的页面可提供各种有用信息，有助于排查问题。

使用CSS设置HTML样式

使用级联样式表 (CSS) 可以指定页面外观。基本思想就是定义在 HTML 页面中使用的元素的样式。 HTML 元素定义内容，而 CSS 样式定义此内容的样式。

外部CSS

从 HTML 链接到外部 CSS 文件。

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

外部 CSS 的一个优势就是多个 HTML 页面可以链接到同一 CSS 文件。如果对 CSS 进行了更改，则每个页面的样式都将更新。将 HTML 文件用于页面内容、将 CSS 文件用于样式设置、将 JavaScript 文件用于交互称为“关注点分离”。

CSS规则

CSS 规则是你将样式应用于 HTML 元素的方式。 CSS 规则有一个选择器，用于表示应将样式应用于哪个或哪些元素。

在 Visual Studio Code 中，打开 main.css 文件并输入以下内容。

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

上面的代码片段包含两个规则。每个规则都有：

一个选择器。 body 和 ul 是两个规则的选择器，用于选择样式应用于哪些元素。
左大括号 ({)。
一个样式声明列表，用于确定所选元素的样式。
右大括号 (})。

例如，ul 选择器选择页面中的 <ul> HTML 元素，以对其应用样式。声明为 font-family: helvetica 并确定样式应该是什么。 “属性名称”为 font-family，“值”为 helvetica。

选择器

ID 和类选择器使你能够将样式应用于 HTML 中的自定义属性名称。 ID 用于设置一个元素的样式，而类可用于设置多个元素的样式。

将以下代码复制到 CSS 文件中，放在你先前添加的 ul 选择器的右大括号后面。

li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}

前面的代码包含三个 CSS 规则，最后两个规则使用自定义属性来选择元素：.list 和 #msg。

.list 是一个类选择器。每个包含设置为 list 的 class 属性的 HTML 元素都将获得在此选择器中定义的样式。
#msg 是一个 ID 选择器。将其 id 属性设置为 msg 的 HTML 元素将获得在此选择器中定义的样式。

用于选择器的名称可以是任意的，只要与 HTML 中的已定义名称匹配即可。

在 Windows 上选择 Control+S，或在 macOS 上选择 Command+S 来保存工作。

在浏览器查看

若要使用 VS Code 进行预览，请右键单击文件名 index.html，然后选择“使用默认浏览器打开”。

要重新加载标签页，请按 F5，这是刷新键盘快捷方式，或者在 Windows 或 Linux 上按 Ctrl+R，在 Mac 上按 Command+R。

添加浅色主题

在 CSS 文件中，将下面的代码添加到文件末尾。

.light-theme {
  color: #000000;
  background: #00FF00;
}

#000000 指定字体颜色为黑色，#00FF00 指定背景色为绿色。

打开浏览器查看后，不会绿色的。

在 HTML 文件中，更新类名为 light-theme 的 <body> 元素，以使浅色主题的类选择器正确应用样式。

<body class="light-theme">

在浏览器中查看

查看应用的CSS

在浏览器视图中，打开“开发人员工具”。

右键单击页面并选择“检查”，或者选择快捷方式 F12 或 Ctrl+Shift+I。

选择“元素”选项卡，然后在“元素”选项卡中选择“样式”选项卡（默认应该已经选中）。

将鼠标悬停在各种 HTML 元素上，当你选择一些元素时，请注意开发人员工具如何在“样式”中显示应用到它们的样式。

选择 <body> 元素。请注意应用的 light-theme。

选择无序列表 <ul> 元素。请注意 font-family: helvetica; 的自定义样式，该样式将覆盖 <body> 元素的样式。

添加深色主题

对于深色主题，需要设置基础结构以为下一个单元做好准备，在该单元中，将在网页上启用主题切换。

若要向 CSS 添加对深色主题的支持，请使用以下步骤。

向 CSS 文件顶部的页根添加一些常量。

:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

:root 选择器表示 HTML 页面中的 <html> 元素。对于此类任务，最佳做法是使用 :root 选择器在 CSS 规则中定义一组全局 CSS 变量。

在 CSS 文件的末尾，将 light-theme 规则替换为以下代码，以更新它并添加 dark-theme 选择器。

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

在上面的代码中，定义了 bg 和 fontColor 这两个新变量，它们指定背景和字体颜色。这些变量使用 var 关键字将其属性值设置为之前在 :root 选择器中指定的变量。

在 CSS 文件中，将当前的 body 选择器替换为以下代码。

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

使用 body 选择器来设置 background 和 color 属性，并且由于网页上可见的元素都在 <body> 元素内，它们将继承 <body> 上设置的颜色。

在 CSS 文件中，使用 #msg 和 ul 选择器删除规则，让它们也从 <body> 继承相同的字体。

body {
    background: var(--bg);
    color: var(--fontColor);
    font-family: helvetica;
  }


li {
    list-style: circle;
  }
  
  .list {
    list-style: square;
  }
  


  .light-theme {
    --bg: var(--green);
    --fontColor: var(--black);
  }

  .dark-theme {
    --bg: var(--black);
    --fontColor: var(--green);
  }

  :root {
    --green: #00FF00;
    --white: #FFFFFF;
    --black: #000000;
  }

要查看深色主题，请打开文件 index.html，并手动将 <body> 类属性中的默认主题编辑为深色主题 (dark-theme)，然后在浏览器中重新加载页面。

编辑 <body> 类属性以将默认值切换回浅色主题。

使用Javascript添加交互性

JavaScript（或 ECMAScript）是有助于向网页添加交互性的编程语言。

链接到JavaScript

与 CSS 一样，你可以将 JavaScript 直接添加到 HTML 文件中，但推荐的最佳做法是将 JavaScript 保存在单独的文件中。将 JavaScript 代码添加到单独的文件中可以更轻松地在多个网页中重复使用它。

最好将 JavaScript 代码添加到一个单独的文件中，方便链接到每个需要自定义功能的文件。

使用 HTML 脚本标记 <script> 可以链接到外部 JavaScript 文件，这是本练习中配置 Web 应用的方法。

在 VS Code 中，打开 index.html 文件。
在 </body> 结束元素之前的新行中输入 script:src，然后选择 Enter。脚本的开始标记和结束标记将被添加到代码中。
修改 <script> 元素以加载 app.js 文件（如以下示例所示），并确保它位于列表的 </ul> 结束元素之后。

...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...

<script> 元素可以放在 <head> 中或 <body> 中的其他位置。但是，通过将 <script> 元素放在 <body> 部分的末尾，可以先在屏幕上显示所有页面内容，然后再加载脚本。

添加容错功能

在 HTML 文件中的 </script> 结束标记之后添加 <noscript> 元素，该元素可用于在停用 JavaScript 时显示消息。

<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>

添加 <noscript> 元素是容错或故障弱化的一个示例。通过使用 <noscript> 元素，代码可以检测并规划功能何时不受支持或不可用。

使用键盘快捷方式 Control+S (Windows) 或 Command+S (macOS) 保存更改。

设置严格模式

JavaScript 旨在简化学习，它允许开发人员犯一些错误。

切换到严格模式，在出错时获得更有用的错误。

在 VS Code 中，打开 app.js 文件并输入以下内容。

'use strict';

添加按钮

通过一种方式让用户在你的网页中的浅色和深色主题之间切换。

使用 HTML <button> 元素实现该功能。

在 HTML 文件中，添加一个 <button> 元素。将按钮置于 <div> 元素内的列表的末尾。

...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...

在 CSS 文件中，为 HTML 按钮添加一个带有 .btn 类选择器的新规则。要使按钮颜色不同于一般的浅色或深色主题颜色，请在此规则中设置 color 和 background-color 属性。它们将替代 CSS 文件的 body 规则中设置的默认设置。

.btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}

接下来，修改 .btn 规则，为按钮的大小、形状、外观和位置添加一些样式。以下 CSS 在页面标题的右侧创建一个圆形按钮。

.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}

接下来，更新浅色和深色主题的 CSS。定义一些新的变量，--btnBg 和 --btnFontColor，以指定特定于按钮的背景色和字体颜色。

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

main.css的完整文件：

body {
    background: var(--bg);
    color: var(--fontColor);
    font-family: helvetica;
  }


li {
    list-style: circle;
  }
  
  .list {
    list-style: square;
  }
  
  .light-theme {
    --bg: var(--green);
    --fontColor: var(--black);
    --btnBg: var(--black);
    --btnFontColor: var(--white);
  }
  
  .dark-theme {
    --bg: var(--black);
    --fontColor: var(--green);
    --btnBg: var(--white);
    --btnFontColor: var(--black);
  }

  :root {
    --green: #00FF00;
    --white: #FFFFFF;
    --black: #000000;
  }

  .btn {
    position: absolute;
    top: 20px;
    left: 250px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: none;
    color: var(--btnFontColor);
    background-color: var(--btnBg);
  }

添加事件处理程序

若要在选择按钮时执行某些操作，需要在 JavaScript 文件中提供一个事件处理程序。事件处理程序是一种在页面上发生事件时运行 JavaScript 函数的方法。对于按钮，让我们为 click 事件添加一个事件处理程序；事件处理程序函数在 click 事件发生时运行。

添加事件处理程序之前，需要对按钮元素的引用。

在 JavaScript 文件中，使用 document.querySelector 获取按钮引用。

const switcher = document.querySelector('.btn');

接下来，为 click 事件添加事件处理程序。在以下代码中，将为 click 事件添加一个侦听器，并定义一个事件处理程序函数，以便在 click 事件发生时由浏览器执行。

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});

使用 toggle 方法修改了 <body> 元素的类属性。此方法会自动添加或删除 light-theme 和 dark-theme 类。此代码在单击时应用深色样式而不是浅色样式，如果再次单击，则应用浅色样式而不是深色样式。

但是，还需要更新按钮的标签以显示正确的主题，因此需要添加一个 if 语句来确定当前主题并更新按钮标签。

完整的 JavaScript 代码应如下所示。

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

控制台消息

作为 Web 开发人员，可以创建不会显示在网页上的隐藏消息，但可以在开发人员工具的“控制台”选项卡中阅读这些消息。使用控制台消息有助于查看代码的结果。

在 if 语句之后但在事件侦听器内添加对 console.log 的调用。

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

如果位于 JavaScript 文件中，可以在 VS Code 中通过输入 log，然后按 Enter 来为 console.log 使用自动完成功能。

可以在文本中用单引号或双引号定义文本字符串。

在浏览器中打开

检查开发人员工具中的页面

打开开发人员工具。
- 右键单击并选择“检查”，或使用键盘快捷方式 F12。或者，在 Windows 或 Linux 上使用 Ctrl+Shift+I 快捷方式，在 macOS 上使用 Option+Command+I。
选择“元素”选项卡，然后在“元素”选项卡内选择“样式”选项卡。
选择 <body> 元素。在“样式”选项卡中，查看应用的主题。如果当前主题为深色，则应用 dark-theme 样式。

请确保选中深色主题。
选择“控制台”选项卡以查看 console.log 消息：current class name: dark-theme。