HTML基本構文

9264 ワード
フロントエンド テキストリンク
[poiemaWebリンク]

✅ 1. HTML5

  • HTMLは表記言語
    • です
  • ウェブページの内容(内容)と構造(構造)
    • を担当する.
  • HTMLタグによる構造化情報
    • .

    ✅ 2. Hello HTML5


  • HTML 5ドキュメントは<!DOCTYPE html>で始まる必要があり、ドキュメントタイプ(document type)をHTML 5として指定します.

  • 実際のHTMLドキュメントは、2行目から<html>と</html>の間で記述されています.
  • <head>と</head>の間には、ドキュメントファイル、外部ファイルの参照、メタデータ設定などがあり、これらの情報はブラウザに表示されません.

  • Webブラウザに出力される要素はすべて<body>と</body>の間にあります.
    • <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>안녕하세요! HTML5</p>
  </body>
</html>

    代表的なHTMLドキュメントエディタ、IDEは以下の通りです.
  • Visual Studio Code
  • WebStorm
  • Atom
  • Brackets
  • Sublime text

    • ✅ 3. HTML 5の基本文法


    🎯 3.1元素

  • HTML要素は、スタートタグとタグの間にあるコンテンツからなる.
    • HTMLドキュメントは要素の集合で構成されています.
    タグは大文字と小文字を区別しないが、W 3 C:World Wide Web ConsortiumはHTML 4に小文字を使用することを推奨しているため、HTML 5は通常小文字を使用する.

    🎯 3.1.1ネスト要素


    要素を重ねることができます.すなわち、要素は他の要素を含んでもよい.この時親子関係が成立する.このような親子関係を用いて情報を構造化する.
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>반갑습니다!</p>
  </body>
</html>

    html要素には、Webページを構成するすべての要素が含まれます.上記の例ではhtml要素、body要素はh 1、p要素を含む.このオーバーラップ関係(親子関係)でWebページの構造を表現します.
    このようなオーバーラップ関係(親子関係)は,インデント(インデント)で直感的に理解しやすい.きれいなコードは読みやすく、読みやすいコードは良いコードです.

    🎯 3.1.2空の要素

  • の内容を備える要素
    • がない.
  • Empty element or Self-Closing element
    • 次の例に示すように、空の要素には内容がなく、属性のみがあります. 
    <meta charset="utf-8">
  • 空の要素の中で、代表的な要素は以下の通りである.
    - br
    - hr
    - img
    - input
    - link
    - meta

    • 🎯 3.2「属性」(Attribute)

  • 要素の性質、定義特徴の詳細
  • 要素のその他の情報(画像ファイルのパス、サイズ等)
  • の開始フラグに、名前とペアを設定する必要があります.(e.g. name="value")
    • <img src="html.jpg" width="104" height="142">
  • srcは、画像ファイルのパスとファイル名
    • である.
  • widthは画像の幅を示す、heightは画像の高さ情報
    • を示す.
  • これらの情報を使用して、ブラウザはimg要素を画面に出力します.

    • 🎯 3.2.1グローバルコメント（HTMLグローバル属性）


  • すべてのHTML要素で使用可能なドキュメント

  • 一部の要素では機能しませんが、ほとんどはすべての要素で使用できます.

  • よく使われるグローバルコメントは以下の通りです.
    • エレメントにAttributeDescription一意識別子(id)を指定します.繰り返し指定はできません.要素にclassスタイルシートで定義されたclassを指定します.繰り返し指定できます.hiddencssのhiddenとは異なり、意味的にブラウザに露出することはありません.langは要素の言語を指定します.検索エンジンがスクロールすると、Webページの言語を認識できます.スタイル要素の行内スタイルを指定します.tabindexユーザーがキーボードを使用してページをナビゲートするときに移動順序を指定します.title要素のタイトルを指定します.

    🎯 3.3コメント（Comments）

  • コメント(comment)は主に開発者にコードを説明するために使用され、ブラウザは画面にコメントを表示しない.
    • <!--주석은 화면에 표시되지 않는다.-->
<p>Lorem ipsum dolor sit amet</p>

    ✅ 4. HTML History


    YearVersion1989.06ティム・バーナス・リーは世界ブロードバンド(WWWW)のためにハイパーテキストシステム、URL、HTTP、HTMLを設計/開発した.1993.06 HTML 1.01995.10 HTML 2.091996 CS 1+JavaScript 1997.01HTML 3.21997.12HTML 4.01998CSS 21998.10DOM Level 11999.12HTML 4.012000.01XHTML 1.02000.11DOM Level 2 Core2001.05 XHTML 1.12007.11 HTML 5設計原則草案2010.01 HTML 5草案(FPWD.First Publication Working Draft)2014.10 HTML 5最終標準案(Rec.Recomplation)
    IO読み書きファイルの簡単な性能比較
    登録/登録実施-(2)SignIn/Up Screens