view sourceprint?
1.var theDiv = document.getElementById('myDiv');
2.var attr = theDiv.getAttribute('data-custom-attr');
3.alert(attr); // My Val
CSS, , .
view sourceprint?
01.<!DOCTYPE html>
02.
03.<html lang="en">
04.<head>
05.<meta charset="utf-8">
06.<title>Sort of Lame CSS Text Changing</title>
07.<style>
08.
09.h1 { position: relative; }
10.h1:hover { color: transparent; }
11.
12.h1:hover:after {
13.content: attr(data-hover-response);
14.color: black;
15.position: absolute;
16.left: 0;
17.
18.}
19.</style>
20.</head>
21.<body>
22.
23.<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me </h1>
24.
25.</body>
26.</html>
JSBIN.
Output
, , , output . , , output.
, , JavaScript, output, (submit).
view sourceprint?
01.<form action="" method="get">
02.<p>
03.10 + 5 = <output name="sum"></output>
04.</p>
05.<button type="submit"> Calculate </button>
06.</form>
07.
08.<script>
09.(function() {
10.var f = document.forms[0];
11.
12.if (typeof f['sum']!== 'undefined') {
13.f.addEventListener('submit', function(e) {
14.f['sum'].value = 15;
15.e.preventDefault();
16.}, false);
17.}
18.else { alert('Your browser is not ready yet.'); }
19.})();
20.</script>
.
, , , . , Opera, . , . , "sum", 15, , , .
for, , output, , label.
Range Input
HTML5 input range.
view sourceprint?
1.<input type="range">
, min, max, step value . , , Opera , , !
, , "Total Recall". , , .
|
|
|
1:
.
view sourceprint?
1.<form method="post">
2.<h1> Total Recall Awesomness Gauge </h1>
3.<input type="range" name="range" min="0" max="10" step="1" value="">
4.<output name="result"> </output>
5.</form>
, min max, , . step 1, 10 . output .
2: CSS
. :before :after, , .
view sourceprint?
01.body {
02.font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;
03.text-align: center;
04.}
05.input { font-size: 14px; font-weight: bold; }
06.
07.input[type=range]:before { content: attr(min); padding-right: 5px; }
08.input[type=range]:after { content: attr(max); padding-left: 5px;}
09.
10.output {
11.display: block;
12.font-size: 5.5em;
13.font-weight: bold;
14.}
range input, .
3: JavaScript
, :
, , range input. , , .
output, .
, , .
, , , range output , .
view sourceprint?
01.(function() {
02.var f = document.forms[0],
03.range = f['range'],
04.result = f['result'],
05.cachedRangeValue = localStorage.rangeValue? localStorage.rangeValue: 5;
06.
07.// Determine if browser is one of the cool kids that
08.// recognizes the range input.
09.var o = document.createElement('input');
10.o.type = 'range';
11.if (o.type === 'text') alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');
12.
13.// Set initial values of the input and ouput elements to
14.// either what's stored locally, or the number 5.
15.range.value = cachedRangeValue;
16.result.value = cachedRangeValue;
17.
18.// When the user makes a selection, update local storage.
19.range.addEventListener("mouseup", function() {
20.alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");
21.localStorage? (localStorage.rangeValue = range.value): alert("Save data to database or something instead.");
22.}, false);
23.
24.// Display chosen value when sliding.
25.range.addEventListener("change", function() {
26.result.value = range.value;
|
|
|
27.}, false);
28.
29.})();
? , ; !
, . Opera.
div span
<div align=?> HTML . </div>. align : left - ; right - ; center - ; justify - . Title . Style .
<div ALIGN="LEFT"> </DIV>
< div ALIGN="RIGHT"> </DIV>
< div ALIGN="CENTER"> </DIV>
< div ALIGN="JUSTIFY"> </DIV>
div . , .
:
<div style="background: #ff0000;"> </div>
<div style="text-align:center;"> </div>
, . , <div> class id.
<div class="block1"></div>
div:
<div class = _> </div>
dir = rtl, lt> </div>
<div id = id > id </div>
<div lang =_> </div>
<div style =_> </div>
<div title = > </div>
<span> . , <table>, <p> <div>, <span> . , ( <p>) , <span> . , , class id .
<span>...</span>
, Web-, . , , . , <title> </title>, , - keywords description.
HTML- <head> </head> :
<META HTTP-EQUIV="" CONTENT="">
<META NAME="" CONTENT="">
HTTP-EQUIV . :
Expires : , , . "0" . :
|
|
|
<meta http-equiv="expires" content="sun, 3 april 2011
9 05:45:15 gmt">
Pragma . no-cache.
Content-Type . (charset). :
<meta http-equiv="content-type" content="text/html; charset=windows-1251>
Content-language . Accept-Language ( ) Content-language .
<meta http-equiv="content-language" content="en-gb">
Refresh , . .
<meta http-equiv="refresh" content="3 url=http://www.bsu.iba.by ">
Window-target ; .
<meta http-equiv="window-target" content="_top">
Ext-cache
<meta http-equiv="ext-cache" content= "name=/some/path/index.db; istructions=user nstructions">
name.
<meta name="robots" content="noindex">
: all, none, index, noindex, follow, nofollow.
Description . .
<meta name="description" content= " meta">
Keywords . title .
<meta name="keywords" content=", , ">
Document-state . , .
<meta name="document-state" content="static">
: static, dynamic.
URL . , .
<meta name="url" content="absolute_url">
Author , .
Generator , .
Copyright .
Resource-type . : document, .
HTML 5
HTML5 World Wide Web Consortium (W3C) Web Hypertext Application Technology Working Group (WHATWG).
2006 HTML. HTML5 HTML, CSS, DOM, and JavaScript
HTML5 :
canvas
video audio
storage-
like article, footer, header, nav, section-
like calendar, date, time, email, url, search-
HTML 5 - . HTML 4.01 Adobe Flash Player, HTML 5 video audio.
|
|
|
<video src="video.mp4" controls><⁄video>
<audio src="The Imperial March.mp3" controls></audio>
<audio> <video> - .
. HTML5 <audio>. , , . HTML5 . , , .
view sourceprint?
1.<audio autoplay="autoplay" controls="controls">
2.<source src="file.ogg" />
3.<source src="file.mp3" />
4.<a href="file.mp3">Download this file.</a>
5.</audio>
Mozilla Webkit , . Firefox .ogg , Webkit .mp3. , , , .
Safari , .ogg , mp3. , , IE, , , Opera 10 .wav.
<audio>, , , HTML5 ! , , YouTube HTML5 , . , , HTML5 , . , Safari Internet Explorer 9 H.264 ( Flash ), Firefox Opera Theora Vorbis. , HTML5 , .
view sourceprint?
1.<source src="cohagenPhoneCall.ogg" type="video/ogg; codecs='vorbis, theora'" />
2.<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
3.<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
4.</video>
Chrome "ogg", "mp4"
:
1. type; , , . , .
2. HTML5 . Flash- . .
3. controls preload .
Preload
preload , . , , , . ? , , , . preload="preload", preload. , .
view sourceprint?
1.<video preload>
Controls
, , , , , , - . , controls video.
view sourceprint?
1.<video preload controls>
, -.
, 2D- . HTML 5
<canvas> . - , - , , 3D. WebGL. , "Canvas" , . "Web Workes", - .
|
|
|
. cookies. WebStorage 10 . - .
HTML 5 . iFrame ( ). , . iFrame Sandbox, .
- Web Forms 2.0. , . : like calendar, date, time, email, url, search
HTML5 :
section: , h1-h6, ;
article: ;
aside: , ;
header: , , ;
footer: ();
nav: ;
dialog: - ;
figure: , , .
HTML 5
| <!-- --> | |
| <!DOCTYPE> | |
| <a> </a> | |
| <abbr> </abbr> | |
| <acronym> </acronym> | HTML 5 |
| <address> </address> | |
| <applet> </applet> | HTML 5 |
| <area /> | e |
| <article> </article> | HTML o |
| <aside> </aside> | HTML |
| <audio> </audio> | |
| <b> </b> | |
| <basefont> | HTML 5 |
| <bdo> </bdo> | |
| <big> </big> | HTML 5 |
| <blockquote></blockquote> | |
| <body> </body> | |
| <br /> | |
| <button> </button> | |
| <caption> </caption> | |
| <center> </center> | HTML 5 |
| <cite> </cite> | |
| <code> </code> | |
| <col /> | |
| <colgroup> </colgroup> | |
| <command> </command> | |
| <datalist> </datalist> | HTML |
| <dd> </dd> | |
| <del> </del> | |
| <details> </details> | |
| <dialog> </dialog> | |
| <dfn> </dfn> | |
| <dir> </dir> | HTML 5 |
| <div> </div> | |
| <dl> </dl> | |
| <dt> </dt> | O |
| <em> </em> | |
| <embed /> | |
| <fieldset> </fieldset> | |
| <figure> </figure> | HTML |
| <font> </font> | HTML 5 |
| <footer> </footer> | |
| <form> </form> | HTML |
| <frame /> | HTML 5 |
| <frameset> </frameset> | HTML 5 |
| <h1> </h1> <h6> </h6> | |
| <head> </head> | , |
| <header> </header> | |
| <hgroup> </hgroup> | |
| <hr /> | |
| <html> </html> | HTML |
| <i> </i> | |
| <iframe> </iframe> | |
| <img /> | |
| <input /> | e , |
| <ins> </ins> | |
| <kbd> </kbd> | |
| <label> </label> | e <input /> |
| <legend> </legend> | <fieldset> </fieldset> |
| <li> </li> | () |
| <link /> | |
| <map> </map> | |
| <mark> </mark> | |
| <menu> </menu> | - |
| <meta /> | |
| <nav> </nav> | |
| <noframes> </noframes> | HTML 5 |
| <noscript> </noscript> | |
| <object /> | web- |
| <ol> </ol> | () |
| <optgroup> </optgroup> | <option> </option> |
| <option> </option> | |
| <p> </p> | |
| <param /> | |
| <pre> </pre> | |
| <q> </q> | |
| <s> </s> | HTML 5 |
| <samp> </samp> | |
| <script> </script> | |
| <section> </section> | HTML |
| <select> </select> | |
| <small> </small> | |
| <span> </span> | |
| <strike> </strike> | HTML 5 |
| <strong> </strong> | |
| <style> </style> | |
| <sub> </sub> | |
| <sup> </sup> | |
| <table> </table> | |
| <tbody> </tbody> | |
| <td> </td> | |
| <textarea> </textarea> | |
| <tfoot> </tfoot> | |
| <th> </th> | |
| <thead> </thead> | |
| <time> </time> | / |
| <title> </title> | |
| <tr> </tr> | |
| <u> </u> | HTML 5 |
| <ul> </ul> | |
| <var> </var> | |
| <video> </video> |
HTML5
HTML 5. .
| . HTML5 | ||
| class | classname | |
| contenteditable | true false | , () |
| contextmenu | menu_id | |
| dir | ltr rtl | |
| draggable | true false auto | , |
| id | id | |
| irrelevant | true false | , . , |
| lang | language_code | |
| ref | URL / id | |
| registrationmark | reg_mark | |
| style | style_definition | |
| tabindex | number | |
| template | URL / id | / , |
| title | text |
XHTML , <!DOCTYPE>.
, , <!DOCTYPE>:
<option> </option>, <br />, <hr />, <img />, <input />, <link />, <meta />.
, , , <hr noshade="noshade" />, <input type="checkbox" checked="checked" />, <hr noshade>, <input type="checkbox" checked>
: <div> </div> , .
HTML 5 XHTML . :
HTML5 : basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex, dir.
HTML5:
<!DOCTYPE html> section, article, aside, header, footer, nav, figure, audio, video, source, embed, meter, time, canvas, Output, datagrid, details, datalist, datatemplate, progress.
. - (www.w3c.org), . XML , XHTML - .
- . , .
http://validator.w3.org . : , .
, , . , http://htmlbook.ru Validate by URI ( ) Check () , . , , . http://htmlbook.ru http://htmlbook.ru/index.php. HTML- . .
, , , Validate by File Upload ( . HTML-, Check. .
. .
Firefox HTML Validator. , W3C, . http://users.skynet.be/mgueury/mozilla/
.
1.
Firefox > . (
xpi) . .
2.
Firefox > ... ,
.
3. extension
, Firefox ( c:\Program Files\Mozilla Firefox) extension, . .
http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing
HTML Validator
- HTML Validator , , .
1. .
2. .
3. / .
4. . .
5. UTF-8.
6. MathML HTML.
7. text/html.
8. .
9. . CMS.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15. - .
16. - .
17. , .
18.
19.
20.
21.
22.
23. , SMS
24.
25.
26. RSS. News Reader.
27. . , , , : , afn.by
<a href= http://www.afn.by/>
<ima stc= http://www.afn.by/finances/ticket/>
border=0/> <a>
28. . .
29. on-line .
30. assembla.com.
31.
32. ,
33. , , .
34. - .
35. -.
36. .
37. .
38. .
39. .
40. - .
41. .
42. .
43. .
