HTML5系列

figure 和 figcaption 元素的正确使用方式

figurefigcaption是两个经常在一起使用的语义化元素。如果你还没有在规范中了解过他们,没有机会在项目中使用过他们,或者说现在对他们还是一无所知,这里就给大家讲一些如何正确使用他们的小技巧。

pattern--HTML5的表单验证属性

在本教程中我们将探索 HTML 的pattern属性,用来帮助我们制定自定义表单验证的方式。表单验证对一个网站的安全性,以及可用性至关重要。验证过程就是在表单提交之前判断输入值是否匹配了正确的格式。例如,如果我们要在一个输入框内输入电子邮件地址,该值一定要是一个有效的电子邮件地址;应该以一个字母或数字开头,然后是@符号,最后以一个域名结束。HTML5规范对于一些新的input类型,如emailurltel,也做出了一些更为简易的验证,并且也被打包成了预定义的验证。当给定的值不符合预期的格式时,这些输入类型就会抛出一条错误的消息从而阻止提交。

如何使用 HTML5 的picture元素处理响应式图片

图片在响应式网页设计中是出了名的最具挑战性的方面之一。今天我们就来看看如何使用<picture>元素来处理响应式图片.固定宽度,像素完美的网站设计已经离我们远去了。在宽屏显示器,互联网电视,多尺寸的平板电脑和智能手机的今天,我们的设计必须应付一切可能,将宽由320px7680px转变。伴随这种多分辨率风景而至的,是需要拉伸或收缩图像,以适应这些不同的要求。这可以被理解为如下问题,矢量图形出现异常时,绝大多数具有特定像素的图像宽度并不改变。所以,我们应该怎么做呢?

HTML5 dialog元素生成模态弹出窗口

近期,网页上的的许多流程都需要用户完全同意才可以完成。例如,用户可能需要删除帐户,更改他们的用户名,或确认货币交易。这种情况下,常用的用户体验(UX,User experience design)是显示一个具有两个按钮的对话框。一个是取消,一个是继续。这么多年,我们一直依靠JavaScript库实现此效果,但在本教程中,我们要用<dialog>元素实现此效果。

生成一个自定义的HTML5视频播放器

虽然拥有特定的HTML视频元素的想法是在十多年前被提出的,但是我们才刚刚开始看到它取得的成果!忘记"HTML5 2012"那所有的繁文缛节;事实是,现在你可以在你的项目中使用视频元素!你只需要在盲目冒险前注意一些细节。

Meta 标签与搜索引擎优化

当谈及到<meta>标签对搜索引擎排名的影响,很多人都存在误解。在过去,许多已经失去作用的标签仍然被频繁使用。所以哪些标签对搜索引擎优化(SEO)有作用,哪些没有呢?

返回顶部