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>
  
なぜのラベルを囲むのですか?
画像のスケールを維持し、サイズを調整します.