51CTO首页
AI.x社区
博客
学堂
精品班
直播训练营
企业培训
鸿蒙开发者社区
WOT技术大会
AIGC创新中国行
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程厂商认证IT技术2024年软考PMP项目管理软考资讯
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO题库小程序
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
账号设置 退出

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

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

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

在上面的代码中，你也许注意到了一些奇怪的<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.  
  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.  
  5. &nbsp;<!--&nbsp;sample&nbsp;of&nbsp;HTML&nbsp;document&nbsp;--> 
  6.  
  7. &nbsp;</html:html> 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

标签类型(Tag types)概述

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

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

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

结语

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

原文链接：A Look Into HTML6 – What Is It, and What Does it Have to Offer?

原文地址：http://www.udpwork.com/item/13608.html

责任编辑：张伟 来源： 酷 壳 – CoolShell.cn
HTML6
相关推荐
HTML6你就这样抛弃JavaScript？
关于HTML6意在实现无JavaScript的单页应用，这引起了前端开发社区一片哗然。请深呼吸，然后继续下面内容。

2015-03-30 09:26:24

JavaScriptHTML6
你没看错！
今天我们要介绍的是springnative，它可以让你的springboot程序，体验graalvm编译器的特性，把你的应用直接编译成native的!

2021-05-26 10:19:01

jreJava应用程序
你没看错，无需密码就可以访问你的iCloud
美国雅虎报道，俄罗斯一家软件公司ElcomSoft升级了旗下的司法取证软件ElcomSoftPhonePasswordBreaker，现在不仅可以从iPhone和黑莓手机中破解,获取信息，而且无需用户的AppleID或密码，就可访问iCloud中存储的内容，而且还能利用多路CPU和GPU进行加速计算。

2014-06-19 14:49:37

iCloud认证令牌密码
你没看错！
并不是所有企业都能像阿里巴巴和腾讯那样，有实力去构建各种风控模型，“企业小并不意味着风险少”，陈树华看到了这一点，所以他今年4月创办了顶象技术，通过“全景式业务安全风控体系”，以及平台上数万个风控模型，亿万条共享知识，帮助大部分企业建立起专属的业务安全体系。

2017-09-18 11:51:50

HTML6 无 JavaScript 的单页应用引起一片哗然
关于HTML6意在实现无JavaScript的单页应用，这引起了前端开发社区一片哗然。请深呼吸，然后继续下面内容。

2015-03-30 14:53:12

HTML6JavaScript一片哗然
你没看错！Google和Facebook在激烈地争夺中国市场
2014年，Google与Facebook——两家总部位于硅谷的平台型全球巨头将战火蔓延到了亚洲。中国成了它们激烈争夺的市场——是的，你没看错。Google和Facebook，它们的网站和旗下的绝大多数移动应用都无法在中国大陆顺畅地访问和使用，但这并不妨碍它们在中国大陆的直面竞争：目标是那些有着全球化扩张需求、不断增加海外推广预算的中国广告主们。

2014-11-06 14:48:42

GoogleFacebook
HTML 5应用框架SproutCore初探
SproutCore是一个HTML5应用框架，这个框架的目标是在无需浏览器插件的情况下，在浏览器中提供极佳的桌面效果。本文中的访谈会令你对SproutCore有一个大概的了解。

2009-09-08 13:47:11

SproutCoreHTML 5应用框架
HTML 5 Web Sockets应用初探
HTML5之中一个很酷的新特性就是WebSockets，WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型，文章将详细的介绍在客户端上创建WebSocket服务器。

2010-08-10 09:08:29

WebSocketsHTML 5
HTML 5 Web SQL Database初探
HTML5标准不只局限于传统的标记语言，它还拥有很多让人期待的API接口；今天，我们来一起了解HTML5的WebSQLDatabase功能。

2010-03-03 08:36:49

HTML 5 Web
还不认识IPv6你就out了 什么是IPv6？
在用手机app时是不是发现欢迎页的最下方都有一行小字“已支持IPv6”。根据谷歌发布的全球IPv6统计数据显示，截止2018年11月底，全球IPv6普及率已经超过25.04%，而中国的IPv6普及率仅为2.93%。

2019-04-09 10:45:18

IPv6运营商协议
什么是6G网络？你知道吗？
6G网络被定义为在未开发的无线电频率下运行的蜂窝网络，并使用人工智能等认知技术，快数倍的速度实现高速、低延迟通信。6G网络目前正在研发中，尚未发布。

2023-01-04 11:39:45

IE10预览：HTML5初探
近期微软Windows8的消息充斥着整个网络。在Windows8中微软将IE10集成在系统中，并且宣称IE10会很好的支持HTML5。本文是HTML5研究小组对于IE10支持HTML5的研究报告。十年Web领域疲软后，微软复仇归来。

2011-09-27 17:37:22

前端：常见的6种HTML5错误用法
本文为您带来，前端：常见的6种HTML5错误用法。分别包括:不要使用section作为div的替代品;只在需要的时候使用;不要把所有列表式的链接放在nav里header和hgroup;figure元素的常见错误;不要使用不必要的type属性以及form属性的错误使用。

2017-10-20 12:18:02

HTML5代码header
6G能“跳过”5G发展吗？专家：5G是6G发展的地基
一些国家前瞻6G研发，是不是意在“跳过”5G阶段专家认为，移动通信技术发展很难“跳过”，目前6G还在预研阶段，需要5G技术打好“地基”。

2020-08-04 17:12:47

5G6G数据传输
其实IPv6，并不是那么完美
IPv6的到来解决了IPv4地址紧缺的问题，但也带来了其它新的问题，IPv6的设计上解决了很多IPv4在实际使用中遇到的痛点问题，这让很多人忽视了问题的存在，这也是IPv6一直没有得到广泛推广和使用的原因之一。

2018-11-27 14:57:00

IPv6IPv4网络
6个优秀的HTML 5/CSS3演示PPT框架推荐
HTML是全世界最流行的网页编程语言。而HTML5是这门语言的升级版本。越来越多的开发者和设计师开始使用HTML5.今天我们要介绍的是最好的几个HTML5CSS3的演示工具和框架，你可以用它们来创建你的网页PPT。

2012-02-29 15:46:48

HTML 5
6个迷人而令人惊叹的HTML5动画特效
HTML5正在快速的进入WEB世界，它在给浏览器各种压力的同时，也带给了我们很多之前意想不到的网页效果，如果我们在网页上能适当的使用一些HTML5元素，可能会给网站带来不一样的用户体验。

2012-11-15 09:59:35

HTML5WebHTML5特效
你不是在数据分析 你是在炒菜
多少次被粉丝问起如何做高大上数据分析？

2015-10-26 14:30:36

数据分析炒菜搬运工
当WiFi6撞上5G，是危机还是商机？
2019年是5G与WiFi6的商用元年，二者近来也颇具话题性，甚至不少人在争论，未来WiFi6与5G正面碰撞，WiFi6会逐渐被淘汰，但也有不少人认为WiFi6与5G是相互竞争，但也可以是完美融合，共生互补。

2019-10-18 09:24:29

WiFi5GWiFi6
马斯克放话：6个月内公测卫星互联网！颠覆5G的将不是6G
就在本周，随着60颗星链卫星成功发射，现在StarLink已有420颗卫星运行于地球轨道。按照马斯克吹下的牛，它们的使命，将是替代光纤，给全球提供高速、稳定又便宜的网络连接。

2020-04-26 12:31:20

马斯克卫星5G
点赞
收藏

51CTO技术栈公众号

业务
速览
在线客服