HTML5标准学习入门之文档结构-内江站浩晨众云

新闻中心

这里有您想知道的互联网营销解决方案

HTML5标准学习入门之文档结构

推荐专题：HTML 5 下一代Web开发标准详解

创新互联公司，为您提供重庆网站建设公司、重庆网站制作、网站营销推广、网站开发设计，对服务报废汽车回收等多个行业拥有丰富的网站建设及推广经验。创新互联公司网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏心悦目的作品。与客户共同发展进步，是我们永远的责任！

说起HTML的结构，很多人都能说得头头是道，一般来说答案可能是这样的：

一个DOCTYPE，一个html，里面有head和body元素。

这当然不能说是不正确的，但是如果问到一个最小的HTML源文件必须有哪一些东西的话，恐怕很少有人能正确地做出回答。

先来回答一下这个问题，一个最简的HTML5源码文件需要的内容如下：

是的，就这样，一个字符不多，一个字符不少，除了大小写可任意变化外，其他的任何内容都是不能变动的。

那么究竟是怎么样的规则，导致一个最简的源码文件必须有doctype声明呢？根据标准，一个HTML文档有如下内容组成（严格按照顺序）：

一个BOM标记，且这个BOM标记必须为U+FEFF。

· 0-n个空格或注释。
· DOCTYPE声明。
· 0-n个空格或注释。
· 一个HTML元素。
· 0-n个空格或注释。

这里存在着一些和HTML4的不同，一个HTML4的最简源码文件是这样的：

 
 
 
  
  
  
  
  
  
                      "http://www.w3.org/TR/html4/loose.dtd"> 
  
  
  这里是标题

两者的区别是显而易见的：

