526互联

Week8 HTML,CSS,JavaScript 课堂笔记

发布时间 2023-10-12 12:03:21作者: Martian148

Routers

为了将数据从一个地方路送到到另一个地方，我们需要做出路由决策。也就是说，需要有人对数据如何从A点传输到B点进行编程

您可以想象数据如何从A点到B点采取多条路径，这样当路由器拥塞时，数据可以通过另一条路径流动

TCP/IP是两种允许计算机通过互联网在它们之间传输数据的协议

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

#.#.#.#

数字的取值范围是0 ~ 255。IP地址是32位的，这意味着这些地址可以容纳超过40亿个地址。新版本的IP地址可以容纳更多的计算机

在现实世界中，服务器为我们做了很多工作

TCP(端口号)，即传输控制协议，用于区分web服务。例如，80用于表示HTTP, 443用于表示HTTPS。这些数字是端口号，告诉服务器我需要那种服务

当信息从一个位置发送到另一个位置时，会发送IP地址和TCP端口号

这些协议还用于将大文件分割成称为数据包的多个部分。例如，一张猫的大照片可以在多个数据包中发送。当数据包丢失时，TCP/IP可以向原始服务器重新请求丢失的数据包

当所有的数据被传输和接收时，TCP将会确认

DNS

如果你需要记住一个地址号码来访问一个网站，那将是非常乏味的

域名系统(DNS)是互联网上的服务器集合，用于将harvard.edu等网站地址路由到特定的IP地址

DNS只是保存一个表或数据库，将特定的域名链接到特定的IP地址

HTTP

HTTP(超文本传输协议)是一种应用程序级协议，开发人员使用它来构建功能强大且有用的东西

当你看到一个地址，如https://www.example.com，你实际上是该地址加上一个隐含的/在它的末尾，也就是https://www.example.com/，浏览器会自动帮你隐去

路径是斜杠之后存在的内容，例如https://www.example.com/folder/file.html是访问example.com下的folder文件夹下的file.html的文件

HTTP支持的两个命令包括GET和POST。GET允许浏览器请求URL中的页面或文件，POST允许浏览器向服务器发送隐藏在URL之外的附加数据。这两种请求都是我们可以向服务器发出的请求，服务器将提供响应作为返回。

GET请求将以以下方式开始:

GET / HTTP/1.1
Host: www.example.com
...
  • GET表明是使用GET命令
  • HTTP/1.1 表示HTTP的版本
  • Host: www.example.com表明请求是对于Host: www.example.com因为一个服务器可以对应着多个域名

如果请求成功，那么回应将是这样子的：

HTTP/1.1 200 OK
Content-Type: text/html
...
  • web服务器会返回版本号，这里的200 OK表明请求是有效的
  • 然后，web服务器将会表明返回内容的类型，可以是文本、图像或其他格式
  • 最后，包的剩余部分也会包含在其中

我们输入http://harvard.edu在我们的浏览器中，然后观察地址栏被修改成了https://www.harvard.edu。然后我们打开开发者工具，注意这里要使用无痕模式，这样浏览器就不会记住我们先前的请求了

在Network窗口中，我们可以看到几百条请求，有文本，图片和其他东西，事实证明，我们的浏览器发送了一个请求，然后服务器的回答告诉我们了，我们需要需要去请求下载那些其他的在这个网页中的数据

如果我们向上滚动，找到第一个请求harvard.edu，我们会发现我们熟悉的一些东西

如果我们滚动并且找到了服务器的回复，我们可以看到301 Moved Permanently，这代表了，我们重定向了，从http://...到https://...

  • 注意Location:后面有一个网址，说明我们已经重定向到了那个地方

在VScode终端中，我们可以使用命令curl，去观察请求的响应头

$ curl -I -X GET http://harvard.edu/
HTTP/1.1 301 Moved Permanently
Retry-After: 0
Content-Length: 0
Server: Pantheon
Location: https://www.harvard.edu/
...

如果我们使用新的地址，我们可以看到返回的200,以及新版本的HTTP:

$ curl -I -X GET https://www.harvard.edu/
HTTP/2 200 
cache-control: public, max-age=1200
content-type: text/html; charset=UTF-8

如果我们尝试访问一个不存在的URL，我们将看到一个HTTP状态码404:

