HTML


HTML(Hypertext Markup Language)は、Webページとそのコンテンツを構造化するための寸法言語です.
  • ハイパーテキスト
  • は、単純なテキストではなく、Webページの特定の部分にリンクできるテキストです.
  • 寸法言語
  • タグを使用してドキュメントまたはデータの構造を記述する言語.
    HTMLの原型はイギリスの物理学者ティム・バーナーズ・リーが提案した

    HTML要素の構造


  • 要素(Element):開いているラベル(<>)、閉じているラベル(<>)、およびコンテンツ(Content)を総称して要素
  • と呼ぶ.

    Nesting Elements

    <p>My cat is <strong>very</strong> grumpy.</p>
    strong要素はp要素と重なることはできません.p要素に含めるべきです.

    Block VS Inline Elements


  • ブロックレベル要素(block-level elements)は、Webページ上でブロックを生成し、要素の前後に新しい行を生成します.ブロックレベル要素は、行内要素にネストできませんが、他のブロックレベル要素にネストできます.
    ex)段落(段落)、接尾辞等

  • 行の要素は常にブロックレベルの要素に含まれます.新しい線を作らない
    ex)ハイパーリンク、em、strongなど
  • 属性(Attributes)



    属性は属性名=属性値として表示されます.

    属性のタイプ

  • すべてのタグのグローバル属性と特定のタグでのみ使用可能な属性、
  • および選択的に書き込み可能な属性および特定のタグに必要な必須属性

    HTMLデフォルト構造

    <!DOCTYPE html>
    <html lang="ko">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>HTML</title>
      </head>
      <body>
        <h1>Hello, world</h1>
      </body>
     </html>
  • DTD(doctype):ドキュメントタイプを定義します.文書上部
  • に配置する必要があります.
  • html lang="ko":htmlのlangプロパティは、このドキュメントが韓国語で作成された
  • であることを示します.
  • head:ブラウザの画面に表示されません.
  • ロールドキュメントの基本情報の設定、外部スタイルシートファイルのリンク、jsファイルのリンク
  • meta charset="UTF-8":文字の符号化方法(UTF-8)を指定します.ハングル、日本語、中国語を含むWebページに使用します.
  • metaname="viewport"~device-width":デバイスの横寸法がウェブページの横寸法と等しいことを示す.モバイル環境でデスクトップバージョンを表示するウェブページの縮小を防止し、モバイル環境でもウェブページがうまく出力できるようにする.
  • title:ブラウザタブに表示されるページ名
  • body:実際のブラウザ画面の内容を表示する
  • HTMLタグ

  • h1, h2...h 5:タイトルの略語.見出しに使用します.フォントサイズは1~5で、徐々に小さくなります.
  • span:テキスト付きタグ.ライン連続
  • p : p stands for paragraph. 改行しました.段落の追加には
  • を使用します.
  • a : a stands for anchor. hrefプロパティを使用して、必要なリンクアドレスに移動できます.target=「blank」は、新しいウィンドウで開くことができます.
  • div : div stands for division. パーティション化に使用します.cssスタイルを適用するには、セクションごとにグループ化してclass、idなどを付与します.
  • HTMLプロパティ

  • id:タグに名前を付けます.付与された名前は一意でなければならず、重複して付与することはできません.(クラス名は重複可能)