Web構造のキャプチャ
13342 ワード
HTMLページ構造のキャプチャ(YouTubeビデオを参照)
https://www.youtube.com/watch?v=nOUAFyJo9Rs&list=LL&index=1
(▲一部のビデオスクリーンショット、全体フレームの様子)
上のマークとメニューは下のコードで書くことができます.<div class = "header">
<img class = "logo>
<div class="nav">
<a>메뉴1></a>
<a>메뉴2></a>
<a>메뉴3></a>
</div>
</div>
ここでnavタグを書かずにdiv class="nav"で書く理由は以下の通りです.
明らかな結果差はなかったが.
navラベルは、スクロールロボットがサイト構造を理解し、検索エンジンの最適化を支援します.
また、アクセス性の問題も解決しました.
navタグを使用すると、スクリーンリーダー(聴覚障害者の読み方のシステム)が直接その位置に移動できます.
あるいは、以下のようにdivラベル内部でroleを定義してもよい.<div class='nav' role='navigation'>
結論:navラベルを使用することが望ましい.
しかし、初心者にとっては、最初から結果に影響を与えないラベルを数十種類学び、役を熟知するのは容易ではありません.
すべてのラベルを学ぶよりも、まずdiv、p、imgなどの必須ラベルだけですべての問題を解決し、私のページを1回完了し、navラベルのタイトルがheaderラベル、footerラベル、サイドバーがasideラベル、会社の住所がaddressラベル、リストがli、ol、ulラベルを使用して実装するなど、アクセス性とSEO関連ラベルは、次のコードへの興味と学習を学ぶのに役立つことを示しています.
スライドタイトル部分は以下のようになります.後続のレイアウトの説明がない場合に行います.<div class = "slider">
<div><img></div>
<div><img></div>
<div><img></div>
</div>
<div class="CardBox">
<div class = "card">
<div><img></div>
<p></p>
</div>
<div class = "card">
<div><img></div>
<p></p>
</div>
<div class = "card">
<div><img></div>
<p></p>
</div>
</div>
<div class ="gallery">
<div><img></div>
<div><img></div>
<div><img></div>
<div><img></div>
<div><img></div>
<div><img></div>
</div>
なぜのラベルを囲むのですか?
画像のスケールを維持し、サイズを調整します.
Reference
この問題について(Web構造のキャプチャ), 我々は、より多くの情報をここで見つけました
https://velog.io/@kgs12111/웹-구조-잡기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<div class = "header">
<img class = "logo>
<div class="nav">
<a>메뉴1></a>
<a>메뉴2></a>
<a>메뉴3></a>
</div>
</div>
<div class='nav' role='navigation'>
<div class = "slider">
<div><img></div>
<div><img></div>
<div><img></div>
</div>
<div class="CardBox">
<div class = "card">
<div><img></div>
<p></p>
</div>
<div class = "card">
<div><img></div>
<p></p>
</div>
<div class = "card">
<div><img></div>
<p></p>
</div>
</div>
<div class ="gallery">
<div><img></div>
<div><img></div>
<div><img></div>
<div><img></div>
<div><img></div>
<div><img></div>
</div>
Reference
この問題について(Web構造のキャプチャ), 我々は、より多くの情報をここで見つけました https://velog.io/@kgs12111/웹-구조-잡기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol