讲座 8

欢迎!

  • 在之前的几周中，我们向你介绍了Python，一种高级编程语言，它使用了我们在C中学到的相同的构建模块。今天，我们将在HTML、CSS和JavaScript中进一步拓展这些构建模块。

互联网

  • 互联网是我们都在使用的一项技术，它将世界各地的计算机相互连接起来。
  • 利用前几周学到的技能，我们可以构建自己的网页和应用程序。
  • ARPANET（阿帕网）将互联网上的最初节点相互连接起来。
  • 两点之间的点可以被认为是路由器。

路由器

  • 要将数据从一个地方路由到另一个地方，我们需要做出路由决策。也就是说，需要有人编程来决定数据如何从点A传输到点B。
  • 你可以想象数据如何从点A到点B可以走多条路径，这样当某个路由器拥塞时，数据可以通过另一条路径流动。数据数据包从一个路由器传输到另一个路由器，从一台计算机传输到另一台计算机。
  • TCP/IP是两种允许计算机之间通过互联网传输数据的协议。

  • IP或互联网协议是计算机在互联网上相互识别的一种方式。世界上每台计算机都有一个唯一的地址。地址格式如下：

    #.#.#.#
  • 数字范围从0到255。IP地址是32位的（对于IPv4），这意味着这些地址可以容纳超过40亿个地址。较新版本的IP地址（如IPv6）实现了128位，可以容纳更多的计算机！
  • 在现实世界中，服务器为我们做了很多工作。

  • 数据包的结构如下：

    0                   1                   2                   3  
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|Version|  IHL  |Type of Service|          Total Length         |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|         Identification        |Flags|      Fragment Offset    |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|  Time to Live |    Protocol   |         Header Checksum       |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                       Source Address                          |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                    Destination Address                        |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                    Options                    |    Padding    |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
  • 数据包是标准化的。源地址和目标地址都包含在每个数据包中。
  • TCP，即传输控制协议，有助于跟踪正在发送的数据包的顺序。
  • 此外，TCP还用于区分不同的网络服务。例如，80用于表示HTTP，443用于表示HTTPS。这些数字是这些服务的默认端口号。
  • 当信息从一个地点发送到另一个地点时，会发送源IP地址、目标IP地址和TCP端口号。
  • 这些协议还用于将大文件分割成多个部分或数据包。例如，一张猫的大照片可以通过多个数据包发送。当数据包丢失时，TCP/IP可以从原始服务器重新请求丢失的数据包。
  • 当所有数据都已传输并接收完毕时，TCP会进行确认。

DNS

  • 如果你需要记住IP地址才能访问网站，那将非常繁琐。
  • DNS，即域名系统，是互联网上的一组服务器，用于将像harvard.edu这样的网站地址路由到特定的IP地址。
  • DNS本质上是一个表格或数据库，将特定的完整限定域名链接到特定的IP地址。

DHCP

  • DHCP是一种为你的设备分配IP地址的协议。
  • 此外，该协议定义了你的设备使用的默认网关和名称服务器。
  • 现在，不多谈我们隐喻的信封之外是什么了：让我们看看信封内部。

HTTPS

  • HTTP或超文本传输协议是一种应用层协议，开发者通过数据的从一个地方到另一个地方的传输来构建强大且有用的东西。HTTPS是该协议的安全版本。
  • 当你看到像https://www.example.com这样的地址时，你实际上是在隐式地访问该地址，末尾带有一个/。
  • 路径是该斜杠之后的内容。例如，https://www.example.com/folder/file.html访问example.com，浏览到folder目录，然后访问名为file.html的文件。
  • .com被称为顶级域名，用于表示与该地址相关的地点的位置或组织类型。
  • 该地址中的https是用于连接到该网址的协议。所谓协议，我们指的是HTTP使用GET或POST请求来向服务器请求信息。例如，你可以启动Google Chrome，右键点击，然后点击检查。当你打开开发者工具并访问网络选项卡，选择保留日志，你会看到请求标头。你会看到GET的相关信息。在其他浏览器中也可以这样做，只是方法略有不同。

  • 例如，当发出GET请求时，你的计算机可能会向服务器发送以下内容：

    GET / HTTP/2
