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

前言:

  HTML5还没玩出个所以然,HTML6要出来了。程序员这工作。我只想说。。。头儿!我要转行!!!

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 html>
 2
 3 <html:html>
 4     <html:head>
 5         <html:title>A Look Into HTML6</html:title>
 6         <html:meta type="title" value="Page Title">
 7         <html:meta type="description" value="HTML example with namespaces">
 8         <html:link src="css/mainfile.css" title="Styles" type="text/css">
 9         <html:link src="js/mainfile.js" title="Script" type="text/javascript">
10     </html:head>
11     <html:body>
12         <header>
13             <logo>
14                 <html:media type="image" src="images/xyz.png">
15             </logo>
16             <nav>
17                 <html:a href="/img1">a1</a>
18                 <html:a href="/img2">a2</a>
19             </nav>
20         </header>
21         <content>
22             <article>
23                 <h1>Heading of main article</h1>
24                 <h2>Sub-heading of main article</h2>
25                 <p>[...]</p>
26                 <p>[...]</p>
27             </article>
28             <article>
29                 <h1>The concept of HTML6</h1>
30                 <h2>Understanding the basics</h2>
31                 <p>[...]</p>
32             </article>
33         </content>
34         <footer>
35             <copyright>This site is ? to Anonymous 2014</copyright>
36         </footer>
37     </html:body>
38 </html:html>

  在上面的代码中,你也许注意到了一些奇怪的<html:x>标签,它们是 W3C 和 HTML6 规范中在命名空间里定义的标签。

  例如:<html:title>负责设定你浏览器的标题栏文字,<html:media>负责显示图片等等。用户可以自己定义标签以便 JavaScript 和 CSS 识别和处理,这样页面代码会更易读,语义更清晰。


HTML6 APIs

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

1 <!DOCTYPE html>
2 <html:html>
3     // this is equivalent to <html> tag written in previous HTML versions
4     <!-- sample of HTML document -->
5 </html:html>

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

1 <!DOCTYPE html>
2 <html:html>
3     <html:head>
4         <!-- Main content would come here, like the <html:title> tag -->
5     </html:head>
6 </html:html>

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

1 <!DOCTYPE html>
2 <html:html>
3     <html:head>
4         <html:title>A Look Into HTML6</html:title>
5     </html:head>
6 </html:html>

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

1 <!DOCTYPE html>
2 <html:html>
3     <html:head>
4         <html:title>A Look Into HTML6</html:title>
5         <html:meta type="description" value="HTML example with namespaces">
6     </html:head>
7 </html:html>

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

1 <!DOCTYPE html>
2 <html:html>
3     <html:head>
4         <html:title>A Look Into HTML6</html:title>
5         <html:link src="js/mainfile.js" title="Script" type="text/javascript">
6     </html:head>
7 </html:html>

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

1 <!DOCTYPE html>
2 <html:html>
3     <html:head>
4         <html:title>A Look Into HTML6</html:title>
5     </html:head>
6     <html:body>
7         <!-- This is where your website content is placed -->
8     </html:body>
9 </html:html>

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

1 <!DOCTYPE html>
2 <html:html>
3     <html:head>
4         <html:title>A Look Into HTML6</html:title>
5     </html:head>
6     <html:body>
7         <html:a href="http://siteurl">Go to siteurl.com!</html:a>
8     </html:body>
9 </html:html>

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

1 <!DOCTYPE html>
2 <html:html>
3     <html:head>
4         <html:title>A Look Into HTML6</html:title>
5     </html:head>
6     <html:body>
7         <html:button>Click Here</html:button>
8     </html:body>
9 </html:html>

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

 1 <!DOCTYPE html>
 2 <html:html>
 3     <html:head>
 4         <html:title>A Look Into HTML6</html:title>
 5     </html:head>
 6     <html:body>
 7         <!-- Image would come here -->
 8         <html:media src="img1/logo.jpg" type="image">
 9             <!-- Video doesn‘t need a type -->
10             <html:media src="videos/slide.mov">
11     </html:body>
12 </html:html>

标签类型(Tag types)概述

  和 HTML5 一样, HTML6 也有两种标签类型:单标签(single tag) 和双标签(double tag)

1 <html:meta type="author" content="single tag">
2 <html:meta type="author" content="double tag" />

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


结语

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

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

时间: 2024-08-29 15:51:30

HTML6 初探 — 你没看错,是6不是5的相关文章

没看错吧!香蕉加点醋居然这么神奇?还不赶紧试试

没看错吧!香蕉加点醋居然这么神奇?还不赶紧试试 2017-07-08新华社 夏天是减肥最好的季节,那么夏季有没有什么既能防暑,又能有助于健康的减肥方法呢? 还真有,那就是香蕉醋! 材料: 香蕉:一定不要选择特别青的香蕉.口感比较涩.吃起来效果不好.通便的效果也不好. 醋:水果醋或米醋. 黑糖或者红糖:健脾胃,然后促进代谢,对我们整体的消化都是有好处的,而且可以分解我们的脂肪. 做法: ① 把香蕉切段,建议大家最好把香蕉切成小段,这样的话泡起来容易入味. ② 把切好的香蕉放到密闭的容器中,根据个人