$ curl -I -X GET https://www.harvard.edu/thisfiledoesnotexist
HTTP/2 404 
cache-control: no-cache, must-revalidate, max-age=0
content-type: text/html; charset=UTF-8

其他HTTP状态码包括:

  • 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
    • An April Fool’s joke years ago
  • 500 Internal Server Error
    • 服务器上有bug的代码可能会导致这种状态码，就像我们在C语言中看到的分段错误一样。
  • 503 Service Unavailable

HTML

HTML 不是一种变成语言，是用来格式化网页并告诉浏览器如何显示它们

一个简单的HTML包括：

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>
            hello, title
        </title>
    </head>
    <body>
        hello, body
    </body>
</html>
  • 第一行<!DOCTYPE html>是页面遵循HTML标准的声明
  • 下一个是一个标签，<html>和</html>前者是打开标签，后者是关闭标签，在这标签表明打开一个页面lang="en"表明页面的语言是英语
  • 嵌套在<html>里面的标签<head>和body就像树上的两个孩子

  • 注意，每个标记及其子标记都有一个映射层次结构。矩形节点是标签，而椭圆形节点是文本

我们可以使用validator来检查HTML的正确性

接下来我们看paragraphs0.html

<!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>
    </body>
</html>

使用<p>标记，我们可以指示文本的每个部分应该是一个段落

我们看一下list0.html，在这里我们使用<ul>标签来创建一个无序列表，就像项目符号一样:

<!DOCTYPE html>

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

有序列表使用<ol>

我们想插入图片使用<img>标签

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>image</title>
    </head>
    <body>
        <img alt="Harvard University" src="harvard.jpg">
    </body>
</html>
  • 我们观察到图片是全屏幕的，我们可以使用CSS来调整图片的高和宽

我们也可以插入视频

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>video</title>
    </head>
    <body>
        <video autoplay loop muted width="1280">
            <source src="halloween.mp4" type="video/mp4">
        </video>
    </body>
</html>

如果我们想使用嵌入式视频

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>iframe</title>
    </head>
    <body>
        <iframe allowfullscreen src="https://www.youtube.com/embed/xvFZjo5PgG0"></iframe>
    </body>
</html>

我们在link1.html中插入连接，使用<a>

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>link</title>
    </head>
    <body>
      Visit <a href="https://www.harvard.edu">Harvard</a>.
    </body>

</html>

我们可以加入一些属性来适应屏幕

html<!DOCTYPE html>

<html lang="en">
    <head>
        <meta name="viewport" content="initial-scale=1, width=device-width">
        <title>responsive</title>
    </head>
    <body>
        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.
    </body>
</html>

我们可以在开发者模式中查看手机端的效果

我们也可以向服务器提供输入在URL中，就像https://wwww.example.com/path?key=value在?后面添加询问

如果我们向在google上搜索一些东西，我们观察URLhttps://www.google.com/search?q=cats&...,代表我们搜索的是cats

我们可以使用<from>标签来获取用户的输入，并且发送到谷歌搜索

<!DOCTYPE html>

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

CSS

我们来看一个主页

<!DOCTYPE html>
  
<html lang="en">
    <head>
        <title>home</title>
    </head>
    <body>
        <p>
            John Harvard
        </p>
        <p>
            Welcome to my home page!
        </p>
        <p>
            Copyright (c) John Harvard
        </p>
    </body>
</html>
  • 我们有三个段落，每个段落我们都使用一个 div 标签，我们使用 div 标签来区分，说明他们是页面上的独立区域

我们还可以使用HTML标签为页面添加更多上下文:

<!DOCTYPE html>
  
<html lang="en">
    <head>
        <title>home</title>
    </head>
    <body>
        <header>
            John Harvard
        </header>
        <main>
            Welcome to my home page!
        </main>
        <footer>
            Copyright (c) John Harvard
        </footer>
    </body>
</html>

我们将通过添加一些美学来使我们的页面风格化:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>home</title>
    </head>
    <body>
        <header style="font-size: large; text-align: center;">
            John Harvard
        </header>
        <main style="font-size: medium; text-align: center;">
            Welcome to my home page!
        </main>
        <footer style="font-size: small; text-align: center;">
            Copyright &#169; John Harvard
        </footer>
    </body>
</html>
  • 我们也使用了一个 HTML实体，来代表版权符号 ©

image.png

