快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

HTML5标签的语义认知和理解（1）

随着服务器的处理能力越来越大，互联网级开发终于开始全面火热（前几年我和很多人说，不要光关注所谓企业级开发，未来马上将进入互联网级开发），HTML5的预热为前端技术带来了更多机会和热点。

成都创新互联是专业的网站建设公司,提供网站建设,网站制作,网站设计等网站开发一体化解决方案;包括H5高端网站建设,微信小程序开发,网站定制,企业网站建设,商城网站定制开发,成都响应式网站建设,建网站,PHP网站建设,软件开发，软文发稿，网站营销。欢迎做网站的企业前来合作洽谈,成都创新互联将竭诚为您服务!

我用的是VS2008开发工具，作为懒人（对于开发工具有强烈的依赖性，懒得记API单词，懒得多打字，懒得查手册）的代表，Intellisense 对我一直是非常重要的事情，我喜欢微软的开发平台，也就是应为VS开发工具有良好的高速的Intellisense 我才喜欢再微软的平台上开发，对于习惯用记事本的牛人，我一直内心仰慕但坚决不从。VS2008对HTML5没有良好的支持的时候，我一直是光看不练，直到我看到了“HTML 5 intellisense and validation schema for Visual Studio 2008 and Visual Web Developer”之后，我的VS2008开始部分的支持HTML5了，至少element和CSS开发有了为懒人服务的Intellisense 了，亲，太高兴了，可惜，对DOM 的javasScript API还没有支持（哦，关于这个话应该怎么表达，和很多朋友有争论，你明白我的意思就可以，这个插件还不支持HTML5比如类似canvas.getContext这样的函数）。

下载了这个插件之后，我们可以在工具--选项中看到新的HTML5的验证架构，在页面开发环境中也可以算作目标验证架构师HTML5。同时开始支持对html标签和css的部分Intellisense 支持。

最早，也是最令人印象深刻，特别是对我这样的懒人而言，记得最深的就是初始化的html元素被简单到非常极致的情况了

  1.   
  2.   
  3.   
  4.       
  5.   
  6.   
  7.   
  8.  

我第一次听说不要写DOCTYPE中的内容后，是非常的激动啊，终于不要那些乱七八糟的东西了，不过转念一想，我好像也从来没有写过，都IDE帮我搞定的嘛，惭愧啊惭愧。

 

然后我们说HTML5的新元素，在了解新元素前，我想先说明下个人观点，对于标签的运用无论如何都是见仁见智的东西，标准是一个指导和参考意见，不同的人有不同的理解的哈利波特（莎士比亚我不是说你），我的理解从最初的HTML4的语义标签开始：

 

  1. 标签的分类方式很多，HTML4中我简单的将标签分为默认block和默认inline这种分法，和有语义以及无语义（样式标签不谈了）的分法。
  2. 除了div之外i，其他标签都是有语义的（声明下，类似font等样式标签我早就不算HTML4的使用中了），div的含义只是在逻辑上将一些标签视同为一组，可以共同处理
如果你同意我这样说，那么你也会同意我说，html5中很多新的基于结构的元素就是来替代div的，或者说可以替代一部分div的作用。这些元素用来说明元素区域和分组的用途。
原因是，未来的网页不仅仅是给PC上的浏览器看的，而且更多的要提供给移动设备，专有设备，小型设备上的浏览器来方便，而这些浏览器需要在不同的环境中重新处理页面内容，给予用户更好的阅读体验，所有页面的内容必须对浏览器提供有参考价值的指导，便于浏览器提供剪裁、突出和特定操作的处理。

所有的文档都应该有一个header元素，特别是页面本身就是一个document对象，所以如果不是有特别的理由，你的页面的最上面的部分应该有一个header元素，其他的文章部分也可能会有header，要小心的是，避免header被滥用，header表示的是一组介绍性或者导航性质的辅助文字，记住导航和介绍性这两个关键词。
所以，页面的最上面一个header应该包含一个导航的标签：nav。虽然好像没有必须的规定，但是我认为再nav中只应该包含ol或li元素，毕竟nav的作用是导航，而导航应该是一组路径的集合。header中还可以包含其他用于介绍的信息，比如首页的公司图标，公司名称，或产品主题页的产品名称神马的。
 
  1.  
  2.     
     
  3.          
  4.         
     
  5.             *****公司 
  6.         
  7.             
       
    1.                 
    2. 导航1
      3.  
    3.                 
    4. 导航2
      5.  
    5.                 
    6. 导航3
      7.  
    7.                 
    8. 导航4
      9.  
    9.                 
    10. 导航5
      11.  
    11.             
     
  8.          
  9.      
  10.  
当然也可以这么下
 
  1.  
  2.     
     
  3.         
     
  4.              
  5.          
  6.         
  7.             
       
    1.                 
    2. 导航1
      3.  
    3.                 
    4. 导航2
      5.  
    5.                 
    6. 导航3
      7.  
    7.                 
    8. 导航4
      9.  
    9.                 
    10. 导航5
      11.  
    11.             
     
  8.          
  9.      
  10.  

随便说一下，HTML5中继续保留了ol和ul，我个人的建议是吧那些解释差异很复杂的同类元素去掉，比如保留abbr放弃acronym，可惜ol和ul都保留下来了，不过我建议用ol。

对于文档型页面来说，比如blog的主页，有主标题和副主标题，那可以在header中用hgroup元素来处理
  1.  
  2.     
     
  3.         像蚂蚁一样工作，像蝴蝶一样生活  
  4.      
  5.     
     
  6.         记录成长的点滴  
  7.      
  8.     
     
  9.         类似后面文章的前言部分啦
     
  10.  

文档本身可以用article元素来标记，article可以描述整篇文章和其包含的所有信息。往往article中也包含了header（我说的是往往）或者hgroup（这个倒真的不一定需要用）。

对于article是不是需要header，有这么几个方式可以判断，是不是有H和一些描述共同组合页眉信息？如果只有H，没有其他描述，那就不必用header了
  1.  
  2.     
     
  3.         标题  
  4.      
  5.  

如果，有主副标题，但没有说明性描述，那直接hgroup也可以

  1.  
  2.     
     
  3.         
     
  4.             主标题  
  5.          
  6.         
     
  7.             副标题  
  8.          
  9.      
  10.  

现在应该对header更有感觉了，是为了向浏览器描述出，哪些是文档的页眉区。

今天就道这里，累死了，明天继续扯HTML元素的理解和认知，对呀HTML5的理解我遵守的原则是：自圆其说，不勉强。一个元素我们要弄明白在哪里用是最合适的，要用的有道理了，哎睡觉了。

新闻标题：HTML5标签的语义认知和理解（1）
链接分享：http://6mz.cn/article/gippps.html

其他资讯