HTML 学习指南

# HTML 简介

# 什么是 HTML

HTML(HyperText Markup Language,超文本标记语言) 是一种描述语言,用来定义网页结构。

大白话:HTML 是用来写页面结构的。

# 什么是 WHATWG

网页超文本应用技术工作小组(英语:Web Hypertext Application Technology Working Group,缩写:WHATWG),是一个以推动网络 HTML 标准为目的而成立的组织。在 2004 年,由 Apple 公司、Mozilla 基金会和 Opera 软件公司所组成。

大白话:WHATWG 是修订 HTML 规范的一群人。

# 为什么要学习 HTML

  • 当你要写页面

对于网页页面,无论是朴素地徒手开发,还是使用 Web 框架和组件,你都需要了解 HTML。

前端框架 React 中的 JSXVue 中的 template 最终也都是生成 HTML 让浏览器渲染罢了。

# 学习 HTML

本篇只包含 HTML 中的元素和标签部分。
关于 CSS、DOM 以及 Web 编程,我们可以在后续的文章中进行。

# 概览

通过快速浏览 HTML 标准文档,了解 HTML 规范中所有的元素和标签。

# 学习路线

  • 前置学习
  • 学习 HTML
    • 快速阅读文档
      • 翻阅 HTML 标准文档
      • 翻阅 MDN 中元素的文档,查看例子和实际效果
      • 理解元素、标签、属性等概念
    • 动手玩,亲自尝试 <input> 等元素的各种预设功能
    • 练习使用 Emmet 快速编写 HTML
  • 实战
    • 你可以直接开发一个 Web 应用,随用随查,通过完成实际的需求来熟悉 HTML。
  • 进阶
    • HTML 的 SEO 优化
    • HTML 的页面结构优化
    • ARIA 和无障碍

# 资料

# 自学教材

# 文字

# 视频

  • HTML Crash Course For Absolute Beginners:60 分钟,2017 年
    • 0:00 - HTML 简介,简单的编辑环境
    • 11:14 - 标签的语法
    • 12:32 - 典型的页面和 HTML 结构,Doctype
    • 14:12 - 大量的 HTML 元素的演示
    • 49:24 - 通过一个实例(写一个简单的博客结构),了解 HTML 语义化(含少量 CSS)

# 无障碍

# HTML 知识体系

# 琐碎的知识

# 标签的属性

HTML 元素的标签上可以添加属性

  • 一些常见的全局属性
    • id:全文档唯一的标识符
    • class:类,可以使 CSS 或 JS 批量地施加效果
    • title:hover 上去会显示 title 中的信息
    • style:用于写内联样式
  • data-*:自定义数据,一般用于 JS 读写数据
  • aria-*:无障碍系列属性
  • DOM 回调事件:事件系列属性,不过现在一般很少直接写在 HTML 中了,可以用 JS 的其他方式来实现。

# HTML 的学习重点

如果进行基本的 Web 页面开发,关于 HTML 你大致需要了解:

如果你想要更进一步,关于 HTML 还有这些内容可以了解:

  • 外部资源加载:<link>, <script>,它们涉及跨域、隐私策略、加载顺序等问题
  • SEO 优化:<head><title><meta> 提供的信息
  • 语义化:<body> 内的结构设计和元素的选择(和 SEO 也有关)
  • 无障碍、可访问性:ARIA<img>alt 属性等等

# HTML 元素及分类

通过阅读标准文档,建立 HTML 知识体系

以下列表中的所有链接都来自:

  • HTML Living Standard:HTML 标准文档
  • HTML 元素参考 - MDN:MDN 开发者手册,查看元素实际的显示效果和作用
    (MDN 的中文页面可能会缺失 Demo,所以姑且全部指向英文的版本,反正主要目的是查看元素的显示效果)

(还有什么比标准文档更权威呢?)

# 内容分类

每一个 HTML 元素都必须遵循定义了它可以包含哪一类内容的规则。 这些规则被归类为几个常见的元素内容模型(content model)。每个 HTML 元素都属于 0 个、1 个或多个内容模型,每个模型都有一些规则使得元素中的内容必须遵循一个 HTML 规范文档( HTML-conformant document)。

Content_categories_venn.png

# HTML 典型代码

# 基本结构

一个 HTML 文件至少要包含:

  • DOCTYPE:用于指明是 HTML
  • <html>
    • <head>:一些 meta 信息(不会渲染到页面中,具有其他作用)
    • <body>:主要内容(渲染到页面中)
<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题(会反映在浏览器标签页中)</title>
  </head>
  <body>
    <h1>H1 标题</h1>
    <p>段落</p>
    <p>另一个段落</p>
  </body>
</html>

# 一个简单例子

通过 VS Code 中内置的 Emmet 功能生成的基本 HTML 代码,并加入样式 和 JS 代码的标签。

(这里略过 CSS 和 JS 的代码)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <style></style>
  </head>
  <body>
    <div id="app"></div>
    <script src="app.js"></script>
  </body>
</html>