在 style 中，使用CSS，告诉浏览器如何在页面上显示标签

CSS 使用键和值，例如 font-size: large

我们发现 text-align: center; 属性在所有的标签中都有，我们就可以把他放在外部的 body 中

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>home</title>
    </head>
    <body style="text-align: center;">
        <header style="font-size: large;">
            John Harvard
        </header>
        <main style="font-size: medium;">
            Welcome to my home page!
        </main>
        <footer style="font-size: small;">
            Copyright &#169; John Harvard
        </footer>
    </body>
</html>

效果也是一样的

为了将 CSS 从 HTML 中分离出来，我们可以把 style 放在 <head> 标签中

<!DOCTYPE html>

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

            body {
                text-align: center;
            }

            header
            {
                font-size: large;
            }

            main
            {
                font-size: medium;
            }

            footer
            {
                font-size: small;
            }

        </style>
        <title>home</title>
    </head>
    <body>
        <header>
            John Harvard
        </header>
        <main>
            Welcome to my home page!
        </main>
        <footer>
            Copyright &#169; John Harvard
        </footer>
    </body>
</html>
  • 上面使用了CSS选择器来对所有的标签进行设置

我们还可以使用更具体的class选择器:

<!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>
        <header class="centered large">
            John Harvard
        </header>
        <main class="centered medium">
            Welcome to my home page!
        </main>
        <footer class="centered small">
            Copyright &#169; John Harvard
        </footer>
    </body>
</html>

  • 我们使用 . 定义我们的CSS 的 class 上面那个例子，我们新建了 .centered, .large, .medium

  • 在页面的任何一个标签上，我们都可以使用这个 class

最后，我们把 CSS 移动到另外一个文件里面，然后用 <link> 标签与HTML 连接

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="home.css" rel="stylesheet">
        <title>home</title>
    </head>
    <body>
        <header class="centered large">
            John Harvard
        </header>
        <main class="centered medium">
            Welcome to my home page!
        </main>
        <footer class="centered small">
            Copyright &#169; John Harvard
        </footer>
    </body>
</html>

.centered
{
    text-align: center;
}

.large
{
    font-size: large;
}

.medium
{
    font-size: medium;
}

.small
{
    font-size: small;
}

CSS 也有ID选择器

image.png

我们发现 <head> 标签里面包含一个 #first 这是一个 ID标签，我们只可以使用他一次，搭配着 `

我们在调整网页时，可以在浏览器的开发者模式中调整，这样调整的就是副本，不会对源文件产生什么影响

在 CSS 中，我们可以依靠引用其他语法来设置如何使用属性

这是 CSS伪类选择器，动态伪类选择器在日常工作中主要用于超链接标签。

image.png

<!DOCTYPE html>

<html lang="en">
    <head>
        <style>
  
            p:first-child
            {
                font-size: larger;
            }
  
        </style>
        <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>
    </body>
</html>

这里，我们使用 p:first-child 来设置第一个<p>标签的属性。

image.png

我们还可以使用属性选择器来选择

a
{
    text-decoration: none;
}

a:hover
{
    text-decoration: underline;
}

a[href="https://www.harvard.edu/"]
{
    color: #ff0000;
}

a[href="https://www.yale.edu/"]
{
    color: #0000ff;
}
  • 语法：选择器[属性名='要求']
  • 我们这样就可以选择href=https://www.harvard.edu/ 的标签了
  • a[href*="harvard.edu"] 表示href 带有 harvard.edu 的标签

一组约定好的 CSS 标准被我们称为框架，我们可以使用 class 使用它们

一个常用的框架是 Bootstrap ,他又一个类似于 alerts 的组件，我们可以通过以下 HTML 代码来使用他

<div class="alert alert-warning">
    ...
</div>

通过阅读 Bootstrap 网站下的官方文档，我们可以知道在<link>标签连接里面的CSS中有一个叫 table 的 class

<!DOCTYPE html>

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

image.png

根据Boostrap文档，通过添加table，我们可以看到我们的表确实被格式化为更容易阅读

