[KDT]FCFE-1週3日-1.HTML

50084 ワード
html テキストリンク

Part 02 Webサイトスケルトンの作成


01.HTML表記言語Yes


Programing Language-マシンの動作を示す言語
Markup Language-フォーマットとプロセスに基づいてカスタマイズされた言語
What Youse What You Get(WYSWYG)方式
  • GUIを使用した
    • の開発

    02.HTML構造1


    タブ
    <HTML></HTML>
    こうぞう
    <!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>

    03.HTML構造2


    タグに属性と属性値を入れることができます.
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
    metaラベルプロパティ!
    Unicodeテーブルを使用して世界の複数の文字をマーク
    charset = "UTF-8"
    反応式Webと適応Web
    アプライアンスのサイズに応じて変更するように設定
    name = "viewport"content = "width=device-width"
    最初の画面の倍率を設定します.
    ユーザーが画面を拡大できないように設定
    initial-scale=1.0,
    user-scalable=no
    Internet Explorerの設定
    http-equiv="X-UA-Compatible"content="IE=edge"

    04.HTMLデフォルトラベル1


    コメントサイト


    html
    w3schools
    tag
    mbn

    h1 ~ h6




    1)h 1ページに1つしかありません!
    2)順序をスキップしない!
    3)視覚効果のために使用しない(cssとして設計)
    4)情報構造を表す(グループ)

    改行タグ

    <br>
    : break
    終了フラグは必要ありません.
    数行
    <p>
    : paragraph
    情報の付与:ブロックを表す段落
    cssとして適用される単位の使用
    段落の区切りに使用するタグ

    ハイライトマーク

    <b>
    :bold
    単純に
    <strong>
    :strong
    情報のハイライト(重要な情報であることを示す)

    斜体マーク

    <small>
    小文字
    <cite>
    : citation
    作品の出典マーク(タイトルを明記してください)
    HTMLタグでデザインしないで!デザイン用CSS!

    05.HTMLデフォルトラベル2


    テキスト関連タグ

    <mark>
    :興味のある情報を強調表示
    <sup>
    : superscript
    上付き文字
    <sub>
    : subscript
    下付き文字
    <s>
    : strike
    線の削除

    引用ラベル

    <blockquote>
    :長いテキスト参照用
    属性-ite:引用元URL

    水平線マーカー

    <hr>
    :テーマや雰囲気の切り替え

    画像タグ

    <img>
    : image
  • プロパティ
    src:画像の相対、絶対パス
    alt:画像説明テキスト
    Width:画像の横長
    • <a>
    :anchor
  • プロパティ
    href : URL
    target:リンクページを開くウィンドウ、self(現在のウィンドウ)、blank(新しいタブ)を指定します.

    • 06.HTMLネストラベル


    <body>
  <table>
    <caption>오늘자 식단표</caption>
    <tr>
      <td></td>
      <th scope="col">아침</th>
      <th scope="col">점심</th>
      <th scope="col">저녁</th>
    </tr>
    <tr>
      <th scope="row">밥</td>
      <td>현미밥</td>
      <td rowspan="2">호박죽</td>
      <td>흰쌀밥</td>
    </tr>
    <tr>
      <th scope="row">국</td>
      <td>콩나물국</td>
      <td>갈비탕</td>
    </tr>
    <tr>
      <th scope="row">반찬</td>
      <td colspan="3">배추김치</td>
    </tr>
  </table>
  
</body>

    リストタグ

    <ul>
    :unordered list
  • プロパティ
    type:アルファベット、disc、square、circle...
    • <ol>
    :ordered list
  • プロパティ
    type:タグ形式、1,A,a,I,i...
    start:開始する番号
    • <li>
    : list item
    リスト内の要素

    表タグ


    table > tr > th, td
    table > caption
    <table>
    :テーブル
    <tr>
    :table row
    テーブルの列
    <th>
    : table header
    各行
  • プロパティ
    scope:(行/列)ヘッダ、col、row...
    • <td>
    : table data
    表の各セル
  • プロパティ
    colspan:n個のセルを横方向に結合し、セルカウント値
    rowspan:n個のセルを垂直に連結し、
    • の数値
    <caption>
    :表ヘッダー

    07.HTML行内要素とブロック要素


    inline要素

    <a> <b> <br> <button> <cite> <em> <i> <img> <input> <label> <script>
<select> <small> <span> <strong> <sub> <sup> <textarea>
  • コンテンツのサイズは、要素のサイズを決定します.(自己サイズなし)
  • 高さ、幅は、外部/内部マージン
    • を設けることができない.
  • 横並びと縦並びは設定できません
  • 強制改行しない
  • は、他のデータおよび行内要素(ブロックレベル要素を除く)
    • のみを含む.

    ブロック要素

    <article> <aside> <blockquote> <div> <footer> <form> <h1>~<h6>
