今天我来聊聊我怎么用HTML5里的新加的重要结构标志。HTML5升级不只是改进技术，更多的是让网页内容有条理，更好懂，也能让你的网站更受欢迎。我会从新的DOCTYPE开始，一个个给你讲这些新东西，还会告诉你一些实用的小窍门和要注意的地方！

HTML5的新doctype

HTML5的新doctype真是省事儿，一句话就能搞定声明～这么一来，代码看起来简洁多！刚学HTML5那会儿，总爱忘改doctype，结果网页乱七八糟。现在，用HTML5的doctype建新页就是顺手拈来。

换了新doctype之后，整篇文章排版就不一样！HTML5默认用标准模式，这样无论在哪种浏览器上浏览都能保持一致。对前端开发人员来说，省时又方便，调试起来也轻松多了。

新增的结构元素

 
     
    ...stuff...  
     
     
        
 
            
My Site
 
        
 
        
 
            
 
                
Home
 
                
About
 
                
Contact
 
            
 
        
 
        
 
            
My Article
 
            
...
 
        
 
        
 
            
...
 
        
 
     

HTML5加了好几个新功能，比如说“,“,“,“,“等等。用上这些东西，网站结构会更明了，也让搜寻引擎更好懂你的意思。比如，“就可以用来圈住一大段完整的话，特别合适拿来写博客和新闻文章。我就在自己的博客里使劲儿地用这个元素，觉得页面看起来更有条理，管理起来也轻松多了。

元素就是用来标识你文章里的某个区域，跟一个主题差不多，还能层层嵌套。做网页设计的时候，我会按照内容的逻辑顺序用这个元素，这样就能把每个部分分得清清楚楚，也方便我用CSS来调整样式。
导航元素的使用

div​用来搞定导航链接这事真的很重要！网页头部和侧边栏都是俺喜欢放这类元素的地方，能把各种导航链接都放在一起，一目了然，正好满足用户想要迅速找到需要的那啥。

你知道吗，“元素并非每页必备，但如果有很多导航链接就强烈建议用了。根据经验来说，妥善利用此元素能让网站看起来更专业，也让用户更加满意。

article和section的嵌套使用

HTML5里头，标签和标签挺配对的，可以互相嵌套着用。不过，嵌套可要注意，别弄得一团糟。我就曾经犯过这样一个错，结果网页乱七八糟的。后来我就开始琢磨怎么把内容安排得更有条理，慢慢地就搞定了。所以说，嵌套这俩东西，我会先搞定最外面那一层结构，再往里面添砖加瓦，一步步来。

网页做得好，得把元素恰当地放进去，这样不仅看起来有条理，后面要更新或者修都方便，特别适合长期开着的网站！

 
 
     
    ...stuff...  
     
     
        
 
            
My Site
 
        
 
         
        
 
            
My Article
 
            
 
                
...
 
            
 
        
 
         
     

class和ID属性的应用

虽然HTML5有新结构元素，不过我们还是能给它们加class或者ID滴。这就方便我们用特定样式或脚本来搞定某些元素！所以做网页的时候，我会给重点元素加个class或ID，这样就能更好地控制样式和行为咯~

header {  
    display: block;  
    font-size: 36px;  
    font-weight: bold;  
}

比如，我给网站导航栏加了个class，这样就能用css专门设定它的样子，不会影响别的东西。再说说javascript，用ID能很快找到想要的元素，让代码运行得更快。

兼容性问题的解决

虽然HTML5功能很全，但是有些旧版浏览器可能用不上其中的一些特性。咱们可以用JavaScript来搭建这些被遗漏的部分，这样老浏览器也能用上HTML5的样式！我自己的项目也是这么做的，虽然开始时费点劲儿，但是长久来看还是挺值当的。

在用Javascript处理兼容性问题时，别忘了看看你的用户主要用哪种浏览器。如果他们的浏览器版本比较新，那你就可以大胆地用上HTML5的功能！

实践案例分享

其实，我把HTML5用在自己的博客和小项目里了，发现用它做出的网页可真清爽，网站速度也快多了，浏览起来也更爽快。尤其在搜索引擎优化（SEO）这块儿，用上HTML5的语义化标签，对搜索引擎更友善，网站排名也能提高！

我还特别留意了一些大牌公司，比如谷歌，他们都开始用HTML5做网页了。这让我觉得这个技术肯定靠谱，也说明HTML5真的有实用价值。

nav.main-menu {  
    font-size: 18px;  
}

总结与展望

从学HTML5到现在，我真的觉得它太方便！用它设计网页特别快，还能让网站内容更有趣。我敢说，HTML5以后肯定就是大家做网页的老大！

大家好，热闹一下！来聊聊：你们平时怎么用HTML5的呀？有没有遇到什么难题？可以在下面留言说说自己的亲身体验，顺便帮忙点个赞转发出去，让HTML5的魅力传播得更远！

   
document.createElement('header');    
document.createElement('nav');    
document.createElement('section');    
document.createElement('article');    
document.createElement('aside');    
document.createElement('footer');