HTMLキー要素をクリーンアップ!

7329 ワード

1.コア要素


ブロック要素


<div> </div>


特別な意味のない領域分割に使用される要素(Division)
ある概念を組み合わせるのによく使われます.

<h1> </h1>


タイトルを表す要素(Heading)
文字で構成されていますが、ブロック要素です.
h 1~h 6の間に存在する.
(数字が低ければ低いほど重要です.ページ全体でのページタイトルの重要性を考慮し、適切に使用してください.)

H 1ヘッダ


H 2ヘッダ


H 3ヘッダ


H 4ヘッダ


H 5ヘッダ
H 6ヘッダ

<p> </p>


文を表す要素(Paragraph)
divを使用せずにpタグを使用すると、pタグ内にどのような文があるか理解できます.
  • 文ですが、pタグで区別がはっきりせず、divタグ
  • を使用できます.
  • 文字に及ぶが,文字が集まって文を構成するので行内要素ではなくブロック要素である.
  • <ul> </ul>


    並べ替えが不要なリストを表す集合(Unordered List)
    順序は主観的で,順序は不要であると仮定する
    ul TAGの子供は1人以上のli TAGが必要です

    <li> </li>


    リスト内の各項目(List Item)
    プロジェクト要約リスト.(リスト:List/アイテム:Item)
    Liラベルはulラベルで包まなければなりません.
    <ul>
    	<li>사과</li>
        <li>딸기</li>
        <li>수박</li>
    </ul>

    行内要素


    <img />


    画像を挿入する要素(Image)
    src、altは必須属性です.
    <img src="../images/starbucks_logo.png" alt="STARBUCKS" />

    <a> </a>


    別のページまたは同じページにジャンプするハイパーリンクを指定する要素.
    Anchor:アンカーを表します.これは、船からアンカーを降りて船を固定するように、アンカーマークによって住所を確立することを意味する.
    共通属性target: "_blank"は、新しいラベルページで開くことができる.

    <span> </span>


    特に意味のない区分要素.
    「東海水」という字に特別なスタイルを指定したい場合は、spanラベルで特定の文字部分を囲むことができます.
    <span> 동해물 </span>과 백두산이 마르고 닳도록

    <br/>


    改行要素(Break)
    通常、改行時に使用されるEnterpriseキーはコードに置き換えられません.
    안녕 <br />
    하세요

    <input/>


    ユーザーがデータの要素を入力します.
    Input要素はインラインで、左から右に水平に積み重ねられる特徴がありますが、ブロック要素のように縦横の余白を使用できる特徴もあります.
    ワードエレメントですが、ボックスエレメントの持つ特性はいくつか使えますので、Inline-blockとも呼ばれます.
    Inputウィンドウ
    <input type="text" / >
    type:入力するデータのタイプ
    text:ユーザーが入力したテキスト
    <input type="text" value="HELLO!" / >
    value:ユーザが入力する前に予め入力した値(データ)
    <input type="text" placeholder="이름을 입력하세요." / >
    placeholder:ユーザー入力値(データ)のヒント
    <input type="text" disabled / >
    disabled:無効、属性がグレーで、値を指定せず、ユーザーは使用できません.Inputウィンドウは、入力しないウィンドウにするために画面に表示されます.

    <label> </label>


    ラベル可能要素(input)のタイトル
    checkbox:受信ユーザ入力が選択されているかどうか
  • checked:この要素を追加すると、ユーザーがチェックしていない場合でも、画面上で選択した状態で出力されます.
  • Apple
    Banana
    Cherry
    <label>
       <input type="checkbox" / > Apple
       <input type="checkbox" / > Banana
       <input type="checkbox" checked / > Cherry
    </label>
    radio:属性(name属性)の属性1
    基本的にグループを指定し、同じ名前で組み合わせることができます.
    Apple
    Banana
    Cherry
    <label>
       <input type="radio" name="fruits"/ > Apple
       <input type="radio" name="fruits" / > Banana
       <input type="radio" name="fruits"/ > Cherry
    </label>

    2.グローバル属性


    HTMLでは,属性は開いているラベルに記入し,機能の概念を拡張する.各要素には、imgタグがsrcプロパティを使用するなど、プロパティが指定されており、グローバルプロパティは領域全体で使用できます.

    <ラベルtitle=「説明」></ラベル>


    要素の情報または説明の指定

    <ラベルstyle=スタイル></ラベル>


    要素に適用するスタイルの指定(CSS)

    <ラベルclass=「名前」></ラベル>


    要素の重複可能な名前
  • なぜ要素
  • と命名されたのか
  • CSSには選択要素のセレクタ概念がある.classでは、要素を選択し、必要な要素のみを選択します.
  • <ラベルid=「名前」></ラベル>


    要素の一意の名前
  • クラスほど繰り返し可能ではありません.したがって、頻繁に使用されず、繰り返し不可能なコア部分に使用されます.
  • はCSSにおけるIDの選択者
  • である.

    <タグデータ-名前=データ></タグ>


    要素へのデータの割当て
    <div data-fruit-name="apple">사과</div>
  • dataを入力し、ハイフンを付けた後、必要な名前を明記すればいいです.
  • 属性の値は必要なデータであり、データは基本的に文字データ
  • である.
  • 特定のテキストを入力と、データ
  • になります.
  • 用途:この属性と値を作成する要素に特定のデータを一時的に格納します.格納データをjs(CSSでも利用可能)
  • に使用する.