HTML 기본 태그

Dinnnnn·2022년 8월 10일
0

HTML

목록 보기
2/5
post-thumbnail

제목&본문 태그

태그설명
h1첫번째로 큰 제목 생성
h2두번째로 큰 제목 생성
h3세번째로 큰 제목 생성
h4네번째로 큰 제목 생성
h5다섯번째로 큰 제목 생성
h6여섯번째로 큰 제목 생성
p본문 문단 생성
br줄 바꿈
hr수평 줄 삽입
<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 Basic</title>
    </head>
    <body>
        <h1>제목 글자</h1>
        <p>Lorem ipsum dolor,consecd tetur adipiscing elit.</p>
        <p>Phasellus sem tortor, volutpat vitea euismod eget</p>
    </body>
</html>

앵커 태그

a하이버링크 생성
<a href="이동할 웹페이지">출력글자</a>
//href: hyper reference

글자 모양 태그

태그설명
b굵은 글자
i기울어진 글자
small작은 글자
sub아래 첨자
sup위 첨자
ins밑줄 글자
del취소선이 그어진 글자


목록 태그

태그설명
ul순서가 없는 목록 생성
ol순서가 있는 목록 생성
li목록 요소 생성

순서가 있는 목록: 1,2,3
순서가 없는 목록: *

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            <b>과일</b>
            <ol>
                <li>사과</li>
                <li>바나나</li>
                <li>오렌지</li>
            </ol>
        </li>
    </ul>
</body>
</html>

테이블 태그

태그설명
table표 삽입
tr표에 행 삽입
th표의 제목 셀 생성
td표의 일반 셀 생성

  • 테이블 태그의 속성
태그속성설명
tableborder표의 테두리 두께지정
th,tdcolspan셀의 너비 지정
th,tdrowspan셀의 높이 지정
  • 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분 지을 수도 있다
    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1교시</td>
                    <td>영어</td>
                    <td>국어</td>
                    <td>과학</td>
                    <td>미술</td>
                    <td>기술</td>
                </tr>
                <tr>
                    <td>2교시</td>
                    <td>도덕</td>
                    <td>체육</td>
                    <td>영어</td>
                    <td>수학</td>
                    <td>기술</td>
                </tr>
            </tbody>
    	 </table>
    </body>
    </html>

미디어 태그

태그 속성 설명
img태그
alt 이지미가 없을 때 나오는 글자 지정
audio,video 태그
perload 음악,비디오를 준비중일 때 데이터를 모두 불러올지 여부 결정
autoplay 음악,비디오의 자동 재생 여부 지정
loop 음악,비디오의 반복 여부 지정
control 음악,비디오 재생 도구 출력 여부 지정
공통 태그
src 파일의 경로 지정
width 너비 지정
height 높이 지정
  • 웹브라우저마다 지원하는 음악파일 확장자가 다른 문제는 source태그로 해결!!
  • source태그는 audio태그나video태그 내부에 입력
  • tyoe속성을 입력하기
ex) <body>
 	 	<audio controls="controls">
   	 		<soutce src="Kalimba.mp3" type="audio/mp3">
  		</audio>
	</body>

0개의 댓글