广州做网站,广州建站_小燕子网络 广州网站制作热线:020-23318051广州建网站第一品牌! 点击添加QQ好友!广州网页设计 为什么大家都喜欢小燕子网络?
站内公告_小燕子网络
广州小燕子网络公司专业从事网站建设、域名注册、企业邮局、网站推广、网站改版、服务器/VPS/虚拟主机空间租用,小燕子网络(www.168xyz.com)以客户需求为出发点,以简洁实用为设计目标!“梦想所有企业都拥有一个自己的官方网站

搜索内容

搜索类别

广州做网站,广州建站_小燕子网络
 
用户名
密  码
 
泽泡网
百度
google
 
当前位置:HOME > 新闻资讯 > 网站建设

广州建设网站HTML5网页制作的10个实例技巧

来源:小燕子网络  发布时间 2013-08-15

1. 占位符
广州建设网站此前,我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适,但是只要用户删除了该文本,输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。
<input name=”email” type=”email” placeholder=”doug@givethesepeopleair.com” />

2. 本地存储
多亏了HTML5的 local storage ,我们可以让高级浏览器“记住”我们输入的内容,就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持,但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。

3. 语义性的Header和Footer
<div id=”header”> … </div> <div id=”footer”> … </div> 上面的代码一去不复返。Divs从根本上来说并没有任何语义结构,即使应用上了ID还是如此。而在HTML5中,我们可以使用<header>和<footer>元素,上面的代码就可以替换为:
<header> … </header> <footer> … </footer> 不过注意不要将这两个元素与网站的头部和脚部混淆起来。它们只是代表它们的容器。
4. IE和HTML5
IE理解新的HTML5元素需要费一定的神,为了确保新的HTML5元素能够以块级元素正确显示,有必要将它们用下面的代码定义风格:
header, footer, article, section, nav, menu, hgroup { display: block; } 就算如此,IE还是不知道这些元素究竟是什么,因而会无视这些格式,还需要用到下面的代码来解决这个问题:
document.createElement(“article”); document.createElement(“footer”); document.createElement(“header”); document.createElement(“hgroup”); document.createElement(“nav”); document.createElement(“menu”);

5. 群组标题(hgroup)
假设一个网站有名称、副标题分别用<h1>、<h2>标签来标记,在HTML4中还没有一种能够将两者之间的关系用很好的语义关系来描述的方法,此外,当使用h2在页面中显示其它标题时,在层级方面问题就更多。而使用群组标题hgroup元素,我们可以将这些标题聚集在一起,而不影响文档的整个纲要。
<header> <hgroup> <h1> Recall Fan Page </h1> <h2> Only for people who want the memory of a lifetime. </h2> </hgroup> </header>

6.必要(Required)属性
表单允许新的必要属性,规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好,用下面两种不同方式来声明这个属性:
<input type=”text” name=”someInput” required> 或者,更严谨:
<input type=”text” name=”someInput” required=”required”> 上面两行代码都行得通。用了这行代码之后,并且浏览器支持required属性的话, 输入空白的表单就不会被提交。下面是一个简单的例子,同时我们也添加了占位符属性:
<form method=”post” action=”"> <label for=”someInput”> Your Name: </label> <input type=”text” id=”someInput” name=”someInput” placeholder=”Douglas Quaid” required> <button type=”submit”>Go</button> </form> 如果输入是空的,表单将无法提交,突出显示文本框。

