웹마스터 팁

 <header>
    <hgroup>
        <h1>Company Name</h1>
        <h2>An example of HTML5 and CSS3 in action</h2>
    </hgroup>
</header><nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav><article>
    <header>
        <time datetime="2010-01-12" pubdate>
            <span>Jan</span> 12
        </time>
        <h1>
            <a href="#" title="Link to this post" 
rel="bookmark">Article Heading</a>
        </h1>
    </header>
    <p>This is an article that demonstrates some of the new features 
that HTML5 and CSS3 has to offer. This article contains several sections, each 
with its own heading, as well as a video element which will play a video without 
Flash on browsers that support it.</p>
    <section>
        <header>
            <h1>This is a section heading</h1>
        </header>
        <p>This is an example of a basic section of a document. 
A section can refer to different parts of a document, application, or page. 
According to the draft W3C spec, HTML5 sections usually have headings.</p>
    </section>
</article><footer>
    <p>&copy; 2009 Company Name. All rights reserved.</p>
</footer>

보러가기 : http://www.ibm.com/developerworks/kr/library/tutorial/wa-html5/index.html

 

이게 기본구조라네요.

 

XE2 는 HTML5에 최적화 되겠죠 ?

 

 <!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Demo</title>
        <link rel="stylesheet" href="styles.css" />
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk
/html5.js"></script>
        <![endif]-->
    </head>
    <body>

    </body>
</html>

 

 

 

1.  시맨틱 요소

HTML5 에서는 div 를 계속 사용하긴 하지만, div 보다 시맨틱요소를 권장한다고 합니다.

기존에 방식은 div 에 id 나 class 를 줘서 사용했는데

HTML5 부터는 이름이 정해져서 나온다는~

 

<article></article>

<aside></aside>

<hgroup></hgroup>

<nav></nav>

<section></section>

  

<audio></audio>

<canvas></canvas>

<video></video>

 

이런식으로 말이죠.

 

2. input type 폼양식의 변화

기존의 input type submit select 등의 태그에 변화가 있습니다.

color date number tel time month week url email 과 같이 한눈에 보기 쉽게 바뀐다는

 

 <section>
    <header>
        <h1>This is a feedback form</h1>
    </header>
    <p><form>
        <label for="contact_name">Name:</label>
        <input id="contact_name" placeholder="Enter your name" 
autofocus><br />
        <label for="contact_email">E-mail:</label>
        <input type="email" id="contact_email" placeholder="Enter 
your email address"><br />            
        <label for="contact_phone">Phone:</label>
        <input type="tel" id="contact_phone" placeholder="Enter your 
phone number"><br />
        <label for="contact_callback">Callback on:</label>            
<input type="datetime" id="contact_callback"><br />
        <label for="contact_priority">Priority:</label>
        <input type="range" min="1" max="5" value="1" 
id="contact_priority"><br /><br />
        <input type="submit" value="Request Call">
    </form></p>
</section>

3. 새로운 기능

location 이라는 태그로 지리정보를 받을 수 있습니다. 위성위치인 위도/경도 형태로 나타난다는..

자바스크립트를 사용하지 않고도 , 끌어놓기를 할 수 있습니다.

다양한 TTF 폰트를 적용할 수 있습니다.

동영상 음악등의 음성/배경음악 강조효과

.

.

자세한건 위 링크에...

 

* HTML5 는 IE 6,7,8 에선 작동하지 않아요.

* 첨부파일에 예제 올렸습니다.

제목 글쓴이 날짜 조회 수
PHP에 대한 소개 [216] zero 2000.03.06 71348
Database, MySQL 이 무엇인가~~~ ^^ [103] zero 2000.03.06 71324
간단한 PHP 문법 [204] zero 2000.03.06 96488
MYSQL Query의 간단한 사용법 [82] zero 2000.03.06 67685
자동링크 만드는 방법!!! [28] zero 2000.03.06 31662
페이지 자동 이동 방법 3가지!!! [10] zero 2000.03.06 34906
윈도즈에서의 Apahch 설치법 [88] zero 2000.03.06 44752
윈도즈에서 PHP3와 MySQL 설치 [40] zero 2000.03.06 56710
PHP에서의 파일입출력 문법 (간단히) [92] zero 2000.03.06 7351
최근 게시물을 나타내는 원리와 방법 [55] zero 2000.03.06 47147
쿠키(cookie)의 활용 [44] zero 2000.03.06 27100
전에 올렸던 폼메일 만들기입니당~~~ ^^ [38] zero 2000.03.08 12138
카운터를 만들어봅시다~ (수정본) [181] zero 2000.03.08 60735
리눅스에서 APM 설치 [9] zero 2000.05.31 21183
Zend Optimizer 4 설치 (아파치와 PHP4 Zend도 같이..) (리눅스) [6] zero 2000.06.04 20961
MySQL RPM으로 설치하자!! (리눅스) [5] zero 2000.06.04 19613
교육용 방명록 #1 [전체구성 설정, 테이블 생성, 기본함수 정의] [50] zero 2000.07.03 148519
교육용 방명록 #2 [글쓰기 폼 작성] [11] zero 2000.07.03 23370
교육용 방명록 #3 [글쓰기 폼에서 넘어온 값을 DB에 입력하기] [5] zero 2000.07.03 25217
교육용 방명록 #6 [수정된 값을 넘겨받아서 비밀번호를 비교하고 변경하여 줍니다.] [2] zero 2000.07.03 18231

단축키 (Shortcut)