H5の新しいラベルセマンティクスとBFC

H5の新しいラベルセマンティクス

1.セマンティック
ラベリングとは独自の意味があり、コンテンツのセマンティクスはラベルで判断できます。

2.セマンティクスの利点
1.html構造が明確で、コードが読みやすく、チームの保守と開発に便利です
。2 検索エンジンまたは補助機器がhtmlページのコンテンツを理解するのに役立ちます。検索エンジンは、ラベル言語に従ってコンテキストと重みの関係を決定できます

3.H5で一般的に使用されるセマンティックタグ

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

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

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

ここに画像の説明を挿入します

BFC

  • ブロックフォーマットコンテキストの略語、説明:ブロックレベルのフォーマットコンテキスト

  • 公式の説明は次のとおりです。要素がコンテンツを見つける方法、および他の要素との関係と相互作用を決定します。BFCは、特定のルールに従ってHTML要素が配置される環境を提供します。

  • 理解しやすく、説明は次のとおりです。BFCの目的は独立したスペースを形成することであり、このスペースのサブ要素はレイアウトの外側の要素に影響を与えません。

  • BFCの生成
    方法方法1:オーバーフローは表示されません。属性を非表示にすることができます:非表示の自動スクロール。
    方法2:フロートはなしではありません。floatが設定されている限り、現在の要素にはBFC属性があります。
    方法3:絶対ポジショニングと固定ポジショニングのポジショニング。デフォルトおよび相対配置では、BFCスペースは作成されません。
    方法4:インラインブロックテーブルセルフレックスインラインフレックスを表示する

  • BFCアプリケーション:
    1。マージンの崩壊を解決します
    2.親クラスの高さの崩壊
    3.要素がフローティング要素で覆われるのを防ぎます

  • 子要素は親要素のレイアウトに影響します
    ここに画像の説明を挿入します
    ここに画像の説明を挿入します

ここに画像の説明を挿入します
ここに画像の説明を挿入します
ここに画像の説明を挿入します

おすすめ

転載: blog.csdn.net/weixin_53125457/article/details/111561255