Embed Size (px)
Citation preview
<!DOCTYPE>
<!DOCTYPE>
<!DOCTYPE>
<!DOCTYPE>SGML(Standard
Generalized Markup Language)
<article> <aside> <bdi> <command> <details> <summary>
<figure> <figcaption> <footer> <header> <hgroup> <mark> <meter> <nav> <progress> <ruby> <rt> <rp> <section> <time> <wbr>
<audio> <video> <source> <embed> <track>
<datalist> <keygen> <output>
<div id= "header">
<ul id="nav"> </ul>
</div>
<div id="content">
<div id="blogpost">
<h1>This is my Blogpost</h1>
<p>This is my first paragraph.</p>
</div>
</div>
<div id="sidebar" >
<div id="blogroll">
<p>My blogroll Content.</p>
</div>
</div>
<div id="footer">
<p>My Footer Content.</p>
</div>
<header>
<nav></nav>
</header>
<div id="content">
<article id="blogpost">
<section>
<h1>This is my Blogpost</h1>
<p>This is my first paragraph.</p> </section>
</article>
</div>
<div id="sidebar">
<aside id="blogroll">
<p>My blogroll Content.</p>
</aside>
</div>
<footer>
<p>My Footer Content.</p>
</footer>
Modernizr.video true
false
if (Modernizr.video) {
// let's play some video!
}
else
{
// no native video support available :(
}
HEADER:
<header>
<h1>Heading Text</h1>
<p> Text or images can be included here</p>
<p> Logos are frequently placed here too</p>
</header>
The <header> tag can also contain an <hgroup> tag, as shown. The <hgroup> tag
groups headings together, using the <h1> to <h6> heading levels
shown here with a main heading and a sub-heading. <header> <hgroup> <h1>Main Heading</h1> <h2>Sub-heading </h2> </hgroup> <p> Text or images can be included here</p> </header>
FOOTER:
The <footer> element contains information about a page, article, or section, such as
the author or date of the article.
As a page footer, it may contain copyright or other important legal information.
<footer>
<p>Copyright 2011 Acme United. All rights reserved.</p>
</footer>
The HTML5 specification says: ―A footer typically contains information about its
section such as
who wrote it, links to related documents, copyright data, and the like.‖
------------------------------------------------------------------------------------------------------------------
The Navigation area
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<menu>
<button type="button" >Clio</button>
<button type="button" >Thalia</button>
<button type="button">Urania</button>
<button type="button">Calliope</button>
</menu>
------------------------------------------------------------------------------------------------------------------ <section>
The <section> element is commonly misused. Most people would think of using the
section tag as a container block level element to contain a portion of the site. This is
incorrect.
The true way to use the section element is to think of it in terms of grouping specific
portions of content. Inside a section you may have multiple headings to further narrow
the focus of the section and there may be multiple sections inside a particular piece of
content.
The <section> tag—and the <article> tag, as well—can contain headers, footers, or
any other components required to complete the section. The <section> tag is for
grouping content. The content for both the <section> tag and the <article> tag usually
starts with a <header> and ends with a <footer>, with the content for the tag in
between.
The <section> tag can also contain <article> tags, just as the <article> tag can contain
the <section> tag
------------------------------------------------------------------------------------------------------------------
<article>
<section> Content </section>
<section> Content </section>
</article>
------------------------------------------------------------------------------------------------------------------
<section>
<article> Content </article>
<article> Content </article>
</section>
<aside>
<figure>
<figure> <figcaption><figure>
<figure>
<img src="koala.jpg" width="304" height="228"> <figcaption>Caption for the figure</figcaption>
</figure>
<aside>
Think of this tag as holding supplementary content that is not part of the flow of the
article it supplements. In magazines, asides are frequently used to highlight a point
that was made in the article itself. The <aside> tag contains content that can be
removed without affecting the information conveyed by the article, section, or page
that contains it.
<p>My family and I visited Euro Disney last year.</p>
<aside>
<h4>Disney in France</h4>
<p>Besides Euro Disney, there is a Disneyland in California.</p>
</aside>
• Input type= datetime global date-and-time input control
• input type = datetime-local local date-and-time input control
• input type = date date input control
• input type = month year-and-month input control
• input type = time time input control
• input type = week year-and-week input control
• input type = number number input control
• input type = range imprecise number-input control
• input type = email e-mail address input control
• input type = url URL input control
• input type = search search field
• input type = tel telephone-number-input field
• input type = color color-well control
•
Dojo jQuery UI YUI.
date, month, week, time, date + time, and
date+time–timezone.
• See Demos
How to solve the problem for browsers that doesn’t support new input types
Ex
<form>
<input type="date" id="idate">
</form>
...
<script>
var idate = document.getElementById("idate");
if (idate.type != "date")
{
$("#idate").datepicker(); // using jQuery UI
}
</script>
Input type Browsers
type="date"
type="month"
type="week"
type="time"
type="datetime"
type="datetime-local"
<input type="number" min="0" max="10" step="2" value="6"/>
type
min
max
step
value
if (!Modernizr.inputtypes.number) {
// no native support for type="number" fields
// maybe try Dojo or some other JavaScript framework
}
The latest versions of Safari, Chrome, and Opera all do this.
(Sadly, the iPhone renders it as a simple text box. It doesn’t even optimize its
onscreen keyboard for numeric input.)
All other browsers simply treat the field as type="text"
• <input type="email">
setCustomValidity().
• object.setCustomValidity("WRONG!!");
The email INPUT tag gives you a way to request email addresses in your web form.
In most web browsers, this won't look any different than a standard .
Where this field becomes important is on mobile devices that change their interface
for email address fields, such as the iPhone, iPad, and iPod.
On those devices, email form fields are given a different keyboard with things like
readily available @-key, period, and minimized spacebar.
placeholder
text,
search, url, tel, email password
<input placeholder="First and last name" required/>
list datalist
<datalist id="contactList">
<option value="[email protected]" label="Racer X">
<option value="[email protected]" label="Peter">
</datalist>
<input type="email" list="contactList">
To use this combination: 1. Create a datalistelement in your document with its id set to a unique value.
The datalist can be located anywhere in the document.
2. Populate the datalist with as many option elements as needed to represent
the full set of suggestions for values of a control.
For example, a datalist representing e-mail contacts should contain all of the contact
e-mail addresses as individual option children.
<datalist id="contactList">
<option value="[email protected]" label="Racer X">
<option value="[email protected]" label="Peter">
</datalist>
3. Link the input element to the datalistby setting the listattribute to a value
which is the idof the associated datalist.
<input type="email" id="contacts" list="contactList">
The valueMissing Constraint
Purpose: Ensure that some value is set on this form control
Usage: Set the requiredattribute on the form control to true
Usage example: <input type="text" name="myText" required> Details: If the required attribute is set on a form control, the control will be in an
invalid state unless the user or a programmatic call sets some value to the field.
For example, a blank text field will fail a required check, but will pass as soon as any
text is entered. When blank, the valueMissing will return true.
[email protected] [email protected]
What Is a Canvas?
When you use a canvas element in your web page, it creates a rectangular
area on the page.
By default, this rectangular area is 300 pixels wide and 150 pixels high, but
you can specify the exact size and set other attributes for your canvas
element.
<canvas id="myCanvas" width="200" height="100">
Your Browser Doesn’t Support Canvas
</canvas>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
if (canvas.getContext)
{
...
}
else{ // put code for browsers that don't support canvas here}
OR
if (Modernizr.canvas) {. . .}
else{// put code for browsers that don't support canvas here}
• <script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
[email protected] [email protected]
To programmatically use a canvas, you have to first get its
context.
You can then perform actions on the context and finally apply
those actions to the context.
You can think of making canvas modifications as similar to
database transactions: you start a transaction, perform certain
actions, and then commit the transaction.
fillStyle
fillRect(x,y,width,height)
strokeStyle fillStyle —
• strokeRect(x,y,width,height)
[email protected] [email protected]
EXAMPLE:
<script type="text/javascript">
function drawSquare () {
var canvas = document.getElementById('draw-square');
if (canvas.getContext) {
var context = canvas.getContext('2d');
context.fillStyle = "rgb(150,29,28)";
context.fillRect (2,2,96,96);
} else {
// put code for browsers that don't support canvas here
}
} </script>
[email protected] [email protected]
The first thing this script does is find the element with the
id draw-square:
var canvas = document.getElementById('draw-square');
Then it checks to see if the browser supports the context
method on this element.
This is an easy way to make sure that your canvas will only
display on browsers that support the tag.
if (canvas.getContext) { ... }
[email protected] [email protected]
The context is the rendering context that is used to manipulate
content that is displayed.
You should use a 2-dimensional (2d) rendering context. But in
the future, 3-dimensional context may be supported.
Once I have the context, I need to build my square with the two
lines:
context.fillStyle = "rgb(150,29,28)";
context.fillRect (2,2,96,96);
I created a square that is red (rgb(150,29,28)) and is positioned
2 pixels down and 2 pixels over and 96 pixels wide and high
(fillRect (2,2,96,96)).
Then, in the else section of my script, I can put any JavaScript I
want to display if the canvas element isn’t supported.
• fillRect(x,y,width,height):
strokeRect(x,y,width,height):
clearRect(x,y,width,height):
[email protected] [email protected]
Like other 2d platforms, it uses a flat Cartesian coordinate
system with the origin (0, 0) at the top left.
Moving to the right will increase the x value, and moving
downwards will increase the y value.
Understanding how the coordinate system works is integral if
you want to have things draw in the right place.
A single unit in the coordinate system is usually equivalent to 1
pixel on the screen, so the position (24, 30) would be 24 pixels
right and 30 pixels down.
• moveTo(x,y)
• lineTo(x,y)
stroke().
• closePath():
• lineWidth = 4:
• context.lineJoin='round‘ :
• drawImage(image, dx, dy)
(dx, dy)
(0,0)
• drawImage(image, dx, dy, dw, dh)
dw dh
(dx, dy).
• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
(sx, sy, sw, sh),
(dw, dh), (dx,
dy).
<img> Image
<canvas id="d" width="300" height="225"></canvas>
<script>
var d_canvas = document.getElementById("d");
var context = d_canvas.getContext("2d");
var my_gradient = context.createLinearGradient(0,0,300,0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);
</script>
var bg= new Image();
bg= "gravel.jpg";
bg.onload = function (){
.....
context.strokeStyle=context.createPattern(bg,'repeat')
.....
}
[email protected] [email protected]
As you can see, we are still calling stroke() for our path.
However, this time we have set a strokeStyle property on the
context first, passing in the result of a call to context.createPattern. and once again the image needs
to be previously loaded in order for the canvas to perform the
operation.
The second argument is a repetition pattern that can be one of
the choices :
repeat (Default) The image is repeated in both directions
repeat-x The image is repeated only in the X dimension
repeat-y The image is repeated only in the Y dimension
no-repeat The image is displayed once and not repeated
context.rotate(angle)
context.save();
// rotation angle is specified in radians
context.rotate(1.57);
context.drawImage(myImage, 0, 0, 100, 100);
context.restore();
[email protected] [email protected]
Both functions take the text as well as the location at which it
should be drawn.
Optionally, a maxwidth argument can be provided to constrain
the size of the text by automatically shrinking the font to fit the
given size.
• font
• textAlign
text-align
start, end, left, right, center.
• textBaseline
top, hanging, middle, alphabetic,
ideographic, and bottom.
[email protected] [email protected]
The top of the em square is roughly at the top of the glyphs in a
font, the hanging baseline is where some glyphs like ը are
anchored, the middle is half-way between the top of the
em square and the bottom of the em square, the alphabetic
baseline is where characters like Á, ÿ, f, and Ω are anchored,
the ideographic baseline is where glyphs like 私 and
達 are anchored
and the bottom of the em square is roughly at the bottom of the
glyphsin a font.
The top and bottom of the bounding box can be far from these
baselines, due
to glyphs extending far outside the em square
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})(); // call function after its declaration
function animate() {
// get canvas and its context
.....
// clear canvas context
context.clearRect(0, 0, canvas.width, canvas.height);
// draw stuff
.....
// request new frame
requestAnimFrame(function() {
animate();
});
}// end of animate function
<svg viewBox="0 0 320 240“ style=“border: 1px solid #999; width: 320px; height:240px;">
</svg>
<svg id="mysvg" viewBox="0 0 320 240" style="border: 1px solid #999; width: 320px; height:240px;">
<rect x="50" y="50" width="100" height="100“ style="fill: rgb(255,0,0)">
</rect>
<line x1="50" y1="50" x2="150" y2="150"
style="stroke: rgb(0,127,127); stroke-width: 5;">
</line>
<circle cx="165" cy="100" r="50"
style="fill:rgb(0,255,0);">
</circle>
</svg>
<polygon points="265,50 315,150 215,150"
style="stroke: rgb(51,51,51); fill: rgb(204,204,204);
stroke-width: 5;">
</polygon>
<rect x="50" y="50" width="100" height="100"
fill="rgb(255,0,0)"></rect>
<line x1="50" y1="50" x2="150" y2="150"
stroke="rgb(0,127,127)" stroke-width="5"></line>
<image x="10" y="10"
width="236" height="260"
xlink:href="example.png">
</image>
xlink:href
<audio>
– The <audio> tag identifies sound content, such as music or any other audio
streams.
– The <audio> tag has attributes that control what, when, and how audio will be played. The attributes are src, preload, controls, loop, and autoplay.
<audio src="MyFirstMusic.ogg" controls autoplay loop>
Your browser does not support the audio tag.
</audio>
<source>
<source>
– The <video> and <audio> tags can contain the <source> tag, which
defines multimedia resources for <video> and <audio>tags.
– With this element, you specify alternative video and audio files from
which the browser can then choose based on its media type or codec
support.
<audio controls>
<source src="MyFirstAudio.ogg" />
<source src=" MyFirstAudio.mp3" />
<p>Your browser does not support the audio tag</p>
</audio>
Browser MP3 Wav Ogg
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES YES NO
Opera 10.6 NO YES YES
<audio>
<video> <video>
– allows you to broadcast video clips or streaming visual media.
– It has all the attributes of the <audio> tag plus three more: poster, width,
and height.
– The poster attribute lets you identify an image to be used while the video is
loading or in the case when the video won't load at all.
<video src="MyFirstMovie.ogg" controls="controls">
Your browser does not support the video tag
</video>
• Problems:
<video>
<video>
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240"> </object> </video>
navigator
navigator.geolocation
function get_location() {
navigator.geolocation.getCurrentPosition(show_map);
}
if (Modernizr.geolocation)
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// let's show a map or do something interesting!
}
coords timestamp
getCurrentPosition(callback function)
(Since this is all happening asynchronously, you can’t really
know when that will happen in advance.
It might take some time for the user to read the info bar and agree to share
her location, devices with dedicated GPS hardware may take some more
time to connect to a GPS satellite, and so on.)
position.coords
position.coords
Property Type Notes
coords.latitude double Decimal degrees
coords.longitude double Decimal degrees
coords.altitude doubleor null Meters above the reference ellipsoid
coords.accuracy double Meters
coords.altitudeAccuracy doubleor null Meters
coords.heading doubleor null Degrees clockwise from true north
coords.speed doubleor null Meters/second
Only three of the properties are guaranteed to be there (coords.latitude,
coords.longitude, and coords.accuracy).
The rest might come back as null, depending on the capabilities of your
device and the backend positioning server with which it communicates.
The headingand speedproperties are calculated based on the user’s
previous position, if possible.
getCurrentPosition()
navigator.geolocation.getCurrentPosition(
show_map, handle_error).
PositionError
code message
getCurrentPosition()
PositionOptions
PositionOptions
• enableHighAccuracy
• timeout
• maximumAge
Ex: navigator.geolocation.getCurrentPosition(
success_callback, error_callback, {maximumAge: 75000});
What you’re saying is that you don’t necessarily need the user’s
currentlocation.
You would be satisfied with knowing where he was 75 seconds (75000
milliseconds) ago.
geolocation
<script
src=" http://maps.google.com/maps/api/js?sensor=false">
</script>
var map = new
google.maps.Map(document.getElementById("map_div"), myOptions);
//the div to display on , and options for map
var myOptions = {
zoom: 8, //the zoom level 0 to 21
center: new google.maps.LatLng(latitude, longitude),
//the center of map displayed
mapTypeId: google.maps.MapTypeId.ROADMAP
//Map Type
}
window.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’);
myFirstValue myFirstKey
getItem
alert(window.sessionStorage.getItem(‘myFirstKey’));
window.sessionStorage.myFirstKey = ‘myFirstValue’;
alert(window.sessionStorage.myFirstKey);
sessionStorage localStorage
Values persist only as long as
the window or tab in which
they were stored
Values persist beyond window and
browser lifetimes.
Values are only visible within
the window or tab that created
them.
Values are shared across every window
or tab
running at the same origin.
postMessage()
onmessage
event.data
onmessage = function myFunction(event)
{
event.data;
……
postMessage('a message to the parent page');
}
myWorkers.js
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ......2.1.55 [HTML5] Section 4.9.5 The tbody element ..... 55 2.1.56 [HTML5] Section 4.9.8 The tr element..... 55 2.1.57 [HTML5]](https://img.dokumen.tips/doc/110x75/5fb29d840f1bb936bf5a22fb/ms-html5-microsoft-edge-internet-explorer-html5-2155-html5-section.jpg)
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ...interoperability.blob.core.windows.net/web/MS-HTML5/[MS-HTML5].pdf · Microsoft Edge / Internet Explorer HTML5 Standards Support](https://img.dokumen.tips/doc/110x75/5a903bb67f8b9a4a268e1ade/ms-html5-microsoft-edge-internet-explorer-html5-ms-html5pdfmicrosoft.jpg)
