1.HTML歷史

TML，即超文本標記語言(HyperText Markup Language)，是構建網頁和網絡應用的基石。自從它的誕生以來，HTML經歷了多次迭代，每個版本都對Web開發的可能性進行了擴展。以下是HTML發展歷程的概述，包括每個主要版本的變化和未來趨勢。

HTML的起源

HTML的歷史可以追溯到1989年，當時**蒂姆·伯納斯-李（Tim Berners-Lee）**在CERN（歐洲核子研究組織）提出了一個創新的想法，即創建一個互聯的信息系統，這個系統后來演變成了萬維網（World Wide Web）。HTML是這個系統的核心組成部分，它允許文檔通過超鏈接互相引用，形成一個信息網絡。

HTML 2.0

發布時間：1995年
主要變化：

HTML 2.0是第一個被IETF HTML工作組正式標準化的HTML版本。
它包括了一套基礎的標記，如標題、段落、列表、鏈接和圖片等。
引入了表單，允許用戶輸入數據和提交到服務器。

HTML 3.2

發布時間：1997年
主要變化： HTML 3.2由W3C（萬維網聯盟）標準化，這標志著W3C在HTML標準化過程中的主導地位。引入了表格、應用程序、Java小程序和文本流等新特性。改進了文檔結構和表現元素，這是向CSS過渡的初步嘗試。

HTML 4.01

發布時間：1999年
主要變化： 強調了結構與表現的分離，推動了CSS的使用。引入了框架集，允許在一個單獨的瀏覽器窗口中顯示多個頁面。支持腳本語言，如JavaScript，為動態內容和交互性鋪平了道路。提升了對國際化和無障礙訪問的支持。

XHTML 1.0

發布時間：2000年
主要變化： XHTML是HTML的一個重要分支，它將HTML與XML結合起來，要求更嚴格的代碼編寫規范。與HTML 4.01具有相同的元素和屬性，但需要遵守XML的自閉合標簽和大小寫敏感規則。

HTML5

發布時間：2014年
主要變化：

HTML5引入了多種新的語義元素，如<article>、<section>、<nav>、<header>、<footer>等，使得文檔結構更加清晰。
支持音頻和視頻元素<audio>和<video>，減少了對插件的依賴。
引入了Canvas API和SVG，為網頁圖形提供了豐富的繪圖能力。
提供了本地存儲、離線應用支持、地理位置API等豐富的Web應用功能。

HTML的未來趨勢

隨著Web技術的不斷發展，HTML也在不斷進化。未來的HTML可能會包括：

更豐富的語義元素： 以提供更多的上下文信息，幫助搜索引擎和輔助技術更好地理解內容。
Web組件： 標準化的自定義元素和陰影DOM，使得創建封裝的、可重用的組件成為可能。
性能優化： 如懶加載屬性，允許瀏覽器更智能地加載資源，提升頁面加載速度。
更強的API支持： 隨著PWA（漸進式Web應用）的興起，HTML可能會增加更多與設備硬件交互的API，如藍牙、NFC等。
增強的安全性： 隨著網絡安全威脅的增加，HTML可能會集成更多的安全特性來保護用戶數據。

HTML的歷史是Web技術發展的縮影。從簡單的文檔標記到復雜的Web應用平臺，HTML已經成為現代互聯網不可或缺的一部分。隨著技術的進步，我們可以期待HTML將繼續演進，以滿足未來網絡世界的需求。

絡編程之時間格式。

同學們好，今天我們分享的是如何讓搜索引擎等程序更容易地提取網頁中的時間信息。我們將使用time標簽來實現這一目標。這個標簽你們可能已經有所了解，但是現在不需要掌握太多細節，只需要知道它的作用即可。

現在來看看我們的示例頁面，可以看到頁面中包含了很多句不同時間格式的文字。這些文字并沒有什么特別之處，只是每一句都包含著時間信息。時間信息的格式比較復雜，但是這不影響我們的演示效果。

接下來，我們將介紹實現代碼。time標簽用于定義公歷日期或時間、二十四小時制，時間和時區偏移是可選的。在所有瀏覽器中，time標簽不會渲染任何特殊的效果。但是，它可以讓搜索引擎更容易地在網頁中找到對應的時間信息。

使用time標簽的另一個原因是，世界上有許多不同的日期格式，但是這些不同的格式不容易被電腦識別。如果我們想自動抓取頁面上所有事件的日期并將它們插入到日歷中，time元素可以讓我們附上清晰的可被機器識別的時間或日期。因此，time標簽并不是為了給用戶看的，而是為了方便搜索引擎更好地在網頁上找到對應的時間。

在我們的示例中，時間和普通文字看上去沒有任何區別。除了搜索引擎，網頁同手機上的日歷、提醒等應用程序交互時，time標簽也可以提供很大的方便。

time標簽非常簡單，只包含一個屬性datatime，用于規定日期和時間。如果需要，我們還可以通過元素的內容來指定日期和時間。time標簽的值有很多種，只要是符合規范的時間寫法格式，都可以被接受并轉化為第三方使用的格式。

