HTML 기본태그

1. 글자태그

 <h1>~<h6> : 헤더

 <br> : 줄바꿈(Break)

 <p> : 문단(paragraph)

 <a> : 앵커(anchor)   

  - href : hyper reference

  - target  -> _blank : 새탭으로 열기

<a href='https://www.google.com' target = '_blank'>구글</a>

● 글자모양

 <b> : 굵게(bold), <i> : 기울어진(italic)

 

● 특수 문자 표시

 &nbsp; : 공백

 &li; : <

 &gt; : >

 &amp; : &

 

2. 목록태그

 <ol> : ordered list 

 <ul> : unordered list

 <li> : list

<!-- body태그 생략 -->
<ol>
    <li>냄비에 물을 붓고 국물용 티백을 넣고 야채를 썰어 넣어주세요.</li>
    <li>물이 끓으면 티백을 건져내고 어묵을 넣어주세요.</li>
    <li>간장과 고춧가루를 넣고 간을 맞춰주세요.</li>
    <li>준비한 그릇에 담아주면 완성입니다!</li>
</ol>

 

3. 테이블태그

 <table> : 테이블

 <th> : 테이블 제목행

 <tr> : 테이블 행

 <td> : 테이블 데이터(셀)

<!-- body태그 생략 -->
<table>
    <tr>
	<th>출발</th> <th>도착</th> <th>객실</th> <th>요금</th>
    </tr>
    <tr>
	<td>서울(17:25)</td> <td>부산(20:07)</td> <td>일반실</td> <td>50,800원</td>
    </tr>
    <tr>
	<td>서울(18:00)</td> <td>부산(20:35)</td> <td>특실</td> <td>83,700원</td>
    </tr>
    <tr>
	<td>서울(18:15)</td> <td>부산(20:50)</td> <td>일반실</td> <td>50,800원</td>
    </tr>
</table>

 

4. 미디어 태그

 <img> : 이미지 파일

 <audio> : 오디오 파일

 <video> : 비디오 파일

<img src='/htmlCss/ch01/cookie.jpg' width='200', height='150' title='쿠키'>

<audio src='/htmlCss/ch01/bass.mp3' controls autoplay loop></audio>

<video width='320' height='240' autoplay controls loop>
    <source src='/htmlCss/ch01/sample-video.mp4' type='video/mp4'>
</video>

 

5. 입력양식 태그

 <form> : 입력양식의 시작과 끝을 표시, 서버에 데이터를 보내주는 역할

 <input> : 입력양식 삽입

 

● input태그 type

<input type='text' name='text' value='text'>
<input type='password'>
<input type='radio'>
<input type='checkbox'>
<input type='file'>
<input type='button'>
<input type='reset'>
<input type='submit'>
<input type='hidden'>
<input type='email'>

 

6. 구조 태그
 <div> : 블록형식 (한칸을 다 차지, 줄바꿈)

 <span> : 인라인 형식 (글자 크기만큼 차지, 줄바꿈X)