行业资讯

HTML6 初探 — 你没看错，是6不是5

日期：2014-12-11点击次数：1649

HTML5 概述

HTML5 是 HTML 语言最受欢迎的版本之一，它支持音频和视频、离线存储、移动端、和标签属性等等。还提供了<article>, <section>, <header>这样的标签来帮助开发者更好地组织页面内容。然而 HTML5 规范仍然没有最后定稿，并且它并不是一个真正意义上的语义标记语言。

HTML6 展望

\

你有没有曾经希望能在 HTML 中使用自定义标签？比如：使用<logo>来显示你的网站logo，还有使用<toolbar>来显示工具栏等等。我们经常使用<div id=”container”>和<div id=”wrapper”>来组织页面，在 HTML6 里我们希望可以直接使用象<container>和<wrapper>这样的自定义标签。

和 XML 一样，HTML6 应该支持 namespace（命名空间），如：xmlns:xhtml=”http://www.w3.org/1999/xhtml”

HTML6 代码样例：



    
	
  1. 
		<!DOCTYPE&nbsp;html>
    2. 
	
  2. 
		 
    3. 
	
  3. 
		&nbsp;<html:html>
    4. 
	
  4. 
		 
    5. 
	
  5. 
		&nbsp;<html:head>
    6. 
	
  6. 
		 
    7. 
	
  7. 
		&nbsp;<html:title>A&nbsp;Look&nbsp;Into&nbsp;HTML6</html:title>
    8. 
	
  8. 
		 
    9. 
	
  9. 
		&nbsp;<html:meta&nbsp;type="title"&nbsp;value="Page&nbsp;Title">
    10. 
	
  10. 
		 
    11. 
	
  11. 
		&nbsp;<html:meta&nbsp;type="description"&nbsp;value="HTML&nbsp;example&nbsp;with&nbsp;namespaces">
    12. 
	
  12. 
		 
    13. 
	
  13. 
		&nbsp;<html:link&nbsp;src="css/mainfile.css"&nbsp;title="Styles"&nbsp;type="text/css">
    14. 
	
  14. 
		 
    15. 
	
  15. 
		&nbsp;<html:link&nbsp;src="js/mainfile.js"&nbsp;title="Script"&nbsp;type="text/javascript">
    16. 
	
  16. 
		 
    17. 
	
  17. 
		&nbsp;</html:head>
    18. 
	
  18. 
		 
    19. 
	
  19. 
		&nbsp;<html:body>
    20. 
	
  20. 
		 
    21. 
	
  21. 
		&nbsp;<header>
    22. 
	
  22. 
		 
    23. 
	
  23. 
		&nbsp;<logo>
    24. 
	
  24. 
		 
    25. 
	
  25. 
		&nbsp;<html:media&nbsp;type="image"&nbsp;src="images/xyz.png">
    26. 
	
  26. 
		 
    27. 
	
  27. 
		&nbsp;</logo>
    28. 
	
  28. 
		 
    29. 
	
  29. 
		&nbsp;<nav>
    30. 
	
  30. 
		 
    31. 
	
  31. 
		&nbsp;<html:a&nbsp;href="/img1">a1</a>
    32. 
	
  32. 
		 
    33. 
	
  33. 
		&nbsp;<html:a&nbsp;href="/img2">a2</a>
    34. 
	
  34. 
		 
    35. 
	
  35. 
		&nbsp;</nav>
    36. 
	
  36. 
		 
    37. 
	
  37. 
		&nbsp;</header>
    38. 
	
  38. 
		 
    39. 
	
  39. 
		&nbsp;<content>
    40. 
	
  40. 
		 
    41. 
	
  41. 
		&nbsp;<article>
    42. 
	
  42. 
		 
    43. 
	
  43. 
		&nbsp;<h1>Heading&nbsp;of&nbsp;main&nbsp;article</h1>
    44. 
	
  44. 
		 
    45. 
	
  45. 
		&nbsp;<h2>Sub-heading&nbsp;of&nbsp;main&nbsp;article</h2>
    46. 
	
  46. 
		 
    47. 
	
  47. 
		&nbsp;<p>[...]</p>
    48. 
	
  48. 
		 
    49. 
	
  49. 
		&nbsp;<p>[...]</p>
    50. 
	
  50. 
		 
    51. 
	
  51. 
		&nbsp;</article>
    52. 
	
  52. 
		 
    53. 
	
  53. 
		&nbsp;<article>
    54. 
	
  54. 
		 
    55. 
	
  55. 
		&nbsp;<h1>The&nbsp;concept&nbsp;of&nbsp;HTML6</h1>
    56. 
	
  56. 
		 
    57. 
	
  57. 
		&nbsp;<h2>Understanding&nbsp;the&nbsp;basics</h2>
    58. 
	
  58. 
		 
    59. 
	
  59. 
		&nbsp;<p>[...]</p>
    60. 
	
  60. 
		 
    61. 
	
  61. 
		&nbsp;</article>
    62. 
	
  62. 
		 
    63. 
	
  63. 
		&nbsp;</content>
    64. 
	
  64. 
		 
    65. 
	
  65. 
		&nbsp;<footer>
    66. 
	
  66. 
		 
    67. 
	
  67. 
		&nbsp;<copyright>This&nbsp;site&nbsp;is&nbsp;©&nbsp;to&nbsp;Anonymous&nbsp;2014</copyright>
    68. 
	
  68. 
		 
    69. 
	
  69. 
		&nbsp;</footer>
    70. 
	
  70. 
		 
    71. 
	
  71. 
		&nbsp;</html:body>
    72. 
	
  72. 
		 
    73. 
	
  73. 
		&nbsp;</html:html>
    74. 




	在上面的代码中，你也许注意到了一些奇怪的<html:x>标签，它们是 W3C 和 HTML6 规范中在命名空间里定义的标签。例如：<html:title>负责设定你浏览器的标题栏文字，<html:media>负责显示图片等等。用户可以自己定义标签以便 JavaScript 和 CSS 识别和处理，这样页面代码会更易读，语义更清晰。



	HTML6 APIs



	HTML6 的标签前带有命名空间，如：<html:html>, <html:head>等等。



	1. <html:html>




    
	
  1. 
		<!DOCTYPE&nbsp;html>
    2. 
	
  2. 
		 
    3. 
	
  3. 
		&nbsp;<html:html>//&nbsp;this&nbsp;is&nbsp;equivalent&nbsp;to&nbsp;<html>&nbsp;tag&nbsp;written&nbsp;in&nbsp;previous&nbsp;HTML&nbsp;versions 
    4. 
	
  4. 
		 
    5. 
	
  5. 
		&nbsp;<!--&nbsp;sample&nbsp;of&nbsp;HTML&nbsp;document&nbsp;-->
    6. 
	
  6. 
		 
    7. 
	
  7. 
		&nbsp;</html:html>
    8. 




	2. <html:head> 和 <head> 标签一样。




    
	
  1. 
		<!DOCTYPE&nbsp;html>
    2. 
	
  2. 
		 
    3. 
	
  3. 
		&nbsp;<html:html>
    4. 
	
  4. 
		 
    5. 
	
  5. 
		&nbsp;<html:head>
    6. 
	
  6. 
		 
    7. 
	
  7. 
		&nbsp;<!--&nbsp;Main&nbsp;content&nbsp;would&nbsp;come&nbsp;here,&nbsp;like&nbsp;the&nbsp;<html:title>&nbsp;tag&nbsp;-->
    8. 
	
  8. 
		 
    9. 
	
  9. 
		&nbsp;</html:head>
    10. 
	
  10. 
		 
    11. 
	
  11. 
		&nbsp;</html:html>
    12. 




	3. <html:title> 和 <title> 标签类似。




    
	
  1. 
		<!DOCTYPE&nbsp;html>
    2. 
	
  2. 
		 
    3. 
	
  3. 
		&nbsp;<html:html>
    4. 
	
  4. 
		 
    5. 
	
  5. 
		&nbsp;<html:head>
    6. 
	
  6. 
		 
    7. 
	
  7. 
		&nbsp;<html:title>A&nbsp;Look&nbsp;Into&nbsp;HTML6</html:title>
    8. 
	
  8. 
		 
    9. 
	
  9. 
		&nbsp;</html:head>
    10. 
	
  10. 
		 
    11. 
	
  11. 
		&nbsp;</html:html>
    12. 




	4. <html:meta> 和 <meta> 标签类似，不同之处在于，在 HTML5 中你只能使用标准的元数据类型，如：”keywords”, “description”, “author”等，而在 HTML6 中你可以使用任何元数据类型。




    
	
  1. 
		<!DOCTYPE&nbsp;html>
    2. 
	
  2. 
		 
    3. 
	
  3. 
		&nbsp;<html:html>
    4. 
	
  4. 
		 
    5. 
	
  5. 
		&nbsp;<html:head>
    6. 
	
  6. 
		 
    7. 
	
  7. 
		&nbsp;<html:title>A&nbsp;Look&nbsp;Into&nbsp;HTML6</html:title>
    8. 
	
  8. 
		 
    9. 
	
  9. 
		&nbsp;<html:meta&nbsp;type="description"&nbsp;value="HTML&nbsp;example&nbsp;with&nbsp;namespaces">
    10. 
	
  10. 
		 
    11. 
	
  11. 
		&nbsp;</html:head>
    12. 
	
  12. 
		 
    13. 
	
  13. 
		&nbsp;</html:html>
    14. 




	5. <html:link> 和 HTML6 之前版本的 <link> 标签类似。




    
	
  1. 
		<!DOCTYPE&nbsp;html>
    2. 
	
  2. 
		 
    3. 
	
  3. 
		&nbsp;<html:html>
    4. 
	
  4. 
		 
    5. 
	
  5. 
		&nbsp;<html:head>
    6. 
	
  6. 
		 
    7. 
	
  7. 
		&nbsp;<html:title>A&nbsp;Look&nbsp;Into&nbsp;HTML6</html:title>
    8. 
	
  8. 
		 
    9. 
	
  9. 
		&nbsp;<html:link&nbsp;src="js/mainfile.js"&nbsp;title="Script"&nbsp;type="text/javascript">
    10. 
	
  10. 
		 
    11. 
	
  11. 
		&nbsp;</html:head>
    12. 
	
  12. 
		 
    13. 
	
  13. 
		&nbsp;</html:html>
    14. 




	6. <html:body> 和 <body> 标签一样。




    
	
  1. 
		<!DOCTYPE&nbsp;html>
    2. 
	
  2. 
		 
    3. 
	
  3. 
		&nbsp;<html:html>
    4. 
	
  4. 
		 
    5. 
	
  5. 
		&nbsp;<html:head>
    6. 
	
  6. 
		 
    7. 
	
  7. 
		&nbsp;<html:title>A&nbsp;Look&nbsp;Into&nbsp;HTML6</html:title>
    8. 
	
  8. 
		 
    9. 
	
  9. 
		&nbsp;</html:head>
    10. 
	
  10. 
		 
    11. 
	
  11. 
		&nbsp;<html:body>
    12. 
	
  12. 
		 
    13. 
	
  13. 
		&nbsp;<!--&nbsp;This&nbsp;is&nbsp;where&nbsp;your&nbsp;website&nbsp;content&nbsp;is&nbsp;placed&nbsp;-->
    14. 
	
  14. 
		 
    15. 
	
  15. 
		&nbsp;</html:body>
    16. 
	
  16. 
		 
    17. 
	
  17. 
		&nbsp;</html:html>
    18. 




	7. <html:a> 和 <a> 标签类似，区别是 <html:a> 只有 “href” 一个属性。




    
	
  1. 
		<!DOCTYPE&nbsp;html>
    2. 
	
  2. 
		 
    3. 
	
  3. 
		&nbsp;<html:html>
    4. 
	
  4. 
		 
    5. 
	
  5. 
		&nbsp;<html:head>
    6. 
	
  6. 
		 
    7. 
	
  7. 
		&nbsp;<html:title>A&nbsp;Look&nbsp;Into&nbsp;HTML6</html:title>
    8. 
	
  8. 
		 
    9. 
	
  9. 
		&nbsp;</html:head>
    10. 
	
  10. 
		 
    11. 
	
  11. 
		&nbsp;<html:body>
    12. 
	
  12. 
		 
    13. 
	
  13. 
		&nbsp;<html:a&nbsp;href="http://siteurl">Go&nbsp;to&nbsp;siteurl.com!</html:a>
    14. 
	
  14. 
		 
    15. 
	
  15. 
		&nbsp;</html:body>
    16. 
	
  16. 
		 
    17. 
	
  17. 
		&nbsp;</html:html>
    18. 




	8. <html：button> 和 <button> 及 <input type=”button”> 一样。




    
	
  1. 
		<!DOCTYPE&nbsp;html>
    2. 
	
  2. 
		 
    3. 
	
  3. 
		&nbsp;<html:html>
    4. 
	
  4. 
		 
    5. 
	
  5. 
		&nbsp;<html:head>
    6. 
	
  6. 
		 
    7. 
	
  7. 
		&nbsp;<html:title>A&nbsp;Look&nbsp;Into&nbsp;HTML6</html:title>
    8. 
	
  8. 
		 
    9. 
	
  9. 
		&nbsp;</html:head>
    10. 
	
  10. 
		 
    11. 
	
  11. 
		&nbsp;<html:body>
    12. 
	
  12. 
		 
    13. 
	
  13. 
		&nbsp;<html:button>Click&nbsp;Here</html:button>
    14. 
	
  14. 
		 
    15. 
	
  15. 
		&nbsp;</html:body>
    16. 
	
  16. 
		 
    17. 
	
  17. 
		&nbsp;</html:html>
    18. 




	9. <html:media> 涵盖 <img>, <video>, <embed> 等标签的所有功能。<html:media> 的好处是你不用根据不同的媒体文件类型使用不同的标签，媒体的类型由浏览器从文件内容（类型属性，扩展名，和MIME type）中来判断。




    
	
  1. 
		<!DOCTYPE&nbsp;html>
    2. 
	
  2. 
		 
    3. 
	
  3. 
		&nbsp;<html:html>
    4. 
	
  4. 
		 
    5. 
	
  5. 
		&nbsp;<html:head>
    6. 
	
  6. 
		 
    7. 
	
  7. 
		&nbsp;<html:title>A&nbsp;Look&nbsp;Into&nbsp;HTML6</html:title>
    8. 
	
  8. 
		 
    9. 
	
  9. 
		&nbsp;</html:head>
    10. 
	
  10. 
		 
    11. 
	
  11. 
		&nbsp;<html:body>
    12. 
	
  12. 
		 
    13. 
	
  13. 
		&nbsp;<!--&nbsp;Image&nbsp;would&nbsp;come&nbsp;here&nbsp;-->
    14. 
	
  14. 
		 
    15. 
	
  15. 
		&nbsp;<html:media&nbsp;src="img1/logo.jpg"&nbsp;type="image">
    16. 
	
  16. 
		 
    17. 
	
  17. 
		&nbsp;<!--&nbsp;Video&nbsp;doesn't&nbsp;need&nbsp;a&nbsp;type&nbsp;-->
    18. 
	
  18. 
		 
    19. 
	
  19. 
		&nbsp;<html:media&nbsp;src="videos/slide.mov">
    20. 
	
  20. 
		 
    21. 
	
  21. 
		&nbsp;</html:body>
    22. 
	
  22. 
		 
    23. 
	
  23. 
		&nbsp;</html:html>
    24. 




	标签类型(Tag types)概述



	和 HTML5 一样， HTML6 也有两种标签类型：单标签（single tag) 和双标签（double tag）




    
	
  1. 
		<html:meta&nbsp;type="author"&nbsp;content="single&nbsp;tag">
    2. 
	
  2. 
		 
    3. 
	
  3. 
		&nbsp;<html:meta&nbsp;type="author"&nbsp;content="double&nbsp;tag"&nbsp;/>
    4. 




	单标签不需要结束符’/’



	结语



	HTML6 规范还未发布，本文原作者Oscar Godson 只是为我们提供了一个对 HTML6 规范的展望，或者说他希望 HTML6 能够支持的一些新特性。(文/jnj 酷 壳 – CoolShell.cn)

                        

                            

                                上一篇：通过Ionic构建一个简单的混合式(Hybrid)跨平台移动应用下一篇：为什么CoreOS和Docker的分手是命中注定的

                        

                    

                

            

        

        
        



 

版权所有 金名计算机系统集成股份有限公司 备案号：京ICP备13027063号