文章关键字 ‘html’

HTML tabindex属性与web网页键盘无障碍访问

2017年05月13日,星期六

HTML虽然入门简单,但是,要想日后深入,却要花费非常大量的时间,因为一些看似非常简单的属性,实际上牵扯到另外一个完整领域的知识。例如本文要介绍的这属性tabindex,与web网页无障碍访问息息相关,而且是键盘访问领域的。

这些属性不仅可以触发浏览器层面的行为,本身对HTML的元素的交互特性甚至UI表现都会有影响。

阅读全文…

HTML <area><map>标签及在实际开发中的应用

2017年05月6日,星期六

之前,我一直以为HTML <area>是一个鸡肋HTML,估计到了HTML5时代会被废弃的命。但是,最近一查资料,乖乖了个咚,不仅没被废弃,反而发展了,新增了一些标签属性,例如relmediahreflang等。

然后进一步研究发现,尼玛这货居然还可以用来解决一个困扰我很多年的棘手问题,形象立马高大上了起来。

阅读全文…

基于VoiceOver的移动web站无障碍访问实战

2017年01月20日,星期五

所谓“无障碍访问”,指的是各类设备均可以无障碍访问。例如鼠标、键盘、读屏软件或设备等。

ARIA全称“Accessible Rich Internet Applications(可访问的富互联网应用)”。

VoiceOver是苹果设备上的读屏软件,当开启VoiceOver后,交互行为和通常行为是不一样。并且和ARIA属性之间的关系也比较深,本文就将通过项目实战展示基于VoiceOver的移动端ARIA特性和注意事项。

阅读全文…

了解HTML/HTML5中的download属性

2016年04月6日,星期三

如果我们想实现点击下载按钮下载一张图片,你会如何实现?

我们可能会想到一个最简单的方法,就是直接按钮a标签链接一张图片。

但是,想法虽好,实际效果却不是我们想要的,因为浏览器可以直接浏览图片,因此,我们点击“下载”链接,并是不下载图片,而是在新窗口直接浏览图片……

阅读全文…

基于原生HTML的UI组件开发

2016年01月22日,星期五

本文属于波澜不惊,平铺直叙版本。如果想看有有激情有思想的版本,可以去ISUX官博:“顺势而为,HTML发展与UI组件设计进化”

阅读全文…

疑问:为什么要使用href=”javascript:void(0);”?

2013年01月28日,星期一

本文的内容实际上三行文字就可以了。我实在是闲得蛋疼,活生生挤沟沟一样挤出了一个上中下三段的吐槽文章。大家代码都写得很辛苦,让半边脑袋休息一下,让另外半边代码出来活动一下吧。一篇慢思维的文章,求指点求吐槽。哈哈

阅读全文…

翻译:稳定、地道HTML书写原则

2013年01月4日,星期五

关于HTML书写的一篇译文,大家有兴趣可以看看,根据自己的实际情况,提炼出有帮助的信息。

阅读全文…

不使用JavaScript让IE浏览器支持HTML5元素

2012年07月20日,星期五

如果我们不做什么手脚的话,IE6~IE8浏览器不支持HTML5元素, <nav>, <header>, <footer>, <article> …
然而,前篇Google前端规范HTML部分中提到:要使用语义的HTML5元素作为text/html, 考虑到Google不可能把IE8等浏览器弃之不顾,因此,肯定是有什么方法可以让IE6~8浏览器也支持HTML5元素的……

本文就将介绍几个不使用JavaScript实现IE浏览器支持HTML5元素的方法,希望本文的内容能够对您的学习有所帮助。

阅读全文…

翻译:谷歌HTML、CSS和JavaScript风格规范

2012年07月18日,星期三

本文翻译的内容并不是谷歌官方提供的完整HTML/CSS风格规范,而是一种带有总结性质的简单称述。完整的中文翻译,国内已经有(只有HTML/CSS, 无JS)。

大家都有自己的工作要做,大多数人没有多少精力去看冗长而且还是英文的规范文档。本文这里的基本点的总结基本上提炼了大家需要知道的一些东西,便于快速阅读。
希望本文的翻译能够对大家在使用HTML, CSS, JavaScript上有一定的启发与帮助。

阅读全文…

HTML5新增的form属性简介

2011年06月22日,星期三

HTML5中新增了一个名为form的属性,是一个与处理表单相关的元素。

在HTML4或XHTML中,我们要提交一个表单,必须把相关的控件元素都放在<form>元素下。因为表单提交的时候,会直接忽略不是其子元素的控件。但是,实际情况下,由于页面设计与实现的特殊性,会存在有些表单之外的元素也需要一并提交的情况,这时候,传统的表单功能就显得有些捉襟见肘了。

HTML5中新增form属性就是为更好地处理这个问题才出现的……

阅读全文…