前端指南
Seognil LC
2020-06-02
目录

HTML 学习指南

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 (opens new window) 中的 JSX (opens new window) 或 Vue (opens new window) 中的 template (opens new window) 最终也都是生成 HTML 让浏览器渲染罢了。

# 学习 HTML

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

# 概览

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

# 学习路线

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

# 资料

# 自学教材

# 文字

# 视频

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

# 无障碍

# HTML 知识体系

# 琐碎的知识

# 标签的属性

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

# HTML 的学习重点

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

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

# HTML 元素及分类

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

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

（还有什么比标准文档更权威呢？）

# 内容分类

每一个 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>
1
2
3
4
5
6
7
8
9
10
11

# 一个简单例子

通过 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#html
上次更新: Nov 18, 2022 10:11 PM
最近更新
01
Linux Shell 快速入门笔记
11-18
02
我的 Web 前端开发知识体系 （2022）
01-29
03
游戏环境研究笔记（2022-01）
01-16
更多文章>
Theme by Vdoing | Copyright © 2019-2022 Seognil LC | MIT License