Summary

Inline & Block Element

グローバル属性

Notes

1. Inline Element

要素レベル積載

横長/縦長サイズが自動的にコンテンツサイズに縮小

幅/高さを指定せず、余白/充填横寸法のみ指定

ブロック要素はサブ要素にできない

1-1. span

行内要素区分

1-2. img

挿入画像の要素(画像)

altは必須属性

1-3. a

指定ページに移動するハイパーリンクの作成

1-4. br

断行

1-5. input

基本的にはインラインですが、ブロック要素の特徴を持つことができます

エレメント水平積み(inline)、横/縦サイズ指定可能(block)

ユーザーにデータを入力する要素

1-6. label

タグ付け可能要素のタイトル

inputtype=「checkbox」と併用

2. Block Element

要素垂直積み

横寸法が親要素の大きさに自動的に増加

縦寸法を自動的にコンテンツサイズに縮小

幅/高さ指定可能、余白/塗りつぶし指定可能

すべての行、ブロック要素をサブ要素として使用可能

2-1. div

ブロック要素区分

2-2. h1~6

タイトルを表す要素(Heading)

2-3. p

文を表す要素(Paragraph)

2-4. ul & ol & li

ul:無秩序リスト

ol:シーケンステーブルあり

li:リストの各項目

2-5. table (Table Element)

table:table要素宣言

tr : Table Row

td : Table Data (Column)

3.グローバル属性

title:要素を指定する情報または説明

style:要素に適用するCSSを指定する

class:要素を表す重複可能な名称

id:エレメントの割り当てに使用される一意の名前

data-名称=「データ」:要素指定データ

4. defer

JSがbodyのコンテンツを参照している場合、scriptタグにdefer属性が与えられます.

defer:HTML文書先分析後解釈JS

Tags

1. <title></title>
2. <link rel="" href="" />
3. <style></style>
4. <script src=""></script>
5. <meta />
<meta charset="UTF-8"/>
<meta name="" content="" />
6. <input />
<input type="text" />
<input type="text" value="미리 입력될 데이터" />
<input type="text" placeholder="입력될 데이터의 힌트" />
<input type="text" disabled />
<input type="checkbox" />
<input type="checkbox" checked />
<input type="radio" name="" />	//name 그룹에서 택1

//Inline
1. <span></span>
2. <img src="" alt="" />
3. <a href="" target="_blank"></a>
4. <br />
5. <label></label>

//Block
1. <div></div>
2. <h1~6></h1~6>
3. <ul></ul>
4. <ol></ol>
5. <li></li>

//Table
1. <table></table>
2. <tr></tr>	//table row
3. <td></td>	//table data(column)