제목글자 태그
-H는 Heading을 의미한다.
h1~h6 까지 있는데 뒤의 숫자는 크기를 의미한다
<h1> ~~ </h1>
본문 태그
- p 태그: Paragraph를 의미하며 문단 하나를 생성한다.
<p> ~~ </p>
- br 태그: 줄 바꾸기 기능 ( <head>에서도 사용이 가능하다.)
다른 글자 태그 내부에 삽입이 가능하다.
<br>, <br /> 닫는 태그는 필요가없다고 함.
- hr 태그: 수평 줄 삽입기능, 가로 선 생김
다른 글자 태그 내부에 삽이이 불가능하다 // 되는 것 같은데..
<hr> , <hr /> 닫는 태그는 필요가없다고 함.
- pre 태그: 입력하는 그대로 화면에 표시하기.
글자 모양 태그
* 글자모양 태그 사이에 제목 글자 태그(<h1>)나 본문글자 태그<p>는 넣을 수 없다.
- b 태그: 굵은 글자
- i 태그 : 기울어진 글자
- small 태그: 작은 글자
- sub 태그: 아래첨자
- sup 태그: 위첨자
- ins 태그: 밑줄글자
- del 태그 : 가운데 줄이 그어진 글자, 취소선
목록 태그
( ul과 ol이 있는데 그내부 표시는 li로 한다.)
-글머리 목록 태그
- ul 태그 : 글머리기호 목록생성
ul이 순서가 필요하지 않는 목록 만드는 것이다. ul과 li를 같이 사용해서
글머리를 달면된다.
- li 태그 : 목록 요소 생성
한문장만 글머리단다.
-순서 번호 목록 태그
- ol 태그 : 순서 번호 목록 생성
<ol type = "속성 값" start ="순서번호" > 이렇게 type과 start값을
지정할 수 있다,
- li 태그 : 목록요소 생성
태이블태그
- table 태그 : 표를 삽입함
- thead 태그: 표의 머리를 생성함
- tbody 태그 : 표의 body를 생성함
- tfoot 태그 : 표의 foot을 생성함
- tr 태그 : 표의 행을 삽입함.
- th 태그 : 표의 제목 요소를 생성함.
colspan : 셀의 너비 지정, 차지하는 너비 크기를 지정함.
<th colspan ="2">
rowspan : 셀의 높이 지정, 차지하는 높이 크기를 지정함
<th rowspan ="2">
- td 태그 : 표의 일반요소 (table data)를 생성함.
colspan : 셀의 너비 지정, 차지하는 너비 크기를 지정함.
<th colspan ="2">
rowspan : 셀의 높이 지정, 차지하는 높이 크기를 지정함
<th rowspan ="2">
이미지 태그
- img 태그 :
<img src = "주소" alt ="err메세지" width =" 너비" height ="높이" />
입력양식 태그
-input 태그:
- label 태그 : for 속성에 input 태그의 id 속성을 입력하면
//// 소스코드 .
<!DOCTYPE html>
<html>
<head>
<title> title TEST </title>
<h1 id = "num1"><i> i test, italic h1 test </i></h1>
<h2 id = "num2"><b> b test h2 test, bold </b></h2>
<h3><small> small test h3 </small> </h3>
<h4><sub> sub test,</sub> h4 test</h4>
<h5><sup> sup test</sup> h5 test </h5>
<h1><ins> ins test</ins> br test </h1>
<h1 id = "num3"><del> br test </del></h1>
<hr>
</head>
<body>
<ul>
<p id = "num4"> p test p test p test p te<br/>st p test p test p test </p>
<p><b> p test p test p test p te<hr/>st p test p test p test </b></p>
<a href = "#num3"> num3 </a>
<br/>
<li> <a href = "http://gunu1.tistory.com/manage"> GNU </a> </li>
</ul>
<ol>
<li> </br></li>
<li> <a href = "#num1"> GNU </a> </li>
<pre> pre! </pre>
</ol>
<br>
<table border = "1">
<thead>
<tr>
<th colspan ="2">thead 1</th>
<td>thead 2</td>
</tr>
<tr>
<th rowspan ="2">thead 3</th>
<td>thead 4</td>
</tr>
<tr><td>thead +</td></tr>
</thead>
<tbody>
<tr>
<td>tbody1</td>
<td>tbody2</td>
</tr>
<tr>
<td>tbody3</td>
<td>tbody4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>tfoot1</td>
<td>tfoot2</td>
</tr>
<tr>
<td>tfoot3</td>
<td>tfoot4</td>
</tr>
</tfoot>
</table>
<img src ="point.png" alt = "no picture" width = "500" height ="250" />
<form>
<input type ="text" name="search"/>
<input type = "submit"/>
<label for = "name"> 이름</label>
<input id = "name" type = "text"/>
</form>
</body>
</html>
출력화면
'HTML > HTML Concept' 카테고리의 다른 글
| [HTML] 입력 양식태그 (0) | 2018.04.17 |
|---|---|
| [JavaScript] jsp (0) | 2018.03.30 |
| [HTML] 테이블 (0) | 2018.03.20 |
| [HTML] 구조 (0) | 2018.03.20 |
| [HTML] 하이퍼링크 (0) | 2018.03.20 |
