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.要素がフローティング要素で覆われるのを防ぎます -
子要素は親要素のレイアウトに影響します