5个鲜为人知的HTML功能,你知道吗?

HTML - article, sharing - 5个鲜为人知的HTML功能,你知道吗?

有一个事实我们必须承认:对非专业人士来说,现在网页开发工作也许是一团糟。经过多年演变,HTML、CSS和JavaScript等语言逐渐变得成熟和强大,但对于如何使用它们很多人都是模棱两可的。从结果来看,很容易就会使作品一团糟。书写标准和最新的功能改进虽然可以帮到你,并不能帮助你写出真正优秀的代码。

不管在哪种类型的软件开发中,代码的模块化和可维护性构建都是重中之重。因此,你需要关注Web组件的发展。尽管有些浏览器对组件的支持不佳,但适当使用可以帮你立即实现某种够能。这种发展方式是编程的未来,熟悉它是值得的。

46678297 - article, sharing - 5个鲜为人知的HTML功能,你知道吗?

HTML5引入了一些新元素,并弃用了很多旧元素,以鼓励实现更优秀的代码。你可能听说够,HTML5种加入了很多语义化标签,比如<article>和<firgure>来描述它的内容类型。

这可以真正帮你快速读懂代码,它们将帮助你立即识别菜单栏、内容、页脚等部分。

如果你使用最新的JavaScript标准,也会看到这类发展。虽然杂乱不堪的JS也广泛存在,但近年来JS使用变得更加容易了。大多浏览器都支持ES6语法,如指针函数和类等功能,可以帮助你更容易地实现某些功能,尽管很多开发者不熟悉或不愿意用它们。

现在JS也已经支持模块加载,这将更有助于你的管理。

01.识别和合成声音

36840862 - article, sharing - 5个鲜为人知的HTML功能,你知道吗?

曾经这是个很复杂的功能,需要专门的软件处理,但现在可以直接在浏览器中实现。Web Speech API具有支持语音和文本相互转化的组件。声音合成的功能可使用在线服务(如Chrome将使用Google Cloud Speech API)或设备搭载的语音识别服务。预计未来这个功能会在移动设备上广泛使用。

02.颜色选择器

17534563 - article, sharing - 5个鲜为人知的HTML功能,你知道吗?

听起来这个功能没什么大不了的,但可以作为HTML5简化常规任务的良好例子。以前这个功能需要复杂的UI组件,并使用自定义编码完成。现在,通过调用本地的颜色选择器,使用<input type=”color”>将在单击时显示可视的颜色选择器。对于HTML绘画工具来说这十分有用。在手机上除了Safari外,大部分浏览器都支持此功能。

03.调整浏览器UI颜色

86131567 - article, sharing - 5个鲜为人知的HTML功能,你知道吗?

在移动端这将塑造良好的美感。使用<meta name=”theme-color” content=”#FFFFFF” />,可指引浏览器在访问你的网站时将工具栏重新着色。不幸的是,这个写法的支持不佳,在Chrome、Firefox和Opera上运作良好,但在iOS上你需要使用apple-mobile-web-app-status-bar-style,即便如此也只适用于全屏模式。

04.根据屏幕调整图像

8201379 - article, sharing - 5个鲜为人知的HTML功能,你知道吗?

在实现响应式设计时,通常你的图像将被调整尺寸以适应屏幕,但这种方法并非完美,因为这仍需要用户下载最大尺寸的图像,并要求设备重新采样。而通过HTML5的<picture>元素,你可以直接根据设备的分辨率来显示不同尺寸的图片。

05.手机震动

11458636 - article, sharing - 5个鲜为人知的HTML功能,你知道吗?

通过vibrate()函数,你可以调用Vibration API,完成一些设备支持的工作。在函数支持的功能之中,震动也在其列。在Chrome、Firefox和Opera上可正常运行,但在Edge或Safari则无法使用。据说有些广告正在使用此功能吸引用户的注意力,所以这项功能是否应该存在是颇受争议的。

 

原文出自《Web Designer》第266期,作者Simon Jones。

翻译:卡米雷特

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!


您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注