oday I学習済み-要素と構造

13927 ワード
html TIL テキストリンク

緒論


JavaScriptを勉強しているうちに中級に入りました.
私の頭はますます痛くなって、あなたがよく理解しているかどうか分かりません.
ちゃんと勉強しているかどうか分からないほど難しくなりました.
開発を始めたばかりの段階で.
今はこのレスリングと答えではないと思います.
HTMLとCSSを勉強してJavaScriptに戻ることにしました.
二人ともすぐに覚えられると言っていますが、一日か二日なら
全部読めると思ったら思ったより多かったです😅

Codecademy


HTMLの勉強を始めた頃は退廃に触れていましたが、
コードを学ぶ良いサイトです!!
各概念は,一つ一つ直接コードを打つことによって理解される.
人の話を聞くよりも理解できる.

Today I Leanred


今日のTILは2日間学習したHTMLの基礎概念についての内容です.

Document type declaration


HTMLドキュメントの最初の行に入力する内容です.
この文書が現在の標準HTML(2022標準HTML 5)で作成されていることを示す部分である.
codecademiコースでは、コースの冒頭ではなく、コースの後半で教えてあげます.
初めてHTMLドキュメントを作成したときに間違えました.
HTMLで最も必要な要素なので、一番上に書いてください.
<!DOCTYPE html>

HTMLのデフォルト構造

<!DOCTYPE html>
	<html>
    	<head>
        	<title>This is title</title>
        </head>
        <body>
        </body>
    </html>
  • HTMLの可変要素を除くHTMLの基本構造です.
  • 可変要素、すなわちテキストや写真などの要素がbodyラベルの間に入る.

    • HTMLのデフォルト要素


    headings


    大きいものからh 1からh 6まで.
    <h1>heading1</h1>
<h2>heading2</h2>
<h3>heading3</h3>
<h4>heading4</h4>
<h5>heading5</h5>
<h6>heading6</h6>

    divs

    <div></div>
  • 画面を分割するための要素
  • 要素を組み合わせて、同じスタイルに適用できるようにします.
  • 毒性のために使用しましょう!

    • attributes

  • 属性、すなわち
  • opening tagに追加し、要素に他の情報を追加します.
    <tag name="value"></tag>
    ->nameの対応部分はattribute

    displaying text


    テキストを表示するタグは2種類あります.
    <p>Paragraph</p>
<span>Inline-text</span>
    < p >
  • テキストに段落を表示するためのタグ
    • < span >
    指定範囲
  • または領域を変更することなく、属性
    • をスケーリングする.
  • は何の意味もなく、範囲を指定するための機能です.

    • styling text

    <em>Italic</em>
<strong>Bold</strong>
    < em >
  • タグを使用して、折り返しテキストを斜体にします.
    • < strong >
  • タグで囲まれたテキストを太字にします.(厚め)

    • line breaks


    段落用
    <br>
  • 終了フラグなし、開始フラグのみ使用

    • list


    unordered list

    <ul>
  <li>Play more music 🎸</li>
  <li>Read more books 📚</li>
</ul>
  • 弾点を使用してディレクトリを作成できます.

    • ordered list

    <ol>
  <li>Preheat oven to 325 F 👩‍🍳</li>
  <li>Drop cookie dough 🍪</li>
  <li>Bake for 15 min ⏰</li>
</ol>
    番号リストは、
  • 1,2,3の順序で作成できます.

    • images

    <img src="image.jpg>
  • 終了フラグは必要ありません.
  • 対応画像の属性をsrcに入れます.

    • image alts


    alternative textとは、画像に説明を付加する属性値を指す.
    <img src="#" alt="A field of yellow sunflowers" />
    使用目的
  • ユーザが画像を見ることができない場合、ユーザは、画像上にマウスを置いて画像の内容を見ることによって、画像の内容を推測することができる.
  • を見ることが困難なユーザに対して、コンピュータは画像の内容を読み取ることができる.
  • 検索エンジンは、画像を識別することができる.

    • videos

    <video src="myVideo.mp4" width="320" height="240" controls>
  Video not supported
</video>

    < video ></ video>

  • の画像タグとは異なり、終了タグが必要です.

    • width, height

  • ビデオのサイズを指定します.

    • controls

  • 基本操作ボタンを作成します.

    • Video not supported

  • ビデオで指定されたテキストは、ビデオがロードされていない場合にのみ表示されるテキストです.

    • HTML document standards


    preparing for HTML


    これは、最初に記録されたHTMLの基本構造を含む内容です.
    <!DOCTYPE html>
    これは、
  • ドキュメントの最初の行で、ドキュメントのコードがhtmlで記述されたタグであることを示しています.
  • では、「html」は最新の標準HTML 5を表す.

    • the head

    <head>This is head</head>
  • head要素には、Webページのメタデータがあります.
  • メタデータは、ウェブページに直接表示されない情報である.

    • page titles

    <html>
  <head>
    <title>My Coding Journal</title>
  </head>
</html>
  • ブラウザのタブに表示されるページタイトル
  • は常にheadラベルにある必要があります.
    • *リンク部分が少し混同されているので、個別にご紹介します.
    文字列バッファ
    [BOJ]9996号:韓国が恋しくなったらサーバーに接続(Java)