是的 你没看错!!!用JAVA为MCU开发物联网程序?

一直以来,物联网设备这种嵌入式硬件,对于Java软件开发者来说,就是Black Magic Box,什么中断.寄存器,什么指针.内存泄漏,什么五花八门的编译器.烧录软件——算了还是饶了我吧!    ? 我们Java程序员要的是什么?我们要的是面向对象.是多线程.是框架.是GC.是免费好用的开发工具!嵌入式编程和Java程序员的距离,基本上就是哈利波特和钢铁侠——两个世界嘛!     不过,这两个世界在现在打通了—— 这个高颜值的小板子就是JOSH MEGA8300开发板,你可以用JAVA为这个物

3天学会Python,你没看错,就3天!

刚刚开始学编程,有什么办法可以快速掌握一门语言? 还真有!而且只需要3天的时间,就可以精通Python!你需要完成这几步: 和你的朋友立个flag:我要3天学会Python,赌一辆布加迪威龙! 花上10年的功夫,精通Python: 研究生物化学.分子生物学.遗传学,利用这些知识,研制出返老还童药水: 回到在第3天学习CPython的时候,并干掉那一天的你,并替代它: 这时候,你不仅学会了Python,而且还赢得了一辆布加迪威龙. 这是一个套路 这是一个套路性标题,这种标题的套路是:一个让人不可思

对,你没看错!Ubuntu MATE 14.04 LTS 现在发布了

传统桌面的粉丝现在可以欢呼了,Ubuntu MATE的第一个长期支持版本现在发布了,马上去下载吧! 这个社区产物使用基于 GNOME2 的MATE桌面环境,这个分支还继续着积极的开发和提升.Ubuntu MATE 14.04 LTS跟随着上月发布的Ubuntu 14.10一起发布了. 回顾补充 你大概会想我是不是打错了(我是Joey Sneddon,这大概可以肯定).但这此是没错的,你看到的是对的.Ubuntu MATE团队决定追溯创建一个LTS版本. Ubuntu MATE 14.04 LTS

QQ公众号?是的,你没看错!

微信公众平台培育了800多万的微信公众号,自身也通过微信游戏.广告分销等找到了一些增值盈利模式.作为同门大师兄,qq也在11月份推出了QQ公众号,第一个手机QQ上的“生活服务号”——YTO圆通速递上线. 手机QQ5.2版新增生活服务-YTO圆通速递模块,YTO圆通速递是首个上线的试点账号,用户将音视频.扫码等一些方式进入呼叫圆通快递的界面,进而进入到客服中心,就可进行下单. 生活服务的入口位于手机QQ联系人界面的顶部最右侧,和一般的生活服务栏目不同,YTO圆通速递栏目右侧有个极为明显的电话标记,

设置模板没报错,也没显示的问题

设置了控制器和模板,却没报错没显示.如果在地址中输入错误的模块或方法都有报错.可是结果却是这样的白板 我开始没发现错误.后来看代码,终于发现,调用时display写错了

一辈子看不上别人,从来没看清过自己

这个世界上,最了解你优点的人可能是朋友,但最谙熟你缺点的人却是敌人. 你可能有无数个对手,但只会有一个置你于死地的敌人. 也就是说,这个人比你还了解你的软肋.最危险的敌人,坏就坏在这里,他未必外在强大,但一定心思诡秘.他盯着你,钻研你,单等你的七寸露出来,只轻轻一击,你就败了. 多少人,强势到可以呼风唤雨,却在人性的一个弱点中溃不成军. 这些人的通病是,容易看清楚别人,不容易看清楚自己.在别人的问题上可以斟酌到锱铢必较,而在自己的问题上却可以粗略到走马观花.一颗自私的心,自然会豢养出一双自私的眼

千万照顾好身边没看过《欢乐颂》的朋友

功能 案例 故事 热门 活动 2016年,一个电视剧突然就火了 地铁里面.厕所外面.饭桌上面.楼房下面 上至白发苍苍的老太太.下至引领风潮的00后 都聊起了同样的一个话题 那就是此时此刻风靡全国的--超级表格! O(∩_∩)O~~好啦好啦,开个玩笑,重来一遍. 那就是--欢乐颂! 据说在这部剧里面,大家都能找到自己的影子:据说在这部剧里面,能学到很多做人的道理:据说在这部剧里面,刘涛和华妃就应该在一起-- 为什么这么多据说?因为小编为了全力以赴地完成超级表格升级任务,压根就没看过这部剧. 所以,

【Luogu】P2765魔术球问题(没看懂的乱搞)

题目链接 这题……讲道理我没看懂. 不过我看懂题解的代码是在干嘛了qwq 题解是zhaoyifan的题解 然后……我来讲讲这个题解好了. 题解把值为i的球拆成了两个,一个编号是i*2,一个编号是i*2+1. 为什么编号要这么编呢?因为统计编号的时候好统计qwq 然后从起点向i*2连一条边,从i*2+1到终点连一条边. 然后对于能够跟他凑成完全平方数的连边. 然后跑最大流,如果发现这个球不能串进原来的柱子上,也就是说最大流没有变化,那么就新加一条柱子. 当柱子数超过n的时候就退出循环开始统计. 大