HTMLベース1


22.02.15
基礎の上で「Unicode」のHTML基礎無料講座を聞いて、勉強しました.これは私が自分で復習するために整理した内容です.
1.ブロック要素vs行内要素
  • ブロック要素が幅全体を占めています.△領地を占拠する.
  • 行の要素は特定の部分のみを占めます.(strong, mark, em)
  • 太字,mark塗装蛍光ペン,em斜体=傾斜
  • &+nbspは、スペースが必要な場合に
  • に書き込む
  • br改行、hrは水平線、brとhrは単一のラベルを表します!
  • 2.画像を入れる
  • 画像はimg単一タグで表される.
  • imgラベルにsrc属性で画像アドレスを入れます.img src=「アドレス」urlアドレスでもOK!
  • 周期幅="幅"height="高さ"がピクセル整数:として表示されるように、
  • の画像サイズを指定します.
    3.コンテナ

  • ブロックとして指定できます.divを組み合わせて、cssやjavascriptをより簡単に適用できます.
  • cf.cssはスタイル、JSはインタラクティブ

  • div=ブロックレベルコンテナ、span=行内コンテナ
  • 4.グローバル属性
  • ラベルの追加機能を定義し、数量制限はありません.カスタム値を使用します.
  • 識別子属性は、タグ名が同じタグを区別するために使用される.
    💡 id:要素に一意の名前を付けます.タグは1つのみです.
    💡 class:グループごとに要素を組み合わせ、複数の要素を繰り返し指定できます
    💡 style:css宣言
    💡 title:要素の詳細とユーザーのツールチップ
    (cf.ツールチップ?マウスを離すと小さな口風線が飛び出します)
  • 5.リンクの作成
  • aタグを使用してリンクhrefプロパティ作成ループを作成します.内線要素です.
  • targetプロパティを使用すると、現在のタブまたは新しいタブを選択できます.
    💡 target=selfの現在のタブで開く(デフォルト)target=blankの新しいタブで開く
  • href属性から電話をかけて、メールを送ることもできます
    💡 href="mailto:メールアドレス"href="tell:電話番号"
  • 6.リストの作成
  • ul、ol、liタグ
  • ブロックレベル要素の作成
  • ul=無秩序リスト=無秩序リスト
  • ol=orderedlist=整列リスト
  • <ul>
     <li>토끼</li>
     <li>다람쥐</li>
    </ul>
    <ol>
     <li>html</li>
     <li>css</li>
    <ol>
    7.入力要素の作成-input

  • input:ユーザーから値を入力できるインタラクティブなコントロール(=フィールド)を表します.

  • 行内要素、単一タグ、入力ウィンドウ

  • inputには多くの要素があります.多すぎて使い慣れた

  • 重要!名前属性でinputラベルを識別!!JSが仕事するときは楽だから!!

  • input属性セット(リンク↓)出題=授業参考資料
    HTML: Hypertext Markup Language | MDN

  • 今日の学習の入力要素↓
    <input name="text" type="text" maxlength="10" placeholder="메시지를 입력해주세요!" /><br> <br>
    <input name="push" type="button" value="PUSH!"/> <br> <br>
    <input name="color" type="color"/> 색상팔레트 <br> <br>
    <input name="score" type="range" max="100" min="0" step="10"/> <br> <br>
    <input name="birthday" type="date"/> <br> <br>
  •  💡text : 텍스트 입력창 만들기 / maxlength : 입력 글자수 제한 
     💡placeholder : 텍스트 입력창에 뜨는 안내 메시지 (사용자가 입력하면 사라짐)
     💡button : 클릭할 수 있는 버튼 생성 / value : 버튼에 표시할 내용
     💡color : 색상팔레트에서 색을 선택하여 입력할 수 있게 해주는 것
     💡range : '바'로 보이며 값이 가려진 숫자를 입력할 수 있게 해주는 것 
     💡max,min : range의 최댓값과 최솟값을 지정한다.
     💡date : 특정 날짜를 지정하여 입력할 수 있게 한다.