HTML5

聊一点你可能不知道的HTML

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

聊聊input元素

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

聊聊Web中的下拉选项的事情

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

它是按钮还是链接?

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

聊聊《重学前端》

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

借助HTML5 details,summary无JS实现各种交互效果

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

静态网站剖析

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

HTML5 History API

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

output元素

昨天晚上,我在一个特别大的代码库中四处游荡,偶然发现了我们平时使用的normalize.css文件用于重置HTML元素在不同浏览器中的样式。在这个过程中,我发现了一个名为<output>的特殊元素的样式,这是我以前从未见过的,甚至从未听说过的。根据MDN上的相关描述,它代表计算或用户操作的结果,通常用于表单。让我感到尴尬的是,自从Chris在2011年在一篇文章中使用它之后,这并不是一个新的,花哨的附加功能。

表单验证第四部分: MailChimp订阅表单中的验证

在这个系列的上几篇文章中, 我们已经学会了如何使用输入类型和验证属性本地进行表单验证。我们也学会了如何使用约束验证 API 来提高浏览器原生的验证能力以提供更好的用户体验。 并且我们写了一个 polyfill 将支持一直延伸到IE9(并在一些较新版本中添加了几个功能)。现在, 让我们把学到的知识运用到一个真实的例子中:MailChimp注册表单。

页面

返回顶部