学習:html基本構造

21628 ワード
名学習 テキストリンク
私が決めたパズルのルール
  • IDは以下の4種類のみ使用:
    • #wrap
	#header
	#container
	#footer
  • GNB構造
    • <header id="header">
  <nav class="gnb">
    <h1 class="logo"><a href="#self"><img src=""></a></h1>
    <ul>
      <li><a href="#self">메뉴명</a></li>
    </ul>
  </nav>
</header>
    #header {z-index: 100; position: relative;}
    グループ
  • 領域
    #wrap>section>(title)などはarea>box順
  • 他の些細なもの
    ロゴはSVG
    font-weight値は数値です
    %で表される値は、小数点6ビットまで含めることができます(ex.23.4555522%).
    変換はミリ秒単位(300以上の周長x)
    formタグx/select>optionを使用する2つのオプションはvalue値を使用しません
    white-space: pre-wrap; スペースの保持(エンティティ、スペース)
    ファイルダウンロードボタン:aラベルの使用
    反応型brラベルを使用するとcss表示:none/block;次のように処理できます.
    アイコンなどのスクリーンリーダーユーザーに適したtext-indent:-9999 em;
    line-height値τfont-size値=line-height値を出現する%に適用すると、反作用型においても同様の割合で
    • を処理することができる.
  • tableラベル関連
    table横寸法宣言=colgroupラベルの使用
    theadがなくてもtbodyは縛られます
    trタグは、属性主治x->thおよびtdにのみ使用されます.
    tableラベルはpadding値のみをループします(marginではありません)
    display:flexがtdラベルを渡すとき
    trに表示:flexの場合、colspanは破壊されます->trの表示プロパティ(table-row)
    データルート情報はrowspan/colspan書き込みx
    ラベルラベルの使用:checkbox,radio
    ->ファブリック
    • <label class="radio">
	<input type="radio">
	<span>버튼명</span>
</label>
    tfoot->theadとtbodyの間に挿入(スクリーンリーダーのWebアクセスを強化)
    表の基本構造
    <table>
  <colgroup>
    <col style="width: 100px;">
    <col style="width: auto;">
  </colgroup>
  <thead>
    <tr>
      <th>제목</th>
      <th>제목</th>
      <th>제목</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>내용</td>
      <td>내용</td>
      <td>내용</td>
    </tr>
  </tbody>
</table>
    きほんこうぞう
    <body>
    <div id="wrap">
      <header id="header">
        <div class="inner">
          <h1 class="logo"><a href="/"><img src="/edu/img/logo.png" alt=""></a></h1>
          <nav>
            <ul>
              <li><a href="/">COMPANY</a></li>
              <li><a href="/">ARTIST</a></li>
              <li><a href="/">NOTICE</a></li>
            </ul>
          </nav>
        </div>
      </header>

      <div id="container">
        <div class="main_visual">

        </div>

        <div class="main_news">
          
        </div>

        <div class="main_video">

        </div>

        <div class="main_post">

        </div>

        <div class="main_audition">

        </div>
      </div>

      <footer id="footer">
        
      </footer>
    </div>
  </body>
    キャビネット(closure)
    Android6.0権限管理