1. <img>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 웹페이지에 추가 정보 전달 -->
<title>HTML5 + CSS3 Text</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<img src="http://www.kmu.ac.kr/images/common/logo.gif" alt="로고" width="150" />
<img src="http://placehold.it/300x150" width="300" />
</body>
</html>
2.<div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 웹페이지에 추가 정보 전달 -->
<title>HTML5 + CSS3 Text</title>
</head>
<body>
<div> div 태그 -block 형식</div>
<div> div 태그 -block 형식</div>
<div> div 태그 -block 형식</div>
<div> div 태그 -block 형식</div>
<div> div 태그 -block 형식</div>
</body>
</html>
3.<span>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 웹페이지에 추가 정보 전달 -->
<title>HTML5 + CSS3 Text</title>
</head>
<body>
<span> span 태그 -block 형식</span>
<span> span 태그 -block 형식</span>
<span> span 태그 -block 형식</span>
<span> span 태그 -block 형식</span>
<span> span 태그 -block 형식</span>
</body>
</html>
4.
|
블록 형식 태그 |
인라인 형식 태그 |
|
div 태그 |
span 태그 |
|
h1 – h6 태그 |
a 태그 |
|
p 태그 |
input 태그 |
|
목록 태그 |
글자 형식 태그 |
|
테이블 태그 |
|
|
입력 양식 태그 |
5.시맨틱 태그 - 컴퓨터 프로그램이 코드를 읽고 의미를 인식할수 있는 태그
|
태그 이름 |
설명 |
|
header |
헤더 |
|
nav |
내비게이션 |
|
aside |
사이드에 위치하는 공간 |
|
section |
여러 중심 내용을 감싸는 공간 |
|
article |
글자가 많이 들어가는 부분 |
|
footer |
푸터 |
6. video.js 플러그인 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 웹페이지에 추가 정보 전달 -->
<title>HTML5 + CSS3 Text</title>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video width="640" height="360" controls="controls" class="video-js vjs-default-skin" data-setup="{}" poster="D:\let\kmu.png">
<source src="D:\let\Wildlife.mp4" type="video/mp4"/>
<source src="D:\let\Wildlife.webm" type="video/webm"/>
</video>
</body>
</html>
'이전것 > 개발' 카테고리의 다른 글
| php -> make table, array, triangle (0) | 2016.07.05 |
|---|---|
| HTML5 (3) 로그인 폼 (0) | 2016.07.05 |
| HTML5 (0) | 2016.07.04 |
| module (2) (0) | 2016.05.09 |
| module (0) | 2016.05.02 |
잉비니
