H5 new label semantics and BFC

H5 new label semantics

1. What is semantic
labeling has its own meaning, and the content semantics can be judged through the label.

2. The benefits of semantics
1. The html structure is clear and the code is better readable, which is convenient for team maintenance and development.
2. It is more conducive to search engines or auxiliary equipment to understand the content of html pages. The search engine can determine the context and weight relationship according to the label language

3. Semantic tags commonly used in H5

    <section>   用于对网站和页面内容分块，划分单独的模块区域

    <header>：定义页面或内容的头部区域 
    
    <main>表示页面的主体内容（一个页面只能使用一次）
  
    <hgroup>表示对网页或区段的标题进行组合，通常对h1~h6进行分组
  
    <nav>：定义页面导航
 
    <article>   独立的文章展示

    <aside> 页面中的附属侧边信息（对article的内容进行信息的辅助解释）
    
    <footer>：定义页面或内容的底部区域

BFC

• Abbreviation for block formatting context, explanation: block-level formatting context

• The official explanation is : it determines how the element locates its content, as well as the relationship and interaction with other elements. BFC provides an environment in which HTML elements will be laid out according to certain rules.

• It is easy to understand, and the explanation is : the purpose of BFC is to form an independent space, and the sub-elements in this space will not affect the outside elements in the layout.

• How to generate BFC
  Method 1: overflow is not visible, you can make the attribute: hidden auto scroll.
  Method 2: Float is not none. As long as the float is set, the current element has the BFC attribute.
  Method 3: Positioning absolute positioning and fixed positioning. Default and relative positioning will not create BFC space.
  Method 4: display inline-block table-cell flex inline-flex

• BFC applications:
  1. Solve margin collapse
  2. Parent class height collapse
  3. Prevent elements from being covered by floating elements

• Child elements affect the layout of the parent element