HTML5 CSS3 Introduction

最新推荐文章于 2024-10-13 19:30:05 发布

reachlimit

最新推荐文章于 2024-10-13 19:30:05 发布

阅读量1.1k

点赞数

文章标签： html5 css input standards action function

本文链接：https://blog.csdn.net/reachlimit/article/details/6770098

版权

HTML 5 Pros & Cons

•Pros

–It is standard but it is still a draft

–Easy to use

–Less code/less bug

•Cons

–Browser compatibility

–Hard to fix if find bug

Design Principles

Principles should be balanced against each other

•Compatibility

–Support Existing Content

•broken markup: <b>a<i>b</b>c</i>

•underline: <u>

–Degrade Gracefully

•<canvas> fallback </canvas>: older browser show content “fallback” while new browser supporting canvas

–Do not Reinvent the Wheel

•contenteditable=""

–Pave the Cowpaths

•<br/> (already used widly) <br>

–Evolution Not Revolution

•don't have to learn new models

•content will live longer

•XML vs HTML

•Utility

–Solve Real Problems

•No abstract architectures

–Priority of Constituencies

•users>authors>implementors>specifiers>theoretical purity

•consider costs or difficulties to the user first

–Secure By Design

•Communicating between documents from different sites is useful, but an unrestricted version could put user data at risk. Cross-document messaging is designed to allow this without violating security constraints.

–Separation of Concerns

•<article>: separation of content and presentation

– DOM Consistency

•DOM trees produced by parsers appear as consistently as feasible to scripts

•Interoperability

–Well-defined Behavior

–Avoid Needless Complexity

–Handle Errors

•Universal Access

–Media Independence

–Support World Languages

•Supporting Unicode

–Accessibility

•Design features to be accessible to users with disabilities

•img alt=“This is a image description”

View More: http://dev.w3.org/html5/html-design-principles/

•HTML syntax

<!doctype html>

<html>

<head>

<title>Example document</title>

</head>

<body>

<p>Example paragraph</p>

</body>

</html>

XML syntax

<?xml version="1.0" encoding="UTF-8"?>

<head>

<title>Example document</title>

</head>

<body>

<p>Example paragraph</p>

</body>

</html>

•The DOCTYPE

–Declaration : <!DOCTYPE html>

–browser renders the page in standards mode

–For xml syntax, no need this. Always handled in standards mode

The Modes (Modes for text/html Content)

Quirks Mode

Standards Mode (HTML5 calls it “no quirks mode”)

Almost Standards Mode (HTML5 calls it “limited quirks mode”)

IE7 Mode

IE8 Standards Mode

IE8 Almost Standards Mode

The Effects

Layout

Parsing

Scripting

More Info for [doctype]

•Character Encoding

–At the transport level. By using the HTTP Content-Type header for instance.

–Using a Unicode Byte Order Mark (BOM) character at the start of the file (EF BB BF).

–Using a meta element. E.g. <meta charset="UTF-8">. Older usage: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> is still allowed.

•Without Encoding?

– Bad things will be happen

•MathML and SVG

–The HTML syntax of HTML5 allows for MathML and SVG elements to be used inside a document

<!doctype html>

<p>

A green circle:

</p>

HTML5 Language

•New Elements

•New Attributes

•Changed Elements

•Changed Attributes

•Absent Elements

•Absent Attributes

HTML5 Language-New Elements

•Introduced for better structure

– section

– article

– A side

– hgroup

– header

– footer

– nav

– figcaption

•Other new elements

– video and audio.

– track provides text tracks for the video element.

– embed is used for plugin content.

– mark

– progress

– meter

– time

– ruby, rt, and rp allow for marking up ruby annotations.

– wbr represents a line break opportunity.

– canvas

– command

– details

– datalist together with the a new list attribute for input can be used to make comboboxes:

– keygen represents control for key pair generation.

– output represents some type of output, such as from a calculation done through scripting.