Host: www.harvard.edu

    注意，这是通过HTTP请求www.harvard.edu上提供的内容。

  • 通常，在向服务器发出请求后，你会在响应标头中收到以下内容：

    HTTP/2 200
Content-Type: text/html

  • 这种检查日志的方法可能比需要的复杂一些。你可以在cs50.dev上分析HTTP协议的工作。例如，在终端窗口中输入以下内容：

    curl -I https://www.harvard.edu/

    注意，该命令的输出返回了服务器响应的所有标头值。

  • 通过网页浏览器中的开发者工具，你可以在浏览上述网站时看到所有HTTP请求。

  • 此外，在你的终端窗口中执行以下命令：

    curl -I https://harvard.edu

    注意，你会看到一个301响应，向浏览器提示在哪里可以找到正确的网站。

  • 类似地，在你的终端窗口中执行以下命令：

    curl -I http://www.harvard.edu/

    注意，https中的s已被移除。服务器响应将显示响应代码为301，意思是该网站已永久迁移。

  • 与301类似，404代码表示指定的URL未找到。还有许多其他响应代码，例如：

    200 OK
301 Moved Permanently
302 Found
304 Not Modified
307 Temporary Redirect
401 Unauthorized
403 Forbidden
404 Not Found
418 I'm a Teapot
500 Internal Server Error
503 Service Unavai实验le
  • 值得一提的是，当500错误涉及你创建的产品或应用程序时，通常是你作为开发者的责任。这对于下一周的问题集尤为重要，也可能对你的最终项目有影响！不过，500错误也可能由基础设施问题和第三方服务问题引起。

HTML

  • HTML或超文本标记语言由标签组成，每个标签可能有一些描述它的属性。

  • 在你的终端中，输入code hello.html并编写如下代码：

    <!DOCTYPE html>

<!-- 演示 HTML -->

<html lang="en">
    <head>
        <title>hello, title</title>
    </head>
    <body>
        hello, body
    </body>
</html>

    注意，html标签同时打开和关闭了这个文件。另外，注意lang属性，它修改了html标签的行为。同时，注意这里有head标签和body标签。缩进不是必需的，但确实表明了层级关系。你可以在此处下载此代码。

  • 你可以通过输入http-server来服务你的代码。这个提供的内容现在可以在一个很长的URL上访问。如果你点击它，就可以访问你自己代码生成的网站。
  • 当你访问这个URL时，注意文件名hello.html出现在这个URL的末尾。此外，根据URL，注意服务器是通过端口8080提供服务的。

  • 标签的层级结构可以表示如下：

    HTML代码旁边显示父子节点层级结构的示意图

  • 了解这种层级结构在我们后面学习JavaScript时会很有用。
  • 浏览器会从上到下、从左到右读取你的HTML文件。

  • 由于空白和缩进在HTML中实际上是被忽略的，你将需要使用<p>段落标签来打开和关闭一个段落。考虑以下内容：

    <!DOCTYPE html>

<!-- 演示段落 -->

<html lang="en">
    <head>
        <title>paragraphs</title>
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
        </p>
        <p>
            Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh.
        </p>
        <p>
            Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt.
        </p>
        <p>
            Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris.
        </p>
        <p>
            Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque.
        </p>
        <p>
            Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien.
        </p>
    </body>
</html>

    注意，段落以<p>标签开始，以</p>标签结束。你可以在此处下载此代码。

  • HTML允许表示标题：

    <!DOCTYPE html>

<!-- 演示标题（用于章节、小节、子小节等） -->

<html lang="en">

    <head>
        <title>headings</title>
    </head>

    <body>

        <h1>One</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
        </p>

        <h2>Two</h2>
        <p>
            Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh.
        </p>

        <h3>Three</h3>
        <p>
            Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt.
        </p>

        <h4>Four</h4>
        <p>
            Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris.
        </p>

        <h5>Five</h5>
        <p>
            Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque.
        </p>

        <h6>Six</h6>
        <p>
            Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien.
        </p>

    </body>

