[Worksheet-220418] HTML

11400 ワード
Worksheet html テキストリンク
HTML/CSS/JSで作成したスタバサイト

HTMLの概要


HTMLデフォルト構文


要素

<tag> contents </tag>
要素の内容を開いたり閉じたりするラベルで囲む

親子関係の理解

<tag> //부모 요소
	<tag> //자식 요소
    	contents
    </tag>
</tag>
区切り要素の改行とインデント
  • 親(親)要素
    私を基準に、私の上のすべての要素
  • 子(子孫)要素
    私を基準にして、私がかばっているすべての要素

    • 空のラベル


    終了(クローズ)フラグのないフラグ
  • の作成方法
  • <tag>に便宜を与える
    HTML 1/2/3/4/5
  • <tag />安全、厳格
    XHTML/HTML5

    • 属性と値

    <tag attribute="value"> contents </tag>
    その他の機能は、属性と値で拡張できます.

    ワードボックス


    要素が画面に出力される特性は大きく2つに分けられます.
  • 行の要素
    造字用要素
  • ブロック要素
    ボックス(レイアウト)を作成する要素

    • 行内要素

    <span> Hello </span>
<span> World </span>
  • <span>コンテンツ領域の設定(本質的に何も表示されない)に使用される、代表的な行内要素.
  • とみなされます.
  • 元素水平堆積.
  • 横方向と縦方向の両方に含まれるコンテンツのサイズは、自動的に縮小されます.

  • 余白値は使用できません.

  • 行の要素にブロック要素を使用することはできません.

    • ブロック要素

    <div> Hello </div>
<div> World </div>
  • <div>コンテンツ領域を設定するための典型的なブロック要素(本質的には何も表示されません).
  • 要素が垂直に積み上げられています.
  • 街は、含まれるコンテンツのサイズに応じて自動的に増加します.
  • 歳でコンテンツを含むサイズに自動的に縮小した.

  • マージン値を使用できます.

  • ブロック要素内では、ブロック要素、行内要素を使用できます.

    • HTMLコアのクリーンアップ


    キー要素のクリーンアップ

  • <div>ブロック要素.特に意味のない区分のための要素です.
  • <h1>ブロック要素.テーマを意味する要素です.
    h2~h6.
  • <p>ブロック要素.文を意味・区別する要素です.
  • <img src="" alt="">行の要素.は、画像を挿入する要素です.
  • プロパティ
  • src
    必須属性.画像のパス
  • alt
    必須属性.挿入する画像の代替名
  • <ul>ブロック要素.順序を必要としないリストの集合を表します.
    サブエレメントには、<li>タグが1つ以上含まれる必要があります.
    • <ul>
	<li> 딸기 <li>
    <li> 오렌지 <li>
    <li> 수박 <li>
<ul>
  • <a href="">行の要素.別のページ/同じページに移動するハイパーリンクの要素を指定します.
  • プロパティ
  • href
    必須属性.リンクURL
  • target
    リンクURLの表示(ブラウザタブ)位置
  • <span>行の要素.特に意味のない区分のための要素です.
    文字の範囲を表す.
  • <br>行の要素.これは改行要素です.
  • <input>行の要素とブロックの要素.ユーザーがデータの要素を入力します.
  • プロパティ
  • type
    必須属性.入力するデータ型
    ex)text、checkbox、radio等
  • value
    プリセット値(データ)
  • placeholder
    ユーザ入力値のヒント
  • disabled
    入力要素を無効にします.値段を明記しない.
  • <lable>行の要素.ラベル可能要素(input)のタイトル
    • //radio는 체크 여부를 그룹에서 1개만 입력 받음
<label>
	<input type="radio" name="fruits" /> Apple
</label>
<label>
	<input type="radio" name="fruits" /> Banana
</label>
  • <table>表要素.表要素の行と列の集合.
    線は表現されず、表の構造しかありません.
    • <table>
	<tr> //행 table row
    	<td>A</td><td>B</td> //열 table data
    </tr>
    <tr>
    	<td>C</td><td>D</td>
    </tr>
</table>

    コメント

    <!--이것은 html 주석이다-->
    Ctrl+'/'キーを押して行を自動的に注釈します.

    グローバル属性

  • <tag title="description"></tag>要素の情報または説明を指定します.
  • <tag style="style"></tag>要素に適用するスタイル(CSS)を指定します.
  • <tag class="name"></tag>要素の重複可能な名前.
    同じラベル内でクラスとして指定し、css、js制御に使用します.
    他のファイルにあります.名前として使用できます.
  • <tag id="name"></tag>要素の一意の名前.
    固有なので、コア情報にしか使えません.
    #nameは他のファイルで使用できます.
  • <tag data-name="data"></tag> 要素のデータを指定します.
    主にjsに用いられる.
    • i++,++iオペレータの再ロード
    [機械学習]機械学習教科書Ch 04-(2)