[Front-end] #1.5 HTML

24315 ワード

front 基本構文 html テキストリンク

一日に一度提出して、ベルのルールを決めたので、後で文章が混ざっているかもしれません.

正規授業の日に勉強して探したのは#day-番号

です.

週末に単独で勉強して整理したのは#dayです.5

整理したいです.

0.Webの基本知識

http://www.naver.com:80
プロトコル:ネットワーク承諾の通信プロトコル(EX.HTTP、FTP、SMTP)
IP:ネットワーク上でコンピュータのアドレスを識別する(www.naver.com)
DNS:IPアドレスをマッピングする文字列
ポート番号:ポート番号(80)

1. HTML

1-1. HTMLデフォルト1

tag:名前(ex.img)、属性(ex.src)、属性値(ex.「hi.png」)があります.
head:追加情報
body:画面内容
br:出発
h1 ~ h6 : heading
p:本文
a:別のページにリンク(hrefプロパティのリンク値.ターゲットプロパティはblank:新規タブかself:既存のページをスキップ)
i、sup、ins、del:斜体、二乗、下線、中線
hr:水平線を挿入する

<br /> <!-- 한줄로 끝나는 태그들은 <br /> 처럼 끝나는 태그를 한번에 붙이기도 함. -->
<a href="http://velog.io">velog</a>

1-2. HTMLデフォルト2

1.リスト(重要!)

基本的には垂直構造です.CSSを使用して水平構造に変換できます.
ul:無秩序リスト(X順序)
ol:Ordered List(O順)
Li:ul,olの各リスト要素.
dl:ul、olのように使う
トップタイトル
dd:リスト要素

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

2.表

全体的なレイアウトを作成するために使用されますが、現在は使用頻度が低いです.
table(borderプロパティを使用して枠線を指定できます.)
tr:1行
td:1つの列(行span、colspanプロパティは、どれだけのセル->が破壊される可能性があるかを指定しますので、あまり多くはありません.)

<table border="1">
	<tr>
    	<td rowspan="4">중간고사 성적<td/>
    </tr>
    
    <tr>
    	<td>국어<td/>
        <td>영어<td/>
        <td>수학<td/>
    </tr>
    
    <tr>
    	<td>100<td/>
        <td>90<td/>
        <td>95<td/>
    </tr>
    
    <tr>
    	<td colspan="2">평균<td/>
        <td>95<td/>
    </tr>
</table>

3.イメージ

内部イメージと外部イメージの両方を使用できます.
img(プロパティsrc:画像ソース、alt:画像がない場合に表示される文)

<img src="snsd.png" alt="SNSD"> <!-- 같은 경로 -->
<img src="SMENT/yoona.png" alt="YOONA"> <!-- 다른 경로 -->
<img src="http://taeyeon.smtown.com/purpose.png" alt="TAYEON purpose"> <!-- 원격 이미지 -->
<img src="SARAMENT/sooyoung.png" alt="SOOYOUNG" width="500"> <!-- 너비 주기 -->

4.サウンド

外部プラグインなしで出力できます.
audio(controls:コントローラを挿入しますか?,autoplay:自動再生,loop:無限ループ)

<audio src="weekend.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>

1-3. HTMLデフォルト3

1. video

video

<video source="MV.mp4" type="video/mp4" controls="controls>

2.form(重要!!)

内容入力時に使用するタグ
form action:submitボタンを押すと情報が移動するアドレス、方法:post(デフォルト)get...)
input(タイプ:text、tel、password、file、radio、チェックボックス、submit/value:値)
textarea:長い文章(行、cols)
select:開いている選択ウィンドウをクリックします(各要素はオプションラベルで区切られ、複数のプロパティ:複数選択)
inputtype=submitがなければ画面に何も表示されません!!

<form action="주소" method="get">
    이름: <input type="text" name="uname" /><br />
    사진: <input type="file" name="upic /><br/>
    
    성별: <input type="radio" name="gender" value="m">남,
    	<input type="radio" name="gender" value="w">여 <br />
    언어: <input type="checkbox" name="lang" value="kor">한글,
    	<input type="checkbox" name="lang" value="eng">영어,
        <input type="checkbox" name="lang" value="jap">일어 <br />
        
    자기소개: <textarea rows="5" cols="20" name="uname">5자 이상 입력하세요.<textarea/><br />
   
    국적: <select>
    	<option>한국</option>
        <option>미국</option>
    </select> <br />
    좋아하는 음식: <select multiple="multiple">
    	<option>한식</option>
        <option>중식</option>
        <option>일식</option>
        <option>양식</option>
    </select> <br />
    
    <input type="submit" />
    
</form>