HTMLインフラストラクチャのクリーンアップ

11254 ワード
html テキストリンク
1.HTMLベース
Q)どんな顔をしていますか.🤔

  • ページを構成する各要素をマーキング法「マーキング」で記入します.

  • ラベルで何の要素(タイトル、本文、画像、ビデオなど)かを表示します.

  • ラベルの名前はHTML 5のWeb規格に従って書きます.
    • タグを開く:<要素名>
    終了タグ:
    内容:要素の内容
    要素(Element):タグを開く、閉じる、内容を総称して要素(Element)と呼びます.
    -->オン/オフのタグはユーザーには表示されません.==これは開発者が明示するために使用したものです.
    [ユーザはコンテンツのみ表示]
    Example
    <h1>This is Title!</h1>
<h2>fix you</h2>
<p>
	Lights will guide you home, And ignite your bones, And I will try to fix you.
</p>

  • html改行を無視します.(3~5 Line)

  • 各ラベル間のテキストが内容です.
  • <title> , <Title> , <tItle> , ... --> 平等に見る.
    タグ要素名では大文字と小文字は区別されませんが、HTML 5ではすべて小文字を使用することをお勧めします.
    これは、一貫したhtmlドキュメントと可読性を記述するために逆強制された内容です.
    • 空の要素

  • もし内容がなかったら?( 이미지 , 수평선 , 줄바꿈 , ...)

  • コンテンツのない要素を空の要素(Empty element)と呼びます.
    -->閉じたラベルには、さらに明記する必要はありません.

  • Empty element, Self-Closing element, Void element, Single tag, ...

  • 空の要素として使用できるタグと使用できないタグは固定されています.
    --><p></p>、中身だけを空にするというわけではありません!

  • <空の要素名>&<空の要素名/>:同義(オプション)
    But、一致して使用します.
    • Example
    <br>
<hr>
<img src="http://url">
<meta charset="UTF-8">
<input type="text" name="name">
    要素のネスト

  • 要素内に他の要素を含む含む関係を確立できます.

  • 複数の要素が重複している場合:開く順序とは反対に、タグを閉じる必要があります.

  • インデントを使用して関係を区別-->毒性も一緒に上昇します.
    • Example
    <html>
	<head>
    	<title>요소의 중첩</title>
    </head>
    <body>
    	<h1>요소 안에 <strong>다른 요소가</strong> 들어갈 수도 있습니다!</h1>
        <ul>
        	<li>하나</li>
            <li>둘</li>
            <li>셋</li>
        </ul>
    </body>
</html>
  • のコンテンツの構成要素は、次のとおりです.
    1.テキスト
    2.その他の要因
    いいですよ.
    • コメント(Comments)
  • ブラウザはコメントを無視し、ユーザーにコメントが見えないようにします.
    • <議長の目的>
  • コードに注釈
    • を追加
  • 未使用コード
    • を一時的に処理する.
    Example
    <p>I'm not inside a comment</p>
<!-- <p>I am!</p> -->
    2.HTML文書の構造
    きほんほねぐみ
    <!DOCTYPE html>
<html>
	<head>
    	<!-- HEAD 영역 -->
    </head>
    <body>
    	<!-- BODY 영역 -->
    </body>
</html>
  • <!DOCTYPE html>:ドキュメントのタイプを示します.
  • html:ページ全体を含むルート(ルート)要素(トップレベル要素)
  • head:ブラウザ画面に直接表示されないWebページ情報
    --meta:文書の一般情報と文字コードを指定する
    --title:Chrome標準トップ「ラベル」見出し
  • body:Webブラウザ画面のすべてのコンテンツ(コンテンツ)
    • <head>マークのMDN Infoについて.
    🦊 https://developer.mozilla.org/ko/docs/Web/HTML/Element/head <body>マークのMDN Infoについて.
    🦊 https://developer.mozilla.org/ko/docs/Web/HTML/Element/body
    -->bodyは、属性を指定するのではなく、単独で使用されます.
    区切りタグのプロパティ(body)
    1.区切りラベル:Layoutの目的

  • 単独で使うと見えません.

  • いろいろな要素を組み合わせる.
    -->Itemの読み込みに使用します.==道具がないと見えなくなる.
    • 2.それ自体が要素のラベル
  • 単独で使用する場合も目で確認できます.
    • ブロック(Block)&ライン内(Inline)
    1.ブロック(Block)
    箱を下に積み上げなさい.

  • ブロックレベル要素は常に新しい行から始まります.

  • 左右にできるだけ長くして、可能な幅をすべて占めます.
    • 2.行内

  • 行内の要素は、行の任意の場所から開始できます.

  • ちょうど前の要素が終わったところから始まります.
    -->要素の内容の一部のみを占めます.

  • 他の行の要素と重ねて使用できます.
    • 3.ライン内ブロックBlockとInlineの特性の混種です.(?)

  • 基本的には、インライン要素のように前後を改行せず、1行に他の要素と並べて配置します.

  • But,inlineでは指定できないwidthおよびheight属性、およびmarginおよびpadding属性の上下間隔.
    • 📦 ルールを含める
  • などの他の要素を含めることができる.
    (ブロック>ブロック、行内>行内)
  • のほとんどのブロック要素は、他の行の要素に含まれてもよい.
    (ブロック>行内)
  • !! 行の要素にブロック要素を含めることはできません!!
    • コンテンツカテゴリ

  • HTML 5から、似たような特徴を持つ要素を組み合わせて、7種類のカテゴリに細分化します.

  • 1つのHTML要素が複数のコンテンツカテゴリに含まれる関係に入る可能性があります.
  • メタデータの内容:文書中のメタデータ(情報)、他の文書へのリンク等を示す要素
    • .
  • ストリームコンテンツ:ほとんどの要素(Webページのメタデータを除く)-通常、テキストまたは埋め込みコンテンツが含まれます.
  • 節内容:Webドキュメントを分割するためのパーティション
  • タイトル内容:章タイトルに関連する要素
  • 印刷内容:段落にテキストを表示するための
  • 埋め込みコンテンツ:画像やビデオなどの外部ソースをインポートまたは挿入するための要素
    • .
  • 対話型コンテンツ:ユーザと対話するためのコンテンツ要素
    • JavaScriptのメモリ機能を作成する
    プレイフレームワークにおける例外とエラーの処理