フロントエンド開発者は毎日HTMLタグの理解を学ばなければならない（1）

2.1 セマンティクス化により、Webページが検索エンジンに理解されやすくなります

この章では、Web ページでよく使用されるタグを 1 つずつ紹介していきます。この章を学習する際は、HTML タグを学習する過程で、タグの目的とブラウザーでのタグのデフォルトスタイルという 2 つの側面に注意する必要があることを覚えておいてください。

セマンティクスとは何でしょうか。簡単に言うと、各タグの目的（どのような状況でこのタグを使用するのが合理的か）を理解することです。例えば、Web ページの記事のタイトルは title タグで記述できますし、Web ページ上のさまざまな列の名前も title タグで記述できます。記事内の段落は段落タグ内に配置する必要があります。記事内に強調したいテキストがある場合は、em タグを使用して強調などを示すことができます。

2.2 bodyタグ、ウェブページの表示コンテンツはここに配置されます

Web ページに表示されるページコンテンツは body タグ内に配置する必要があります。次の図はニュース記事のウェブページです。

這里寫圖片描述

ブラウザ効果は次のとおりです。

這里寫圖片描述

2.3 pタグ、段落の追加

ウェブページに記事を表示する場合は、 <p>タグが必要であり、記事の段落を<p>タグ内に配置します。

構文: <p>段落文本</p>テキストの各段落には 1 つのタグがあることに注意してください。たとえば、ニュース記事に 3 つの段落のテキストがある場合、これらの 3 つの段落はそれぞれ 3 つの<p>タグに配置する必要があります。次の図に示すように:

這里寫圖片描述

ブラウザの表示効果は次のとおりです。

這里寫圖片描述

<p> タグのデフォルトのスタイルは、上の図に示されています。段落の前後に空白スペースがあります。この空白スペースが気に入らない場合は、CSS スタイルを使用して削除または変更できます。段落検証コード:

 XML/HTML コードコンテンツをクリップボードにコピー
<!DOCTYPE HTML >   
 <html>        
 <ヘッド>            
 <メタ  http-equiv = "コンテンツタイプ"  コンテンツ= "text/html; 文字セット = utf-8" >            
 < title > p タグ</ title >        
 </ヘッド>        
 <本文>            
 < h2 >段落の検証</ h2 >            
 < p >私の最初の段落。 </p>            
 < p >私の2番目の段落。 </p>        
 </本文>   
 </html>

2.4 hxタグ、タイトルを追加

タイトルタグは全部で 6 つあり、h1、h2、h3、h4、h5、h6 はそれぞれ第 1 レベルのタイトル、第 2 レベルのタイトル、第 3 レベルのタイトル、第 4 レベルのタイトル、第 5 レベルのタイトル、第 6 レベルのタイトルです。重要度の高い順に並べます。 <h1>が最高レベルです。

構文: <hx>標題文本</hx> (x為1-6)

前述のように、記事のタイトルにはタイトルタグを使用できますが、Web ページ上のさまざまなコラムのタイトルにも使用できます。次の図は Tencent の Web サイトです。

這里寫圖片描述

注: h1 タグは Web ページではより重要なので、通常は Web サイト名に使用されます。これが Tencent の Web サイトが行っていることです。例: <h1>騰訊網</h1> h1-h6 タグのデフォルトのスタイルは次のとおりです。

XML/HTML コードコンテンツをクリップボードにコピー

<本文>
< h1 >第 1 レベルのタイトル</ h1 >
< h2 >サブタイトル</ h2 >
< h3 >レベル 3 の見出し</ h3 >
< h4 >レベル 4 の見出し</ h4 >
< h5 >レベル 5 の見出し</ h5 >
< h6 >レベル 6 の見出し</ h6 >
</本文>

ブラウザでの表示スタイル:

這里寫圖片描述

上の図から、タイトルタグのスタイルはすべて太字で、h1 タグのフォントサイズが最も大きく、h2 タグのフォントサイズは h1 よりも小さく、h6 タグのフォントサイズが最も小さいことがわかります。

2.5 strong/emは強調を追加します

段落とタイトルができたので、段落内の特定の単語を強調したい場合は、 <em>或<strong>タグを使用できます。

強調の調子において、この 2 つには違いがあります。 <em>強調を示し、 <strong>はより強い強調を示します。また、ブラウザでは、 <em>はデフォルトで斜体になり、 <strong>はデフォルトで太字になります。これら 2 つのタグと比較して、国内のフロントエンドプログラマーは現在、強調を表現するために<strong>を使用することを好みます。

文法：

XML/HTML コードコンテンツをクリップボードにコピー

<em>強調するテキスト</em>
< strong >強調するテキスト</ strong >

em タグと strong タグの例:

這里寫圖片描述

ブラウザでは次のように表示されます:

這里寫圖片描述

閲覧中、 <em>の内容は斜体で表示され、 <strong>太字で表示されます。このスタイルが気に入らない場合は、後で CSS スタイルを使用して変更できます。

2.6 style/spanタグ、テキストに別のスタイルを設定する

3 つのタグ<em>、<strong>、<span>をまとめてみましょう。

<em>タグと<strong>タグは、段落内のキーワードを強調するために使用されます。その意味は強調です。

<span>タグにはセマンティクスがなく、個別のスタイルを設定するために使用されます。

ここで、前のセクションの最初の段落にある 3 つの単語「American Dream」を青色に設定したいとします。ただし、これは「American Dream」を強調するためではなく、他のテキストとは異なるスタイルを設定するためだけであることに注意してください (また、スクリーンリーダーに 3 つの単語「American Dream」を強調させたくはありません)。そのため、この場合は<span>タグを使用できます。

文法：

 <span>文本</span>

例：

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE HTML >
<html>
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = utf-8" >
<タイトル>グレート・ギャツビー</タイトル>
<スタイル>
スパン{
色:青;
}
</スタイル>
</ヘッド>
<本文>
< p > < span >アメリカンドリーム</ span > 。 </p>
< p > < strong >フィッツジェラルド</ strong > </ p >
< p > < em >アリス</ em > </ p >
</本文>
</html>

ブラウザでは次のように表示されます:

這里寫圖片描述

span タグを使用したものは青色になり、strong タグを使用したものは太字になり、em タグを使用したものは斜体になります。

2.7 q タグ、短いテキスト引用

HTML に引用文を追加したいですか?たとえば、Web ページの記事で特定の作家の詩を引用して、その記事をより目立たせたい場合、タグが必要になります。文法：

 <q>引用文本</q>

引用符で囲んだテキストを二重引用符で囲む必要はありません。ブラウザは q タグの周囲に自動的に二重引用符を追加します。

ここでタグを使用する本当の重要なポイントは、デフォルトの二重引用符のスタイルではなく (そうであれば、キーボードで二重引用符を入力するほうがよいでしょう)、その意味、つまり他人の言葉を引用することであることに注意してください。

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE HTML >
<html>
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = utf-8" >
< title > q タグ</ title >
</ヘッド>
<本文>
< p >周瑜はまさに、 < q >「並外れた知性を持つ男は英雄であり、並外れた勇気を持つ男は英雄である」という言葉に値する人物である。 </ q > </ p >
</本文>
</html>

コード内に引用符はありませんが、 <q>タグなので引用符が自動的に追加されます。

2.8 blockquote タグ、長いテキストの引用

<blockquote>の機能は、他の人のテキストを引用することです。しかし、記事の中で有名な作家による長い文章を紹介するなど、長いテキストへの参照である場合は、このタグが必要になります。

<q>タグは短いテキストを引用するために使用されます。たとえば、 <q>タグは文を引用するために使用されます。

構文: <blockquote>引用文本</blockquote>

ブラウザは<blockquote>タグをインデントされたスタイルとして解釈します。

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE HTML >
<html>
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = utf-8" >
< title > blockquote タグの使用</ title >
</ヘッド>
<本文>
< h2 >私の心はキンモクセイの花のようです</ h2 >
< p >誰もが、自分が最も重要だと思うことに忙しく、人生の楽しみを味わうことができず、代わりに苦い果実を飲み込まなければならないのでしょうか? </p>
< blockquote >色は薄黄色で、体は柔らかく、気持ちは遠く、香りだけが残ります。 </引用>
< blockquote >薄緑色や濃い赤色がなぜ必要なのでしょうか? 花の中ではそれが最高です。 </引用>
< p >これは李清昭の『金木犀頌』の一節です。李清昭の考えでは、金木犀は色がくすんだ緑と黄色で、気質は穏やかで、無関心で自己満足しており、鮮やかな赤と紫の花よりもはるかに賞賛に値する花です。 </p>
</本文>
</html>

ブラウザでの表示効果は以下の通りで、 <blockquote>タグで囲まれた部分が前後にインデントされていることがわかります。

這里寫圖片描述

2.9 brタグはテキストを別々の行に表示します

詩の各行の後に改行を追加するにはどうすればよいでしょうか?次に、 <br />タグを使用します。 <br />，<br />タグは、Word 文書のキャリッジリターンに相当します。

文法：
xhtml1.0 記述方法: <br />
HTML4.01 記述方法: <br>

これまで学習したタグとは異なり、 <br />タグは空タグです。HTML コンテンツのないタグは空タグです。空タグには開始タグのみを記述する必要があります。このようなタグには<br />、<hr />和<img />があります。

概要: HTML コードに改行やスペースを入力しても効果はありません。 HTML テキストに復帰改行を入力する場合は、 <br />と入力する必要があります。

 XML/HTML コードコンテンツをクリップボードにコピー
<!DOCTYPE HTML >   
 <html>        
 <ヘッド>            
 <メタ  http-equiv = "コンテンツタイプ"  コンテンツ= "text/html; 文字セット = utf-8" >            
 < title > br タグの使用</ title >        
 </ヘッド>        
 <本文>            
 < h2 >キンモクセイへの頌歌</ h2 >            
 < p >                
濃い淡黄色ソフト、 < br >                
愛は遠く離れているが、香りは残っている。 <br>                
なぜ薄緑や濃い赤なのか、                
それは花の中で最高です。
 </p>        
 </本文>   
 </html>

ブラウザ効果:

2.10 ウェブページにスペースを追加する

HTML コードにスペースや改行を入力しても効果がないということが説明されています。スペースを入力するには、

構文:  

次のように 2 つのスペースを挿入します。

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE HTML >
<html>
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = utf-8" >
< title >スペースの説明</ title >
</ヘッド>
<本文>
< h1 >夢を実現する</ h1 >
出典: Composition Network 著者: Fly for the Dream
</本文>
</html>

2.11 時間ラベル、水平線を追加

情報を表示するときに、区切りとして水平線を追加して、記事をすっきりと見せる必要がある場合があります。例えば、次のウェブページ

文法：

html4.01 バージョン<hr>
xhtml1.0 バージョン<hr />

< hr />タグも<br />タグと同様に空のタグなので、開始タグは 1 つだけで、終了タグはありません。

ブラウザの<hr />タグのデフォルトのスタイルは太くて灰色です。このスタイルが見苦しいと感じる人もいるかもしれませんが、問題ありません。これらの外部スタイルは、CSS スタイルシートを学習した後に変更できます。

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE HTML >
<html>
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = utf-8" >
< title > hr タグの使用法</ title >
</ヘッド>
<本文>
< p >列車は暗い夜の村を駆け抜ける。月明かりはいつも人々に孤独と憧れを感じさせる。 </p>
<時間>
< p >風に吹かれて舞うタンポポの花には、愛情深い別れの視線と、ためらいがちな視線が込められている。 </p>
</本文>
</html>

ブラウザでの効果:

這里寫圖片描述

2.12 アドレスタグ、ウェブページにアドレス情報を追加する

通常、Web ページには、Web ページに表示する必要がある Web サイトの連絡先アドレス情報がいくつかあります。会社の住所などのこの連絡先アドレス情報には、ラベルを付けることができます。アドレス (電子メールアドレスなど)、署名、またはドキュメントの作成者を定義することもできます。

文法：

 <address>聯系地址信息</address>

 <address> 本文的作者：<a href="mailto:[email protected]">lilian</a> </address>

ブラウザに表示されるスタイルは斜体です。斜体が気に入らない場合は、もちろん、次のコースの CSS スタイルを使用して、 <address>タグのデフォルトのスタイルを変更できます。

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE HTML >
<html>
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = utf-8" >
< title >アドレスタグの紹介</ title >
</ヘッド>
<本文>
< h2 > MOOC.com </ h2 >
< p >インターネットと IT テクノロジーの超クールな無料学習プラットフォーム! 会社住所: < address >北京市西城区徳外街 10 号</ address > </ p >
</本文>
</html>

2.13 コードタグ、コード行を追加

言語技術を紹介するウェブサイトでは、ウェブページにコンピュータの専門的なプログラミングコードを表示する必要があります。コードが 1 行の場合、 <code>タグを使用できます。注: 記事に複数行のコードを挿入する場合は、 <code>タグは使用できません。次の例のように:

 <code>var i=i+300;</code>

注: コードが複数行の場合は、 <pre>タグを使用できます。

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE HTML >
<html>
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = utf-8" >
< title >コードタグの紹介</ title >
</ヘッド>
<本文>
< p >水平グラデーションの実装は、次のようなものになります。 < code > {background-image:linear-gradient(left, red 100px, yellow 200px);} </ code > </ p >
</本文>
</html>

ブラウザ効果:

這里寫圖片描述

2.14 preタグ、大きなコードを追加

前のセクションでは、コード行を追加するためのタグは<code>であると紹介しましたが、ほとんどの場合、下の図に示すように、大きなセクションのコードを追加する必要があります。どうすればよいでしょうか。各コードに<code>タグを追加する必要はありません。それほど複雑ではありません。この時点では<pre>タグを使用できます。

這里寫圖片描述

<pre>タグの主な機能は、フォーマット済みのテキストです。 pre 要素で囲まれたテキストでは、通常、スペースと改行が保持されます。注: <pre>タグは、コンピュータのソースコードを表示するためだけでなく、Web ページでフォーマットを事前に表示する必要がある場合にも使用できます。ただし、 <pre>タグの一般的な用途は、コンピュータのソースコードを表示することです。

 XML/HTML コードコンテンツをクリップボードにコピー
<!DOCTYPE HTML >   
 <html>        
 <ヘッド>            
 <メタ  http-equiv = "コンテンツタイプ"  コンテンツ= "text/html; 文字セット = utf-8"   />            
 < title > pre タグの使用</ title >        
 </ヘッド>        
 <本文>            
 < pre > var message = "ようこそ" ;for(var i = 1 ;i < =10;i++){ alert(message);}
 </前へ>        
 </本文>   
 < /html >