總之，time標簽的使用頻率并不高，不需要我們進行太多的學習和理解。如果你們知道有這個東西并且知道它的大概意思，就可以了。

今天的分享就到這里，所有的案例和相關文檔都可以向我索取。

下期見，想學習編程的同學請關注我。

ue 示例

在JavaScript或Vue中獲取當前時間并格式化輸出到精確的時分秒，你可以使用Date對象結合字符串拼接或者模板字符串來實現。下面是一個簡單示例，展示了如何在Vue中完成這項任務：

<template>
  <div>
    <p>當前時間：{{ formattedTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formattedTime: ''
    };
  },
  mounted() {
    this.updateTime();
    setInterval(this.updateTime, 1000); // 每秒更新一次
  },
  methods: {
    updateTime() {
      const now = new Date();
      // 使用模板字符串進行格式化
      this.formattedTime = `${now.getFullYear()}-${this.padZero(now.getMonth() + 1)}-${this.padZero(now.getDate())} ${this.padZero(now.getHours())}:${this.padZero(now.getMinutes())}:${this.padZero(now.getSeconds())}`;
    },
    // 輔助函數，用于補零操作
    padZero(num) {
      return num < 10 ? '0' + num : num;
    }
  },
  beforeDestroy() {
    // 清除定時器，避免內存泄漏
    clearInterval(this.timer);
  }
};
</script>

在這個示例中，我們在Vue組件的mounted生命周期鉤子中初始化了一個定時器，每秒鐘調用updateTime方法來更新當前時間，并在組件銷毀前通過beforeDestroy鉤子清理定時器。

updateTime方法中，我們創建了一個新的Date對象來獲取當前時間，然后使用模板字符串和輔助函數padZero來確保月份、日期、小時、分鐘和秒數如果是個位數，則在其前補零，以便格式統一和美觀。

這樣，頁面上就會顯示一個實時更新的當前時間，格式為“年-月-日時:分:秒”。

Vue3 Composition API 示例

在Vue3中，雖然一些API和寫法有所變化，但獲取和格式化當前時間的基本邏輯與Vue2相似。以下是使用Vue3 Composition API的一個示例：

<template>
  <div>
    <p>當前時間：{{ formattedTime }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const formattedTime = ref('');
let timer = null;

const updateTime = () => {
  const now = new Date();
  formattedTime.value = `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
};

const padZero = (num) => {
  return num < 10 ? '0' + num : num;
};

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000); // 每秒更新一次
});

onBeforeUnmount(() => {
  // 清除定時器
  clearInterval(timer);
});
</script>

在這個Vue3的示例中，我們使用了Composition API來管理狀態和生命周期鉤子。ref用于定義響應式數據formattedTime，而onMounted和onBeforeUnmount分別替代了Vue2中的mounted和beforeDestroy生命周期鉤子。

updateTime函數和padZero輔助函數的功能與Vue2示例相同，用于獲取當前時間并進行格式化處理，以及在數字小于10時前面添加零。

這樣，你就可以在Vue3應用中實現實時更新并格式化顯示當前時間的功能。

TypeScript 公共函數封裝

使用TypeScript可以為你的代碼增加類型安全。下面是如何封裝一個獲取并格式化當前時間的公共函數，這個函數可以在Vue3的項目中作為公共方法使用。

首先，在你的Vue3項目的某個公用文件夾（如src/utils）下創建一個名為dateTimeUtils.ts的文件，并編寫如下代碼：

// src/utils/dateTimeUtils.ts

export function formatCurrentTime(): string {
  const now = new Date();
  return `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
}

function padZero(num: number): string {
  return num < 10 ? '0' + num : num.toString();
}

這個模塊導出了一個formatCurrentTime函數，它返回當前時間的格式化字符串。同時，內部使用了padZero輔助函數來保證數字的格式正確。

然后，在你的Vue3組件中，你可以這樣使用這個公共函數：

// 某個Vue3組件.vue文件

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { formatCurrentTime } from '@/utils/dateTimeUtils'; // 根據你的實際路徑調整

const formattedTime = ref('');

onMounted(() => {
  formattedTime.value = formatCurrentTime();
  setInterval(() => {
    formattedTime.value = formatCurrentTime();
  }, 1000);
});
</script>

<template>
  <div>
    <p>當前時間：{{ formattedTime }}</p>
  </div>
</template>

這里，我們導入了formatCurrentTime函數，并在組件掛載時設置初始值，之后每秒更新一次顯示的時間。注意，為了避免潛在的內存泄漏，如果組件需要銷毀時停止時間更新，你可能還需要在適當的生命周期鉤子中清除定時器，正如之前Vue2和Vue3 Composition API示例中所示。不過，在此示例中為了保持簡潔，省略了該部分代碼。

在線咨詢

上一篇：JavaScript基礎語法02-JS書寫位置
下一篇：html 每個標簽都自帶樣式，你知道更具體的嗎？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商