10.1. 第 8 周:HTML、CSS、JavaScript¶
10.1.1. 欢迎!¶
在前几周,我们向你介绍了 Python,这是一种高级编程语言,它使用了我们在 C 语言中学到的相同构建块。今天,我们将在 HTML、CSS 和 JavaScript 中进一步扩展这些构建块。
10.1.2. 互联网¶
互联网是一项我们都在使用的技术,它将世界各地的计算机相互连接。
利用前几周所学的技能,我们可以构建自己的网页和应用程序。
ARPANET 将互联网上的首批节点彼此连接起来。
两点之间的连接点可被视为 路由器 。
10.1.3. 路由器¶
为了将数据从一个地方路由到另一个地方,我们需要做出 路由决策 。也就是说,需要有人对数据如何从点 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 用于区分不同的 Web 服务。例如,
80用于表示 HTTP,443用于表示 HTTPS。这些数字是这些服务的默认 端口号 。当信息从一个位置发送到另一个位置时,会发送源 IP 地址、目的 IP 地址和 TCP 端口号。
这些协议还用于将大文件分割成多个部分或数据包。例如,一张猫的大照片可以通过多个数据包发送。当数据包丢失时,TCP/IP 可以再次向原始服务器请求缺失的数据包。
当所有数据都已传输并接收完毕时,TCP 将进行确认。
10.1.4. DNS¶
如果需要记住 IP 地址才能访问网站,那将非常繁琐。
DNS (即 域名系统 )是互联网上的一组服务器,用于将像 harvard.edu 这样的网站地址路由到特定的 IP 地址。
DNS 只是一个将特定的完全限定域名与特定 IP 地址关联起来的表格或数据库。
10.1.5. DHCP¶
DHCP 是一种为设备分配 IP 地址的协议。
此外,该协议还定义了设备使用的默认网关和域名服务器。
现在,不再讨论我们比喻中的信封外部内容:让我们看看信封内部。
10.1.6. 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,右键单击并点击inspect。当你打开developer tools并访问Network,选择Preserve log时,你将看到Request Headers。你会看到有关GET的提及。在其他浏览器中也可以通过略有不同的方法实现这一点。例如,当发出 GET 请求时,你的计算机可能会向服务器发送以下内容:
GET / HTTP/2 Host: www.harvard.edu
请注意,此请求通过 HTTP 获取 www.harvard.edu 上提供的内容。
通常,在向服务器发出请求后,你将在
Response Headers中收到以下内容: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 Unavailable
值得一提的是,当
500错误涉及你自己创建的产品或应用程序时,通常归咎于你作为开发者的责任。这对于下周的问题集以及可能的最终项目尤为重要!然而,500错误也可能由基础设施问题或第三方服务问题引起。
10.1.7. HTML¶
HTML 或 超文本标记语言 由 标签 组成,每个标签都可能具有一些描述它的 属性 。
hello0.html
在终端中,输入
code hello.html并按如下方式编写代码:<!DOCTYPE html> <!-- Demonstrates HTML --> <html lang="en"> <head> <title>hello, title</title> </head> <body> hello, body </body> </html>
请注意,
html标签同时开启并关闭此文件。此外,请注意lang属性,它会修改html标签的行为。同时,请注意既有head标签也有body标签。缩进并非必需,但能体现层级关系。你可以在此处 here 下载此代码。你可以通过输入
http-server来提供你的代码。所提供的内容现在位于一个非常长的 URL 上。如果你点击它,就可以访问由你自己的代码生成的网站。当你访问此 URL 时,请注意文件名
hello.html出现在该 URL 的末尾。此外,根据该 URL 可知,服务器正通过端口 8080 提供服务。标签的层次结构可以表示如下:

