热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

必须知道的22个学习HTML5的技巧(二)

此前,我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适,但是只要用户删除了该文本,输入的内容

8. 占位符

此前,我们需要使用Javascript来创建文本框的占位符。你可以初步设定值属性来看是否合适,但是只要用户删除了该文本,输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。
XML/HTML Code复制内容到剪贴板

9. 本地存储

多亏了HTML5的 local storage ,我们可以让高级浏览器“记住”我们输入的内容,就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持,但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。
10. 语义性的Header和Footer
XML/HTML Code复制内容到剪贴板

上面的代码一去不复返。Divs从根本上来说并没有任何语义结构,即使应用上了ID还是如此。而在HTML5中,我们可以使用和

元素,上面的代码就可以替换为:
XML/HTML Code复制内容到剪贴板

不过注意不要将这两个元素与网站的头部和脚部混淆起来。它们只是代表它们的容器。

11. IE和HTML5

IE理解新的HTML5元素需要费一定的神,为了确保新的HTML5元素能够以块级元素正确显示,有必要将它们用下面的代码定义风格:
XML/HTML Code复制内容到剪贴板

header, footer, article, section, nav, menu, hgroup {
display: block;
}

就算如此,IE还是不知道这些元素究竟是什么,因而会无视这些格式,还需要用到下面的代码来解决这个问题:
XML/HTML Code复制内容到剪贴板

document.createElement(“article”);
document.createElement(“footer”);
document.createElement(“header”);
document.createElement(“hgroup”);
document.createElement(“nav”);
document.createElement(“menu”);

12. 群组标题(hgroup)

假设一个网站有名称、副标题分别用、

标签来标记,在HTML4中还没有一种能够将两者之间的关系用很好的语义关系来描述的方法,此外,当使用h2在页面中显示其它标题时,在层级方面问题就更多。而使用群组标题hgroup元素,我们可以将这些标题聚集在一起,而不影响文档的整个纲要。
XML/HTML Code复制内容到剪贴板

Recall Fan Page

Only for people who want the memory of a lifetime.

13.必要(Required)属性

表单允许新的必要属性,规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好,用下面两种不同方式来声明这个属性:
XML/HTML Code复制内容到剪贴板

或者,更严谨:
XML/HTML Code复制内容到剪贴板

上面两行代码都行得通。用了这行代码之后,并且浏览器支持required属性的话, 输入空白的表单就不会被提交。下面是一个简单的例子,同时我们也添加了占位符属性:
XML/HTML Code复制内容到剪贴板

Your Name:
Go

如果输入是空的,表单将无法提交,突出显示文本框。
14. 自动对焦(Autofocus)属性

同样地,有了HTML5就不再需要用Javascript方案来解决自动对焦的问题。如果某个输入应该被”选择“或被聚焦,我们现在可以使用HTML的自动对焦autofocus属性。
XML/HTML Code复制内容到剪贴板

15. 音频支持

我们再也不需要依靠第三方插件来提供音频了。HTML5提供了音频元素

Download this file.

说道音频格式,Mozilla和Webkit都还没有完全支持。Firefox希望看到一个 .ogg文件,Webkit浏览器只支持最常见的.mp3扩展名。这意味着说,至少目前为止,你应该创建两个版本的音频。当Safari加载页面时,它认不出.ogg格式的文件,将会跳过并移到mp3版本上。请注意,IE并不支持它,Opera 10 或更低的版本只支持 .wav文件。