</html>

    注意，<h1>、<h2>和<h3>表示不同级别的标题。你可以在此处下载此代码。

  • 我们也可以在HTML中创建无序列表：

    <!DOCTYPE html>

<!-- 演示（无序）列表 -->

<html lang="en">
    <head>
        <title>list</title>
    </head>
    <body>
        <ul>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
        </ul>
    </body>
</html>

    注意，<ul>标签创建了一个包含三个项目的无序列表。你可以在此处下载此代码。

  • 我们也可以在HTML中创建有序列表：

    <!DOCTYPE html>

<!-- 演示（有序）列表 -->

<html lang="en">
    <head>
        <title>list</title>
    </head>
    <body>
        <ol>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
        </ol>
    </body>
</html>

    注意，<ol>标签创建了一个包含三个项目的有序列表。你可以在此处下载此代码。

  • 我们也可以 创建一个 table in HTML:

    <!DOCTYPE html>

<!-- 演示表格 -->

<html lang="en">
    <head>
        <title>table</title>
    </head>
    <body>
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>*</td>
                <td>0</td>
                <td>#</td>
            </tr>
        </table>
    </body>
</html>

    表格也有打开和关闭其中每个元素的标签。另外，注意HTML中注释的语法。你可以在此处下载此代码。

  • 也可以在HTML中使用图片：

    <!DOCTYPE html>

<!-- 演示图片 -->

<html lang="en">
    <head>
        <title>image</title>
    </head>
    <body>
        <img alt="photo of bridge" src="bridge.png">
    </body>
</html>

    注意，src="bridge.png"指明了图像文件所在的路径。你可以在此处下载此代码。

  • 视频也可以包含在HTML中：

    <!DOCTYPE html>

<!-- 演示视频 -->

<html lang="en">
    <head>
        <title>video</title>
    </head>
    <body>
        <video controls muted>
            <source src="video.mp4" type="video/mp4">
        </video>
    </body>
</html>

    注意，type属性指明这是一个类型为mp4的视频。此外，注意controls和muted是如何传递给video的。你可以在此处下载此代码。

  • 你还可以在各种网页之间创建链接：

    <!DOCTYPE html>

<!-- 演示链接 -->

<html lang="en">
    <head>
        <title>link</title>
    </head>
    <body>
      Visit <a href="image.html">Harvard</a>.
    </body>
</html>

    注意，<a>或锚点标签用于使Harvard成为可点击的链接文本。你可以在此处下载此代码。

  • 你也可以创建类似于Google搜索的表单：

    <!DOCTYPE html>

<!-- 演示表单 -->

<html lang="en">
    <head>
        <title>search</title>
    </head>
    <body>
        <form action="https://www.google.com/search" method="get">
            <input name="q" type="search">
            <input type="submit" value="Google Search">
        </form>
    </body>
</html>

    注意，form标签打开并提供了它将执行的action属性。包含input字段，传递了名称q和类型search。你可以在此处下载此代码。

  • 我们可以把搜索做得更好，如下所示：

    <!DOCTYPE html>

<!-- 演示额外的表单属性 -->

<html lang="en">
    <head>
        <title>search</title>
    </head>
    <body>
        <form action="https://www.google.com/search" method="get">
            <input autocomplete="off" autofocus name="q" placeholder="Query" type="search">
            <button>Google Search</button>
        </form>
    </body>
</html>

    注意，autocomplete被设置为off（关闭）。autofocus（自动聚焦）已启用。你可以在此处下载此代码。

  • 我们已经看到了你可以添加到网站中的众多HTML元素中的一小部分。如果你有想添加到网站上但我们还没有看到的元素（按钮、音频文件等），可以尝试在Google搜索"X in HTML"来找到正确的语法！同样，你也可以使用cs50.ai来帮助你发现更多HTML特性！

