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

HTML5 概述

专注于为中小企业提供网站设计、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业泽库免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

HTML5 是 HTML 语言***的版本之一,它支持音频和视频、离线存储、移动端、和标签属性等等。还提供了

这样的标签来帮助开发者更好地组织页面内容。然而 HTML5 规范仍然没有***定稿,并且它并不是一个真正意义上的语义标记语言。

HTML6 展望

你有没有曾经希望能在 HTML 中使用自定义标签?比如:使用来显示你的网站logo,还有使用来显示工具栏等等。我们经常使用来组织页面,在 HTML6 里我们希望可以直接使用象这样的自定义标签。

和 XML 一样,HTML6 应该支持 namespace(命名空间),如:xmlns:xhtml=”http://www.w3.org/1999/xhtml”

HTML6 代码样例:

 
 
  1.  
  2.  
  3.   
  4.  
  5.   
  6.  
  7.  A Look Into HTML6 
  8.  
  9.   
  10.  
  11.   
  12.  
  13.   
  14.  
  15.   
  16.  
  17.   
  18.  
  19.   
  20.  
  21.  
     
  22.  
  23.   
  24.  
  25.   
  26.  
  27.   
  28.  
  29.  
  30.  
  31.  a1 
  32.  
  33.  a2 
  34.  
  35.   
  36.  
  37.  
 
  •  
  •   
  •  
  •  
     
  •  
  •  

    Heading of main article

     
  •  
  •  

    Sub-heading of main article

     
  •  
  •  

    [...]

     
  •  
  •  

    [...]

     
  •  
  •  
  •  
  •  
  •  
     
  •  
  •  

    The concept of HTML6

     
  •  
  •  

    Understanding the basics

     
  •  
  •  

    [...]

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

    HTML6 APIs

    HTML6 的标签前带有命名空间,如:等等。

    1. 

     
     
    1.  
    2.  
    3.  // this is equivalent to  tag written in previous HTML versions 
    4.  
    5.   
    6.  
    7.   

    2.  和  标签一样。

     
     
    1.  
    2.  
    3.   
    4.  
    5.   
    6.  
    7.   
    8.  
    9.   
    10.  
    11.   

    3.  和  标签类似。</p><pre> <ol> <li><!DOCTYPE html> </li> <li> </li> <li> <html:html> </li> <li> </li> <li> <html:head> </li> <li> </li> <li> <html:title>A Look Into HTML6</html:title> </li> <li> </li> <li> </html:head> </li> <li> </li> <li> </html:html> </li> </ol></pre><p>4. <html:meta> 和 <meta> 标签类似,不同之处在于,在 HTML5 中你只能使用标准的元数据类型,如:”keywords”, “description”, “author”等,而在 HTML6 中你可以使用任何元数据类型。</p><pre> <ol> <li><!DOCTYPE html> </li> <li> </li> <li> <html:html> </li> <li> </li> <li> <html:head> </li> <li> </li> <li> <html:title>A Look Into HTML6</html:title> </li> <li> </li> <li> <html:meta type="description" value="HTML example with namespaces"> </li> <li> </li> <li> </html:head> </li> <li> </li> <li> </html:html> </li> </ol></pre><p>5. <html:link> 和 HTML6 之前版本的 <link> 标签类似。</p><pre> <ol> <li><!DOCTYPE html> </li> <li> </li> <li> <html:html> </li> <li> </li> <li> <html:head> </li> <li> </li> <li> <html:title>A Look Into HTML6</html:title> </li> <li> </li> <li> <html:link src="js/mainfile.js" title="Script" type="text/javascript"> </li> <li> </li> <li> </html:head> </li> <li> </li> <li> </html:html> </li> </ol></pre><p>6. <html:body> 和 <body> 标签一样。</p><pre> <ol> <li><!DOCTYPE html> </li> <li> </li> <li> <html:html> </li> <li> </li> <li> <html:head> </li> <li> </li> <li> <html:title>A Look Into HTML6</html:title> </li> <li> </li> <li> </html:head> </li> <li> </li> <li> <html:body> </li> <li> </li> <li> <!-- This is where your website content is placed --> </li> <li> </li> <li> </html:body> </li> <li> </li> <li> </html:html> </li> </ol></pre><p>7. <html:a> 和 <a> 标签类似,区别是 <html:a> 只有 “href” 一个属性。</p><pre> <ol> <li><!DOCTYPE html> </li> <li> </li> <li> <html:html> </li> <li> </li> <li> <html:head> </li> <li> </li> <li> <html:title>A Look Into HTML6</html:title> </li> <li> </li> <li> </html:head> </li> <li> </li> <li> <html:body> </li> <li> </li> <li> <html:a href="http://siteurl">Go to siteurl.com!</html:a> </li> <li> </li> <li> </html:body> </li> <li> </li> <li> </html:html> </li> </ol></pre><p>8. <html:button> 和 <button> 及 <input type=”button”> 一样。</p><pre> <ol> <li><!DOCTYPE html> </li> <li> </li> <li> <html:html> </li> <li> </li> <li> <html:head> </li> <li> </li> <li> <html:title>A Look Into HTML6</html:title> </li> <li> </li> <li> </html:head> </li> <li> </li> <li> <html:body> </li> <li> </li> <li> <html:button>Click Here</html:button> </li> <li> </li> <li> </html:body> </li> <li> </li> <li> </html:html> </li> </ol></pre><p>9. <html:media> 涵盖 <img>, <video>, <embed> 等标签的所有功能。<html:media> 的好处是你不用根据不同的媒体文件类型使用不同的标签,媒体的类型由浏览器从文件内容(类型属性,扩展名,和MIME type)中来判断。</p><pre> <ol> <li><!DOCTYPE html> </li> <li> </li> <li> <html:html> </li> <li> </li> <li> <html:head> </li> <li> </li> <li> <html:title>A Look Into HTML6</html:title> </li> <li> </li> <li> </html:head> </li> <li> </li> <li> <html:body> </li> <li> </li> <li> <!-- Image would come here --> </li> <li> </li> <li> <html:media src="img1/logo.jpg" type="image"> </li> <li> </li> <li> <!-- Video doesn't need a type --> </li> <li> </li> <li> <html:media src="videos/slide.mov"> </li> <li> </li> <li> </html:body> </li> <li> </li> <li> </html:html> </li> </ol></pre><p><strong>标签类型(Tag types)概述</strong></p><p>和 HTML5 一样, HTML6 也有两种标签类型:单标签(single tag) 和双标签(double tag)</p><pre> <ol> <li><html:meta type="author" content="single tag"> </li> <li> </li> <li> <html:meta type="author" content="double tag" /> </li> </ol></pre><p>单标签不需要结束符’/’</p><p><strong>结语</strong></p><p>HTML6 规范还未发布,本文原作者Oscar Godson 只是为我们提供了一个对 HTML6 规范的展望,或者说他希望 HTML6 能够支持的一些新特性。</p> <br> 标题名称:HTML6 初探 — 你没看错,是6不是5 <br> 本文链接:<a href="http://gydahua.com/article/cohgdhh.html">http://gydahua.com/article/cohgdhh.html</a> </div> <div class="view-qrocde cl"> <div class="m z"><img src="/Public/Home/images/ew.jpg"/></div> <div class="text"> <h6>扫二维码与项目经理沟通</h6> <p>我们在微信上24小时期待你的声音</p> <p>解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流</p> </div> </div> <div class="othernews cl"> <h3>其他资讯</h3> <ul> <li><a href="/article/cddjoes.html">Redis利用历史记录追溯操作轨迹(redis查看历史操作)</a></li><li><a href="/article/cddjoep.html">Oracle高级复制的同步复制的配置步骤说明</a></li><li><a href="/article/cddjosj.html">去年半数以上中型企业受黑客攻击事件增加</a></li><li><a href="/article/cddjosh.html">Linux日期操作:简单指定日期的加减(linux指定日期加减)</a></li><li><a href="/article/cddghic.html">我的域名为什么给我挂起了</a></li> </ul> </div> </div> </div> <div class="sidebar"> <div class="tuijian"> <a href="#"> <h2 class="cl"><span>行业动态</span></h2> <h3>企业网站建设的重要性!</h3> <p>现在虽然是移动互联网时代,但企业网站依然重要,包含PC站点,移动站。可以说企业网站关系企业的未来发展和前途,尤其对中小企业更是如此,一些中小企业老板,对自己的名片很在乎,因为这是个门面。...</p> </a> </div> <div class="ser sidesub"> <h2>服务项目</h2> <ul class="ebox"> <li class="sub sub-1"> <div> <h3>网站建设</h3> <p></p> <a class="btn" href="/serve/website/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>移动端/APP</h3> <p></p> <a class="btn" href="/serve/moblie/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>微信/小程序</h3> <p></p> <a class="btn" href="/serve/small/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>技术支持</h3> <p></p> <a class="btn" href="/serve/tech/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>其它服务</h3> <p></p> <a class="btn" href="/serve/othe/">查看详情</a> </div> </li> <li class="sub sub-5"> <div> <h3>更多服务项目</h3> <p> <a>用我们的专业和诚信赢得您的信赖,从PC到移动互联网均有您想要的服务!</a></p> <a class="btn" href="/serve/">获取更多</a> </div> </li> </ul> </div> <div class="contact" id="fix"> <h2 class="cl"> <span>联系吧</span> <a href="https://map.baidu.com/" class="ditu" rel="nofollow" target="_blank">在百度地图上找到我们</a> </h2> <h3>电话:13518219792</h3> <p>如遇占线或暂未接听请拨:136xxx98888</p> <div class="qq"> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">业务咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">技术咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">售后服务</a> </div> </div> </div> <script> //固定滚动 (function () { var oDiv = document.getElementById("fix"); var H = 120, iE6; var Y = oDiv; while (Y) { H += Y.offsetTop; Y = Y.offsetParent }; iE6 = window.ActiveXObject && !window.XMLHttpRequest; if (!iE6) { window.onscroll = function () { var s = document.body.scrollTop || document.documentElement.scrollTop; if (s > H) { oDiv.className = "contact fixed"; if (iE6) { oDiv.style.top = (s - H) + "px"; } } else { oDiv.className = "contact "; } }; } })(); </script> </div> <div class="footer"> <div class="wp"> <div class="wpss cl"> <dl class="about"> <dt>网站设计</dt> <dd><a href="http://www.kswsj.com/" target="_blank" title="成都网站设计">成都网站设计</a></dd><dd><a href="http://www.myzitong.com/" target="_blank" title="梓潼网站设计">梓潼网站设计</a></dd><dd><a href="http://www.36103.cn/baojia/" target="_blank" title="网站设计制作报价">网站设计制作报价</a></dd><dd><a href="http://www.4006tel.net/vision/website.html" target="_blank" title="网站设计">网站设计</a></dd> </dl> <dl class="about"> <dt>网站制作</dt> <dd><a href="http://m.xwcx.net/" target="_blank" title="H5网站制作">H5网站制作</a></dd><dd><a href="http://www.cdxwcx.cn/" target="_blank" title="成都网站制作">成都网站制作</a></dd><dd><a href="http://chengdu.cdxwcx.cn/" target="_blank" title="成都网站制作">成都网站制作</a></dd><dd><a href="https://www.cdxwcx.com/" target="_blank" title="成都网站制作">成都网站制作</a></dd> </dl> <dl class="contact"> <dt>联系我们</dt> <dd>电话:13518219792</dd> <dd>邮箱:631063699@qq.com</dd> <dd>地址:成都青羊区锦天国际1002号</dd> <dd>网址:www.gydahua.com</dd> </dl> <dl class="about" style="margin-left:50px;width:235px;"> <dt>网站建设</dt> <dd><a href="https://www.cdxwcx.com/city/yaan/" target="_blank" title="雅安网站建设">雅安网站建设</a></dd><dd><a href="http://www.4006tel.net/" target="_blank" title="app网站建设">app网站建设</a></dd><dd><a href="http://www.cxhlcq.com/mobile/" target="_blank" title="重庆手机网站建设">重庆手机网站建设</a></dd><dd><a href="https://www.cdxwcx.com/city/deyang/" target="_blank" title="德阳网站建设">德阳网站建设</a></dd> <!--成都网站建设 成都网站制作 成都做网站 网站建设公司--> </dl> <dl class="flow"> <dt></dt> <div class="ma cl"> <div class="m"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </div> </dl> </div> </div> <div class="footer-link wp"> <ul class="wpss cl"> <li class="fisrt">友情链接</li> <li><a href="http://chengdu.xwcx.net/mobile/" title="手机网站建设套餐" target="_blank">手机网站建设套餐</a></li><li><a href="http://www.xjhxsj.com/" title="成都会议展览设计" target="_blank">成都会议展览设计</a></li><li><a href="http://www.cdxwcx.cn/tuoguan/bgp.html" title="bgp机房托管" target="_blank">bgp机房托管</a></li><li><a href="http://www.hksctrade.com/" title="服务器托管机房" target="_blank">服务器托管机房</a></li><li><a href="http://www.zyfdjzl.cn/" title="资阳发电机公司" target="_blank">资阳发电机公司</a></li><li><a href="http://www.zwzsheng.com/" title="zwzsheng.com" target="_blank">zwzsheng.com</a></li><li><a href="http://www.csruijie.cn/" title="csruijie.cn" target="_blank">csruijie.cn</a></li><li><a href="http://www.ejlty.com/" title="成都发电机公司" target="_blank">成都发电机公司</a></li><li><a href="http://www.yzsxq.com/" title="成都水电改造" target="_blank">成都水电改造</a></li><li><a href="http://www.zuyongfdj.com/" title="成都租用发电机" target="_blank">成都租用发电机</a></li> </ul> </div> </div> <div class="bot-footer"> <div class="wp"> <p class="wpss"> <em>Copyright © 2002-2023 www.gydahua.com 快上网建站品牌 QQ:244261566 版权所有</em> <em>备案号:<a href="http://beian.miit.gov.cn/" rel="external nofollow">蜀ICP备19037934号</a></em> </p> <p class="wpss" style="line-height:30px !important;"> </p> </div> </div> <div class="footer-kefu"> <ul> <li class="qq"><a href="https://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><em></em>在线咨询</a> </li> <li class="tel"><a href="tel:13518219792" target="_blank"><em></em>13518219792</a></li> <li class="wx"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </li> <li class="m"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>移动版官网</p> </div> </li> <li class="top"><em></em></li> </ul> </div> <script src="/Public/Home/js/all.js"></script> </body> </html> <script> $(".cont img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>