HTML 2.きほんげんそ


.HTMLドキュメントを合成する際の注意点


デフォルトのフォーマット

  • 大文字と小文字を区別しないが、できるだけ小文字に統一する
  • 開始ラベルおよび終了ラベル
  • <h1></h1>
  • インデントは必須
  • 不要不要なスペース
  • テキスト形式

  • <em>:強調が必要
  • <strong>:重要テキスト
  • <mark>:ハイライトテキスト
  • すべてのテキストスタイルはCSS
  • を使用する必要があります.
  • Boldテキスト:CSSのfont-weightプロパティ
  • を使用

    を選択します。


    基本

  • <br>:強制改行
  • <p>:段落
  • 段落前後空行
  • <pre>:あまり使いにくい
  • プログラマが入力したように画面に表示
  • previously formatted text
  • <h1>:h 1~h 6,タイトル(heading)
  • <!-- -->:注釈
  • を選択します。


    インベントリ

  • プロジェクトのリストに使用
  • li,di,ddリスト項目表示
  • リスト項目には、テキスト、画像、リンク、その他のリストも含まれていてもよい.
  • ul > li

  • 順序なし
  • ulラベルのtypeプロパティ:プロジェクト全体のtypeを設定します.
  • disc : ●
  • circle : ○
  • square : ■
  • <ul>
    	<li>항목1</li>
    	<li type = "circle">항목2</li>
    	<li type = "disc">항목2</li>
    	<li type = "square">항목2</li>
    </ul>

    ol > li

  • 順序付きリストのフォーマットを作成します.
  • olタグのtypeプロパティ:プロジェクト全体のtypeを設定します.
  • 1:数値(1、2、3…デフォルト)
  • A:アルファベット大文字
  • a:アルファベット小文字
  • i:ローマ数字IIIIII...
  • I:ローマ数字IIIIIII...
  • start:olラベルで、任意に開始値を設定します.
  • value:liタグに使用され、プロジェクトから順序値を変更します.
  • <ol type="i" start="11">
    	<li>항목1</li>
    	<li type="a">항목2</li>
    </ol>

    di

  • 表示項目定義(説明)のリスト
  • dt:definition termの略で、用語タイトルのタグを表す.改行機能があります.
  • dd:definition descriptionの略で、用語の説明に対するタグを表す.改行機能があります.

  • を選択します。


    a

    <a href="목적지 주소"target="_blank">구글방문</a>

    .href属性

  • リンク先
  • .targetプロパティ

  • リンクをクリックすると、新しいページがどこで開くかを指定します
  • blank:新ウィンドウ新ページ
  • self:現在のウィンドウの新しいページ
  • parent:親フレーム新ページ
  • top:現在のウィンドウに新しいページをロードし、すべてのフレームをキャンセル
  • <hr>:水平ページ
  • .id属性

  • html要素の一意idは、スペース
  • を含んではならない.

    ▲画像


    表示方法

  • <img>:Webページに画像を挿入する
  • src:指定画像ファイル名
  • width:横
  • height:垂直
  • alt:ブラウザが何らかの理由で画面に画像を表示できない場合は、置換テキスト
  • が表示されます.

    種類


    JPEG(JPG)

  • リアルフォトは、複雑な多色画像
  • に最適です.
  • 1600万色
  • 損失圧縮、少量のデータは永久に消える
  • PNG

  • クリップ絵、少量色
  • 無損圧縮、透明背景
  • GIF

  • バッジクリップの絵の形にぴったりの画像
  • 256色
  • 透明な背景とアニメーションをサポート
  • ▲表の作成


    表の基本情報


    tr: table row


    th: table header


    td: table data

  • <table> </table>
  • <tr> </tr>:table row,単行表示
  • <td> </td>:table data,単一データ表示
  • <th> </th>:table header,各列のタイトル(タイトル)
  • <tr>로 행을 만들고 그 안에 <td></td>를 사용
  • 表の結合


    連結行(行span)

  • rowspan=2、現在のセル位置で2行連結
  • 熱病合併(列span)

  • colspan=3、現在のセル位置で3列
  • をマージ

    .iframe

  • Inline Frame略
  • Webページ内に他のWebページを表示する場合
  • リンクとして使用可能なターゲットフレーム
  • リンクのターゲット属性はiframで指定した名前
  • を参照します.

    .div & span


    div

  • divideの略
  • ページを論理部分に分割するためのラベル
  • 自体は特に意味がなく、ブロックレベルの要素である.
    html要素をすべてバンドルする
  • ブロックレベルの要素は1行のみ
  • 主にウェブページレイアウトに使用
  • div幅と幅は指定できますが、spanは
  • できません.
  • div必然会改行
  • span

  • それ自体に特別な意味はありません.テキストは行内レベル要素として使用されます.
    スタイルの組合せに使用
  • インライン・レベルの要素は、必要なサイズ
  • のみを使用します.
  • 行内要素を指定できません(widthとheightを適用しません)
  • span改行せずに文の真ん中に入る
  • tableタグはdivタグとspanタグを使用してより簡潔なhtmlを整理することができる


  • リファレンス

  • 以下の項目を多く書け!!
  • placeholder
  • disabled
  • readonly
  • maxlength(電話、郵便番号)
  • .Block & Inline


    Block-level

  • 使用可能な最大幅
  • 指定可能寸法(幅、高さ)
  • marging,padding属性上下左右マージンはいずれも使用可能
  • レイアウト用
  • div,ul,ol,dl,dt,h 1~h 6,li,p,table等
  • Inline-level

  • 必要な幅のみ使用
  • サイズ指定不可
  • marging,padding属性の左右マージンのみ
  • テキスト処理用
  • a,br,b,code,strong,img,span等