7. 自动对焦(Autofocus)属性
同样地,有了HTML5就不再需要用JavaScript方案来解决自动对焦的问题。如果某个输入应该被”选择“或被聚焦,我们现在可以使用HTML的自动对焦autofocus属性。
<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus> 15. 音频支持
我们再也不需要依靠第三方插件来提供音频了。HTML5提供了音频元素<audio>。目前,只有最新的浏览器支持HTML5音频。 此时,最好还是提供一些向后兼容性。
<audio autoplay=”autoplay” controls=”controls”> <source src=”file.ogg” /> <source src=”file.mp3″ /> <a href=”file.mp3″>Download this file.</a> </audio> 说道音频格式,Mozilla和Webkit都还没有完全支持。Firefox希望看到一个 .ogg文件,Webkit浏览器只支持最常见的.mp3扩展名。这意味着说,至少目前为止,你应该创建两个版本的音频。当Safari加载页面时,它认不出.ogg格式的文件,将会跳过并移到mp3版本上。请注意,IE并不支持它,Opera 10 或更低的版本只支持 .wav文件。
8. 视频支持
音频元素 <audio>非常像,在新的浏览器上也支持HTML5视频。事实上,就在最近YouTube宣布了一项新的 HTML5视频嵌入。可惜的是,由于HTML5说明文件并没有为视频指出某个特定的编码器,所以都主要取决于浏览器来决定了。尽管Safari和IE9可以支持H.264 格式的视频,Firefox 和Opera却仍然坚持Theora 和Vorbis格式。因此,显示HTML5视频的时候,你必须提供两种格式。
9. 视频预先加载
你首先需要决定是否需要浏览器来预先加载视频。是否有需要?假设,一个访客进入某个专门用来显示视频的页面,那么就非常有必要预先加载这个页面节省一点等待的时间。你可以通过设置 preload=”preload”来预先加载视频,或者之间添加preload也可以。
<video preload> … </video > 18. 显示控件
你可能已经注意到,用上面的代码的话,视频将只会显示成一个图片,而没有任何可控制的元件。为了获取这些播放控件,我们必需在视频元素里指定这些控件属性。
<video preload controls> … </video > 19. 正则表达式
对亏了新模式的属性,我们可以直接在代码中插入一个正则表达式。
<form method=post action=”"> <label for=”username”>create a username: </label> <input id=”username” type=”text” name=”username” placeholder=”4 <> 10″ required=”required” autofocus=”autofocus” pattern=”[A-Za-z]”> <button type=”submit”>Go </button> </form> 如果你比较熟悉正则表达式的话就会注意到这个新模式: [A-Za-z]只接受大小写字母。这个字符串最少必需有四个字符,最多是十个字符。
10. 检测浏览器对属性的支持
广州建设网站在前面提到过并非所有的浏览器都支持这些属性,那是否有什么方法能够判断浏览器是否能够识别它们呢?这个问题问得非常好,这里给大家介绍两种方式,第一个选择是使用Modernizr来检测,或者你也可以创建并剖析这些元素来看看浏览器都有什么能力。例如,在前面的例子里,如果我们要确定浏览器是否能够执行pattern属性,就可以在页面上添加JavaScript:
alert( ’pattern’ in document.createElement(‘input’) ) // boolean; 实际上,这是确定浏览器兼容性的一种非常常用的方法。jQuery库利用了这个技巧。上面的代码里,我们创建了一个新的输入元素,并确认pattern属性是否能够被识别。如果能够识别的话,浏览器就支持这个功能,否则就不支持。
<script> if (!’pattern’ in document.createElement(‘input’) ) { // do client/server side validation } </script> 记住,这将需要依靠 JavaScript来实现! 

相关关键词:广州建设网站 广州网站建设 广州网站设计公司

    (网页编辑:李明)

[ 点击数:] [打印本网页] [关闭本窗口]
 

相关内容
  • 广州网站建设公司消息腾讯最恐怖的并非微信 2013-08-15
  • 广州网站建设公司如何从营销的角度来建设网站 2013-10-05
  • 广州网站建设公司分享ASP怎么实现301重定向 2013-08-15
  • 广州网站建设了解微博坏消息 62%网民喜欢分享负面言论 2013-08-15
  • 广州网站建设公司分享DIV+CSS常见错误汇总 2013-08-20
  • 广州建设网站HTML5网页制作的10个实例技巧 2013-08-15
  • 广州网站建设公司教您12个网站主页必备关键元素 2013-09-10
  • 广州网站建设公司如何衡量网页设计的有效性 2013-09-19
  • 广州网站建设公司由一个登陆框联想到的用户体验 2013-09-19
  •  
    小燕子简介 网站设计 诚聘英才 网站建设 常见问答 新闻资讯 网站制作 联系我们 网站推广 关注我们
    广州做网站,用微信扫一扫 小燕子网络 电话:020-23318051  手机:13076712935 邮箱:xyz#168xyz.com(#换成@)  
    地址:广州市番禺区石岗东村市莲路69号 邮编:511450

    Copyright © 2013 广州泽泡信息科技有限公司. All Rights Reserved   
    如果你喜欢本站,别忘了把本站告诉给你QQ上的朋友哦! 试试 Ctrl+D 有意外惊喜哦~

    泽泡公司旗下网站:小燕子网络

    警警广州网警察察






    法律顾问:广州道怡律师事务所
    安全认证
    中国软件网推荐企业
    广东中小企业发展促进会
    中国互闻网协会会员
    经营性网站备案信息
    可信网站