티스토리 뷰

Web/HTML

HTML 요약

고기상추밥 2018. 11. 30. 02:21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 5 일경우

<!DOCTYPE HTML>


head 요소들

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="test.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="abc.js"> </script>
        <title>HTML 요약</title>
        <meta name="Description" content="소개 내용" />
        <meta name="Keywords" content="apple, banana" />
        <meta name="author" content="contents">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="refresh" content="30">
        <meta name="robots" content="noindex, nofollow" />


HTML 5 일경우

        <meta charset=utf-8>


css js 소스 텍스트안에 포함시키기

        <style type="text/css">
             //script Text
          </style>


        <script type="text/javascript">
          //script Text
        </script>


블락 요소들

        <div>의미없는 요소</div>
        <h1> 제목 요소</h1>       
        <p>문단 요소 인라인요소만 들어가진다</p>
        <pre>형식화 텍스트 요소 인라인만 받음</pre>
      장면전환 요소<hr/>
        <blockquote cite=""> cite="" 검색엔진이 활용함 인용 요소 자동 들여쓰기</blockquote>


        줄바꿈 인라인
        <br/>


강조 인라인 요소들

        <span>의미없는 인라인</span>
        <strong>굵은 글씨 인라인</strong>
        <em>이탤릭</em>


인용 인라인 요소들

        <cite>인용된 작품의 제목</cite>
        <q cite=""> cite="" 검색엔진이 활용함 인용 따옴표</q>


부모요소의 형태를 따름

        <del>지우고 줄로 그어짐</del>
        <ins>추가 밑줄생김</ins>


anchor 인라인 요소

        <a href="" title=""> title="" 마우스 올리면 내용뜸 Anchor 인라인</a>
        <a href="#" title=""> title="" 마우스 올리면 내용뜸 페이지 내부이동</a>
        <a name="">이름설정 HTML5부터 폐기됨</a>
        <a id="">id 설정 페이지당 1개만 선언가능</a>         <a href="http://webberstudy.com" onclick="해당 스크립트">자바스크립트 사용/팝업 열기</a>


href 관련 속성

    <a href="" target=_blank> target=_blank 새창에서 띄움</a>


rel 속성 값 검색엔진에서 사용함
alternate 대안 페이지
author 저자에 관한 페이지
bookmark 즐겨찾기 추가
help 현재 페이지 도움말
license 현재 페이지 저작권
prev 이전글
next 다음글
search 검색페이지


특수문자

&nbsp; 공백

&amp; &

&lt; <

- =

&gt; >

&copy; ©


이미지 인라인요소

<img src="image.jpg" alt="이미지의 묘사 내용" />
<img src="" alt="" title="" />
툴팁은 반드시 title 사용
<img src="detail.jpg" alt="상품 상세정보" longdesc="detail/product1.txt" />
longdesc HTML5에서 폐지됨 텍스트파일을 보여줌 #아이디값도 받음
<img src="smile-dog.jpg" alt="작은개" height="400" width="300" />
이미지의 가로 세로 크기조절


목록 요소

<ol> ol은 자식요소로 li만 받음
    <li>Ordered List/ li는 다받음</li>
</ol>
<ol start=""> 시작값 정해주기
    <li>Ordered List</li>
</ol>
<ol reversed="reversed"> 거꾸로
    <li>Ordered List</li>
</ol>
<ul> ul은 자식요소로 li만 받음
    <li>Unordered List / li는 다받음</li>
</ul>
<dl> dl은 자식으로 dt dd만 받음 1:다 다:1도 적의가능
    <dt>dt는 인라인요소</dt>
    <dd>Description List dd는 블락요소     </dd>
</dl>


의미없는 요소 활용
<div class="test">클래스로 값지정</div>
<span class="test">클래스로 값지정</span>
<style type="text/css">
.test{
    정의
}
</style>

class 값정해줄때 띄어쓰면 다중으로 지정됨

class="apple banana" 이렇게하면 클래스값 2개 지정됨

공백을줘야될때는 - 을 줘서 이어줌


축양형

<abbr title="World Wide Web">WWW</abbr>


주소록

    <address>
<p><a href="mailto:name@example.com">홍길동</a></p>
        <p>주소 여기</p>
        <p>전화번호</p>
    </address>


단어 설명

<p><dfn>언감생심</dfn>은 감히 바랄 수도 없다는 뜻의 사자성어입니다.</p>


이런것도 됨

<p><dfn><abbr title="Hyper Text Markup Language">HTML</abbr></dfn>은 웹 페이지 작성을 위한 마크 업 언어입니다. </p>


<!--주석달기-->


출처 : http://webberstudy.com

저작자표시 비영리 변경금지

'Web > HTML' 카테고리의 다른 글

HTML Label 연습  (0) 2018.12.04
HTML 버튼 & Hidden  (0) 2018.12.04
HTML 라디오 & 체크박스  (0) 2018.12.04
HTML 입력과 드랍다운  (0) 2018.12.04
HTML 표(Table)  (0) 2018.12.04
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함