正则表达式

  • 正则表达式或regex是一种确保用户提供的数据符合特定格式的手段。

  • 我们可以实现自己的使用正则表达式的注册页面，如下所示：

    <!DOCTYPE html>

<!-- 演示 type="email" -->

<html lang="en">
    <head>
        <title>注册</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus name="email" placeholder="Email" type="email">
            <button>注册</button>
        </form>
    </body>
</html>

    注意，input标签包含的属性指明这是email类型。浏览器会自动检查输入是否为电子邮件地址。你可以在此处下载此代码。

  • 虽然浏览器使用这些内置属性来检查电子邮件地址，但我们可以添加一个pattern 属性来确保只有特定数据最终出现在电子邮件地址中：

    <!DOCTYPE html>

<!-- 演示邮件的 pattern 属性 -->

<html lang="en">
    <head>
        <title>注册</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus name="email" pattern=".+@.+.edu" placeholder="Email" type="email">
            <button>注册</button>
        </form>
    </body>
</html>

    注意，pattern属性接收一个正则表达式，表示电子邮件地址必须包含@符号和.edu。你可以在此处下载此代码。

  • 你可以在Mozilla的文档中了解更多关于正则表达式的信息。此外，你可以向cs50.ai咨询以获取提示。

CSS

  • CSS，即层叠样式表，是一种样式表语言，允许你微调HTML文件的美观性。
  • CSS充满了属性，这些属性包含键值对。

  • 在你的终端中，输入code home.html并编写如下代码：

    <!DOCTYPE html>

<!-- 演示带有 P 标签的内联 CSS -->

<html lang="en">
    <head>
        <title>css</title>
    </head>
    <body>
        <p style="font-size: large; text-align: center;">
            John Harvard
        </p>
        <p style="font-size: medium; text-align: center;">
            欢迎来到我的主页！
        </p>
        <p style="font-size: small; text-align: center;">
            Copyright &#169; John Harvard
        </p>
    </body>
</html>

    注意，一些style属性被提供给了<p>标签。font-size被设置为large、medium或small。然后text-align被设置为居中。你可以在此处下载此代码。

  • 虽然正确，但上述代码设计得不好。我们可以通过修改代码来消除冗余：

    <!DOCTYPE html>

<!-- 移除外部的 DIV -->

<html lang="en">
    <head>
        <title>css</title>
    </head>
    <body style="text-align: center">
        <div style="font-size: large">
            John Harvard
        </div>
        <div style="font-size: medium">
            欢迎来到我的主页！
        </div>
        <div style="font-size: small">
            Copyright &#169; John Harvard
        </div>
    </body>
</html>

    注意，<div>标签用于将此HTML文件划分为特定区域。text-align: center应用于整个HTML的body。因为body内部的所有内容都是body的子元素，所以center属性会层叠传递给这些子元素。你可以在此处下载此代码。

  • 事实证明，HTML中包含了一些更新的语义化标签。我们可以如下修改代码：

    <!DOCTYPE html>

<!-- 演示类选择器 -->

<html lang="en">
    <head>
        <style>

            .centered
            {
                text-align: center;
            }

            .large
            {
                font-size: large;
            }

            .medium
            {
                font-size: medium;
            }

            .small
            {
                font-size: small;
            }

        </style>
        <title>css</title>
    </head>
    <body class="centered">
        <header class="large">
            John Harvard
        </header>
        <main class="medium">
            欢迎来到我的主页！
        </main>
        <footer class="small">
            Copyright &#169; John Harvard
        </footer>
    </body>
</html>

    注意所有样式标签都放在head中的style标签包装器内。此外，注意我们为元素分配了名为centered、large、medium和small的类，并且我们通过在名称前放置一个点来选择这些类，如.centered。你可以在此处下载此代码。

  • 事实证明，我们可以将所有样式代码移到一个名为CSS文件的特殊文件中。我们可以创建一个名为style.css的文件，并将我们的类粘贴到那里：

    .centered
{
    text-align: center;
}

