Semantic Web, Semantic Tags

Semantic WebおよびSemantic Tags一体それは何なのか…?
聞いたことのない単語...SemanticSemanticの意味は...?

意味のある、意味論の意味のある単語.
意味網、ラベルと解釈できますが、「意味網」、「ラベル」は何を意味しますか?

Semantic Web

1.誕生背景

従来のWebテクノロジーでは、キーワードが大量のデータの情報にアクセスできるようにしていました.
これにより、情報を検索する際に多くのデータが生成され、情報が氾濫します.また,コンピュータは必要な情報を抽出,分析,加工することができないため,ユーザが大量のデータを手動で処理する必要がある.
要約すると、コンピュータは情報資源の意味を理解していないため、ユーザーは直接介入します!Semantic Webコンピュータネットワークの誕生目標は、Web上の情報を説明するだけでなく、コンピュータが情報の意味を説明し、情報の関係を理解できるようにすることである.

2.操作方法

「意味」のある情報を生成するには、検索エンジンに情報を露出する必要があります.検索エンジンは情報を収集した後、インデックスを所望の検索キーワードに埋め込む.HTMLタグはインデックスを収集する基準であり、インデックスが含まれているかどうかはSemantic Tagsの使用状況に依存する.

Semantic Tags

HTML 5の前に、idとclassを<div class="header"></div>と<span class="header"></span>に追加し、スタイルを指定します.欠点は可読性が低く、何を明確に表現していないことです!
HTML 5の後、Semantic Tagsを使用してコードの可読性を強化し、明確にする.<div class="header">ではなく、<header>であり、意味が明確な利点がある.

例non-scimantic要素

<div> <span>

シンボル要素の図示

<img> <iframe> <table> <header> <footer> <main>待って...

<img> VS <div> + background-image

イメージを実装するには、次の2つの方法があります.<img>は有意義なSemantic tagであり、<div>は有意義なNon-Semantic Tagであり、使用方法が異なる.

<img>タグ

使用方法

    <img class="img3" src="https://www.w3schools.com/whatis/img_js.png" alt=""> 

使用理由

画像は、Webページの重要な要素です.例えば、コンテンツ情報に関連するバッジ、人物プロファイル、警告画像などの重要な情報に関連する画像を使用する場合、alt属性を使用することができる.上のマークは、ページを印刷するときに同時に画像を表示する特徴があります.

altプロパティ:画像が表示されない場合に画像を置き換えるテキストを指定します.

<div>ラベル+背景-image

使用方法

divタグを使用して、画像を入れる領域

を作成する.

<div class="bg-img">배경이미지</div>

bg-imgクラスに背景画像を追加するcss

.bg-img {
  background-color: yellow;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}

使用理由

ページの内容とは異なる、Webドキュメントを埋め込むための背景.2.画像がコンテンツの一部でない場合に使用します.ページを印刷するときに画像を表示しません.4.他の画像splight()を使用する場合も上記の属性を使用します.

画像光源:複数の画像を1つの画像に統合して管理する画像

<style> 
  .up, .down, .right, .left { display: inline-block; background: url("icon.png") no-repeat; } 
  
  .up { width: 59px; height: 62px; background-position: 0 0; } 
  .down { width: 56px; height: 62px; background-position: -60px 0; } 
  .right { width: 62px; height: 60px; background-position: -117px 0; } 
  .left { width: 62px; height: 60px; background-position: -178px 0; } 
</style>