lasthackers1. <html> : HTML 문서의 시작과 끝을 나타낸다
1-1. <title> : HTML 문서의 제목을 정의한다
<html>
<title>Lasthackers HTML</title>
</html>
1-2. <meta> : 문서의 인코딩 정보, 문서 정보등을 정의할 때 사용
| charset | <meta charset=”문자셋”> | |
| content | <meta content=”텍스트”> | |
| http-equiv | <meta http-equiv=””> | |
| name | <meta name=””> |
<html>
<meta charset="UTF-8">
</html>2. <head> : HTML문서에서 사용할 기능, 외부페이지, 웹문서의 속성 등을 정의할때 사용(실제 웹페이지에 보여지지 않음)
3. <body> : 실제 웹페이지에 보여지는 본문 부분
4. <br> : 바로 다음줄로 줄바꿈을 해준다
안녕<br>나는 고양이
5. <p> : paragraph의 약자로 단락을 바꿀때 사용한다
<p>첫번째 단락입니다</p>
<p>두번째 단락입니다</p>
마지막입니다
6. <img> : Image를 삽입하는 태그로 src속성으로 경로를 지정해줄 수 있다 만약 해당 경로에 이미지가 없다면 엑박이 뜰것이다
| src | 이미지의 경로 | <img src=”경로”> |
| width | 이미지의 너비 | <img src=”” width=”250″> <img src=”” width=”100%”> |
| height | 이미지의 높이 | <img src=”” height=”250″> <img src=”” height=”100%”> |
| title | 이미지의 툴팁 추가 | <img src=”” title=”도움말”> |
| alt | 이미지를 설명해주는 설명추가 | <img src=”” alt=”내용”> |
<p>이미지를 넣어봅시다</p>
<img src="img/lasthackers.png" width="250";>
<p>이미지가 없습니다</p>
<img src="img/none.png">
7. <li> : 리스트(항목)를 나열하기 위한 태그(child tag)
<li>Cat</li>
<li>Dog</li>
<li>Chicken</li>
7-1. <ul> : Unordered list의 약자로 순서가 없는 리스트를 나열하기 위한 태그(parent tag)
<ul>
<li>Cat</li>
<li>Dog</li>
<li>Chicken</li>
</ul>
7-2. <ol> : Ordered list의 약자로 순서가 있는 리스트를 나열하기 위한 태그(parent tag)
<ol>
<li>Cat</li>
<li>Dog</li>
<li>Chicken</li>
</ol>
8. <a> : anchor의 약자로 외부사이트로 링크를 거는 태그
| href | 참조할(링크를 걸) 사이트를 정의, script를 삽입할 수도 있다 | <a href=”lasthackers.com”> <a href=”javascript:alert(‘xss’)”>XSS</a> |
| rel | 링크의 대상사이트와 현재사이트의 관계를 정의한다 | |
| download | 링크를 클릭할때 해당 컨텐츠를 다운로드한다 | <a href=”” download=”파일이름”> |
| target | 링크된 사이트가 열릴 위치를 정의한다 | <a href=”” target=”_blank”> (_self, _parent, _top) |
| title | 링크된 사이트에 툴팁을 표시한다 | <a href=”” title=”도움말”> |
<a href="https://lasthackers.com">Lasthackers Web</a>
작성중..
HTML 태그 사용 빈도 알려주는 사이트https://www.advancedwebranking.com/html/