.large
{
    font-size: large;
}

.medium
{
    font-size: medium;
}

.small
{
    font-size: small;
}

    注意，这和我们HTML文件中出现的内容完全相同。你可以在此处下载此代码。

  • 然后我们可以告诉浏览器在哪里找到这个HTML文件的CSS：

    <!DOCTYPE html>

<!-- 演示外部样式表 -->

<html lang="en">
    <head>
        <link href="style.css" rel="stylesheet">
        <title>css</title>
    </head>
    <body class="centered">
        <header class="large">
            John Harvard
        </header>
        <main class="medium">
            欢迎来到我的主页！
        </main>
        <footer class="small">
            Copyright &#169; John Harvard
        </footer>
    </body>
</html>

    注意，style.css作为样式表链接到了这个HTML文件，告诉浏览器在哪里找到我们创建的样式。你可以在此处下载此代码。

框架

  • 类似于我们在Python中可以使用的第三方库，还有一些称为框架的第三方库，我们可以与HTML文件一起使用。
  • Bootstrap是这些框架之一，我们可以用它来美化我们的HTML并轻松完善设计元素，使我们的页面更具可读性。

  • 可以通过在HTML文件的head中添加以下link标签来使用Bootstrap：

    <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
    <title>bootstrap</title>
</head>

  • 考虑以下HTML：

    <!DOCTYPE html>

<!-- 演示表格 -->

<html lang="en">
    <head>
        <title>phonebook</title>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Number</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Kelly</td>
                    <td>+1-617-495-1000</td>
                </tr>
                <tr>
                    <td>David</td>
                    <td>+1-617-495-1000</td>
                </tr>
                <tr>
                    <td>John</td>
                    <td>+1-949-468-2750</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

    注意，当查看这个页面的服务版本时，它相当朴素。你可以在此处下载此代码。

  • 现在考虑以下使用了Bootstrap的HTML：

    <!DOCTYPE html>

<!-- 演示使用 Bootstrap 的表格 -->

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
        <title>phonebook</title>
    </head>
    <body>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Number</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Kelly</td>
                    <td>+1-617-495-1000</td>
                </tr>
                <tr>
                    <td>David</td>
                    <td>+1-949-468-2750</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

    注意这个网站现在漂亮了多少。你可以在此处下载此代码。

  • 你可以在Bootstrap文档中了解更多相关信息。

JavaScript

  • JavaScript是另一种编程语言，允许在网页中实现交互性。

  • 考虑以下包含JavaScript和HTML的hello.html实现：

    <!DOCTYPE html>

<!-- 演示 onsubmit -->

<html lang="en">
    <head>
        <script>

            function greet()
            {
                alert('hello, ' + document.querySelector('#name').value);
            }

        </script>
        <title>hello</title>
    </head>
    <body>
        <form onsubmit="greet(); return false;">
            <input autocomplete="off" autofocus id="name" placeholder="Name" type="text">
            <input type="submit">
        </form>
    </body>
</html>

    注意这个表单如何使用onsubmit属性来触发文件顶部的脚本。脚本使用alert创建一个警告弹窗。document.querySelector('#name').value选择页面上id为name的文本框，并获取用户输入的值。你可以在此处下载此代码。

  • 通常，混合onsubmit和JavaScript被认为是不好的设计。我们可以如下改进我们的代码：

    <!DOCTYPE html>

<!-- 演示 DOMContentLoaded -->

<html lang="en">
    <head>
        <script>

            document.addEventListener('DOMContentLoaded', function() {
                document.querySelector('form').addEventListener('submit', function(e) {
                    alert('hello, ' + document.querySelector('#name').value);
                    e.preventDefault();
                });
            });

        </script>
        <title>hello</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus id="name" placeholder="Name" type="text">
            <input type="submit">
        </form>
    </body>
</html>

    注意，这个版本的代码创建了一个addEventListener来监听表单submit被触发的事件。注意DOMContentLoaded确保整个页面加载完毕后才执行JavaScript。你可以在此处下载此代码。

  • 我们可以如下改进此代码：

    <!DOCTYPE html>

