• HTML 5

    2009-10-03 | Tag:HTML 5 web

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/commonlearning-logs/47537532.html

    what is HTML 5

    【摘录自:http://html5.org/

    HTML5 is a new version of HTML and XHTML. The HTML5 draft specification defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.

    细谈HTML 5新增的元素

    【摘录自:http://developer.51cto.com/art/200907/133462.htm

    HTML 5结构元素

    这真是大快人心。目前,我们定义结构只能通过一个“万能”的div, 试图通过设置它的特性id的值如header, footer, sidebar等来分别表达头部,底部或者侧栏等。有了它们,代码编写者不再需要为id的命名费尽心思,对于手机、阅读器等设备更有语义的好处。HTML 5增加了新的结构元素来表达这些最常用的结构:

    ◆section: 这可以表达书本的一部分或一章,或者一章内的一节

    ◆header: 页面主体上的头部。并非head元素

    ◆footer: 页面的底部(页脚),可以是一封邮件签名的所在

    ◆nav: 到其他页面的链接集合

    ◆article: 诸如blog, 杂志,纲要等之中的一条独立记录。

    举个例子,一个blog的首页,用HTML 5写的话,可以是这样(有省略):

    1. <<!DOCTYPE HTML> <HTML>   <head>     <title>realazy</title>   </head> 
    2. <body> 
    3. <header> 
    4.      <h1>Realazy</h1></header> 
    5. <section>       
    6. <article>       
    7. <h2><a href="http://realazy.org/blog" mce_href="http://realazy.org/blog">标题</a></h2> 
    8.  <p>内容在此...(省略n字)</p>     </article>     <article>     <h2><a href="http://realazy.org/blog" mce_href="http://realazy.org/blog">标题2</a></h2>     <p>内容2在此...(省略n字)</p>     </article>     ...     </section>   
    9. <footer> nav>     <ul>   
    10.   <li><a href="http://realazy/blog" mce_href="http://realazy/blog">导航1</a></li>       <li><a href="http://realazy/blog" mce_href="http://realazy/blog">导航2</a></li>       ...     </ul>     </nav> 
    11.   <p>© 2007 realazy</p>     </footer>   </body> </HTML> 
    12. 块级block的语义元素 

    HTML还增加以下三个块级元素:

    ◆aside

    ◆figure/code>

    ◆dialog

    aside可以用以表达注记、贴士、侧栏、摘要、插入的引用等诸如作为补充主体的内容。比如这样表达blog的侧栏:

    1. <aside>   <h3>最新文章</h3>   <ul> 
    2.   <li><a href="http://realazy.org/blog/" mce_href="http://realazy.org/blog/">文章标题</a></li>     ...   </ul> </aside> 

    figure元素表示一个有说明的块级图片。比如:

    <figure>   <legend>这是图片的说明</legend>   <img alt="图片可替换文本" src="/path/to/img.png" mce_src="/path/to/img.png" /> </figure>dialog元素用于表达人们之间的对话。在HTML 5中,dt用于表示说话者,而dd则用来表示说话者的内容。如:

    1. <dialog>   <dt></dt>   <dd>色即是空</dd>   <dt>悟空</dt>   <dd> 

    我现在需要点空……行内(inline)的语义元素,m元素用来标记一些不是那么需要着重强调的文本。现在尚有争议,可能最终会改为mark.

    time元素如其名,用来表达时间。它需要一个datetime的特性来标明机器能够认识的时间,如:

    <time datetime="2008-08-08T20:08:08">2008年8月8日晚上8时8分8秒</tiem>meter元素表达特定范围内的数值。可用于薪水、百分比、分数等。比如:

    很遗憾地告诉你,我只有<meter>150cm</meter>它还有6个特性来表达各方面的含义,比如:

    1. <p>您的分数是:<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.</p> 

    还有一个progress,也是义如其名,用以表达进度:

    目标完成度:<progress value="40" max="100">40%</progress>嵌入多媒体

    新增video和audio元素。顾名思义,分别是用来插入视频和声音的。至于格式,交由浏览器实现,HTML再也不需要特别的代码去播放特定的格式。就像img一样,不管是png, jpg还是gif都可以显示。值得注意的是,它们可以包含内容。比如,可以把歌词放到某段歌曲中去:

    1. <audio src="谁人伴你睡.mp3" mce_src="谁人伴你睡.mp3">   <p>泪枯干</p>   <p>难忍怎么委屈自已</p>   <p>曾经有一刻悲与喜</p>   ... </audio> 

    交互性

    HTML 5同时也叫Web Applications 1.0, 因此也进一步发展交互能力。这些标签就是为提高页面的交互体验而生:

    details

    datagrid

    menu

    command

    details用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如点击)与legend交互才显示出来。这跟现在各种通过JavaScript隐藏一段内容,在点击后才显示出来的做法有些类似。比如:

    一句话记录生活中的点点滴滴, <details>   <legend>更多</legend>   <p>交流与分享,拉近你和朋友,支持 MSN/GTalk/QQ、短信、手机 WAP</p> </details>它可以有一个open的特性,用来显示细节与否。

    datagrid用来控制数据,可以由用户或者脚本来更新。

    menuHTML 2就存在了,不过HTML 4把它废弃了。HTML 5废物利用,并在期内加上command元素。

    使用HTML5构建下一代的Web Form

    【转载自:http://developer.51cto.com/art/200906/131816.htm

    HTML5的表单新特性

    HTML5 Web Forms 2.0是对目前Web表单的全面提升,它在保持了简便易用的特性的同时,增加了许多内置的控件或者控件属性来满足用户的需求,并且同时减少了开发人员的编程。在我看来,HTML5 主要在以下几个方面对目前的Web表单做了改进:

    1.新的控件类型
    ◆还在为类型检查犯愁吗,还在为那一长串看不太明白的检验输入的正则表达式而苦恼吗,HTML5提供的一系列新的控件将天然的具备类型检查的功能。比如说URL输入框,Email输入框等。

     

    1. <input type="url">input> 
    2. <input type="email">input> 

     

    ◆当然还有非常重要的日期输入框,要知道使用JavaScript和CSS来“手工”制作一个日期输入框还是非常花功夫的,类似Dojo,YUI这样的类库也无不在这个widget上面大做文章。

    1. <input type="date">input> 

     

    ◆作为我痛苦记忆的一部分,我经常记得我们开发人员要为一个select下拉别表动态的添加非常多的选项,这些选项大多数都是来自数据库,比如说国家、省市列表等等。这个事情非常繁琐。HTML5将支持data属性,为select控件外联数据源!

     

    1. <select data="http://domain/getmyoptions">select> 

     

    2.改进的文件上传控件,你可以使用一个控件上传多个文件,自行规定上传文件的类型(accept),你甚至可以设定每个文件最大的大小(maxlength)。你看出它和一般操作系统提供的文件上传控件的区别了吗,反正我觉得基本一致了。在HTML5应用中,文件上传控件将变得非常强大和易用。

    3.重复(repeat)的模型,HTML5提供一套重复机制来帮助我们构建一些重复输入列表,其中包括一些诸如 add、remove、move-up,move-down的按钮类型,通过这一套重复的机制,开发人员可以非常方便的实现我们经常看到的编辑列表,这是一个很常见的模式,我们可以增加一个条目、删除某个条目、或者移动某个条目等等。

    4.内建的表单校验系统,HTML5为不同类型的输入控件各自提供了新的属性,来控制这些控件的输入行为,比如我们常见的必填项required属性,以及为数字类型控件提供的max、min等。而在你提交表单的时候,一旦校验错误,浏览器将不执行提交操作,而会显示相应的检验错误信息。

     

    1. <input type="text" required>input> 
    2. <input type="number" min=10  max=100>input> 

     

    5.XML Submission,我们一般常见的是Web Form的编码格式是application/x-www-form-urlencoded。开发人员都很清楚这种格式,数据送到服务器端,可以方便的存取。HTML5提供一种新的数据格式:XML Submission,即application/x-www-form+xml。简单的举例说,服务器端将直接接收到XML形式的表单数据。

     

    1. <submission> 
    2.     <field name="name" index="0">Peterfield> 
    3.     <field name="password" index="0">passwordfield> 
    4. submission> 

     

    我将利用HTML5新的表单系统, 做一个简单的用户注册的界面,包括用户名,密码,出生日期,保密问题等内容,代码如下:

     

    1. > 
    2. <html> 
    3.     <head> 
    4.         <style> 
    5.             p label {  
    6.                 width: 180px;  
    7.                 float: left;  
    8.                 text-align: right;  
    9.                 padding-right: 10px  
    10.             }  
    11.             table {  
    12.                 margin-left: 80px  
    13.             }  
    14.             table td {  
    15.                 border-bottom: 1px solid #CCCCCC  
    16.             }  
    17.             input.submit {  
    18.                 margin-left: 80px  
    19.             }  
    20.         style> 
    21.     head> 
    22.     <body> 
    23.         <form action='/register' enctype="application/x-www-form+xml" method="post"> 
    24.             <p> 
    25.                 <label for='name'>ID(请使用Email注册)label> 
    26.                 <input name='name' required type='email'>input> 
    27.             p> 
    28.             <p> 
    29.                 <label for='password'>密码label> 
    30.                 <input name='password' required type='password'>input> 
    31.             p> 
    32.             <p> 
    33.                 <label for='birthday'>出生日期label> 
    34.                 <input type='date' name='birthday' /> 
    35.             p> 
    36.             <p> 
    37.                 <label for='gender'>国籍label> 
    38.                 <select name='country' data='countries.xml'>select> 
    39.             p> 
    40.             <p> 
    41.                 <label for='photo'>个性头像label> 
    42.                 <input type='file' name='photo' accept='image/*' /> 
    43.             p> 
    44.             <table> 
    45.                 <thead> 
    46.                     <td><button type="add" template="questionId">+button> 保密问题td> 
    47.                     <td>答案td> 
    48.                     <td>td> 
    49.                 thead> 
    50.                 <tr id="questionId" repeat="template" repeat-start="1" repeat-min="1" repeat-max="3"> 
    51.                     <td><input type="text" name="questions[questionId].q">td> 
    52. <td><input type="text" name="questions[questionId].a">td> 
    53. <td><button type="remove">删除button>td> 
    54.                 tr> 
    55.             table> 
    56.             <p> 
    57.                 <input type='submit' value='send' class='submit' /> 
    58.             p> 
    59.         form> 
    60.     body> 
    61. html> 

     

    由于目前HTML5标准仍然在开发中,不同的浏览器对HTML5特性的支持都相当有限。其中Opera在表单方面支持得比较好,本实例在Opera9上运行一切正常,效果图如下:

    HTML5的表单元素


    这个实例运用了一些HTML5的新的表单元素,比如email类型的输入框(ID),日期类型的输入框(出生日期)。并且使用了重复模型来引导用户填写保密问题,而在个性头像的上传中,通过限制文件类型,方便用户选择图片进行合乎规范的内容上传。而用户选择国籍的下拉选择输入框中,采用的是外联数据源的形式,外联数据源使用coutries.xml,内容如下:

     

    1. <select xmlns="http://www.w3.org/1999/xhtml"> 
    2.     <option>Chinaoption> 
    3.     <option>Japanoption> 
    4.     <option>Koreaoption> 
    5. select> 

     

    并且form的enctype是application/x-www-form+xml,也就是HTML5的XML提交。所以一旦form校验通过,form的内容将会以XML的形式提交。你还会发现,在ID输入框如果没有值,或者输入了非email类型的字符串时,一旦试图提交表单,就会有提示错误的信息出现,而这都是浏览器内置的。
    结语

    HTML5对表单控件的更新,无疑是很振奋人心的。本文描述了一部分表单的新特性,还有一部分新特性同样很令人期待。相信随着标准的深入开发以及浏览器对HTML5支持程度的进一步提升,设计一个简单易用的表单的工作,将变得非常轻松。

     

     

     

    分享到:
    引用地址: