[HTML] HTML - Structure the Web #01

7347 ワード
html テキストリンク

HTML : Getting started with HTML


1.HTMLとは


ハイパーテキストタグ言語(HTML)はプログラミング言語ではなく、ブラウザに私たちが見ているページがどのように構造化されているかを知らせるタグ言語です.
HTMLは要素で構成されており、適切な方法で表示および実行するために、各コンテンツの複数の部分間で囲まれ、寸法付けされます.
「タグ」(Tags)は、Web上の他のページに移動したり、単語を強調表示したりするハイパーリンクコンテンツを作成します.
My cat is very Grumpy
以上の文は下図のように、<p>タグを使用して段落を段落としてマークできます.

<p>My cat is very Grumpy</p>
注意:HTML要素では大文字と小文字は区別されません.すなわち、<title>要素は<title>, <TITLE>, <Title>, <TiTlE>とともに使用することができる.しかし、可読性やその他の理由で、かには小文字を使う.

2.HTML要素(Element)の構造


要素の基本構造


この領域の主な部分は次のとおりです.

  • Openingタグ(Opening tag):この例ではpとして要素の名前と、開いたカッコと閉じたカッコで構成されます.要素は、開始(この例では段落の先頭)から効果を適用します.

  • 終了タグ:エレメント名の前にスラッシュ(/)がない限り、開いているタグと同じです.エレメントの末尾(この例では段落の末尾)にあります.閉じたタグを書かないのはよくある初心者エラーで、奇妙な結果を招きます.

  • ≪コンテンツ|Contents|emdw≫:要素の内容.この場合は純粋なテキストです.

  • 要素(Element):タグを開く、閉じる、内容を総称して要素(Element)と呼びます.

    • ネストされた要素ネストされた要素


    要素には、他の要素を含めることができます.これらの要素はネストされていることを示します.「猫は凶暴だ」という段落を強調するために、ネストされた<strong>要素を使って「猫は凶暴だ」という言葉を強調することができます.
    <p>My cat is <strong>very</strong> grumpy.</p>

    ブロックレベル要素と行内要素


    HTMLには2種類の要素(Element)があります.ブロックレベル要素(Block level element)とインライン要素(Inline element).

  • ブロックレベル要素は、Webページでブロックを作成する要素です.ブロックレベル要素は、前後の要素の間に新しい行(Line)を作成して表示します.これは、ブロックレベルの要素の前と後の要素の間で改行することを意味します.ブロックレベル要素は、通常、ページを表す構造要素に使用されます.たとえば、開発者は、段落、リスト、ナビゲーションメニュー、接尾辞を表すブロックレベルの要素を使用できます.ブロックレベル要素は、「ライン内」(Inline elements)にネストできません.ただし、ブロックレベル要素は他のブロックレベル要素にネストできます.

  • 「インラインエレメント」(Inline elements)は常にブロックレベルエレメントに含まれます.行内の要素は、ドキュメントの一部などの広い範囲に適用できません.文や単語などの小さな部分にのみ適用できます.ロー内の要素は新しいローを作成しません(Line).行内要素を作成すると、作成した段落に表示されます.例えば、行内要素は、ハイパーリンクを定義する要素<a>と、テキストを強調表示する要素<em>と、<strong>とを含む.

    • 3.属性属性属性


    要素には、次の属性があります.
    <p class="editor-note">My cat is very Grumpy</p>
    プロパティは実際に要素に表示されませんが、他のコンテンツを含める場合に使用します.classプロパティは、スタイルに関連するコンテンツまたはその他のコンテンツのターゲットを後で区別できます.
  • エレメント名に続く属性は、エレメント名と属性の間にスペースが必要であり、1つ以上の属性がある場合は、属性の間にスペースが必要です.
  • 属性名の後に等号(=)を付ける.
  • 属性値は、開いた引用符と閉じた引用符で囲まなければなりません.

    • 4.HTML文書の構造

    
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>
  • <!DOCTYPE html>:文書タイプを示す
  • <html></html>:<html>要素.この要素はページ全体の内容を含み、既知のデフォルト要素です.
  • <head></head>:<head>要素.この要素には、キーワード、ホームページの説明、CSSスタイル、文字セット宣言など、HTMLページのすべての内容が含まれています.これらのキーワードは、ホームページユーザーの前には表示されませんが、検索結果に表示されます.詳細については、次の章を参照してください.
  • <meta charset="utf-8">:この要素は、HTMLドキュメントの文字コードをUTF-8に設定することを指定します.例で指定したUTF-8には、世界で使用されている言語の大部分の文字が含まれています.この設定では、ページに含まれるすべてのテキストを処理できます.このオプションを設定すると、文字コードに関連する問題を回避できます.したがって、文字コードを設定しない理由はありません
  • <title></title>:<title>要素.この要素を使用して、ページのタイトルを設定し、ロードページのブラウザタブに表示されるタイトルとして使用します.ページタイトルは、ページがブックマークされたときにページを記述するためにも使用されます.
  • <body></body>:<body>要素は、テキスト、画像、ビデオ、ゲーム、再生可能なトラックなど、ページに表示されるすべてのコンテンツを含む.

    • 5.HTMLコメント


    HTMLには、コードにコメントを作成する仕組みがあります.ブラウザはコメントを無視し、ユーザーにコメントが見えないようにします.注釈の目的は、論理または符号化を説明するために、コードに注釈を含めることです.
    <p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->
    HTMLの基本概念を整理する
    iOS10.0以下のバージョンで「ホワイトスクリーン」が表示されます.