<!-- 演示 keyup 和模板字面量 -->

<html lang="en">
    <head>
        <script>

            document.addEventListener('DOMContentLoaded', function() {
                let input = document.querySelector('input');
                input.addEventListener('keyup', function(event) {
                    let name = document.querySelector('p');
                    if (input.value) {
                        name.innerHTML = `hello, ${input.value}`;
                    }
                    else {
                        name.innerHTML = 'hello, whoever you are';
                    }
                });
            });

        </script>
        <title>hello</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus placeholder="Name" type="text">
        </form>
        <p></p>
    </body>
</html>

    注意，当用户输入名称时，DOM在内存中动态更新。如果input中有值，在键盘keyup事件触发时，DOM会更新。否则，显示默认文本。你可以在此处下载此代码。

  • JavaScript允许你动态读取和修改加载到内存中的HTML文档，这样用户无需重新加载即可看到变化。

  • 考虑以下HTML：

    <!DOCTYPE html>

<!-- 演示通过编程方式更改样式 -->

<html lang="en">
    <head>
        <title>background</title>
    </head>
    <body>
        <button id="red">R</button>
        <button id="green">G</button>
        <button id="blue">B</button>
        <script>

            let body = document.querySelector('body');
            document.querySelector('#red').addEventListener('click', function() {
                body.style.backgroundColor = 'red';
            });
            document.querySelector('#green').addEventListener('click', function() {
                body.style.backgroundColor = 'green';
            });
            document.querySelector('#blue').addEventListener('click', function() {
                body.style.backgroundColor = 'blue';
            });

        </script>
    </body>
</html>

    注意JavaScript监听特定按钮的点击事件。当点击发生时，页面上的某些样式属性会发生改变。body被定义为页面的body。然后，事件监听器等待其中一个按钮的点击。接着，body.style.backgroundColor被更改。你可以在此处下载此代码。

  • 类似地，考虑以下内容：

    <!DOCTYPE html>

<html lang="en">
    <head>
        <script>

            // Toggles visibility of greeting
            function blink()
            {
                let body = document.querySelector('body');
                if (body.style.visibility == 'hidden')
                {
                    body.style.visibility = 'visible';
                }
                else
                {
                    body.style.visibility = 'hidden';
                }
            }

            // Blink every 500ms
            window.setInterval(blink, 500);

        </script>
        <title>blink</title>
    </head>
    <body>
        hello, world
    </body>
</html>

    这个例子以设定的时间间隔闪烁文本。注意，window.setInterval接收两个参数：一个要调用的函数和函数调用之间的等待时间（以毫秒为单位）。你可以在此处下载此代码。

  • 考虑以下实现自动完成文本的JavaScript：

    <!DOCTYPE html>

<html lang="en">

    <head>
        <title>autocomplete</title>
    </head>

    <body>

        <input autocomplete="off" autofocus placeholder="Query" type="text">

        <ul></ul>

        <script src="large.js"></script>
        <script>
      
            let input = document.querySelector('input');
            input.addEventListener('keyup', function(event) {
                let html = '';
                if (input.value) {
                    for (word of WORDS) {
                        if (word.startsWith(input.value)) {
                            html += `<li>${word}</li>`;
                        }
                    }
                }
                document.querySelector('ul').innerHTML = html;
            });

        </script>

    </body>
</html>

    这是一个JavaScript实现的自动完成功能。它从一个名为large.js的文件（这里未显示）中获取单词列表。你可以在此处下载此代码。

  • JavaScript的功能很多，可以在JavaScript文档中找到。

总结

在本课中，你学习了如何创建自己的HTML文件、样式化它们、利用第三方框架以及使用JavaScript。具体来说，我们讨论了……

  • 互联网
  • 路由器
  • DNS
  • DHCP
  • HTTPS
  • HTML
  • 正则表达式
  • CSS
  • 框架
  • JavaScript

下次见！