跳至主要內容
10 Second Timer「NYU」

你好，我是悦创。

题目：https://bornforthis.cn/1v1/04-TommyTian/02-PROJECT-4-REVIEW-EXERCISES.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10 Second Timer</title>
    <style>
        #timer {
            display: block;
            position: relative;
            width: 200px;
            margin: 5% auto;
            padding: 5% auto;
            text-align: center;
        }

        button {
            display: block;
            width: 100px;
            height: 10%;
            margin: 5% auto;
            border: solid 3px black;
            background-color: white;
            font-size: 24px;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1 id="timer">Time's Up!</h1>
    <button type="button" onclick="restart()">Restart</button>
    <script>
        let lefttime = 10;
        let clear;
        let start;
        // 该setTimeout()方法在几毫秒后调用一个函数。
        function restart() {
            start = setTimeout(countdown, 1000);
            if (lefttime <= 0) {
                lefttime = 10;
                start;
            } else {
                // lefttime--;
                lefttime = lefttime - 1;
                setTimeout(countdown, 1000)
            }
        }

        function countdown() {
            $("#timer").html(lefttime);
            if (lefttime <= 0) {
                $("#timer").html("Time's Up!");


            } else {
                lefttime = lefttime - 1;
                setTimeout(countdown, 1000)
            }
        }
    </script>
</body>
</html>
AndersonHJB原创...大约 1 分钟webweb 1v1jswebweb 1v1js
02-URL 简介

概述

URL 是“统一资源定位符”（Uniform Resource Locator）的首字母缩写，中文译为“网址”，表示各种资源的互联网地址。下面就是一个典型的 URL。

https://www.example.com/path/index.html
AI悦创原创...大约 8 分钟htmlwebhtmlweb
06-文本标签

历史上，网页的主要功能是文本展示。所以，HTML 提供了大量的文本处理标签。

<div>

<div>是一个通用标签，表示一个区块（division）。它没有语义，如果网页需要一个块级元素容器，又没有其他合适的标签，就可以使用这个标签。

它的最常见用途就是提供 CSS 的钩子，用来指定各种样式。所以在早期，下面层层包裹的<div>就很常见。

<div class="main">
  <div class="article">
    <div class="title">
      <h1>文章标题</h1>
    </div>
  </div>
</div>
AI悦创原创...大约 16 分钟htmlwebhtmlweb
12-表格标签

表格（table）以行（row）和列（column）的形式展示数据。

<table>，<caption>

<table>是一个块级容器标签，所有表格内容都要放在这个标签里面。

<table>
  ... ...
</table>
AI悦创原创...大约 6 分钟htmlwebhtmlweb
05-网页的语义结构

HTML 标签的名称都带有语义（semantic），使用时应该尽量符合标签的语义，不要用错误语义的标签。语义良好的网页，天然具有良好的结构，对于开发者易读易写，容易维护，也能帮助计算机更好地处理网页内容。

含义

HTML 标签的一个重要作用，就是声明网页元素的性质，使得用户只看标签，就能了解这个元素的意义，阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。

下面就是一个典型的语义结构的网页。

<body>
  <header>页眉</header>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>文章内容</p>
    </article>
  </main>
  <footer>页尾</footer>
</body>
AI悦创原创...大约 6 分钟htmlwebhtmlweb
10-多媒体标签

除了图像，网页还可以放置视频和音频。

<video>

<video>标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示<video>内部的子元素。

<video src="example.mp4" controls>
  <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p>
</video>
AI悦创原创...大约 8 分钟htmlwebhtmlweb
15-移动设备网页设计

<meta>的 viewport 设置

<meta>的 viewport 设置用来控制网页的视觉大小。

<meta name="viewport" content="initial-scale=1">
AI悦创原创...大约 1 分钟htmlwebhtmlweb
07-列表标签

列表是一系列排列好的项目，主要分成两类：有序列表和无序列表。

有序列表是每个列表项前面有编号，呈现出顺序，就像下面这样。

1. 列表项 A
2. 列表项 B
3. 列表项 C
AI悦创原创...大约 5 分钟htmlwebhtmlweb
09-链接标签

链接（hyperlink）是互联网的核心。它允许用户在页面上，从一个网址跳转到另一个网址，从而把所有资源联系在一起。

URL 是链接指向的地址。链接不仅可以指向另一个网页，也可以指向文本、图像、文件等资源。可以这样说，所有互联网上的资源，都可以通过链接访问。

<a>

链接通过<a>标签表示，用户点击后，浏览器会跳转到指定的网址。下面就是一个典型的链接。

<a href="https://wikipedia.org/">维基百科</a>
AI悦创原创...大约 17 分钟htmlwebhtmlweb
2
3
4