HTML 文档
简洁、以示例为主的 HTML 参考文档。先读概念，再看代码，然后在 Coddy 学习旅程中动手练习。
开始课程入门
- Doctype`<!DOCTYPE html>` 是每个 HTML 文档的第一行。它告诉浏览器用标准模式而不是怪异模式渲染页面。学习它的语法、旧式 doctype 会触发什么模式，以及如何检查当前模式。
- 标签HTML 标签用来标记内容，让浏览器知道每一部分是什么：标题、段落、链接、图片。学习标签和元素如何工作、哪些标签没有结束标签、嵌套的规则，以及你最常用的标签有哪些。
- 属性属性为 HTML 元素补充信息：链接指向哪里，图片显示什么，应用哪个 CSS 类。学习属性的语法、所有元素都支持的全局属性、class 和 id、布尔属性以及 data-* 属性。
- 注释HTML 注释是写在 <!-- 和 --> 之间、浏览器不会显示的文字。学习注释语法、多行注释、注释掉代码、编辑器快捷键，以及为什么注释不能嵌套、为什么注释从来不是私密的。
- div 元素<div> 标签是一个通用的块级容器，本身没有任何含义。学习用它给内容分组、用 class 设置样式、用 div 和 flexbox 搭建布局，以及什么时候语义标签或按钮才是更好的选择。
- Span<span> 标签是一个通用的行内容器：它包裹一行中的几个词，让你可以在不打断这一行的情况下为它们设置样式或用脚本处理。学习如何使用它、它和 div 有什么区别，以及什么时候用更具体的标签更合适。
文本
- 标题HTML 有六个标题级别，从 <h1> 到 <h6>，它们构成页面的大纲。学习默认字号、标题的排列顺序、应该用几个 h1 标签、如何用 CSS 修改字号，以及屏幕阅读器如何使用标题。
- 换行用 <br> 在一段文字中另起一行。了解什么时候该用 <br>、什么时候用段落更好，如何保留文本中的换行符，如何用 <wbr> 让长单词断开，以及如何阻止换行。
- 空格浏览器会把 HTML 中连续的空格合并成一个。学习如何用 添加额外的空格、不换行空格有什么作用、如何用 <pre> 和 white-space 保留空格和制表符，以及什么时候用 CSS 设置间距更合适。
- 加粗与斜体在 HTML 中用 <strong> 或 <b> 让文字加粗，用 <em> 或 <i> 让文字倾斜。了解什么时候该用哪个标签，如何同时加粗和倾斜，以及如何改用 CSS 设置加粗或斜体。
- 下划线在 HTML 中用 <u> 或 CSS text-decoration 给文字加下划线，用 <s> 或 <del> 加删除线。了解每个标签的含义、<ins> 和 <del> 如何标记修改，以及为什么给非链接文字加下划线会让读者困惑。
- 上标用 <sup> 写上标文字，用 <sub> 写下标文字：指数、序数、脚注标记和化学式。学习它们的常见用法，如何避免它们把行距撑开，以及什么时候用 Unicode 字符或 MathML 更合适。
- 水平线用 <hr> 标签在 HTML 中画一条水平线。学习它的含义、如何用 CSS 修改它的颜色、粗细、宽度和样式，如何制作中间带文字的分隔线，以及如何画竖线。
- 文字居中在 HTML 中用 CSS 的 text-align: center 属性让文字居中。了解它应该写在哪里，为什么对 span 不起作用，如何在盒子里垂直居中文字，如何让文字对齐到开头、末尾或两端，以及如何缩进段落。
链接与图片
- 链接（a href）<a> 元素如何创建链接：href 属性，绝对 URL 和相对 URL，用 #id 跳转到页面中的某个部分，下载链接，卡片链接，以及会让链接失效的常见错误。
- 在新标签页中打开链接给链接加上 target="_blank"，就能在新标签页中打开它。本页介绍 rel="noopener" 和 noreferrer，如何告诉用户链接会在新标签页中打开，target 的其他取值，以及如何用 JavaScript 实现。
- 邮件链接（mailto）用 href="mailto:" 创建打开新邮件的链接，预填主题、正文、抄送和密送，并正确编码这些值，还可以用 tel: 和 sms: 创建一键拨号链接。
- 按钮链接要做一个跳转到其他页面的按钮，正确的做法是把链接设置成按钮的样式。了解为什么链接里套按钮和用 onclick 跳转会出问题，什么时候适合用表单按钮，以及如何设置链接按钮的样式和禁用状态。
- 图片如何用 <img> 标签在 HTML 中插入图片：src 和 alt，用 width 和 height 设置图片尺寸，响应式图片，用 object-fit 裁剪，用 figure 添加图片说明，懒加载，以及图片下方的空隙。
列表与表格
- 列表如何在 HTML 中创建列表：用 <ul> 做项目符号列表，用 <ol> 做编号列表（start、reversed、字母和罗马数字），嵌套列表，描述列表，以及用 CSS 设置或去掉项目符号。
- 表格如何在 HTML 中制作表格：用 <tr> 写行、用 <td> 写单元格、用 <th> 和 scope 写表头单元格，以及 caption、thead、tbody 和 tfoot、斑马纹，还有在小屏幕上可以滚动的表格。
- 表格边框如何用 CSS 给 HTML 表格添加边框：用 border-collapse 得到单线边框、border-spacing、只显示行线、只显示内边框、圆角，以及为什么 border 属性已经过时。
- colspan 和 rowspan用 colspan 横向合并多列单元格，用 rowspan 纵向合并多行单元格。学会数清单元格让表格保持整齐，制作分组表头，并让带合并单元格的表格对屏幕阅读器同样友好。
表单
- 表单如何用 HTML 制作表单：form 元素、name 属性、action 和 method（GET 与 POST）、用 fieldset 和 legend 分组、用 required 和 pattern 做内置验证，以及用 JavaScript 处理提交。
- 输入类型HTML <input> 标签的所有类型一次看全：text、email、password、number、range、日期和时间、color、file、hidden 等等，包括每种类型会验证什么、在手机上弹出哪种键盘，以及它们共用的属性。
- 按钮如何用 <button> 元素在 HTML 中创建按钮：三种类型（submit、button、reset）、随表单发送值、禁用按钮、图标按钮，以及保留焦点环的 CSS 样式。
- 复选框如何用 <input type="checkbox"> 在 HTML 中创建复选框：标签、checked 属性、勾选和未勾选时表单分别发送什么、复选框分组、用 indeterminate 状态实现全选，以及样式设置。
- 单选按钮HTML 单选按钮的工作原理：用 name 属性分组，用 checked 设置默认选项，必选的按钮组，在 JavaScript 中读取选中的值，键盘操作，以及把它们设计成自定义圆点或卡片样式。
- Select 下拉列表如何用 <select> 和 <option> 在 HTML 中制作下拉列表：选项的值、默认选项或占位选项、required、选项分组、多选、在 JavaScript 中读取和设置值，以及自定义下拉箭头的样式。
- Textarea 文本域如何用 <textarea> 制作多行文本框：rows 和 cols、写在标签之间的默认文本、调整大小与自动增高、带字数统计的 maxlength、提交文本中的换行，以及样式设置。
- label 标签<label> 元素如何为表单字段命名：用 for 和 id 关联或直接包裹字段，为复选框和单选按钮扩大点击区域，提示和错误信息，隐藏的标签，以及会破坏关联的常见错误。
语义化 HTML
- 语义化 HTML语义化 HTML 指的是根据内容是什么来选择标签，而不是根据它看起来怎样。学习语义化布局标签（header、nav、main、article、aside、footer），它们能为屏幕阅读器和搜索引擎提供什么，以及如何检查你的页面结构。
- 页眉 header<header> 元素承载页面或区块的开头部分：标志、标题、导航、作者署名。学习如何制作网站页眉、<header> 与 <head> 和标题标签有什么区别、如何在文章中使用它，以及如何让它吸顶。
- 页脚 footer<footer> 元素是页面或区块的结尾部分：版权信息、联系方式、链接、作者信息。学习如何制作带链接分栏的网站页脚、如何让页脚在内容很少的页面上保持在底部，以及页脚在文章中的用法。
- nav 标签<nav> 元素用来标记一组主要的导航链接。学习如何用 <nav> 和列表搭建导航栏，如何标记当前页面，如何为同一页面上的多个 nav 添加标签，以及如何制作移动端菜单开关。
- Section<section> 元素把同一主题的内容归在自己的标题下。学习什么时候用 <section>，什么时候 <article> 或 <div> 更合适，三者如何嵌套，以及带标签的 section 如何成为地标。
head 与 meta 标签
- Title 标签<title> 元素为页面命名，显示在浏览器标签页、书签和搜索结果中。了解它放在哪里、应该多长、它和 <h1> 以及 title 属性有什么区别，以及如何用 JavaScript 修改它。
- meta viewportviewport meta 标签告诉手机按屏幕宽度而不是桌面宽度来排版页面。了解标准写法、每个值的作用、响应式 CSS 为什么依赖它，以及应该避免哪些值。
- 页面跳转把一个页面跳转到另一个页面：用纯 HTML 的 meta refresh 标签、用 JavaScript，或者在服务器上设置。学习 meta refresh 的语法、如何让页面自动刷新、为什么服务器 301 重定向是更好的选择，以及搜索引擎如何对待每一种方式。
- Faviconfavicon 是浏览器标签页上的小图标。学习添加它的 link 标签、需要提供哪些文件和尺寸（ICO、SVG、PNG、apple-touch-icon）、如何制作 SVG 或 emoji 图标、如何用 JavaScript 修改它，以及为什么旧图标总是不消失。
- lang 属性lang 属性告诉浏览器、屏幕阅读器和翻译工具你的内容使用哪种语言。学习它该放在哪里、该用哪些代码（en、en-US、pt-BR）、如何标记另一种语言的短语，以及它带来的可见变化。
媒体与交互元素
- iframe 标签<iframe> 元素可以在你的页面中显示另一个网页。学习需要用到的属性（src、title、width、height）、如何嵌入 YouTube 视频和地图、如何让 iframe 自适应、sandbox 如何限制它的能力，以及为什么有些网站拒绝在 iframe 中加载。
- Video 标签<video> 元素用浏览器自带的播放器播放视频文件。学习它的写法、重要的属性（controls、autoplay、muted、loop、playsinline、poster、preload）、用 <source> 提供备用格式、用 <track> 添加字幕、响应式尺寸，以及用 JavaScript 控制播放。
- audio 标签<audio> 元素用浏览器自带的播放器播放声音文件。学习它的写法、各个属性（controls、autoplay、loop、muted、preload）、该用哪些格式、为什么带声音的自动播放会被拦截，以及如何用 JavaScript 做自己的播放按钮。
- details 和 summary<details> 和 <summary> 元素无需 JavaScript 就能做出可折叠区域：summary 始终可见，点击它就能显示或隐藏其余内容。学习标记写法、open 和 name 属性、手风琴、箭头样式以及 toggle 事件。
