HTML要約

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

What’s HTML?


HyperTextタグ言語の略、タグ言語.
すなわち,ウェブコンテンツ(コンテンツ)と構造(構造)を担当する言語で
構造化された情報をHTMLでタグ付けします.

HTML基本構文


  • 要素
    開始タグと終了タグの間でコンテンツを構成する


  • ネスト要素
    要素には、他の要素を含めることができます.親子関係による情報の構築
    インデント(インデント)によるオーバーラップ関係の直感的な理解

  • 空の要素
    はcontentを持つことができない要素を指します.属性のみ
    br/hr/img/input/link/meta/src
    • <meta charset="utf-8">

  • 属性(Attribute)
    要素の性質、特徴を定義します.詳細を入力します.
    開始タグに位置し、名前と値のペアを形成します.


  • Global Attribute
    Id/class/hidden/lang/style/tabindex/title

    • Semantic


    検索エンジンはプログラムを通じて世界のウェブサイト情報크롤링を収集する.
    ユーザが検索する必要があるキーワードを予め推定し、インデックス인덱싱を作成する.시맨틱 태그はすべての人に明確な意味を持っている.
    これにより、コードの可読性が向上し、メンテナンスが容易になります.
  • non-semanticdiv, span等については説明しない.
  • semantic
    内容の意味を明確に説明する.
    —header/nav/aside/section/article/footer—

    • html tag


    htmlタグはWebページに1つしか存在しません.
    すなわち、すべての要素はhtml要素のサブ要素であり、html要素の内部で記述される.
    でも例外.
    htmlはグローバルクエリーをサポートします.特にlangを使用する場合が多い.
    <!DOCTYPE HTML>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>문서 제목</title>
  </head>
  <body>
    화면에 표시할 모든 콘텐츠는 이곳에 기술한다.
  </body>
</html>

    head tag


    head要素メタデータを含む要素
    HTMLドキュメントのtitle, style, link, scriptのデータは画面に表示されません.
    head要素には、画面に表示されるすべての要素を含めることはできません.
    title tag
    ドキュメントのタイトルを定義します.定義したタイトルがブラウザのタブに表示されます.
    <head>
    <meta charset="utf-8">
    <title>문서 제목</title>
</head>
    style tag
    HTMLドキュメントのスタイル情報を定義します.
    埋め込みスタイルはHTMLにCSSを埋め込みます.
    HTMLとCSSには異なる役割があるので、それぞれ作成して管理することが望ましい.
    <style>
      body {
        background-color: yellow;
        color: blue;
      }
</style>
    link tag
    外部リソースとの関連情報を定義します.主に外部CSSファイルを使用します.
    <head>
    <link rel="stylesheet" href="css/style.css">
</head>
    script tag
    あるいはJavaScriptを直接作成します.
    src言語ツリービューを使用して、外部JavaScriptファイルをロードします.
    <script src="main.js">
      document.addEventListener('click', function () {
        alert('Clicked!');
      });
</script>
    meta tag
    メタデータを定義します.メタデータはブラウザ、検索エンジン(キーワード)などで使用されます.
    <head>
  charset 어트리뷰트는 브라우저가 사용 할 문자셋을 정의
  <meta charset="utf-8">
    
  EO(검색엔진 최적화)를 위해 검색엔진이 사용할 keywords을 정의
  <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

  웹페이지의 설명을 정의
  <meta name="description" content="Web tutorials on HTML and CSS">

  웹페이지의 저자을 명기
  <meta name="author" content="John Doe">

  웹페이지를 30초 마다 Refresh한다.
  <meta http-equiv="refresh" content="30">
</head>

    body tag


    HTMLドキュメントの内容を表し、Webページを構成する要素の大部分を本文で説明します.

    テキストラベル


    pセグメント
    br改行.(空の要素は終了マークなし)
    pre preformatted text. 作成したブラウザに表示されます.
    hr水平線を挿入します.(空の要素)
    q短い引用符(引用符)ブラウザはq要素を引用符で囲む.
    blockquote長引用文.ブラウザはblockquote要素をインデントします.
    aは、あるテキストから別のテキストにジャンプする하이퍼링크(hyper link)の役割を果たす.

    hrefコメント


    移動するファイルの場所(パス)を値として受け入れます.
    ディレクトリ/フォルダ./現在のフォルダ../親フォルダ(親フォルダ)
    ファイルのパス절대경로(Absolute path)現在の作業ディレクトリに関係のない特定のファイルの絶対位置を指します.
    ルートディレクトリに対するファイルの位置を示します.
    /Users/leeungmo/Desktop/myImage.jpg상대경로(Relative path)現在の作業ディレクトリに対する特定のファイルの相対的な位置を指します.
    ./index.html
    ../dist/index.js

    目標レポート


    リンクをクリックしたときにウィンドウを開く方法を指定します._selfリンクをクリックすると、現在のウィンドウでリンクドキュメントが開きます(デフォルト)_blankリンクをクリックすると、新しいウィンドウまたはタブで接続ドキュメントが開きます.
     <body>
    <a href="http://www.google.com" target="_blank">Visit google.com!</a>
 </body>

    list tag


    ナビゲーションメニューを作成するときによく使う
    ul無秩序リスト
    ol秩序リストtype 어트리뷰트で指定できる順序文字
    <ol type="I">
  <li value="2">Coffee</li>
  <li value="4">Tea</li>
  <li>Milk</li>
