整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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示例中所示。不过,在此示例中为了保持简洁,省略了该部分代码。