Web 语义化学习笔记

大部分时候写代码都是用div布局，自从html5发行之后，也主动去了解过Web语义化，但是针对多种标签到底应该怎么用，什么时候用还是一知半解。最近参加了百度前端学院，根据偷学review别人代码，终于把标签的顺序和位置理清了，在此记录一下以备后用。

1. 标签，文档中只可以存在一个，不应该是可重复使用的标签的子标签，
   ,

   ,

   ,

   ,

   。

2. 标签，用于表示网站开头或者文章开头，可以包含网站标题，或者文章标题等信息，在一个html文档中可以重复出现。

3. 标签，用于表示网站结尾或者文章页脚，包含一些尾部的描述信息。同
   标签一样可以多次出现。

4. 标签，用于表示独立的信息，内部可以包含一篇独立的文章，帖子，评论等内容的全部信息，所以可以包含帖子的作者，发布时间，标题和页脚等。

5. 标签，用于表示文章的章节，页眉，页脚等信息，但是我们有了
   表示页眉，

   表示页脚，所以可以用

   单独表示文章的章节，突出语义。

6. 标签，包含了流式内容(图片、音频、视频、代码、图表等)，内容应该与主体内容相关，但是如果被删除，不应该对主体内容造成影响。我的理解就是我们应该将图片，视频，图表等信息放在这个标签里，如果相应的图片，视频等被删除，也不会对文档造成其他影响。

7. 标签，用于给

   标签的内容添加标题。

8. 标签，用于表示网站或者文章的侧栏。用于对文章或者网站进行描述，应该与其主体有一定的关系。

综合上面的标签，给出一个html文档的大致概览

   
   
    
   ...
    
   ...
    
   
 
  
  ...网站标题等
 
  
   
 
  
  ...
  
  

   

    ...标题等
   
    
   

    ...
    

    
    
标题
    ...
    
    ...
   
    

     ... 这里是文章的侧栏
    
    

     ...这里是文章的页脚
    
   
      ...
  
  
     
  
      ...
      这里是网站的侧栏
     
  
   
  
      ...
     这里是网站的页脚
   
  
     
    

转自：https://newilddad.com/welcome-to-ghost/