跳到主要内容

HTML 介绍

这是一段简介。

HTML 发展史

HTML 起源

HTML 最早可追溯到 1989 年,在欧洲研究中心 CERN 的一名科学家 蒂姆·伯纳斯-李(Tim Berners-Lee) 为了方便论文分享,提出了使用超链接将文档连接起来的想法。

HTML 早期发展

1991 年蒂姆·伯纳斯-李(Tim Berners-Lee) 发布了 HTML1.0,以及配套的发明: URL(网络资源定位符)、第一个Web服务器和第一个Web浏览器

这一版 HTML 非常简单,支持 18 个标签,重点在于规范如何标记网页的结构和内容。支持标题、段落、列表、超链接,不支持表单、图片、音视频。

超链接使网页间能够无缝导航,使网络成为一个互联空间。通过在网页文档中嵌入超链接,你可以引导用户浏览相关内容,提升浏览体验。

朝着现代 HTML 过渡

1995 年 IETF 正式发布标准 HTML 2.0,支持表单(form、input),开始适用于交互,提供更正式的互联网网页基础规范。

1997 年 W3C 发布 HTML 3.2,支持表格、脚本(JavaScript)、样式(CSS),明确了样式分离

1999 年 W3C 发布 HTML 4.01,明确了结构与表现分离理念,大量标签被废弃(如 font),强调使用 CSS 处理样式,Web 标准运动开始,W3C 推动统一规范

2000–2009 年期间, W3C 尝试把 HTML 变为严格 XML,推出了 XHTML,要求严格闭合标签、大小写敏感。实际上浏览器支持复杂、开发者觉得负担大,最终未能成为主流

HTML 步入新现代

2014 年 HTML5 发布:

  • 引入语义化标签:header、nav、article、section。改进语义元素,使内容结构更清晰
  • 增强多媒体:video、audio。原生支持音频和视频,无需依赖插件。
  • 提供 Canvas、WebStorage、WebSocket 等能力
  • 新增表单输入类型以提升用户互动。
  • 强调向后兼容性,确保与旧网页内容无缝集成。

从此 HTML 采用活标准模式,不再按版本更新,而是持续更新。

前端朝着工程化发展

了解更多:

前端三剑客

HTML、CSS 和 JavaScript 被称为前端三剑客

静态网站

HTML 创建网页,标记网页的结构和内容。CSS 能够更好的标记网页的样式。二者本质上还是把网页当成一种文档来编辑。如果不使用 JavaScript ,网页将是完全静态的——每次打开网页,就是在加载文档内容并渲染,内容不会发生改变,所以称为静态网站

静态网站具有开发简单,部署简单,加载速度快的优点。大多数文档网站和企业官网都是静态网站。

动态网站

JavaScript 为浏览器提供了运行程序的能力,现在许多网站都或多或少使用 JavaScript 。比如在登录界面使用 JavaScript 判断用户输入是否合法、网游和论坛。

JavaScript 的由来

JavaScript 诞生于 1995 年,由网景公司(Netscape)在与 Sun 公司合作的背景下推出。当时浏览器只能展示静态 HTML,缺乏交互能力。为了让网页具备动态效果,网景聘请了 Brendan Eich,并在仅仅 10 天内完成了最初版本的设计。语言最初名为 Mocha,后改为 LiveScript,最终因营销策略借助 Java 的热度而命名为 JavaScript。 设计理念融合了多种语言特性:

  • C 语言的基本语法
  • Java 的数据类型与内存管理
  • Scheme 的函数式编程思想(函数为一等公民)
  • Self 的原型继承机制
JavaScript 标准 ECMAScript

1996 年,微软推出了 JScript,促使 ECMA 组织制定了 ECMAScript 标准,JavaScript 成为其一种实现。早期应用主要集中在表单验证、简单 DOM 操作和事件处理。例如:

js
function validateForm() {
var username = document.getElementById("username").value;
if (username === "") {
alert("用户名不能为空!");
return false;
}
return true;
}

Demo
暂时不必理会如何实现。只需要体会 JavaScript 的作用。

前端开发环境

VSCode 是最常见的前端开发编辑器:免费、好用。

安装 VSCode
配置 VSCode

首次启动 VSCode,安装中文包:

  1. 点击拓展
  2. 搜索并安装 Chinese
  3. 重启 VSCode

安装与前端开发相关的拓展:

  • ESLint
  • Live Preview

允许自动保存文档:

下一节就可以使用 VSCode 编辑你的第一个网页了。

单元测试

Current Selection (单选) 1991 年 Tim Berners-Lee 发布 HTML 1.0 草案。

Current Selection (单选) 1999 年 W3C 发布 HTML 4.01,明确了结构与表现分离理念,大量标签被废弃(如 font),强调使用 CSS 处理样式,Web 标准运动开始,W3C 推动统一规范。

Current Selection (单选) 2000–2009 年期间, W3C 尝试把 HTML 变为严格 XML,推出了 XHTML,要求严格闭合标签、大小写敏感。XHTML 成为了主流。

Current Selection (单选) 截至 2025 年最新 HTML 标准是

Current Selection (单选) 符合 HTML5 的描述是

Current Selection (单选) 以下哪个不是前端三剑客之一

Current Selection (单选) 以下 HTML 语句正确的是

Current Selection (单选) HTML 的主要作用是

Current Selection (单选) CSS 的主要作用是

Current Selection (单选) JavaScript 的主要作用是

Current Selection (单选) 在 HTML 中,哪个标签用于创建一个指向其他网页的超链接?

Current Selection (单选) 要在网页中显示一张图片,应该使用哪个标签?

⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠ You can decompress Drawing data with the command palette: 'Decompress current Excalidraw file'. For more info check in plugin settings under 'Saving'

Drawing

compressed-json
N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQAswYKDXgB6MQHNsYfpwBGAOlT0AtmIBeNCtlQbs6RmPry6uA4wC0KDDgLFLUTJ2lH8MTDHQ0YNMWHRJMRZFAEYADkUAZjIkT1UYRjAaBABtAF1ydCgoAGUAsD5QSXw8XOwNPkZOTExyHRgiACF0VABrEq5GXABhekx6fAQQAGIAMwnJkABfaaA==

%%