我们也会用Bootstrap的样式更新我们的搜索页面

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>search</title>
    </head>
    <body>
        <div class="container-fluid">

            <ul class="m-3 nav">
                <li class="nav-item">
                    <a class="nav-link text-dark" href="https://about.google/">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" href="https://store.google.com/">Store</a>
                </li>
                <li class="nav-item ms-auto">
                    <a class="nav-link text-dark" href="https://www.google.com/gmail/">Gmail</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" href="https://www.google.com/imghp">Images</a>
                </li>
                <li class="nav-item">
                    <a class="btn btn-primary" href="https://accounts.google.com/ServiceLogin" role="button">Sign in</a>
                </li>
            </ul>

            <div class="text-center">
              <img alt="Happy Cat" class="img-fluid w-25" src="cat.gif">
              <form action="https://www.google.com/search" class="mt-4" method="get">
                  <input autocomplete="off" autofocus class="form-control form-control-lg mb-4 mx-auto w-50" name="q" placeholder="Query" type="search">
                  <button class="btn btn-light" type="submit">Google Search</button>
                  <button class="btn btn-light" name="btnI" type="submit">I'm Feeling Lucky</button>
              </form>
 
          </div>
        </div>
          
    </body>
</html>

image.png

  • 首先，我们将把所有内容放入一个<div>中，该<div>可以扩展到适合屏幕的大小。
  • 然后，我们将根据Bootstrap的文档创建一个包含项目和类的列表，以在标题中显示链接和按钮。
  • 最后，我们将在页面中心添加一只猫的图像，以及表单的样式（猫不知道为什么出不来了）

即使有了框架，我们仍然可以编写自己的CSS样式来更改我们想要的任何内容

JavaScript

为了编写可以在浏览器中编写的代码，我们使用一种新的语言叫做 JavaScript 。代码仍然来自于web服务器，但是由用户的浏览器执行

JavaScript的语法类似于C和Python的基本结构:

image.png

let counter = 0;

image.png

counter = counter + 1;
counter += 1;
counter++;

image.png

if (x < y)
{

}

image.png

if (x < y)
{

}
else
{

}

image.png

if (x < y)
{

}
else if (x > y)
{

}
else
{

}

image.png

while (true)
{

}

image.png

for (let i = 0; i < 3; i++)
{

}

  • 观察到，在JavaScript中，我们使用let来声明变量，而不需要指明类型

  • 我们可以使用<script>标签直接包含我们的代码，也可以从.js文件中包含

<!DOCTYPE html>

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

            function greet()
            {
                alert('hello, there');
            }

        </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>

  • 这里，没有给我们的表单添加 action ，因为我们不希望他提交到别的地方，而是停留在这个页面上。我们添加了一个 omsubmit 属性来调用JavaScript，然后使用 return false 来防止表单提交到别的界面上

  • 在<head>标签里面，我们有一个<script>标签，用于写JavaScript

  • 如果我们加载那个页面，我们将看到在提交表单时显示hello, there

由于输入标签的ID为name，因此可以在代码中使用它:

<script>

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

</script>
  • document 是一个全局变量，querySelector 是一个我们可以选择HTML页面中的函数。我们这里选择了一个ID为name的元素，我们获得返回值中的value

我们可以将函数移到页面<body>的底部，因为我们希望先加载页面的其余部分:

<!DOCTYPE html>

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

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

            document.querySelector('form').addEventListener('submit', greet);

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

现在我们可以监听Javascript中的发生的时间。例如这里，我们可以监听 form元素中的submit 事件。当这个时间发生时，使用 greet() 函数

我们也可以在JavaScript中使用匿名函数

<script>

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

</script>

我们使用一个没有名字的函数function,我们在function() 中设置一个 e，然后我们使用完函数后，需要调用 e.preventDefault()

我们也可以通过编程JavaScript的方式来改变样式:

<!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>

image.png

  • 点击R时背景就会变成红色，点击G时背景就会变成绿色，点击B时背景就会变成蓝色

我们也可以使用JavaScript来让图标闪烁起来

<!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>

我们可以通过字典和监听器 keyup 来完成一个搜索自动添加的效果

autocomplete.html

在 geolocation.html标签中，我们可以向浏览器调用用户的GPS坐标

<!DOCTYPE html>
  
<html lang="en">
    <head>
        <title>geolocation</title>
    </head>
    <body>
        <script>
          
            navigator.geolocation.getCurrentPosition(function(position) {
                document.write(position.coords.latitude + ", " + position.coords.longitude);
            });
  
        </script>
    </body>
</html>

我们就可以在地图中找到我们所在的地方了