링크
<a href="https://www.naver.com">네이버 보기</a>
<a href="https://www.naver.com" target="_blank">새 창에서 네이버 보기</a>
이미지
<img border="0" alt="My Image" src="image.png" width="100" height="100">
<!-- 이미지로 링크 넣기 -->
<a href="https://www.naver.com">
<img border="0" alt="My Image" src="image.png" width="100" height="100">
</a>
문단
<p>
문단
</p>
줄넘긺과 다름을 주의<br>
나열하기
<p>어떤 음료를 원하시나요?</p>
<ol> <!-- order list -->
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<!--
1. Coffee
2. Tea
3. Milk
-->
<p>어떤 음료를 원하시나요?</p>
<ul> <!-- un-order list -->
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<!--
* Coffee
* Tea
* Milk
-->
표
<!-- 테이블 스타일 선언 -->
<style>
table, th, td {
border: 1px solid black;
}
</style>
<!-- 테이블 내용 -->
<table>
<tr> <!-- table row -->
<th>Month</th> <!-- table head -->
<th>Saving</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
html의 구조
<!DOCTYPE html> <!-- 브라우저에게 html임을 알린다 -->
<html> <!-- html문서는 html테그 속에 존재한다 -->
<head>
<title>홈페이지</title> <!-- 홈페이지 썸네일로 뜨게된다. -->
<meta> charset="UTF-8"> <!-- html의 메타데이터 -->
</head>
<body>
</body>
</html>
div
<!-- 섹션을 구분지어 준다 -->
<html>
<head>
<style>
.myDiv{
border: 5px outset red;
}
</style>
</head>
<body>
<div class="myDiv">
<!-- myDiv의 섹션이 적용됨 -->
<h2>Hello</h2>
<p>ppppp</p>
</div>
</body>
</html>
버튼
<!-- onclick 내부는 JS코드이다 -->
<button type="button" onclick="alert('Hello world!')">Click Me</button>
<!-- 이렇게 써도된다 -->
<button type="button" onclick="testFunc()">Click Me</button>
<script>
function testFunc() {
alert('Hello world!')
}
</script>