HTML5 makes easy because its features are based on HTML, CSS, DOM, and JavaScript, reduces the need for external plug-ins (like Flash), better error handling, more markup to replace scripting , device independent, the development process should be visible to the public
새로운 특징
- 그리는 것을 위한 캔버스 요소
- 미디어 실행을 위한 비디오 와 오디오 요소
- 지연 비연결 저장소를 위한 더 나은 지원
- 새로운 컨텐츠 특정 요소, 기사와 같이, 꼬리말, 머리말, nav, section
- 새로운 폼 컨트롤, 달력과 같은 , 일자, 시간, 이메일, URL, 검색
New Features
•The canvas element for drawing
•The video and audio elements for media playback
•Better support for local offline storage
•New content specific elements, like article, footer, header, nav, section
•New form controls, like calendar, date, time, email, URL, search
New Markup Elements
Tag
Description
<
article>
For external content, like text from a news-article, blog, forum, or any other content from an external source
<
aside>
For content aside from the content it is placed in. The aside content should be related to the surrounding content
<
command>
A button, or a radio button, or a checkbox
<
details>
For describing details about a document, or parts of a document
<
summary>
A caption, or summary, inside the details element
<
figure>
For grouping a section of stand-alone content, could be a video
<
figcaption>
The caption of the figure section
<
footer>
For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information
<
header>
For an introduction of a document or section, could include navigation
<
hgroup>
For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings
<
mark>
For text that should be highlighted
<
meter>
For a measurement, used only if the maximum and minimum values are known
<
nav>
For a section of navigation
<
progress>
The state of a work in progress
<
ruby>
For ruby annotation (Chinese notes or characters)
<
rt>
For explanation of the ruby annotation
<
rp>
What to show browsers that do not support the ruby element
<
section>
For a section in a document. Such as chapters, headers, footers, or any other sections of the document
<
time>
For defining a time or a date, or both
<
input type=’file’>
file browsing
New Media Elements 미디어 요소 / 오디오, 비디오
Tag
Description
<
audio>
For multimedia content, sounds, music or other audio streams
<
video>
For video content, such as a movie clip or other video streams
<
source>
For media resources for media elements, defined inside video or audio elements
<
embed>
For embedded content, such as a plug-in
<VIDEO width="640" height="360" preload="none" controls>
<SOURCE type="video/mp4" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
<SOURCE type="video/webm" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" />
<SOURCE type="video/ogg" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" />
<object width="640" height="384" type="application/x-shockwave-flash" data="/code/video_for_everybody/player.swf">
<param name="movie" value="/code/video_for_everybody/player.swf" />
<param name="flashvars"
value="image=/code/video_for_everybody/poster.jpg&file=http://clips.vorwaerts-mbh.de/big_buck_bunny.mp4" />
<img src="/code/video_for_everybody/poster.jpg" width="640" height="360" alt="Big Buck Bunny"
title="No video playback capabilities, please download the video below" />
</object>
|
The Canvas Elements / 캔버스
Tag
Description
<
canvas>
For making graphics with a script
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<input type="button" value="Create Graphics" onclick="draw();"/>
<script type="text/javascript">
function draw(){
var canvas=document.getElementById("myCanvas");
if(!canvas.getContext){return;}
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Face 얼굴
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();}
</script> |
New Form Elements
Tag
Description
<
datalist>
A list of options for input values
<
keygen>
Generate keys to authenticate users
<
output>
For different types of output, such as output written by a script
New Input Type Attribute values
Tag
Description
tel
The input value is of type telephone number
search
The input field is a search field
url
The input value is a URL
email
The input value is one or more email addresses
datetime
The input value is a date and/or time
date
The input value is a date
month
The input value is a month
week
The input value is a week
time
The input value is of type time
datetime-local
The input value is a local date/time
number
The input value is a number
range
The input value is a number in a given range
color
The input value is a hexadecimal color, like #FF8800
|
<script type="text/javascript">
function write_sum(){
x=5;
y=3;
document.forms["sumform"]["sum"].value=x+y
}
</script>
</head>
<body bgcolor="#DEB887">
<div style="overflow:scroll;height:400px;width:350px;">
<article>
<a href="http://blog.netscape.com/2007/12/28/end-of-support-for-netscape-web-browsers">
Netscape is dead</a>
<br />
AOL has a long history on the internet, being one of
the first companies to really get people online.....
</article>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
<menu>
<command type="command">Click Me!</command>
</menu>
<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>
<figure>
<h1>WWF</h1>
<p>The World Wildlife Foundation was born in 1961...</p>
</figure>
<figure>
<figcaption>WWF</figcaption>
<p>The World Wildlife Foundation was born in 1961...</p>
</figure>
<footer>This document was written in 2009</footer>
<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<meter min="0" max="10">2</meter><br />
<meter>2 out of 10</meter><br />
<meter>20%</meter>
<nav>
<a href="default.asp">Home</a>
<a href="tag_meter.asp">Previous</a>
<a href="tag_noscript.asp">Next</a>
</nav>
The object's downloading progress:
<progress>
<span id="objprogress">76</span>%
</progress>
<section>
<h1>WWF</h1>
<p>The World Wildlife Foundation was born in 1961...</p>
</section>
<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2008-02-14">Valentine’s day</time></p>
<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>
<keygen type="rsa"></keygen>
</div>
<body>
</html> |
Geo-location using HTML5
function showMap(position) {
alert(position.coords.latitude, position.coords.longitude);
document.getElementById('latitude').innerHTML = position.coords.latitude;
document.getElementById('longitude').innerHTML = position.coords.longitude;
}
// One-shot position request.
navigator.geolocation.getCurrentPosition(showMap);
|
Web Storage
•Local Storage - Stores data with no time limit
•Session Storage - Stores data for one session
Local Storage Method:
Local Storage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site. The values are stored in the local storage.
Session Storage Method:
The Session Storage sets fields on the window. When the window is closed, the session fields are lost, even if the site remains open in another window.
Local Storage
localStorage.lastname="Smith";
document.write(localStorage.lastname);
Session Storage
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
Drag and Drop
var eat = ['yum!', 'gulp', 'burp!', 'nom'];
var yum = document.createElement('p');
var msie = /*@cc_on!@*/0;
yum.style.opacity = 1;
var links = document.querySelectorAll('li > a'), el = null;
for (var i = 0; i < links.length; i++) {
el = links[i];
el.setAttribute('draggable', 'true');
addEvent(el, 'dragstart', function (e) {
e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
});
}
var bin = document.querySelector('#bin');
addEvent(bin, 'dragover', function (e) {
if (e.preventDefault) e.preventDefault(); // allows us to drop
this.className = 'over';
e.dataTransfer.dropEffect = 'copy';
return false;
});
// to get IE to work
addEvent(bin, 'dragenter', function (e) {
this.className = 'over';
return false;
});
addEvent(bin, 'dragleave', function () {
this.className = '';
});
addEvent(bin, 'drop', function (e) {
if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???
var el = document.getElementById(e.dataTransfer.getData('Text'));
el.parentNode.removeChild(el);
// stupid nom text + fade effect
bin.className = '';
yum.innerHTML = eat[parseInt(Math.random() * eat.length)];
var y = yum.cloneNode(true);
bin.appendChild(y);
setTimeout(function () {
var t = setInterval(function () {
if (y.style.opacity <= 0) {
if (msie) { // don't bother with the animation
y.style.display = 'none';
}
clearInterval(t);
} else {
y.style.opacity -= 0.1;
}
}, 50);
}, 250);
return false;
}); |
