前端指南 前端指南
指南
资源
  • 刷力扣 (opens new window)
  • 手写题 (opens new window)
  • 归档
  • 分类
  • 标签
  • 关于我
  • 关于本站
GitHub (opens new window)

Seognil LC

略懂点前端
指南
资源
  • 刷力扣 (opens new window)
  • 手写题 (opens new window)
  • 归档
  • 分类
  • 标签
  • 关于我
  • 关于本站
GitHub (opens new window)
  • HTML 学习指南

    • HTML 简介
      • 什么是 HTML
      • 什么是 WHATWG
      • 为什么要学习 HTML
    • 学习 HTML
      • 概览
      • 学习路线
    • 资料
      • 自学教材
      • 无障碍
    • HTML 知识体系
      • 琐碎的知识
      • 标签的属性
      • HTML 的学习重点
      • HTML 元素及分类
      • 内容分类
    • HTML 典型代码
      • 基本结构
      • 一个简单例子
  • note
  • frontend
  • web
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 知识体系,1~6 小时
  • 难点:SEO、无障碍等
  • 工具:
    • Chrome
    • VS Code
      • Emmet (opens new window):快速编写 HTML
      • Auto Close Tag (opens new window):自动闭合标签
      • Auto Rename Tag (opens new window):自动重命名标签(同步开头结尾)

# 学习路线

  • 前置学习
    • 计算机科学 入门指南
    • 关于 Chrome
  • 学习 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)

# 无障碍

  • ARIA - MDN (opens new window)

# 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 框架。(目前这种方式还不流行)

# 标签的属性

  • 全局属性 - MDN (opens new window)
  • 3.2.6 Global attributes (opens new window)

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 的其他方式来实现。
    • onclick (opens new window), onscroll (opens new window), oninput (opens new window) 等

# 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)
    • <html> (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 代码块
  • 4.3 Sections(区块结构) (opens new window)
    • <body> (opens new window):文档主体,一般包含具体显示内容和脚本
      • <article> (opens new window):文章
      • <section> (opens new window):分区
      • <nav> (opens new window):导航
      • <aside> (opens new window):侧边栏(如广告等)
      • <h1>-<h6> (opens new window):标题
      • <hgroup> (opens new window):标题组
      • <header> (opens new window):头部
      • <footer> (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(表格系列)
    • <table> (opens new window), <tbody> (opens new window), <thead> (opens new window), <tfoot> (opens new window), <tr> (opens new window), <td> (opens new window), <th> (opens new window) 等
  • 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
    • <textarea> (opens new window):支持多行的输入框
    • <button> (opens new window):按钮,可以 submit
    • (下拉菜单系列)
      • <select> (opens new window):选择项
      • <datalist> (opens new window):可以配合 <input> (opens new window) 一起使用
      • <option> (opens new window):选项
      • <optgroup> (opens new window):<option> (opens new window) 的分组
    • <output> (opens new window):表示输出
    • <progress> (opens new window):进度条
    • <meter> (opens new window):指示器(类似进度条,表示范围)
    • <fieldset> (opens new window):用于结构分组
    • <legend> (opens new window):<fieldset> (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 编程控制。

# 内容分类

  • 内容分类 - MDN (opens new window)

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

Content_categories_venn.png

  • 主内容类(Main content categories)
    • 元数据内容(Metadata content)
      • <base> (opens new window), <link> (opens new window), <meta> (opens new window), <noscript> (opens new window), <script> (opens new window), <style> (opens new window), <title> (opens new window)
    • 流式元素(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)
      • 语义化结构 <header> (opens new window), <footer> (opens new window), <h1>-<h6> (opens new window), <article> (opens new window), <aside> (opens new window), <nav> (opens new window), <section> (opens new window)
    • 标题元素(Heading content)
      • <h1>-<h6> (opens new window), <hgroup> (opens new window)
    • 短语元素(Phrasing content)
      • 可以简单理解为行内元素,比如 <strong> (opens new window), <kbd> (opens new window), <label> (opens new window), <input> (opens new window), <textarea> (opens new window), <img> (opens new window), <svg> (opens new window), <video> (opens new window) 等
    • 嵌入元素(Embedded content)
      • <audio> (opens new window), <canvas> (opens new window), <embed> (opens new window), <iframe> (opens new window), <img> (opens new window), <math> (opens new window), <object> (opens new window), <svg> (opens new window), <video> (opens new window)
    • 交互元素(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)
      • <form> (opens new window), <input> (opens new window), <select> (opens new window) 等
    • 支持脚本元素
      • 不会被渲染到页面中的就脚本元素:<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>
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
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式