-
Html 기본 태그WEB/html 2019. 7. 5. 18:11728x90
Html 기본 태그들
글자서식 태그<p>, <br>, <pre>, <h1>
텍스트 서식 <strong>
목록 태그 <li>, <ol>, <ul>
링크 태그 <a href>
이미지 태그 <img>
테이블 태그 <table> <tr> <td>
오디오 태그 <audio> <source>
비디오 태그 <video> <source>
시작전 간단한 예제
코드
<!DOCTYPE html> <html> <head> </head> <body> <p> 안녕하세요 하하 </p> <pre> 안녕하세요 하하 </pre> <h1>반갑습니다 <br>하하</h1> </body> </html>
결과
안녕하세요하하안녕하세요
하하
반갑습니다
하하
<p> : 단락(Paragraphs)
하나하나의 짧은 이야기 토막
단락의 전후에 빈 줄이 추가
<br> : 강제 줄바꿈 태그
<pre>: 프로그래머가 입력한 그대로 화면에 표시
헤딩(heading) : <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
웹페이지의 머리기사
텍스트 서식
태그 설명 <b> ... </b> 볼드체로 만든다 <i> ... </i> 이탤릭체로 만든다 <strong> ... </strong> 텍스트를 강하게 표시한다 <em> ... </em> 텍스트를 강조한다 <code> ... </code> 텍스트가 코드임을 표시한다 <sup> ... </sup> 위첨자(superscript) <sub> ... </sub> 아래첨자(subscript) 예시
<!DOCTYPE html> <html> <head> </head> <body> <p><strong>강하다</strong></p> </body> </html>결과
강하다
목록 태그
<ol> : 번호있는(ordered) 리스트
<ul> : 번호없는 리스트
<ol> <li>번호있는 리스트</li> <li>번호있는 리스트</li> </ol>- 번호있는 리스트
- 번호있는 리스트
<ul> <li>번호없는 리스트</li> <li>번호없는 리스트</li> </ul>- 번호없는 리스트
- 번호없는 리스트
링크 태그
<p><a href="https://gadamer.tistory.com/">웹 공부 시작하는 곳</a></p>결과:
글자 서식 태그안에 , 혹은 이미지 태그안에 <a>(anchor) 태그를 삽입.
href에 링크 (예: https://.... , #....)를 써주자.
#같은 경우에는 현재 페이지에서 이동한다.
이미지 태그
<img src="img.jpg" alt="오류">결과:
현재 img.jpg 라는 파일이 없어서 alt에 써여있는데로 오류라는 글자가 나온다.
테이블 태그
<table>, <tr> , <td> 를 사용
오디오, 비디오 태그
<audio> , <video>, <source> 사용
'WEB > html' 카테고리의 다른 글
Html 공부 시작 (0) 2019.07.05