<header> <hr> <li> <nav> <ol> <p> <section> <ul>
  • は、自身のサイズおよび余白を有する
    • である.
  • の親要素の行を独占し、
    • を強制的に改行します.
  • は、通常、第3行要素およびブロックレベル要素
    • を含む.

    inline-block要素


  • 独自のサイズと余白があります.

  • 改行を強制しない.

    • 08.HTMLパーティションと構文要素


    分割マーク

    <div>
    :division
    純粋なコンテナ-自身は何も表現しません
    他の要素またはパーティションドキュメントの整理に使用
    グローバル(汎用)アトリビュートのみ

    Semantics-有意義なドニーラベル

    <header>
    ページの上部にあります.
    通常、タイトル、ロゴ、検索ウィンドウなどのコンテンツが含まれます.
    ページの紹介と閲覧をお手伝いします.
    <footer>
    ページ下部
    通常、作成者、著作権情報、および関連テキストが含まれます.
    <nav>
    リンクを含める(ページ内のパーティションの別のページにリンク)
    <aside>
    ドキュメントの主な内容に間接的に関連する部分
    <main>
    bodyの主な内容
    メインコンテンツがこの領域に入ります
    <section>
    コンテンツ内の大きなセル分割とは独立
    他のシンボルマークの意味に合致しないマイナス記号.
    <article>
    独立した再使用または再表示されたパーティション
    掲示板、ニュース、図庫の各項目

    09.HTMLフォームの使用

    <form>

  • 情報をコミットするためのドキュメントの分割

  • 内部入力フォームの親、コンテナロール

  • 入力した情報をサーバに送信する方法を設定します.

  • 内部には、フォーム関連ラベル以外の要素も含めることができます.

  • ツールバーの
    id:一意の値(以前のnameを置換)
    方法:情報の伝達方式を入力して、get、post
    Action:サーバ上で情報を処理するプログラムを指定する
    Autocomplete:以前の入力履歴がある場合に自動的に完了、開く、閉じる
    • <label>
    入力フォームのラベルを表示
  • プロパティ
    for:入力フォームのラベルを指定し、フォーム要素のid値
    • を入力します.
    <input type:"text" placeholer>
  • プロパティ
    id:labelに関連付けられた一意の値
    Autocomplete:自動補完、boolean
    Autoofocus:ページに入ると、カーソルは位置、boolean、ページでのみ使用できます.
    disabled:変更不可、未送信値、boolean
    name:サーバに送信するプロジェクト名
    readon:変更できません.入力した値は送信されました.
  • タイプのプロパティ
    type:「text」、純テキストを入力
    type:「password」、パスワードを入力
    タイプ:「tel」、電話番号
    • を入力
  • プレースホルダ:入力値が空の場合に表示されるテキスト
  • maxlength:最大文字数、数値
    type : "number"
  • 最大値:最大入力値、
  • 分:最小入力値、
  • step:入力可能な値の間隔(2:0、2、4、8)
    タイプ:「checkbox」、checkbox
    • チェック
  • :チェックに初期化されているかどうか、boolean
    type:「radio」、radio(同じ名前の場合は1つしか選択できません).
    • チェック
  • :チェックに初期化するかどうか、boolean
  • name:属する選択範囲の区切り記号、text
    タイプ:「file」、添付ファイル
  • 倍数:複数のファイル、ブール
    • <select>
    :選択
  • プロパティ
    id:labelに関連付けられた一意の値
    name:サーバに送信されたプロジェクト名
    • <option>
    :選択内容
  • プロパティ
    value:サーバに送信する値
    selected:選択するかどうかboolean、各selectは1つのオプション
    • しか選択できません
    <textarea>
    :複数行のテキストのタグを入力できます.
  • プロパティ
    palceholder:入力値が空の場合に表示されるテキスト
    maxlength:最大文字数
    rows:可視行数
    • <button>
  • プロパティ
    type:ボタンの役割、submit,button
    disabled:無効、boolean 
    • <body>

  <form autocomplete="on">
    <label for="input-name">이름</label>
    <input id="input-name" type="text" placeholder="이름을 입력하세요." maxlength="4"/>
    <br>
    <label for="input-pw">비번</label>
    <input id="input-pw" type="password" placeholder="영문 + 숫자"/>
    <br>
    <br>
    <label for="input-age">나이</label>
    <input id="input-age" type="number"/>
    <br>
    <br>
    <label for="input-married">기혼</label>
    <input id="input-married" type="checkbox"/>
    <br>
    <label>역할</label>
    <input name="role" id="input-dev" type="radio" checked/>
    <label for="input-dev">개발자</label>
    <input name="role" id="input-design" type="radio"/>
    <label for="input-design">디자이너</label>
    <input name="role" id="input-pm" type="radio"/>
    <label for="input-pm">매니저</label>
    <br>
    <br>
    <label for="input-file">첨부</label>
    <input id="input-file" type="file" multiple/>
    <br>
    <br>
    <label for="select-dep">소속</label>
    <select id="select-dep">
      <option value="adm">운영팀</option>
      <option value="mkt">마케팅팀</option>
      <option value="frt">프론트엔드팀</option>
      <option value="bck">백엔드팀</option>
      <option value="tst">테스트팀</option>
      <option value="mnt">유지보수팀</option>
    </select>
    <br>
    <br>
    <label for="ta-intro">소개</label>
    <textarea id="ta-intro" rows="5"></textarea>
    <br>
    <br>
    <button>제출</button>
    <button type="button">취소</button>
  </form>
  
</body>
    GolangはMap同時読み書きセキュリティの問題を解決
    白駿-の字形書記(1146)