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 知识体系,1~6 小时
- 难点:SEO、无障碍等
- 工具:
- Chrome
- VS Code
- Emmet (opens new window):快速编写 HTML
- Auto Close Tag (opens new window):自动闭合标签
- Auto Rename Tag (opens new window):自动重命名标签(同步开头结尾)
# 学习路线
- 前置学习
- 学习 HTML
- 快速阅读文档
- 翻阅 HTML 标准文档
- 翻阅 MDN 中元素的文档,查看例子和实际效果
- 理解元素、标签、属性等概念
- 动手玩,亲自尝试
<input>
等元素的各种预设功能 - 练习使用 Emmet (opens new window) 快速编写 HTML
- 快速阅读文档
- 实战
- 你可以直接开发一个 Web 应用,随用随查,通过完成实际的需求来熟悉 HTML。
- 进阶
- HTML 的 SEO 优化
- HTML 的页面结构优化
- ARIA 和无障碍
# 资料
# 自学教材
# 文字
- HTML 简介 - MDN (opens new window)
- HTML 元素参考 - MDN (opens new window)
- The elements of HTML - HTML Living Standard (opens new window)
- Semantic HTML - 顾轶灵 (opens new window)
- 内容分类 - MDN (opens new window)
# 视频
- 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 知识体系
# 琐碎的知识
- DOCTYPE (opens new window)
- 空元素 (opens new window):标签的写法分为闭合和非闭合,所以 空元素 又可以称为 自闭合标签,这些元素内部无法再嵌套其他元素
- <area> (opens new window), <base> (opens new window), <br> (opens new window), <col> (opens new window), <colgroup> (opens new window), <command> (opens new window), <embed> (opens new window), <hr> (opens new window), <img> (opens new window), <input> (opens new window), <keygen> (opens new window), <link> (opens new window), <meta> (opens new window), <param> (opens new window), <source> (opens new window), <track> (opens new window), <wbr> (opens new window)
- Web Component (opens new window):可以自己设计 HTML 元素,类似现代 Web 框架中组件的概念。但是是更官方的标准,不依赖任何其他 JS 框架。(目前这种方式还不流行)
# 标签的属性
HTML 元素的标签上可以添加属性
- 一些常见的全局属性
- id (opens new window):全文档唯一的标识符
- class (opens new window):类,可以使 CSS 或 JS 批量地施加效果
- title (opens new window):hover 上去会显示 title 中的信息
- style (opens new window):用于写内联样式
- data-* (opens new window):自定义数据,一般用于 JS 读写数据
- aria-* (opens new window):无障碍系列属性
- DOM 回调事件 (opens new window):事件系列属性,不过现在一般很少直接写在 HTML 中了,可以用 JS 的其他方式来实现。
# HTML 的学习重点
如果进行基本的 Web 页面开发,关于 HTML 你大致需要了解:
- 组织页面结构的元素:<article> (opens new window), <div> (opens new window), <h1> (opens new window), <p> (opens new window), <span> (opens new window) 等
- 预设显示效果的元素:<i> (opens new window), <strong> (opens new window), <code> (opens new window), <pre> (opens new window), <table> (opens new window) 等
- 预设功能的元素:<video> (opens new window), <canvas> (opens new window), <input> (opens new window) 等
- 表单和输入:<form> (opens new window), <input> (opens new window) 等元素的各种属性、行为和用法
如果你想要更进一步,关于 HTML 还有这些内容可以了解:
- 外部资源加载:<link> (opens new window), <script> (opens new window),它们涉及跨域、隐私策略、加载顺序等问题
- SEO 优化:<head> (opens new window) 中 <title> (opens new window)、<meta> (opens new window) 提供的信息
- 语义化:<body> (opens new window) 内的结构设计和元素的选择(和 SEO 也有关)
- 无障碍、可访问性:ARIA (opens new window)、<img> (opens new window) 的
alt
属性等等
# HTML 元素及分类
通过阅读标准文档,建立 HTML 知识体系
以下列表中的所有链接都来自:
- HTML Living Standard (opens new window):HTML 标准文档
- HTML 元素参考 - MDN (opens new window):MDN 开发者手册,查看元素实际的显示效果和作用
(MDN 的中文页面可能会缺失 Demo,所以姑且全部指向英文的版本,反正主要目的是查看元素的显示效果)
(还有什么比标准文档更权威呢?)
- 4.1 The document element (opens new window)
- 4.2 Document metadata (opens new window)
- <head> (opens new window):一般用于元数据
- <title> (opens new window):文档标题(浏览器标签栏)
- <base> (opens new window):全局根 URL(给相对 URL 的外部资源用的)
- <link> (opens new window):外部资源
- <meta> (opens new window):其他元数据,一般用
name
、http-equiv
、content
设定元数据的键值 - <style> (opens new window):CSS 代码块
- <head> (opens new window):一般用于元数据
- 4.3 Sections(区块结构) (opens new window)
- 4.4 Grouping content(内容分组) (opens new window)
- <div> (opens new window), <p> (opens new window):块、段落(非常常见的两个结构性元素)
- <hr> (opens new window):分割线
- <pre> (opens new window):表示文本已预先格式化,按照原文件中的编排(不会被浏览器自动处理空格)
- <blockquote> (opens new window):引用块
- <ol> (opens new window), <ul> (opens new window), <li> (opens new window):列表系列
- <dl> (opens new window), <dt> (opens new window), <dd> (opens new window):描述列表系列
- <figure> (opens new window), <figcaption> (opens new window):引用块和描述
- <main> (opens new window):主要部分(语义)
- 4.5 Text-level semantics(文本级语义) (opens new window)
- (修饰系列)
- <em> (opens new window):斜体(强调)
- <i> (opens new window):斜体(术语)
- <strong> (opens new window):粗体(重要)
- <b> (opens new window):粗体(提醒)
- <s> (opens new window):删除线
- <u> (opens new window):表示错误的下划线
- <mark> (opens new window):高亮
- <abbr> (opens new window):缩写(hover 上去可以显示全称)
- <ruby> (opens new window), <rt> (opens new window), <rp> (opens new window):给东南亚语言(汉语、日语等)的文字加上拼音、注音
- <a> (opens new window):链接
- <code> (opens new window):代码块
- <kbd> (opens new window):键盘输入元素,一般用于展示快捷键
- <small> (opens new window):小一号字体显示
- <sup> (opens new window), <sub> (opens new window):上标、下标
- <span> (opens new window):无特殊语义,可以用于加 CSSfigcaption
- <br> (opens new window):空行
- (修饰系列)
- 4.6 Links (opens new window):关于 <a> (opens new window)、<link> (opens new window) 属性的文档
- 4.7 Edits (opens new window)
- <ins> (opens new window), <del> (opens new window):表示插入、删除,配合 CSS 可以实现类似 Git Diff 的效果
- 4.8 Embedded content(内联内容) (opens new window)
- <picture> (opens new window):图片元素,可以包含 <source> (opens new window) 和 <img> (opens new window)
- <img> (opens new window), <video> (opens new window), <audio> (opens new window):图片视频音频
- <source> (opens new window):可以指定多个的资源(比如视频的不同格式)
- <track> (opens new window):字幕
- <iframe> (opens new window):内嵌另一个 HTML 页面
- 4.9 Tabular data(表格系列)
- 4.10 Forms(表单系列)
- <form> (opens new window):表单区域(内置的组件,可以用
submit
进行提交) - <label> (opens new window):标签(可以用于和选择框关联)
- <input> (opens new window):输入,可以
submit
- <type> (opens new window) 属性,根据
type
值的不同,可以表示单行输入框、密码、滑动条、单选框等不同形式。type
可选的值:hidden
,search
,tel
,url
,email
,password
,date
,month
,week
,time
,datetime-local
,number
,range
,color
,checkbox
,radio
,file
,submit
,image
,reset
,button
- 其他属性:
maxlength
,minlength
,size
,readonly
,required
,multiple
,pattern
,min
,step
,list
,placeholder
- <type> (opens new window) 属性,根据
- <textarea> (opens new window):支持多行的输入框
- <button> (opens new window):按钮,可以
submit
- (下拉菜单系列)
- <output> (opens new window):表示输出
- <progress> (opens new window):进度条
- <meter> (opens new window):指示器(类似进度条,表示范围)
- <fieldset> (opens new window):用于结构分组
- <legend> (opens new window):<fieldset> (opens new window) 的标题
- <form> (opens new window):表单区域(内置的组件,可以用
- 4.11 Interactive elements(互动元素) (opens new window)
- <details> (opens new window):一个可折叠的块级元素
- <summary> (opens new window):折叠组件的标签
- 4.12 Scripting(脚本相关) (opens new window)
- <script> (opens new window):脚本,运行内嵌脚本或
src
属性值(地址)的脚本- 属性
src
:设置外部脚本地址(不是内嵌脚本)type
:值必须为 MIME 类型,text/javascript
、text/ecmascript
、application/javascript
、application/ecmascript
nomodule
:如果浏览器支持 ESM,则不执行async
:异步defer
:异步crossorigin
:跨域integrity
:资源完整性(SRI),比如用sha256
检测资源是否正常referrerpolicy
:HTTP 请求的隐私策略
- 属性
- <noscript> (opens new window):当浏览器脚本禁止或无法执行时,显示其中的内容
- Web Components 相关
- <template> (opens new window):模板元素,可以存放代码片段(用于 JS 处理)
- <slot> (opens new window):插槽(类似于 Vue 中的 slot)
- <canvas> (opens new window):画布元素,可以通过 JS 编程控制。
- <script> (opens new window):脚本,运行内嵌脚本或
# 内容分类
每一个 HTML 元素都必须遵循定义了它可以包含哪一类内容的规则。 这些规则被归类为几个常见的元素内容模型(content model)。每个 HTML 元素都属于 0 个、1 个或多个内容模型,每个模型都有一些规则使得元素中的内容必须遵循一个 HTML 规范文档( HTML-conformant document)。
- 主内容类(Main content categories)
- 元数据内容(Metadata content)
- 流式元素(Flow content)
- 其他大部分具有结构效果的元素,比如 <div> (opens new window), <h1> (opens new window), <a> (opens new window), <strong> (opens new window), <noscript> (opens new window), <svg> (opens new window), <video> (opens new window) 等
- 有一些特殊情况,比如 带
scoped
属性的 <style> (opens new window) 等
- 章节元素(Sectioning content)
- 标题元素(Heading content)
- 短语元素(Phrasing content)
- 嵌入元素(Embedded content)
- 交互元素(Interactive content)
- <a> (opens new window), <button> (opens new window), <details> (opens new window), <embed> (opens new window), <iframe> (opens new window), <label> (opens new window), <select> (opens new window), <textarea> (opens new window)
- 某些元素加上属性也可以交互:<audio> (opens new window), <img> (opens new window), <input> (opens new window), <menu> (opens new window), <object> (opens new window), <video> (opens new window)
- 表单相关内容(Form-associated content)
- 支持脚本元素
- 不会被渲染到页面中的就脚本元素:<script> (opens new window), <template> (opens new window)
# 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>
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17