</ol>
  • "1"数字(デフォルト)
  • 「A」大文字
  • 「a」小文字
  • 「I」大文字ローマ数字
  • 「i」小文字ローマ数字
    • start 어트리뷰트を使用して、リストの開始値を指定できます.
    <ol start="3">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
    reversed 어트리뷰트を指定して、リストの順序値を逆方向に表示します.
    <ol reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
    ネストされたリスト
     <ul>
      <li>Coffee</li>
      <li>Tea
        <ol>
          <li>Black tea</li>
          <li>Green tea</li>
        </ol>
      </li>
      <li>Milk</li>
 </ul>

    img tag


    Webページに画像を挿入するにはsrcイメージファイルパスalt画像ファイルがない場合に表示される文
    <img src="assets/images/dog.jpg" alt="dog" width="100">
<img src="assets/images/wrongname.gif" alt="이미지가 없습니다.">

    audio tag

    src音楽ファイルパスpreload再生前にすべての音楽ファイルをロードするかどうかを指定します.autoplay自動再生を開始するかどうかを指定します.loopを繰り返すかどうかを指定します.controls音楽再生ツールを表示するかどうかを指定します.外観はブラウザによって異なります.
    各Webブラウザは、異なる音楽ファイルフォーマットをサポートします.
    source tagを使用して、ファイルフォーマットの違いの問題を解決できます.
    (Type Ar Treviewは省略可能)
    <audio controls>
      <source src="assets/audio/Kalimba.mp3" type="audio/mpeg">
      <source src="assets/audio/Kalimba.ogg" type="audio/ogg">
</audio>

    video tag

    srcビデオファイルパスposterムービーの準備中に表示される画像ファイルのパスpreload再生前にすべてのビデオファイルを読み込むかどうかを指定します.autoplay自動再生を開始するかどうかを指定します.loopを繰り返すかどうかを指定します.controlsビデオ再生ツールを表示するかどうかを指定します.
    幅指定width指定height高さ
    ビデオもsource tagを使用してファイルフォーマットを区別します
    <video width="640" height="360" controls>
      <source src="assets/video/wildlife.mp4" type="video/mp4">
      <source src="assets/video/wildlife.webm" type="video/webm">
</video>

    form tag


    ユーザーが入力したデータを収集するために使用されます.入力フォームラベルを含めることができます.action"URL"入力データを送信するURLを指定しますmethod「get/post」入力データの転送方法を指定
     <form action="http://jsonplaceholder.typicode.com/users" method="get">
      ID: <input type="text" name="id"><br>
      username: <input type="text" name="username"><br>
      <input type="submit" value="Submit">
 </form>
    Submitボタンをクリックすると
    メソッドツリービューで指定した方法でinputラベルに入力されたデータ
    Actiontreviewで指定したサーバ側の処理ロジックに渡されます.

    input tag


    フォームタグの中で最も重要なタグで、ユーザーが入力したデータを受信します.
    type are treviewで区切られています.
    サーバに送信されるデータ
    nameビューをキーとし、valueビューを値とします.key=valueに送信
    <h3>checkbox</h3>
    <input type="checkbox" name="fruit1" value="apple" checked> 사과<br>
    <input type="checkbox" name="fruit2" value="grape"> 포도<br>
    <input type="checkbox" name="fruit3" value="peach"> 복숭아<br>

    select / option / optgroup tag


    複数のリストから複数のアイテムを選択できます.
    サーバに送信されるデータ
    キーはselect要素のname arツリーです.
    option要素のvaluerツリーを値としてkey=valueで送信
    <select name="cars3">
      <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
      </optgroup>
      <optgroup label="German Cars" disabled>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </optgroup>
</select>

    textarea tag


    複数行のテキストを入力
    <textarea name="message" rows="10" cols="30">Write something here</textarea>

    button tag


    クリック可能なボタンを作成します.
    input type=buttonに似ていますが、inputラベルが空のラベルである点は異なります.
    したがって、テキストや画像などのコンテンツを使用することができます.
    type are treview button, reset, submitを指定する必要があります
    <body>
    <button type="button" onclick="alert('Hello World!')">Click Me!</button>

    <input type="button" value="Click Me!" onclick="alert('Hello world!')">
</body>

    fieldset / legend tag


    関連する入力フォーマット그룹화を使用します.
    legendラベルはfieldsetラベル内で使用され、パケットfieldsetの제목を定義する必要があります.
    <fieldset>
        <legend>Login</legend>
        Username <input type="text" name="username">
        Password <input type="text" name="password">
</fieldset>

    スペース分割マーカー


    空間分割ラベルにはdiv,span,tableなどがあり,Modern Web上では主にdivを用いてレイアウトを編成している.
    しかしdivは意味的な意味を持たないため,シンボルタグの使用を推奨する.
    空間分割マーカーは、通常、他の要素を含むコンテナコンテナコンテナです.
    divとspanの違いは、ブロックレベルとインラインレベルの要素を理解する必要があります.
    AddressSanitizer leetcodeエラーレポートまとめ
    可変パラメータ:va_start,va_arg,va_end