- 浏览: 97325 次
- 性别:
- 来自: 北京
文章分类
最新评论
你必须知道的28个HTML5特征、窍门和技术
前端的发展如此之迅猛,一不留神,大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话,可以把本文的内容作为必须了解的热身课程。 仍在使用麻烦的,不可能记得住的XHTML文档类型? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.html5cn.org/">如果是,为什么还在用呢?使用新的HTML5文档类型代替吧。你会活得更久的——正如Douglas Quaid说的
<!DOCTYPE html>我就琢磨着,为了HTML5搞个这厮代码,您可能会对这段代码究竟靠不靠谱表示怀疑。不用担心,如今这是可行的,只有老的浏览器需要一个特定的doctype(文档类型)。浏览器如果不知道doctype,就会很简单的以标准模式对包含的标签进行渲染。所以,妹妹你大胆的向前冲,把小心谨慎都抛到九霄云外,去拥抱新的HTML5文档类型吧。 <img src="path/to/image" alt="About image" /> <p>Image of Mars. </p>文字裹在p标签里,与img标签各行其道,很难让人联想到这就是标题。HTML5通过采用<figure>元素对此进行了改正。当合<figcaption>元素组合使用时,我们就可以语义化地联想到这就是图片相对应的标题
<figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure> small元素专指“小字”。
四、脚本(scripts)和链接(links)无需type <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script>这已经是老黄花菜,非必需品了。这意味着,这些标签都各自指向样式表和脚本。因此,我们可以把type属性一起干掉。 <link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
五、引号还是不要引号
六、内容可编辑 <ul contenteditable="true"> <li>悼念遇难香港同胞 </li& <li>深圳特区30周年</li> <li>伊春空难</li> </ul>或者,根据前面所学到的一些技巧,我们可以把它写成: <ul contenteditable=true<
七、Email输入(Inputs)
<form action="" method="get">
//zxx:经我小测了下,貌似仅在Chrome浏览器下有效果(xp系统),当输入内容不是合法邮箱格式,点击“确定”按钮是没有反应的;当输入为合法邮箱,点击“确定”按钮才会提交刷新页面。
八、占位符(Placeholders)
<label for="email">邮箱:</label> <input id="email" type="email" placeholder="zhangxinxu@zhangxinxu.com" size="26" />根据我的测试,目前仅webkit核心的浏览器支持placeholders属性,像是Chrome5,Safari4,结果如下所示: 九、本地存储(Local Storage)
多亏了本地存储(非正式的HTML5,本着方便归纳的目的),我们可以让高级浏览器记住我们的编辑后的内容,即使浏览器被关掉或是页面刷新。
//zxx:原视频默认展示的是YouTube视频,不看不了,所以,这里展示来自另外一个网站的video。建议全屏观看,以看清其中的HTML与JavaScript代码 //zxx:根据视频内容,我自己做了个demo,关于本地存储的。
IE8浏览器已经支持了本地存储,如下截图所示:
<div id="header">
<div id="footer">
<header>
<footer> 尽量不要混淆”header”和”footer”这些元素。他们只是指他们的容器。因此,将博客底部的,例如,元信息放在footer元素内部是说得通的。这同样也适用于header。
十一、更多HTML5表单特征(More HTML5 Form Features )
十二、IE和HTML5(Internet Explorer and HTML5) 所有元素,默认的,都有个inline的display 为了确保所有新的HTML5元素能以block水平的元素正确地渲染,有必要对其做如下定义: header, footer, article, section, nav, menu, hgroup { display: block; }不幸的是,IE仍旧忽略这些样式,因为它不知道这些标签从哪里来的,好比是header元素。幸运的是,有一个简单的解决办法: document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav"); document.createElement("menu");奇怪的是,这段代码似乎触发IE浏览器。为了更简单将此应用到每个新的应用过程中,雷米夏普(Remy Sharp)创建了一个脚本,通常称为HTML5 shiv。该脚本同样修复了些显示问题。 <!--[if IE]> <script src="http://www.html5cn.org/"> <![endif]-->
十三、文档某一部分的信息(hgroup)
十四、必要的属性(Required Attribute ) <input type="text" name="someInput" required>或者,使用更结构化的方法: <input type="text" name="someInput" required="required">两种方法都行。有了这个代码,并且浏览器支持此属性,如果“someInput”文本框是空白,则表单不会被提交。下面是一个简单的例子,我们还将添加占位符属性,因为没有理由不这样做。 <form action="" method="get"> <label for="name">姓名:</label> <input id="name" name="name" type="text" placeholder="zhangxinxu" required="required" /> <button type="submit">提交</button> </form>
如果input里面内容是空白,则表单提交的时候,文本框会高亮显示。//zxx:貌似仅在Chrome浏览器下有点小效果 <input type="text" name="someInput" placeholder="zhangxinxu" required autofocus>有趣的是,虽然我个人更倾向于喜欢XHTML的方法(用引号,等等),写作“autofocus=autofocus”让人感到有点怪。因此,我们将坚持使用单一关键字的方法。
十六、Audio支持 <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文件。
十七、Video支持
<video controls preload> <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /> <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download
this video instead.</a> </p> </video>无论是”ogg”格式还是”mp4″格式的视频Chrome浏览器都能正确编码
我们技术上不需要来设置type属性,但是,如果我们不这样做,浏览器不得不自己去寻找类型。节省一些带宽,还是你自己声明下吧。
<video preload>
<video preload controls>
二十、正则表达式
<form action="" method="get"> <label for="username">姓名:</label> <input id="username" name="username" type="text" placeholder="4-10个英文字母" pattern="[A-Za-z]{4,10}" required="required" autofocus /> <button type="submit">提交</button> </form>如果你熟悉正则表达式,那么应该清楚[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。如果浏览器支持pattern属性,则提交表单时,如果文本框中的内容不符合其正则表达式,文本框会高亮显示。如下图所示。 //zxx:我自己小测了下,貌似目前只在Chrome下有效(win系统) 注意到,我们已经开始组合使用这些很棒的属性。 如果您对正则表达式概念模糊了,可以参见这里。
二十一、属性支持检测 alert( 'pattern' in document.createElement('input') ); // boolean事实上,这是一种确定浏览器兼容的常用方法。jQuery库了利用这种伎俩。在上面,我们创建了一个新的input元素,并确定了里面的pattern属性浏览器是否认得。如果是,浏览器则支持此功能。否则,当然就不支持了。 <script> if (!'pattern' in document.createElement('input') ) { // do client/server side validation } </script>谨记此方法依赖于JavaScript。
二十二、mark元素(Mark Element )
<h3> 搜索结果 </h3> div应该用在没有更好的元素的时候。 例如,如果你发现你需要包裹一段代码块在对内容定位处理的包装单元内。不过如果你是包裹一个博客文章,或者,可能是,底部的链接列表,则需考虑分别使用&article&和&nav&元素,因为其更具语义。 二十四、什么可以开始立即使用 一直谈论到现在的HTML5要到2022年才能全部完成,许多人完全忽视它,这是个巨大的错误。事实上,有少量的HTML5的功能,我们可以在我们所有的项目中使用!更简单,更干净的代码总是一件好事。在今天的视频快速展示的技巧中,我将告诉你一些可用的选项。 //zxx:YouTuBe视频,需要。
二十五、哪些不是HTML5(What is Not HTML5)
SVG:不是HTML5,至少5岁了。
二十六、data属性(The Data Attribute) <h1 id=someId customAttribute=value> 小样,胆儿挺肥的呢 </h1>…校验器会小题大做!但是现在,只要我们以”data”为前缀定义我们的自定义属性,盗版属性立马变成正牌的了。如果你发现你曾经把一个重要的数据附加在诸如class的属性上,可能为了JavaScript之用,那么,本属性将大有帮助啊。 HTML片段 <div id="myDiv" data-custom-attr="My Value"> 巴拉巴拉,lady 嘎嘎 </div>检索自定义属性的价值var theDiv = document.getElementById('myDiv'); var attr = theDiv.getAttribute('data-custom-attr'); alert(attr); // My Value此属性还可以用在CSS中,例如下面这个有些傻里傻气的CSS文字改变的例子: CSS代码:.data_custom { display:inline-block; position: relative; } .data_custom:hover { color: transparent; } .data_custom:hover:after { content: attr(data-hover-response); color: black; position: absolute; left: 0; }HTML代码:<a data-hover-response="我说过不要碰我!" href="#">不要碰我,雅蠛蝶~~</a>如果你的浏览器支持after伪类,以及content的attr属性,则可以看到类似下面的效果(IE8不一样):
还有,content属性其实是一个非常强大的属性,由于低版本的IE不支持,所以此属性尚未流行,关于content内容生成技术,可以参见我之前的“CSS content内容生成技术以及应用”这篇文章。
二十七、Output元素 <form action="" method="get"> <p> 10 + 5 = <output name="sum"></output> </p> <button type="submit">计算</button> </form> (function() { var f = document.forms[0]; if ( typeof f['sum'] !== 'undefined' ) { f.addEventListener('submit', function(e) { f['sum'].value = 15; e.preventDefault(); }, false); } else { alert('你的浏览器尚未准备好!'); } })();自己测试了下,貌似现在只有在Opera浏览器下有上佳的效果:
此元素也可以接受一个属性,它反映了输出相关元素的名称,类似label工作原理。
二十八、使用区域input创建滑块(Create Sliders with the Range Input) <input type="range">最值得注意的是,它可以接收 min, max, step, 和value 属性,等等。虽然现在似乎只有Opera浏览器充分支持这种输入类型,但是当我们可以实际使用时,这将是美妙无比的! 参见下面的快速演示: 第一步:标签
首先,创建标签
我的电脑是xp系统,默认主题,在滑块松开后Opera下的效果如下图所示,酷吧: |
相关推荐
资源名称:你必须知道的HTML5特征、窍门和技术内容简介:一、新的Doctype//zxx:”doctype”中文意思指“文档类型”仍在使用麻烦的,不可能记得住的XHTML文档类型?如果是,为什么还在用呢?使用新的HTML5文档类型...
介绍了HTML5的一些不同以往html技术的特征,适合html5初学者参考,避免一些误区和弯路。
其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征、窍门和技术”一文中就有所介绍,不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦,关键是TouTuBe视频,需要越狱观看。...
本资料共包含以下附件: 全方位了解HTML5 初学者必知的HTML+5入门级技巧 你必须知道的28个HTML5特征、窍门和技术 w3c标准html5手册 HTML5从入门到精通 HTML5高级程序设计
玩家可以针对不同僵尸的弱点来合理地种植植物,这也是胜利的诀窍。游戏根据玩法不同分为五种游戏模式:冒险模式、迷你模式、解谜模式、生存模式、禅境花园。加之黑夜、屋顶、浓雾以及泳池之类的障碍增加了其挑战性该...
Visual Basic 6编程技术大全 是非常详细和深入的Vb6学习教程,无论对初学者还是有经验的开发人员,都非常有帮助 第一部分基础篇1 第1章 VB6入门1 1.1 集成开发环境1 1.1.1 运行IDE1 1.1.2 选择工程类型1 1.1.3 IDE...
Visual Basic 6编程技术大全 是非常详细和深入的Vb6学习教程,无论对初学者还是有经验的开发人员,都非常有帮助 第一部分基础篇1 第1章 VB6入门1 1.1 集成开发环境1 1.1.1 运行IDE1 1.1.2 选择工程类型1 1.1.3 IDE...
由于有了Sun 的参与和支持,最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现,Tomcat 5 支持最新的Servlet 2.4 和JSP 2.0 规范。因为Tomcat 技术先进、性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了...
由于有了Sun 的参与和支持,最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现,Tomcat 5支持最新的Servlet 2.4 和JSP 2.0 规范。因为Tomcat 技术先进、性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了...
由于有了Sun 的参与和支持,最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现,Tomcat 5支持最新的Servlet 2.4 和JSP 2.0 规范。因为Tomcat 技术先进、性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了...
由于有了Sun 的参与和支持,最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现,Tomcat 5支持最新的Servlet 2.4 和JSP 2.0 规范。因为Tomcat 技术先进、性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了...
由于有了Sun 的参与和支持,最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现,Tomcat 5支持最新的Servlet 2.4 和JSP 2.0 规范。因为Tomcat 技术先进、性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了...
由于有了Sun 的参与和支持,最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现,Tomcat 5支持最新的Servlet 2.4 和JSP 2.0 规范。因为Tomcat 技术先进、性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了...
由于有了Sun 的参与和支持,最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现,Tomcat 5支持最新的Servlet 2.4 和JSP 2.0 规范。因为Tomcat 技术先进、性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了...
由于有了Sun 的参与和支持,最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现,Tomcat 5支持最新的Servlet 2.4 和JSP 2.0 规范。因为Tomcat 技术先进、性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了...
由于有了Sun 的参与和支持,最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现,Tomcat 5支持最新的Servlet 2.4 和JSP 2.0 规范。因为Tomcat 技术先进、性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了...