推荐阅读
  • 本文介绍了使用 Python 编程语言高效抓取微博文本和动态网页图像数据的方法。通过详细的示例代码,展示了如何利用爬虫技术获取微博内容和动态图片,为数据采集和分析提供了实用的技术支持。对于对网络数据抓取感兴趣的读者,本文具有较高的参考价值。 ... [详细]
  • 深入解析Tomcat:开发者的实用指南
    深入解析Tomcat:开发者的实用指南 ... [详细]
  • 在处理大规模并发请求时,传统的多线程或多进程模型往往无法有效解决性能瓶颈问题。尽管它们在处理小规模任务时能提升效率,但在高并发场景下,系统资源的过度消耗和上下文切换的开销会显著降低整体性能。相比之下,Python 的 `asyncio` 模块通过协程提供了一种轻量级且高效的并发解决方案。本文将深入解析 `asyncio` 模块的原理及其在实际应用中的优化技巧,帮助开发者更好地利用协程技术提升程序性能。 ... [详细]
  • 可转债数据智能抓取与分析平台优化
    本项目旨在优化可转债数据的智能抓取与分析平台。通过爬取集思录上的可转债信息(排除已发布赎回的债券),并结合安道全教授提出的三条安全线投资策略,新增了建仓线、加仓线和重仓线,以提供更精准的投资建议。 ... [详细]
  • 【Python爬虫实操】 不创作小说,专精网站内容迁移,超高效!(含源代码)
    本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移,涵盖前端、后端及Android相关知识点。通过具体实例和源代码,展示了如何精准抓取并迁移网站内容,适合对Python爬虫实战感兴趣的开发者参考。 ... [详细]
  • HTML5 Web存储技术是许多开发者青睐本地应用程序的重要原因之一,因为它能够实现在客户端本地存储数据。HTML5通过引入Web Storage API,使得Web应用程序能够在浏览器中高效地存储数据,从而提升了应用的性能和用户体验。相较于传统的Cookie机制,Web Storage不仅提供了更大的存储容量,还简化了数据管理和访问的方式。本文将从基础概念、关键技术到实际应用,全面解析HTML5 Web存储技术,帮助读者深入了解其工作原理和应用场景。 ... [详细]
  • 本文详细解析了如何利用Appium与Python在真实设备上执行测试示例的方法。首先,需要开启手机的USB调试功能;其次,通过数据线将手机连接至计算机并授权USB调试权限。最后,在命令行工具中验证设备连接状态,确保一切准备就绪,以便顺利进行测试。 ... [详细]
  • 本文旨在构建一个JavaScript函数,用于对用户输入的电子邮件地址和密码进行有效性验证。该函数将确保输入符合标准格式,并检查密码强度,以提升用户账户的安全性。通过集成正则表达式和条件判断语句,该方法能够有效防止常见的输入错误,同时提供即时反馈,改善用户体验。 ... [详细]
  • 定义Function类型:1functionsum(num1,num2){return num1+num2;}2varsumfunction(num1,num2){returnn ... [详细]
  • 代码:headersAccept:texthtml,applicationxhtml+xml,applicationxml;q0.9,imagewebp,image ... [详细]
  • 开发工具WebDeveloper1.1.8https:addons.mozilla.orgen-USfirefoxaddon60以工具栏的形式对网页的(X)HTML、脚本、多媒体、 ... [详细]
  • CSS深入剖析text和column
    这里写目录标题一、text-shadow二、font-face三、其他text常用特性四、column一、text-shadow与box-shadow类似,这里通过 ... [详细]
  • IIS启用Gzip的方法与优缺点分析是千自学中一篇关于Discuz论坛的文章简介:现代的浏览器IE6和Firefox都支持客户端Gzip,也就是说,在服务器上的网页,传输之前,先使用Gzip压缩再传输给客户端,客户端接收之后由浏览器解压显示,这样虽然稍微占用了一些服务器和客户端的C ... [详细]
  • Dom捕捉事件和冒泡事件原理与demo测试
    先参考一下百度百科对冒泡事件流的解释:----------不喜欢读文字的同学,可以直接看下面demo,传递顺序简单明了!ht ... [详细]
  • 勤奋翻译一篇中文最友爱的,Web Audio API的运用相干的文章
    媒介本文翻译自MDN上的《WebAudioAPIの运用》,这是HTML5中的WebAudioAPI的一个入门教程。原文是英文,但有日本同道翻译的日文版。我更熟习日文,所以重要依据日 ... [详细]
author-avatar
dsafdasdfddsa_459
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有