了解这一层次结构将在我们学习 JavaScript 时派上用场。
浏览器将从上到下、从左到右读取你的 HTML 文件。
paragraphs.html
由于空格和缩进在 HTML 中实际上会被忽略,因此你需要使用
<p>段落标签来开启和关闭一个段落。考虑以下示例:<!DOCTYPE html> <!-- Demonstrates paragraphs --> <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>标签结束。你可以在此处 here 下载此代码。表头.html
HTML 允许表示表头:
<!DOCTYPE html> <!-- Demonstrates headings (for chapters, sections, subsections, etc.) --> <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>表示不同层级的表头。你可以在此处 here 下载此代码。线性表
我们也可以在 HTML 中创建无序线性表:
<!DOCTYPE html> <!-- Demonstrates (unordered) lists --> <html lang="en"> <head> <title>list</title> </head> <body> <ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul> </body> </html>
请注意,
<ul>标签创建了一个包含三个项目的无序列表。你可以下载此代码 here 。线性表
我们还可以在 HTML 中创建有序列表:
<!DOCTYPE html> <!-- Demonstrates (ordered) lists --> <html lang="en"> <head> <title>list</title> </head> <body> <ol> <li>foo</li> <li>bar</li> <li>baz</li> </ol> </body> </html>
请注意,
<ol>标签创建了一个包含三个项目的有序列表。你可以在此处 here 下载此代码。table.html
我们还可以在 HTML 中创建表格:
<!DOCTYPE html> <!-- Demonstrates table --> <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 中注释的语法。你可以在此 here 下载此代码。
image.html
图像也可以在 HTML 中使用:
<!DOCTYPE html> <!-- Demonstrates image --> <html lang="en"> <head> <title>image</title> </head> <body> <img alt="photo of bridge" src="bridge.png"> </body> </html>
请注意,
src="bridge.png"表示图像文件所在的路径。你可以在此处 here 下载此代码。video.html
视频也可以嵌入到 HTML 中:
<!DOCTYPE html> <!-- Demonstrates video --> <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的。你可以 here 下载此代码。link0.html
你还可以在各种网页之间建立链接:
<!DOCTYPE html> <!-- Demonstrates link --> <html lang="en"> <head> <title>link</title> </head> <body> Visit <a href="image.html">Harvard</a>. </body> </html>
请注意,
<a>或 锚点 标签用于使Harvard成为可链接文本。你可以在此处下载此代码 here 。查找
你也可以创建类似于 Google 查找的表单:
<!DOCTYPE html> <!-- Demonstrates form --> <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。你可以在此处 here 下载此代码。search1.html
我们可以按如下方式改进此查找:
<!DOCTYPE html> <!-- Demonstrates additional form attributes --> <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已启用。你可以在此 here 下载此代码。我们只看到了许多可添加到网站中的 HTML 元素中的一小部分。如果你有想要添加到网站但尚未见过的想法(例如按钮、音频文件等),请尝试搜索"X in HTML"以找到正确的语法!同样,你可以使用 cs50.ai 来帮助你发现更多 HTML 功能!
10.1.8. 正则表达式¶
正则表达式 或 regexes 是一种确保用户提供的数据符合特定格式的方法。
register0.html
我们可以实现自己的注册页面,如下所示使用正则表达式:
<!DOCTYPE html> <!-- Demonstrates type="email" --> <html lang="en"> <head> <title>register</title> </head> <body> <form> <input autocomplete="off" autofocus name="email" placeholder="Email" type="email"> <button>Register</button> </form> </body> </html>
请注意,
input标签包含的属性指定其类型为email。浏览器会据此再次确认输入是否为电子邮件地址。你可以在此 here 下载此代码。register1.html
虽然浏览器使用这些内置属性来检查电子邮件地址,但我们可以添加一个
pattern属性,以确保只有特定数据最终出现在电子邮件地址中:<!DOCTYPE html> <!-- Demonstrates pattern attribute for email --> <html lang="en"> <head> <title>register</title> </head> <body> <form> <input autocomplete="off" autofocus name="email" pattern=".+@.+\.edu" placeholder="Email" type="email"> <button>Register</button> </form> </body> </html>
注意
pattern属性被赋予了一个正则表达式,用于表示电子邮件地址必须包含一个@符号和一个.edu。你可以在此 here 下载此代码。你可以从 Mozilla’s documentation 了解更多关于正则表达式的知识。此外,你可以向 cs50.ai 咨询以获取提示。
10.1.9. CSS¶
CSS,或 层叠样式表 ,是一种样式表语言,允许你微调 HTML 文件的美观度。CSS 充满了 属性 ,其中包括键值对。
home0.html
在终端中,输入
code home.html并按如下方式编写代码:<!DOCTYPE html> <!-- Demonstrates inline CSS with P tags --> <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;"> Welcome to my home page! </p> <p style="font-size: small; text-align: center;"> Copyright © John Harvard </p> </body> </html>
请注意,某些
style属性已提供给<p>标签。font-size设置为large、medium或small。然后text-align设置为中心对齐。你可以在此 here 下载此代码。home3.html
虽然正确,但上述代码设计不佳。我们可以通过如下修改代码来消除冗余:
<!DOCTYPE html> <!-- Removes outer 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"> Welcome to my home page! </div> <div style="font-size: small"> Copyright © John Harvard </div> </body> </html>
请注意,
<div>标签用于将此 HTML 文件划分为特定区域。text-align: center被应用于整个 HTML 主体。由于body内的所有内容都是body的子元素,因此center属性会级联到这些子元素。你可以在此处 here 下载此代码。home4.html
事实证明,HTML 中包含了一些更新的语义标签。我们可以按如下方式修改代码:
<!DOCTYPE html> <!-- Demonstrates class selectors --> <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"> Welcome to my home page! </main> <footer class="small"> Copyright © John Harvard </footer> </body> </html>
注意所有 style 标签都放置在
style标签包装器中的head处。另外,请注意我们已为元素分配了名为centered、large、medium和small的 类 ,并且通过在名称前加点来选择这些类,如.centered所示。你可以在此处 here 下载此代码。home7.css
事实证明,我们可以将所有样式代码移入一个名为 CSS 文件的特殊文件中。我们可以创建一个名为
style.css的文件,并将我们的类粘贴到其中:.centered { text-align: center; } .large { font-size: large; } .medium { font-size: medium; } .small { font-size: small; }
请注意,这正是我们 HTML 文件中逐字出现的内容。你可以在此处 here 下载此代码。
home7.html
然后我们可以告诉浏览器在哪里找到该 HTML 文件的 CSS:
<!DOCTYPE html> <!-- Demonstrates external stylesheets --> <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"> Welcome to my home page! </main> <footer class="small"> Copyright © John Harvard </footer> </body> </html>
请注意,
style.css作为样式表链接到此 HTML 文件,告知浏览器我们创建的样式的位置。你可以下载此代码 here 。
10.1.10. 框架¶
与我们在 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>
phonebook0.html
考虑以下 HTML:
<!DOCTYPE html> <!-- Demonstrates table --> <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>
请注意,当查看此页面的服务版本时,它非常朴素。你可以下载此代码 here 。
phonebook1.html
现在考虑以下实现 Bootstrap 用法的 HTML:
<!DOCTYPE html> <!-- Demonstrates table with 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>
注意这个网站现在变得多么美观。你可以在此 here 下载代码。
你可以在 Bootstrap Documentation 中了解更多关于此的内容。
10.1.11. JavaScript¶
JavaScript 是另一种编程语言,它允许在网页中实现交互性。
hello1.html
考虑以下
hello.html的实现,其中包含 JavaScript 和 HTML:<!DOCTYPE html> <!-- Demonstrates 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通过页面上的idname选择文本框并获取用户输入的值。你可以在此处 here 下载此代码。hello3.html
通常,将 onsubmit 与 JavaScript 混合使用被视为不良设计。我们可以按如下方式改进代码:
<!DOCTYPE html> <!-- Demonstrates 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 之前已加载完毕。你可以在此处 here 下载此代码。hello5.html
我们可以按如下方式推进此代码:
<!DOCTYPE html> <!-- Demonstrates keyup and template literals --> <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 会更新。否则,将显示默认文本。你可以从此处 here 下载此代码。JavaScript 允许你动态读取和修改已加载到内存中的 html 文档,使用户无需重新加载即可看到更改。
background.html
考虑以下 HTML:
<!DOCTYPE html> <!-- Demonstrates programmatic changes to style --> <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.style.backgroundColor会被更改。你可以从此处 here 下载此代码。blink.html
类似地,考虑以下情况:
<!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接受两个参数:一个要调用的函数,以及函数调用之间的等待时间(以毫秒为单位)。你可以在此处 here 下载此代码。autocomplete.html
考虑以下自动完成文本的 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的文件(此处未显示)中获取数据,该文件是一个单词列表。你可以在此处 here 下载此代码。JavaScript 的功能众多,可在 JavaScript Documentation 中找到。
10.1.12. 总结¶
在本课中,你学习了如何创建自己的 HTML 文件、对其进行样式设计、利用第三方框架并使用 JavaScript。具体来说,我们讨论了……
互联网
路由器
DNS
DHCP
HTTPS
HTML
正则表达式
CSS
框架
JavaScript
下次再见!