<!doctype html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Example document</title>

  </head>

  <body>

  	<table border="1">

  		<tr>

  			<th>

  				Element

  			</th>

  			<th>

  				Demo

  			</th>

  		</tr>

  		<tr>

  			<td>

  				mark

  			</td>

  			<td>

  				<mark>This is marked text</mark>

  			</td>

  		</tr>

  		<tr>

  			<td>

  				progress

  			</td>

  			<td>

  				<progress></progress>

  				<br>

  				<progress value="0" max="100" min="0" id="pro"/>

					<script type="text/javascript">

					var prog=0;

					var myprogress = document.getElementById('pro');

					function myhandler(){

					 prog++;

					 myprogress.value=prog;

					 if(prog>=100)

					  clearInterval(timer);

					}

					var timer = setInterval(myhandler,100);

					</script>

  			</td>

  		</tr>

  		<tr>

  			<td>

  				meter

  			</td>

  			<td>

  				<meter value="2" min="0" max="10">2 out of 10</meter><br />

					<meter value="0.6">60%</meter>

  			</td>

  		</tr>

  		<tr>

  			<td>

  				time

  			</td>

  			<td>

		  		<p>

						We open at <time>10:00</time> every morning.

					</p>



					<p>

					I have a date on <time datetime="2008-02-14">Valentines day</time>

					</p>

  			</td>

  		</tr>  		

  		<tr>

  			<td>

  				ruby

  			</td>

  			<td>

					<ruby>

						Ruby<rt>['ru:bi]</rt>

					</ruby>

  			</td>

  		</tr>  	

  		<tr>

  			<td>

  				bdo

  			</td>

  			<td>					

					<bdo dir="rtl">

					Here is some text written from right-to-left.

					</bdo>

				</td>

  		</tr>  	

  		<tr>

  			<td>

  				wbr

  			</td>

  			<td>					

					<div style="width:200px">

						To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request (XMLHttpRequest) Object.

					</div>

				</td>

  		</tr>

  		<tr>

  			<td>

  				canvas

  			</td>

  			<td>					

					<canvas id="myCanvas">your browser does not support the canvas tag </canvas>

					

					<script type="text/javascript">

					

					var canvas=document.getElementById('myCanvas');

					var ctx=canvas.getContext('2d');

					ctx.fillStyle='#FF0000';

					ctx.fillRect(0,0,80,100);

					</script>

				</td>

  		</tr>

  		<tr>

  			<td>

  				details

  			</td>

  			<td>					

					<details>

					<summary style="background-color:#1183f8; width:50%">HTML 5</summary>

					<ul>

					<li>

					This is test 1

					</li>

					<li>

					This is test 2

					</li>

					<li>

					This is test 3

					</li>

					<li>

					This is test 4

					</li>

					</ul>

					</details>

				</td>

  		</tr>

  		<tr>

  			<td>

  				datalist(FireFox)

  			</td>

  			<td>					

					<input list="browsers"> <datalist id="browsers"> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"> </datalist>

				</td>

  		</tr>

  		<tr>

  			<td>

  				keygen

  			</td>

  			<td>					

					<a href="http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_keygen" target="_blank">keygen demo</a>

				</td>

  		</tr>



  	</table>  	

  </body>

</html>

•The input element's type attribute now has the following new values:

– tel

– search

– url

– email

– datetime

– date

– month

– week

– time

– datetime -local

– number

– range

– color

Please open demo in Chrome

<!doctype html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Example document</title>

  </head>

  <body>

  	<table border="1">

  		<tr>

  			<th>

  				Type

  			</th>

  			<th>

  				Demo

  			</th>

  		</tr>

  		<tr>

  			<td>

  				tel

  			</td>

  			<td>

  				<form action="demoTel">

					Mobile: <input type="tel" name="user_mobile" title="This is title attribute for tel input" /><br />

					<input type="submit" />

					</form>

  			</td>

  		</tr>

  		<tr>

  			<td>

  				search

  			</td>

  			<td>

  				<form action="demoSearch" title="search title">

					Search: <input type="search" name="keywords" placeholder="input your keywords here" required /><br />

					<input type="submit" />

					</form>

					<!--another input <input form="demoSearch" name="default" value="search" />-->

  			</td>

  		</tr>

  		<tr>

  			<td>

  				url

  			</td>

  			<td>

  				<form action="demoUrl">

					Input your url: <input type="url" name="urlname" placeholder="http://www.ebay.com" autofocus=true /><br />

					<input type="submit" />

					</form>

					<form action="demoUrl" novalidate="novalidate">

					Input your url (novalidate): <input type="url" name="urlname" placeholder="http://www.ebay.com" autofocus=true /><br />

					<input type="submit" />

					</form>

  			</td>

  		</tr>

  		<tr>

  			<td>

  				email

  			</td>

  			<td>

		  		<form action="">

					Email: <input type="email" name="email" placeholder="ywang2@ebay.com" autofocus=true form="demoEmail demoSearch demoUrl" /><br />

					<input type="submit" />

					</form>

  			</td>

  		</tr>  		

  		<tr>

  			<td>

  				datetime

  			</td>

  			<td>

					<form action="demo">

					Datetime: <input type="datetime" name="dt" placeholder="2011-09-06T00:28Z" /><br />

					<input type="submit" />

					</form>

  			</td>

  		</tr>  	

  		<tr>

  			<td>

  				date

  			</td>

  			<td>					

					<form action="demo">

					Date: <input type="date" name="date" placeholder="2011-09-06" /><br />

					<input type="submit" />

					</form>

				</td>

  		</tr>  	

  		<tr>

  			<td>

  				month

  			</td>

  			<td>					

					<form action="demo">

					Month: <input type="month" name="m" placeholder="2011-10" /><br />

					<input type="submit" />

					</form>

				</td>

  		</tr>

  		<tr>

  			<td>

  				week

  			</td>

  			<td>					

					<form action="demo">

					Week: <input type="week" name="w" placeholder=2011-W37 /><br />

					<input type="submit" />

					</form>

				</td>

  		</tr>

  		<tr>

  			<td>

  				time

  			</td>

  			<td>					

					<form action="demo">

					Time: <input type="time" name="time" placeholder="08:32" /><br />

					<input type="submit" />

					</form>

				</td>

  		</tr>

  		<tr>

  			<td>

  				datetime-local

  			</td>

  			<td>					

					<form action="demo">

					<input type="datetime-local" name="dtl" /><br />

					<input type="submit" />

					</form>

				</td>

  		</tr>

  		<tr>

  			<td>

  				number

  			</td>

  			<td>					

					<form action="demo">

					<input type="number" name="number" min=0 max=10 step=2 value=3 /><br />

					min=0 max=10 step=2

					<input type="submit" />

					</form>

				</td>

  		</tr>

			<tr>

  			<td>

  				range

  			</td>

  			<td>					

					<form action="demo">

					<input type="range" name="range" min=0 max=30 step=1 value=0 /><br />

					<input type="submit" />

					</form>

				</td>

  		</tr>

  		<tr>

  			<td>

  				color

  			</td>

  			<td>					

					<form action="demo">

					<input type="color" name="color" /><br />

					<input type="submit" />

					</form>

				</td>

  		</tr>

  		<tr>

  			<td>

  				fieldset (disabled works in FF)

  			</td>

  			<td>					

					<form>

					  <fieldset name="flds" disabled="disabled" >

					    <legend>Information:</legend>

					    Name: <input type="text" /><br />

					    Email: <input type="text" /><br />

					    Date of birth: <input type="text" />

					  </fieldset>

					</form>

				</td>

  		</tr>

  		<tr>

  			<td>

  				pattern

  			</td>

  			<td>					

					<form action="demo">

					Input with regular expression

					<input id=��ptn��  pattern=^\d{4}\-\d{1,2}-\d{1,2} placeholder="2011-09-09" />

					<input type="submit" />

					</form>

				</td>

  		</tr>

  	

  	</table>  	

  </body>

</html>

HTML5 Language-New Attributes

New Attribute	Apply to
media	a, area
hreflang, type and rel	area
target	base
charset	meta
autofocus	input (except when the type attribute is hidden), select, textarea and button
placeholder	input and textarea
form	input, output, select, textarea, button, label, object and fieldset
required	input (except when the type attribute is hidden, image or some button type such as submit), select, textarea
autocomplete ( In some browsers you may need to activate the autocomplete function for this to work.), min, max, multiple(types: email, and file),list,pattern and step	input
maxlength and wrap	textarea
formaction, formenctype, formmethod, formnovalidate, and formtarget	input and button (override same attributes on the form element)
scoped (Style rules within such a style element only apply to the local tree)	style
async	script (async="true": execute asynchrously with the rest of the page, so the script will be executed while the page continues the parsing. async="false"&defer="true": execute when the page is finished with the parsing. async="false"&defer="false": execute immediately, and the page will wait for the script to finish before continuing the parsing.)
reversed (list order is descending)	ol
accesskey, class, dir, id, lang, style, tabindex and title	global attributes

More…

HTML5 Language-Changed & Absent

HTML5 Microdata

•Non-normative

•Machine-readable labels

•Semantic Web

•Consumers:

–User agent (browsers..)

–Search Engine

•Microdata Data Model

•Microdata Example

<p>Name: <span itemprop="name">Amanda</span></p>

<p>Band: <span itemprop="band" itemscope> <span itemprop="name">Jazz Band</span> (<span itemprop="size">12</span> players)</span></p>

</div>

The outer item here has two properties, "name" and "band". The "name" is "Amanda", and the "band" is an item in its own right, with two properties, "name" and "size". The "name" of the band is "Jazz Band", and the "size" is "12".

More…

•Another Example

<!DOCTYPE HTML>

<html>

<head>

<title>Photo gallery</title>

</head>

<body>

<h1>My photos</h1>

<figcaption itemprop="title">The house I found.</figcaption>

</figure>

<figcaption itemprop="title">The mailbox.</figcaption>

</figure>

<p id="licenses">All images licensed under the <a itemprop="license"

href="http://www.opensource.org/licenses/mit-license.php">MIT

license</a>.</p>

</footer>

</body>

</html>

The results in two items with the type "http://n.whatwg.org/work", one with:

work

images/house.jpeg

title

The house I found.

license

http://www.opensource.org/licenses/mit-license.php

...and one with:

work

images/mailbox.jpeg

title

The mailbox.

license

http://www.opensource.org/licenses/mit-license.php

More…

HTML5 Offline Web applications

Non-normative

<!DOCTYPE HTML>

<html>

<head>

<title>Clock</title>

</head>

<body>

</body>

</html>

/* clock.css */

output { font: 2em sans-serif; }

/* clock.js */

setTimeout(function () {

document.getElementById('clock').value = new Date();

}, 1000);

The author can instead provide a manifest of the three files, say "clock.appcache":

CACHE MANIFEST

clock.html

clock.css

clock.js

<!DOCTYPE HTML>

<head>

<title>Clock</title>

</head>

<body>

</body>

</html>

With the exception of "no-store" directive, HTTP cache headers and restrictions on caching pages served over TLS (encrypted, using https:) are overridden by manifests. Thus, pages will not expire from an application cache before the user agent has updated it, and even applications served over TLS can be made to work offline.

HTML5 Web workers

•running scripts in the background independently of any user interface scripts.

•heavy-weight and not intended to be used in large numbers

•long-lived

•high start-up performance cost

•high per-instance memory cost

Example:

<!DOCTYPE HTML>

<html>

<head>

<title>Worker example: One-core computation</title>

</head>

<body>

<p>The highest prime number discovered so far is: <output id="result"></output></p>

var worker = new Worker('worker.js');

worker.onmessage = function (event) {

document.getElementById('result').textContent = event.data;

};

</script>

</body>

</html>

Example:

The worker itself is as follows:

var n = 1;

search: while (true) {

n += 1;

for (var i = 2; i <= Math.sqrt(n); i += 1)

if (n % i == 0)

continue search;

// found a prime!

postMessage(n);

}

View this example online.

HTML5 Communication

• Event definitions

• Server-sent events

• Web sockets

• Cross-document messaging

• Channel messaging

• Event definitions

–event . data Returns the data of the message.

–event . origin Returns the origin of the message, for server-sent events and cross-document messaging.

–event . lastEventId Returns the last event ID string, for server-sent events.

–event . source Returns the WindowProxy of the source window, for cross-document messaging.

–event . ports Returns the MessagePort array sent with the message, for cross-document messaging and channel messaging.

• Server-sent events

var source = new EventSource('updates.cgi');

source.onmessage = function (event) { alert(event.data); };

On the server-side, the script ("updates.cgi" in this case) sends messages in the following form, with the text/event-stream MIME type:

data: This is the first message.

data: This is the second message, it

data: has two lines.

data: This is the third message.

More Information…

• Web sockets

–bidirectional communications

Event handler	Event handler event type
onopen	open
onmessage	message
onerror	error
onclose	close

var socket = new WebSocket('ws://game.example.com:12010/updates');

socket.onopen = function () {

setInterval(function() {

if (socket.bufferedAmount == 0)

socket.send(getUpdateData());

}, 50);

};

• Cross-document messaging

–Cross-site scripting is disallowed

–Introduce messaging system to allow cross document messaging

–Limited within one browsing context

Document A:

var o = document.getElementsByTagName('iframe')[0]; o.contentWindow.postMessage('Hello world', 'http://b.example.org/');

Document B:

window.addEventListener('message', receiver, false);

function receiver(e) {

if (e.origin == 'http://example.com') {

if (e.data == 'Hello world') { e.source.postMessage('Hello', e.origin); }

else { alert(e.data); }

}

• Channel messaging

–Communicate with different browsing contexts (e.g different document in tabs)

–Two-ways pipes

–Messages are asynchronous

–Delivered as DOM events

channel = new MessageChannel()

Returns a new MessageChannel object with two new MessagePort objects.

channel . port1

Returns the first MessagePort object.

channel . port2

Returns the second MessagePort object.

One of the ports is kept as the local port, and the other port is sent to the remote code, e.g. using postMessage():

otherWindow.postMessage('hello', 'http://example.com', [channel.port2]);

To send messages, the postMessage() method on the port is used:

channel.port1.postMessage('hello');

To receive messages, one listens to message events:

channel.port1.onmessage = handleMessage;

function handleMessage(event) {

// message is in event.data

// ...

}

HTML5 Web storage

•Cookie is not enough

•sessionStorage

•localStroage

•Storage

interface Storage {

readonly attribute unsigned long length;

DOMString? key(unsigned long index);

getter DOMString getItem(DOMString key);

setter creator void setItem(DOMString key, DOMString value);

deleter void removeItem(DOMString key);

void clear();

};

–Security: same origin policy

–Online demo: local storage

–Possible usage: local tracking of user behavior

HTML5 Geolocation

•Geolocation

–Example:

function showMap(position) {

// Show a map centered at (position.coords.latitude, position.coords.longitude).

}

// One-shot position request.

navigator.geolocation.getCurrentPosition(showMap);

More Information…

CSS3

•Selectors Module

•Color Module

•Text Module

•Backgrounds and Borders Module

•Box Module

•Font Module

•Transforms Module

•Speech Module

•……

•Selectors grammar

–*: 0 or more

–+: 1 or more

–?: 0 or 1

–|: separates alternatives

–[ ]: grouping

Details

•Name space Module

–Use terminology defined in Namespaces in XML 1.0

•Example

–@namespace empty ""; @namespace "";

•elem == |elem == empty|elem (these selectors are equivalent)

–@namespace "http://www.w3.org/1999/xhtml";

•Define a default name space

–@namespace svg http :// www.w3.org/2000/svg

•Define a name space named “svg”

–@namespace Q "http://example.com/q-markup"; @namespace lq "http://example.com/q-markup";

•Define two name spaces but they are equivalent.

•Q|elem == lq|elem

• More Information here …

•Conditional Rules Module

–Example:

•@media print { #navigation { display: none } }

–When used for print medium, navigation is invisible

•@document url("http://www.example.com/") { #example1 { display: none } }

–Only apply the style on page:http://www.example.com/

More Information here…

•Color

–Basic color keywords

•red, blue, yellow…

–RGB color

•em { color: rgb(255,0,0) } /* integer range 0 - 255 */

–HSL color

•* { color: hsl(120, 100%, 50%) } /* lime */

• h sl color online demo

•Ruby Module

•Ruby box model

•Text Online demo

•Backgrounds Online demo

•Borders Online demo

•Box Online demo

•Font Online demo

•Transforms Online demo

•Speech (TTS): demo

Resources

1. http://diveintohtml5.org/

2. http://www.w3schools.com/html5/default.asp

3. http://www.w3schools.com/css3/default.asp

4. http://dev.w3.org/html5/markup-spec/

5. http://dev.w3.org/html5/markup/

6. http://www.whatwg.org/specs/web-apps/current-work/complete/index.html#contents

7. http://www.w3.org/TR/#tr_CSS

8. http://downloads.sixrevisions.com/css-tooltips/index.html

9. http://www.webdesignerwall.com/demo/css3-dropdown-menu/

10. http://westciv.com/tools/transforms/index.html

11. http://www.westciv.com/tools/box-properties/index.html

12. http://coding.smashingmagazine.com/2010/06/17/start-using-css3-today-techniques-and-tutorials/

Here is PDF version of this topic. HTML5 CSS3 Introduction
Please be noted that some examples do not work in this document.