大多数情况之下，Web 中构建 ToDo 列表都是采用 JavaScript 脚本（或 React，Vue这样的 JavaScript 框架）来构建。今天在 Codepen 上看到 @Adir 使用纯 CSS 实现了一个简单版本的 ToDo 列表效果。刚看到这个效果的时候，感到很神奇，纯CSS如何实现这样的效果？为了一探究竟，查看源码之后才发现，实现该效果主要是依赖 HTML 元素的 contenteditable 属性。那么今天就和大家一起聊聊 contenteditable 属性怎么实现 ToDo 列表效果。

我们在 UI 还原的过程中，难免会碰到水平或垂直方向的分隔线。在现代 Web 的开发中，大部分前端开发者首先的方案是使用非 <hr> 标签元素，通过 CSS 或 SVG 来制作分隔线，即使在使用 React 或 Vue 构建 Separator （或 Divier）组件，也是采用非 <hr> 标签。可以说，时至今日，<hr> 标签元素已被大部分开发者给遗忘了。既然如此，为什么我要用一篇文章的篇幅来聊 <hr> 元素呢？这主要是出于 Web 的可读性（无障碍）出发点。希望阅读文这篇文章之后，你会有一个更好的选择。

HTML（HyperText Markup Language）是构建Web的最基础部分之一，也可以说是构建Web世界的一砖一瓦。它定义了Web页面或应用的内容的含义和结构。HTML中包含了很多种不同的标签元素，用来更好的帮助你构建Web能让客户端更好的理解，更正确的显示，也能更好的帮助搜索引擎理解页面，还可以更好的利于屏幕阅读技术。但不幸的是，很多开发者都认为HTML仅是一种由元素标签构建成的标签性语言，太过于简单，没有什么可以值得去研究和思考的。如果你也是这么想的，那么接下来的内容可能对你会没有任何的意义；如果不是的话，那么你可以继续往下阅读。

在Web中通过HTML的表单和用户交互是最常见的方式之一，同时HTML的表单也是Web最为复杂的交互部分之一。正因为其复杂，Web中的表单开发也令开发较为头疼。另外，Web表单涵盖了很多部分，除了我们最为熟悉的的<input>、<button>、<select>等表单元素之外，还有其他新的表单元素，比如在HTML5新增的<datalist>、<output>、<progress>和<meter>等元素。简单地说，这些元素可以构建出人与机对话或交互用户界面，然而由于历史和技术上的原因，如何充分发挥它们的潜力并不总是显而易见的。就拿<input>来说吧，要想彻底了解和懂得用<input>并不是易。既然如此，我们在这篇文章中就来和大家聊聊<input>中的故事。

在Web的开发中，对于下拉选项的称谓各有不同，比如下拉菜单，下拉选择框等等。不同的场景之下，采用的方式也有所不同，比如在表单中会使用<select>元素，在自动输入框时会使用HTML的<datalist>和<input>结合使用。而表单中的控件在Web中是件复杂的事情，特别是CSS样式方面更是如此。在这篇文章中，我们就一起来聊聊Web下拉选项相关的事情。

链接和按钮在Web中可以说是最常见不过的东东了。但很少人会去问自己在构建Web的时候，链接和按钮是否用对了，或者说什么时候用链接或按钮？事实上呢？在现代的Web中，特别是在移动端，构建链接和按钮不在局限于<a>或<button>标签上了，可以说是HTML中的其他元素，比如大家喜欢用的<div>、<span>，甚至还有不少用<p>以及其他标签。作为一位专业的Web开发者来说，这样做真的无所谓呢？还是可以改进呢？特别是想让Web更具语义化，更具可访问性的时候，这小小的差异就很值得我们去花时间探讨。

这两天票圈被@Winter大大在极客时间平台推出的《重学前端》刷屏了，而且在微信群和知乎上都有相关讨论。讨论中各种声音都有，可算是热闹了。今天我也凑个热闹，来聊聊我对这个课程的看法。

<details>标签在Chrome，Firefox等浏览器下默认是有展开收起行为的；通过在<details>标签上添加布尔类型的open属性，可以让我们的详情信息默认就是展开状态；<summary>标签如果缺省，则<details>元素会在内部自动创建一个<summary>内容，默认的文案是“详细信息”。本文主要通过一些示例，介绍了HTML5中的<details>和<summary>在不需要借助任何JavaScript就可以实现一些常见的交互效果。

静态网站是Web站点中较为简单的一种，因为它们没有传统的服务器。所涉及的唯一服务器是一个静态资源服务器，你不必对其监控和维护。但是这些所谓的静态网站通过JavaScript可以在客户端上实现很多动态的功能。这使得它们根本不是真正的静态网站——也许它们应该被称为无服务器站点。这种功能通常是用复杂的工具创建的，比如Webpack、Babel和NPM。有效地使用这些工具并不简单。

HTML5 History API是HTML5提供对history栈中内容的操作。DOM window对象通过history对象提供了对浏览器历史的访问。它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转。另外也提供了一些很有意思的API。在这篇文章中简单的来了解history相关的知识。