研修28日目

26022 ワード
教育 html テキストリンク

1.input Tag:入力に関するTag

  • 主な属性:type>入力フォーマットの指定
  • size:横方向の大きさが英語の大文字標準
    • に達する
  • maxlength:文字数制限
  • プレースホルダ:説明
  • value:入力する値
  • readon:編集不可
  • disabled:編集、フォーカス、非アクティブ
    • ※フォーカス:当該オブジェクトまたは移動ポイントをクリックしてアクティブにする状態

  • submitボタン:クリック時にフォームに値がある場合、これらの値を自動的に移動します.
    ※submitよりもInputボタンをそのまま使いましょう

  • id:オブジェクトの一意の名前を指定し、xの繰り返しを推奨
  • 主に開発用

  • Label:特定のコンテンツを組み合わせます.(forで指定したid接続イベントに基づいて)
    入力値はreadonly反応で、
    未入力値の応答readonly

  • name:値を渡すキー値を表します.繰り返し可能
    ※radioで組み合わせた逆滑走路機能動作
    • チェックボックス:複数選択
    radio:ラジオ
    type=「hidden」=>画面に表示されません.主に値の保存に使用

    2.ul,ol-リストデータグループ

  • li-リストデータ要素
  • ul-非順序、グラフィック区切り記号
  • ol-シーケンス、数値区切り記号
  • ulとolの選択はデザイナーが決定
  • dlは使用しません.

    • 3.画面にimg画像を提供します。ツールバーの

  • src:ファイルパス
  • alt:説明、視覚障害者用音声テキスト機能
    • を含む
    ファイルのパス
  • 絶対パス:Webサービスアドレスを含むファイルex)http://~~~~~~~~~~~~.png
  • 相対パス:現在のアドレスに基づくファイルアドレス.
  • 物理パス:コンピュータ上に存在するパス.Webブラウザでは使用しません.
    • 絶対パスと相対パスの説明パスコードの追加
    <img alt="나무" src="./tree.png"  width="150px" height="150px"/>
    実習
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test02</title>
</head>
<body>
<input type = "text" size = "10"  maxlength = "3"/
		placeholder="3글자만 된다고" value="값이다"
		readonly= "readonly" /><br/>
<input type="password" maxlength = "3"/
		placeholder="3글자만 된다고" value="값이다" /><br/>
<input type="number" placeholder="e는 입력이 가능해"/><br/>
<input type="date" value="2000-01-01" /><br/>
<input type="file" /><br/>
<input type="color"/><br/>
    
<input type="button" value="이것이다"/><br/>
<input type="submit" value="이것은 아니다"/><br/>
<button>이것도 버튼이다</button><br/>
<input type="time"/><br/>
    
<input type="checkbox" id="c1" checked="checked" disabled="disabled"/>
<label for="c1">1</label>
<input type="checkbox" id="c2"/><label for="c2">2</label>
<input type="checkbox" id="c3"/><label for="c3">3</label>
    
<input type="radio" id="r1" name="r" / ><label for="r1">1</label>
<input type="radio" id="r2" name="r" / ><label for="r2">2</label>
<input type="radio" id="r3" name="r"/ ><label for="r3">3</label>
<input type="hidden"/>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<img alt="나무" src="./tree.png"  width="150px" height="150px"/>
</body>
</html>
    出力結果

    4.テーブル


    実習
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" cellspacing="0">
	<colgroup><!-- colgroup : 컬럼들의 형태를 정의  -->
		<col width="100px"/>
		<col width="200px"/>
		<col width="300px"/>
	</colgroup>
	<tr height="50px" ><!-- tr : height조정 -->
		<td rowspan="2"> 1-1</td><!-- td, th: width조정 -->
		<th colspan="2"> 1-2</th>
	
	</tr>
	<tr height="80px">
		
		<td> 2-2</td>
		<td> 2-3</td>
	</tr>
</table>
</body>
</html>
    出力結果

    明日は一週間が過ぎた金曜日です.最近のアイデアは、何も学んでいないが、ずっと学んでいる.だから食事の感覚ではなく、おやつでお腹を満たしている感じですよくない
    牛客網iOS問題42-65
    Video 4 Linuxフレームワーク概要(2)-v 4 l 2_device