01.HTMLベース-HTMLタグ

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

🌈 最もポピュラーなhtmlタグ



🌈 htmlタグのプロパティ


1.htmlタグのプロパティは?

  • htmlタグはタグ内に値を入力できるだけでなく、タグごとに属性を付与できる
  • タグの属性は<属性名="属性値">の形で使用され、タグごとに複数の属性が付与される
  • ラベルごとに属性が異なる
  • id属性とclass属性は共通属性であり、全てのタグに使用可能

    • 🌈 <img>ラベル


    imgラベルとは?

  • 画像のタグを挿入し、src属性で画像経路を指定する
  • src属性がimgタグに必須属性として指定されていない経路の場合、画像は出力されません
    -srcプロパティ:画像のパス
    -width:画像水平サイズ
    -height:画像の奥行きの大きさ
    -alt:代替機能として、情報はテキスト形式で表示されます(画像が破損した場合)
    -title:マウスを離すと、どの絵かテキストで表示されます
    • ✍🏻 HTML 
    <img src="이미지 경로" width="500" height="300">

    🌈 <from>タグ


    1.フォームラベルとは？

  • HTMLはユーザ入力を受信するためのタグであり、多様なソースを提供するタグである
  • 入力データ処理用<input>과 <label>ペア使用
  • <input id="">과 <label for="">タグの2つの属性名が一致し、ペアで使用
  • <input>科<label>マークはinline levelマーク
  • 連続<input>過<label>縦置きしたい場合はblock-levelで表記<div></div>小包
    • ✍🏻 HTML 
     <body>
  <h1>Hello!</h1>
  <p>I like to line in <strong>South Korea</strong></p>
  <form>
    <div>
      <label for="form_color"></label>
      <input id="form_color" type="color" />
    </div>
    <div>
      <label for="form_touch"></label>
      <input id="form_touch" type="text" disabled value="Don't touch" />
    </div>
    <div>
      <label for="form_checkbox"></label>
      <input id="form_checkbox" type="checkbox" />
    </div>
    <div>
      <label for="form_radio"></label>
      <input id="form_raido" type="radio" />
    </div>
    <div>
      <label for="form_range"></label>
      <input id="form_range" type="range" />
    </div>
    <div>
      <label for="form_file"></label>
      <input id="form_file" type="file" accept=".pdf" />
    </div>
    <div>
      <h3><mark>Account</mark></h3>
    </div>
    <div>
      <label for="account_name"></label>
      <input id="account_name" required placeholder="name" type="text" />
    </div>
    <div>
      <label for="account_id"></label>
      <input id="account_id" required placeholder="id" type="text" />
    </div>
    <div>
      <label for="account_password"></label>
      <input
        id="account_password"
        required
        placeholder="password"
        minlength="10"
        type="password"
      />
    </div>
    <div>
      <label for="account_email"></label>
      <input id="account_email" required placeholder="e-mail" type="email" />
    </div>
    <div>
      <input type="submit" value="create account" />
    </div>
  </form>
</body>

    🌈 <ol>、<ul>、<li>ラベル


    1.list(リスト)構造を作成するためのタグ

  • 順番のあるリストは<ol></ol>
  • 無秩序ディレクトリは<ul></ul>
  • リストのマーク表示は<li></li>
  • typeを設定してもよいし、順序を反転してもよい
    • ✍🏻 HTML 
     <ol type="i" reversed>
     <li>first order-list</li>
     <li>second order-list</li>
     <li>third order-list</li>
 </ol>
 <ul>
     <li>first unorder-list</li>
     <li>second unorder-list</li>
     <li>third unorder-list</li>
 </ul>
    アリ雲七日間実践ノート7
    (メモ)ネットワーク通信:TCPは全二重を実現し、クライアントとサービス側はコンソール入力交流を行う