Web 表单 是 HTML 文档与用户交互的重要部分， 其中的 input[type="radio"] 是单选框控件。 如何设置和获取 单选控件（input[type=radio]）的状态还是比较繁琐的， 而且需要理解 DOM 的一些基本概念。 本文整理一下相关操作，并给出可用的代码片段。

TL;DR

• HTML 选中可以添加 checked Attribute（Content Attribute）：<input type="radio" checked>；
• 脚本选中需要设置 checked Property（IDL Attribute）：contactChoice3.checked=true；
• 选中变化需要监听所有单选控件，处理函数中找到选中的控件，读取器 value 属性。

TL;DR: 相比 img 标签，picture 提供了更丰富的响应式资源选择方式； figure 用于提供排版的图表概念，其中的图片仍然要使用 picture 或 img； 在支持 HTML5 的浏览器中，可以基于视口宽度、设备像素密度、缩放级别、 以及图片格式的支持程度来选择图片资源。 图片替代文本（alt 属性）的目的是替代图片内容，可以增强网页在很多场景下的可用性。 此外对于纯装饰性的图片不建议使用任何 HTML 标签，可以利用 CSS 实现。

本文的核心问题是 如何实现点击态效果。移动端浏览器中没有鼠标的概念， 但滚动、点击等概念仍然成立，于是鼠标相关的这些伪类就不太容易理解。 在阅读本文的同时可以用手头的浏览器尝试 这个 Demo。TL;DR：

• PC 上使用 :hover 判断鼠标悬停；使用 :active 匹配鼠标左键（primary button）按下。
• 移动上使用 :active 判断手指按下，要兼容 iOS 需要绑一个 touch 类事件。
• 使用 -webkit-tap-highlight-color 禁用移动浏览器的默认（UA-defined）点击态。

在编程语言中，字符串 直接量（Literal Value，也叫字面量）需要用一对分隔符来定义， 比如 "author:harttle" 中前后的引号。 那么当字符串中要表示分隔符时就需要 转义，比如 "author:\"harttle\""。

JavaScript 是一种 通用编程语言，这类语言的转义相对比较一致通常使用反斜线，比如 \n, \r 等。 但是在 HTML、CSS 这样的 领域特定语言 中为了在大多数场景中提供更简单的语法， 转义就会比较麻烦。下文中给出 HTML 和 CSS 中的字符串转义机制，以及如何进行转义的代码片段。

本文介绍的是 HTML 和 CSS 中的转义，不是 JavaScript 中的 escape 方法（它可以产生一个类似 URL 编码的结果）。 此外关于百分号编码请参考 百分号编码与 encodeURIComponent，关于表单编码请参考 HTTP 表单编码 enctype

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置， 例如 本文 左侧的悬浮导航，当页面滚动到它以前会正常地渲染到文档流中， 当页面滚动超过了它的位置，就会始终悬浮在左侧。

本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性。 关于如何获取 DOM 元素高度和滚动高度，请参考 视口的宽高与滚动高度 一文。

反模式 是指对反复出现的设计问题的常见的无力而低效的设计模式，俗话说就是重蹈覆辙。 这篇文章描述了 JavaScript 中常见的一些反模式，以及避免它们的办法。

本文中的例子都是根据真实故事改编。

如今 HTTPS 已经普遍应用了，在带来安全性的同时也确实给 Web 引入了更多复杂的概念。 这其中就包括一系列从没见过的网络协议。现在 Harttle 从一个发往 github.com 的请求谈起， 逐字节分析 HTTPS 的协议内容和相关概念，从 TCP 握手到 TLS 协议， 并稍微介绍一些这个请求涉及的 TLS 扩展协议：SNI 和 ALPN。