HTML5把DOCTYPE修改为更简单的，这个已经众所周知了。
在HTML4中多了一个标签。</li></ul> <p>这里的重点就是<title>标签了，关于这个标签，在HTML4.01标准中是这么说的：</p><p><strong>Every HTML document must have a TITLE element in the HEAD section.</strong></p><p>也即是说，HTML4要求<title>标签是必须存在的。</p><p>而在HTML5的标准中，又是这么说的：</p><p><strong>There must be no more than one title element per document.</strong></p><p>HTML5中只设定了<title>标签数量的上限，却没有指明下限，也就是说，没有<title>的文档已经被视为一个合法的文档了。</p><p>对于DOCTYPE，HTML4中设定了6种DOCTYPE，HTML5中将DOCTYPE分为3种，这个在以后的章节中再具体说明。</p><p>再回过来看一下文档组成，除去0-n个空格或注释这样并没有多大意义的元素之外，组成的列表中还说明有一个HTML元素，但是最简的源码中却没有这东西。这是因为在HTML的规范中，一直存在“隐式标签”这样的概念，关于隐式标签，大致可以这么解释：</p><p>一部分元素，当满足特定的前提条件时，其开始标签或结束标签可以在源码中省略。在这种情况下，被省略的标签称为“隐式标签”。</p><p>需要注意的是，此处的省略指的是在源码中省略，而在最终成型的DOM树中，这个标签是存在的，因此才称为隐式标签。因此上面最简的源码结构，在生成DOM树后，其真正的结构是这样的：</p> <pre> <ol> <li><!DOCTYPE html> </li> <li><html> </li> <li> <head></head> </li> <li> <body></body> </li> <li></html> </li> </ol></pre><p>***，再总结一下XHTML中的一些规范：</p><ul><li>· 因为是XML，所以为了表示这是一个HTML文档，必须有一个命名空间，其值为http://www.w3.org/1999/xhtml。</li> <li>· 因为是XML，所以MIME type不能是text/html了，text/xml、application/xml、application/xml+html都是比较好的选择。</li> <li>· 因为是XML，必须有根元素，根元素为<html>，即<html>的开始和结束标签不能省略了。</li> <li>· 因为是XML，所有元素只要有了开始标签，就不能没有结束标签，或者自闭合。</li> <li>· 因为是XML，所有元素都得严格遵守大小写，元素名称必须为小写。</li></ul> <p>因为是XML，文档变得严格了很多，也因为是XML，其可读性和规范性提高了不少。但最终，我们始终要在HTML的宽容性和XML的规范性之间找到***的平衡点，一味地追求极端始终是一个错误。<br /> </p><p><em>原文链接：http://www.cnblogs.com/GrayZhang/archive/2011/03/28/learning-html5-structure.html</em></p><p>【编辑推荐】</p> <ol> <li>Modernizr：为HTML 5和CSS3而生</li> <li>学习HTML 5十佳站点推荐</li> <li>技术大牛谈HTML 5设计原理</li> <li>HTML 5联手jQuery实现超酷图像灰度渐变效果</li> <li>HTML 5之表单新功能解析</li> </ol> <br> 文章名称：HTML5标准学习入门之文档结构 <br> 当前网址：<a href="http://www.jxjierui.cn/article/cdgihhp.html">http://www.jxjierui.cn/article/cdgihhp.html</a> </div> <div class="hot_new"> <div class="page_title clearfix"> <h3>其他资讯</h3> </div> <div class="news_list clearfix"> <ul> <li> <a href="/article/cossjod.html">服务器在海外，下载文件如何提速？网站在国外服务器如何提速</a> </li><li> <a href="/article/cossjsc.html">全面讲解CLR安全性</a> </li><li> <a href="/article/cossgie.html">who网站怎么注册？(whosfan怎么注册)</a> </li><li> <a href="/article/cossjdd.html">香港vps主机租用，国外主机商香港vps（香港vps主机便宜）</a> </li><li> <a href="/article/cossjsd.html">调试技术解锁Linux下IDA调试之路（linux下ida）</a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>  <div class="footer wow fadeInUp"> <div class="rowFluid"> <div class="span12"> <div class="container"> <div class="footer_content"> <div class="span4 col-xm-12"> <div class="footer_list"> <div class="span6"> <div class="bottom_logo"><img src="/Public/Home/images/ewm.jpg" alt="微信服务号二维码" /></div> </div> <div class="span6 col-xm-12"> <div class="quick_navigation"> <div class="quick_navigation_title">快速导航</div> <ul> <li><a href="https://www.cdcxhl.com/idc/mintian.html" title="珉田数据中心" target="_blank">珉田数据中心</a></li><li><a href="http://www.scwxfdj.com/" title="四川维修发电机公司" target="_blank">四川维修发电机公司</a></li><li><a href="http://www.bjsile.com/" title="成都精神堡垒设计" target="_blank">成都精神堡垒设计</a></li><li><a href="http://www.cdzunge.cn/" title="尊格展览" target="_blank">尊格展览</a></li><li><a href="http://www.zhuangshixt.com/" title="EPS装饰条" target="_blank">EPS装饰条</a></li><li><a href="http://www.tjjierui.cn/" title="什邡做网站" target="_blank">什邡做网站</a></li><li><a href="http://www.cdysfgs.com/" title="cdysfgs.com" target="_blank">cdysfgs.com</a></li> </ul> </div> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_link"> <div class="footer_link_title">友情链接</div> <ul id="frientLinks"> <a href="https://www.cdcxhl.com/" title="网站制作" target="_blank">网站制作</a> <a href="https://www.cdcxhl.com/" title="网站建设" target="_blank">网站建设</a> <a href="https://www.cdxwcx.com/tuiguang/" title="成都网络推广" target="_blank">网络推广</a> <a href="http://seo.cdkjz.cn/" title="成都网站推广" target="_blank">网站推广</a> <a href="https://www.cdcxhl.com/xiaochengx.html" title="成都微信小程序开发" target="_blank">小程序开发</a> <a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a> </ul> <div class="footer_link_title">网站建设</div> <ul id="frientLinks"> <li><a href="/">内江浩晨众云建站</a></li> <li><a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a></li> </ul> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_cotact"> <div class="footer_cotact_title">联系方式</div> <ul> <li><span class="footer_cotact_type">企业：</span><span class="footer_cotact_content">青羊区浩晨众云设计工作室（个体工商户）</span></li> <li><span class="footer_cotact_type">地址：</span><span class="footer_cotact_content">成都市青羊区太升南路288号</span></li> <li><span class="footer_cotact_type">电话：</span><span class="footer_cotact_content"><a href="tel:18980820575" class="call">18980820575</a></span></li> <li><span class="footer_cotact_type">网址：</span><span class="footer_cotact_content"><a href="/" title="内江网站建设">www.jxjierui.cn</a></span></li> </ul> </div> </div> </div> </div> </div> <div class="copyright"> <p>公司名称：青羊区浩晨众云设计工作室（个体工商户）联系电话：18980820575</p> <p><a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">网站备案号：蜀ICP备2025119795号-2</a></p> <p>内江浩晨众云建站内江网站建设内江网站设计内江网站制作 <a href="http://www.cdxwcx.cn/" target="_blank">成都做网站</a></p> </div> </div> </div> </div> </body> </html> <script> $(".technical_support_box_z_info_box 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>