HTML6 展望_html/css_WEB-ITnose

2024-11-10 22:15:01

开发者中心
> 正文

　HTML5 概述

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

,

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

　　HTML6 展望

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

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

　　HTML6 代码样例：

   A Look Into HTML6            a1 a2 
 
   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.

 // this is equivalent to  tag written in previous HTML versions

　　2. 和标签一样。

3. 和标签类似。</p> <pre class="precsshui"><!DOCTYPE html> <html:html> <html:head> <html:title>A Look Into HTML6</html:title> </html:head> </html:html></pre> <p>　　4. <html:meta> 和 <meta> 标签类似，不同之处在于，在 HTML5 中你只能使用标准的元数据类型，如：”keywords”, “description”, “author”等，而在 HTML6 中你可以使用任何元数据类型。</p> <pre class="precsshui"><!DOCTYPE html> <html:html> <html:head> <html:title>A Look Into HTML6</html:title> <html:meta type="description" value="HTML example with namespaces"> </html:head> </html:html></pre> <p>　　5. <html:link> 和 HTML6 之前版本的 <link> 标签类似。</p> <pre class="precsshui"><!DOCTYPE html> <html:html> <html:head> <html:title>A Look Into HTML6</html:title> <html:link src="js/mainfile.js" title="Script" type="text/javascript"> </html:head> </html:html></pre> <p>　　6. <html:body> 和 <body> 标签一样。</p> <pre class="precsshui"><!DOCTYPE html> <html:html> <html:head> <html:title>A Look Into HTML6</html:title> </html:head> <html:body>  </html:body> </html:html></pre> <p>　　7. <html:a> 和标签类似，区别是 <html:a> 只有 “href” 一个属性。</p> <pre class="precsshui"><!DOCTYPE html> <html:html> <html:head> <html:title>A Look Into HTML6</html:title> </html:head> <html:body> <html:a href="http://siteurl">Go to siteurl.com!</html:a> </html:body> </html:html></pre> <p>　　8. <html：button> 和 <button> 及 <input type=”button”> 一样。</p> <pre class="precsshui"><!DOCTYPE html> <html:html> <html:head> <html:title>A Look Into HTML6</html:title> </html:head> <html:body> <html:button>Click Here</html:button> </html:body> </html:html></pre> <p>　　9. <html:media> 涵盖 , <video>, <embed> 等标签的所有功能。<html:media> 的好处是你不用根据不同的媒体文件类型使用不同的标签，媒体的类型由浏览器从文件内容（类型属性，扩展名，和MIME type）中来判断。</p> <pre class="precsshui"><!DOCTYPE html> <html:html> <html:head> <html:title>A Look Into HTML6</html:title> </html:head> <html:body>  <html:media src="img1/logo.jpg" type="image">  <html:media src="videos/slide.mov"> </html:body> </html:html></pre> <h3>　　标签类型(Tag types)概述</h3> <p>　　和 HTML5 一样， HTML6 也有两种标签类型：单标签（single tag) 和双标签（double tag）</p> <pre class="precsshui"><html:meta type="author" content="single tag"> <html:meta type="author" content="double tag" /></pre> <p>　　单标签不需要结束符’/’</p> <h3>　　语</h3> <p>　　HTML6 规范还未发布，本文原作者Oscar Godson 只是为我们提供了一个对 HTML6 规范的展望，或者说他希望 HTML6 能够支持的一些新特性。</p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> </wrapper></container> </toolbar></logo></p> </article > <div class="mimiwuqi pagebar-2"> </div> <div class="mimiwuqi art-tags"> </div> <div class="mimiwuqi art-copyright"> <p>本文是由用户编写整理，所有内容的版权归原作者所有。如果侵犯了您的权益，请联系我删除<br></p> </div> </div> <div class="mimiwuqi prev-next"> <p class="mimiwuqi art-prev"> <a href="https://frontend.mimiwuqi.com/qianduan/416212.html" rel="prev"><span>上一篇</span> css3部分选择器整理_html/css_WEB-ITnose </a> </p> <p class="mimiwuqi art-next"> <a href="https://frontend.mimiwuqi.com/qianduan/442913.html" rel="next"><span>下一篇</span> PHP写的API如何防止拒绝服务攻击？ </a> </p> </div> </div> <div class="mimiwuqi col-right r"> <div class="mimiwuqi widget widgetModule widgetHotPost"> <div class="mimiwuqi com-tit"> <h4 class="mimiwuqi title-2">相关推荐</h4> </div> <ul class="mimiwuqi mod-main mod-post"> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416213.html" target="_blank" title="HTML6 展望_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> HTML6 展望_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416212.html" target="_blank" title="css3部分选择器整理_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> css3部分选择器整理_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416211.html" target="_blank" title="基于CSS3图片悬停放大特效_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> 基于CSS3图片悬停放大特效_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416210.html" target="_blank" title="css打造下划线输入框_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> css打造下划线输入框_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416209.html" target="_blank" title="CSS总结（中篇）_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> CSS总结（中篇）_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416208.html" target="_blank" title="怎样用纯HTML和CSS更改默认的上传文件按钮样式_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> 怎样用纯HTML和CSS更改默认的上传文件按钮样式_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416207.html" target="_blank" title="请问：CSS中border属性的问题_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> 请问：CSS中border属性的问题_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416206.html" target="_blank" title="webView获取链接后的url和加载经过处理后的HTML_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> webView获取链接后的url和加载经过处理后的HTML_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416205.html" target="_blank" title="后端码农谈前端（CSS篇）第六课：盒子模型_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> 后端码农谈前端（CSS篇）第六课：盒子模型_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416204.html" target="_blank" title="CSS 文本上下标_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> CSS 文本上下标_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416203.html" target="_blank" title="java web有个小错误啊，不知道哪里有错，新手求大神_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> java web有个小错误啊，不知道哪里有错，新手求大神_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416202.html" target="_blank" title="Jekyll博客搭建小记(附易用模板)_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> Jekyll博客搭建小记(附易用模板)_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416201.html" target="_blank" title="FORM 不换行的方法_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> FORM 不换行的方法_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416200.html" target="_blank" title="正确的使用margin:0 auto与body{text-align:center;}实现元素居中_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> 正确的使用margin:0 auto与body{text-align:center;}实现元素居中_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416199.html" target="_blank" title="CSS总结（下篇）_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> CSS总结（下篇）_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416198.html" target="_blank" title="初探响应式Web设计_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> 初探响应式Web设计_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416197.html" target="_blank" title="html代码中让链接在新窗口中打开的写法_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> html代码中让链接在新窗口中打开的写法_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416196.html" target="_blank" title="css3动画属性animation（动画）_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> css3动画属性animation（动画）_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416195.html" target="_blank" title="$.get()请求返回一个html页面,获取该页面特定id的元素_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> $.get()请求返回一个html页面,获取该页面特定id的元素_html/css_WEB-ITnose </div> </a> </li> <li> <a href="https://frontend.mimiwuqi.com/qianduan/416194.html" target="_blank" title="Ext子页面操作父页面_html/css_WEB-ITnose" class="mimiwuqi clearfix"> <div> Ext子页面操作父页面_html/css_WEB-ITnose </div> </a> </li> </ul> </div> </div> </div> </div> <footer class="footer"> <div class="footer-bottom"> <div class="container"> <div class="footer-copyright">Copyright © 2009 mimiwuqi.com<span>・ </span><a rel="nofollow" target="__blank" href="https://beian.miit.gov.cn">晋ICP备2021011283号</a> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7b19f396c9feef68fe5082cad0b0eeff"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </div> </div> <div class="foot-link"> <img rel="nofollow" src="https://www.mimiwuqi.com/skin/truste.png" alt="TRUSTe Privacy Certification"> <img rel="nofollow" src="https://www.mimiwuqi.com/skin/icon3.png" alt="可信网站"> <img rel="nofollow" src="https://www.mimiwuqi.com/skin/f1ee261b96ae71e845efba398efeca02.png" alt="网站安全"> <img rel="nofollow" src="https://www.mimiwuqi.com/skin/a6ef792fec0a3f4f370cb8d8c6d11134.png" alt="服务时间"> </div> <div class="rollbar"> <div class="rollbar-item"><a rel="nofollow" target="_blank" title="举报反馈留言" href="https://www.mimiwuqi.com/e/tool/gbook/?bid=2"><i class="iconfont icon-fankui"></i>反馈</a></div> <div class="rollbar-item tap-qq" etap="tap-qq"><a rel="nofollow" target="_blank" title="QQ咨询" href="tencent://message/?uin=431571451&Site=qq&Menu=yes"><i class="iconfont icon-qq"></i></a></div> <div class="rollbar-item tap-weixin" etap="tap-weixin" data-id="0" title="关注微信"><i class="iconfont icon-weixin"></i><img src="/skin/mimiwuqi/images/weixin.png" alt="微信联系"></div> <div class="rollbar-item to_full" etap="to_full" title="全屏页面"><i class="iconfont icon-full"></i></div> <div class="rollbar-item to_top" etap="to_top" title="返回顶部"><i class="iconfont icon-shang"></i></div> </div> <div id="loginbox"></div> <script type="text/javascript" src="/skin/images/login.js"></script> </footer> <div class="mimiwuqi m-mask"></div> <script src="https://frontend.mimiwuqi.com/skin/mimiwuqi/js/jquery.fancybox.min.js" type="text/javascript"></script> <link rel="stylesheet" href="https://frontend.mimiwuqi.com/skin/mimiwuqi/css/jquery.fancybox.min.css"> <script> $(function () { $('.content').find('img').each(function () { var _this = $(this); var _src = _this.attr("src"); var _alt = 'HTML6 展望_html/css_WEB-ITnose'; _this.wrap('<a data-fancybox="images" href="' + _src + '" data-caption="' + _alt + '"></a>'); $(this).attr('title','' + _alt + ''); }) }) const preElements = document.querySelectorAll('pre'); preElements.forEach((pre, index) => { const code = document.createElement('code'); code.textContent = pre.textContent; pre.textContent = ''; pre.appendChild(code); const codebutton = document.createElement('button'); codebutton.textContent = '复制'; codebutton.className = 'hljs-button'; pre.appendChild(codebutton); codebutton.addEventListener('click', function () { navigator.clipboard.writeText(code.textContent).then(() => { codebutton.textContent = '已复制'; setTimeout(() => { codebutton.textContent = '复制'; }, 2000); }) .catch(err => { console.error('无法复制文本: ', err); }); }); }); </script> </body> </html>