1. 首页
  2. 热点关注

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

发布于 2016-05-20 03:03:36 | 318 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程，程序狗速度看过来！

HTML5超文本标记语言

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五重大修改。

摘要: HTML5 是 HTML 语言最受欢迎的版本之一，它支持音频和视频、离线存储、移动端、和标签属性等等。还提供了article, section, header这样的标签来帮助开发者更好地组织页面内容。 ...

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

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

       HTML6 APIs

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

       1. <html:html>
 
  1. <!DOCTYPE html>
  2. <html:html>// this is equivalent to <html> tag written in previous HTML versions
  3. <!-- sample of HTML document -->
  4. </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”, “denoxssion”, “author”等，而在 HTML6 中你可以使用任何元数据类型。
 
  1. <!DOCTYPE html>
  2. <html:html>
  3. <html:head>
  4. <html:title>A Look Into HTML6</html:title>
  5. <html:meta type="denoxssion" 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="noxss" type="text/javanoxss">
  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?


最新网友评论  共有(0)条评论 发布评论 返回顶部
推荐阅读
  • 终极炫富——2016 年 iOS 开发者收入调查报告
  • 年度大片：Stack Overflow 2017 开发者调查报告发布！
  • 开发者需要大学学位吗？
  • 程序员多大年纪算高龄，届时该何去何从？
  • 2017 年高薪编程语言排行榜，你的语言上榜没？
  • 各编程语言开发者最常使用的按键，中了没?
  • 伤不起的三十岁，干不动的程序员要何去何从？
  • 2016年中国加班最狠IT公司排行
  • 一句话"面试"漫画：黑了苹果、谷歌、三星
  • 拿代码量算 KPI ……跟程序员们来这套？
  • 程序员遇到 Bug 时的 30 个反应，你是哪一种？
  • 2016年收入最高的5个编程语言 Java和C没在前五?
  • 为什么很少见人傻钱多的程序员炫富？
  • 阿里月薪两万是什么体验？
  • 代码缩进时 程序员更喜欢空格键还是Tab键？
    • 最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务