github.com/coreos/goproxy@v0.0.0-20190513173959-f8dc2d7ba04e/examples/goproxy-jquery-version/w3schools.html (about) 1 <!DOCTYPE html> 2 3 <html lang="en-US"> 4 5 <head> 6 7 8 9 <title>HTML5 Tutorial</title> 10 11 12 13 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 14 15 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 16 17 <meta name="Keywords" content="html,css,tutorial,html5,dhtml,css3,xsl,xslt,xhtml,javascript,jquery,asp,ado,net,vbscript,dom,sql,colors,soap,php,rss,authoring,programming,training,learning,quiz,beginner's guide,primer,lessons,school,howto,reference,examples,samples,source code,tags,demos,tips,links,FAQ,tag list,forms,frames,color table,w3c,cascading style sheets,active server pages,dynamic html,internet,database,development,Web building,Webmaster,html guide" /> 18 19 <meta name="Description" content="Free HTML XHTML CSS JavaScript jQuery XML DOM XSL XSLT RSS AJAX ASP .NET PHP SQL tutorials, references, examples for web building." /> 20 21 <script type="text/javascript"> 22 23 <!-- 24 25 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 26 27 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 28 29 //--> 30 31 </script> 32 33 <script type="text/javascript"> 34 35 <!-- 36 37 function searchfield_focus(obj) 38 39 { 40 41 obj.style.color="" 42 43 obj.style.fontStyle="" 44 45 if (obj.value=="Search w3schools.com") 46 47 {obj.value=""} 48 49 } 50 51 var pageTracker = _gat._getTracker("UA-3855518-1"); 52 53 pageTracker._initData(); 54 55 pageTracker._trackPageview(); 56 57 var addr=document.location.href; 58 59 function displayError() 60 61 { 62 63 document.getElementById("err_url").value=addr; 64 65 document.getElementById("err_form").style.display="block"; 66 67 document.getElementById("err_desc").focus(); 68 69 hideSent(); 70 71 } 72 73 function hideError() 74 75 { 76 77 document.getElementById("err_form").style.display="none"; 78 79 } 80 81 function hideSent() 82 83 { 84 85 document.getElementById("err_sent").style.display="none"; 86 87 } 88 89 function sendErr() 90 91 { 92 93 var xmlhttp; 94 95 var err_url=document.getElementById("err_url").value; 96 97 var err_email=document.getElementById("err_email").value; 98 99 var err_desc=document.getElementById("err_desc").value; 100 101 if (window.XMLHttpRequest) 102 103 {// code for IE7+, Firefox, Chrome, Opera, Safari 104 105 xmlhttp=new XMLHttpRequest(); 106 107 } 108 109 else 110 111 {// code for IE6, IE5 112 113 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 114 115 } 116 117 xmlhttp.open("POST","/err_sup.asp",true); 118 119 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 120 121 xmlhttp.send("err_url=" + err_url + "&err_email=" + err_email + "&err_desc=" + escape(err_desc)); 122 123 hideError(); 124 125 document.getElementById("err_sent").style.display="block"; 126 127 } 128 129 function click_expandingMenuHeader(obj,sectionName) 130 131 { 132 133 var x=document.getElementById("cssprop_" + sectionName).parentNode.className; 134 135 if (x.indexOf("expandingMenuNotSelected")>-1) 136 137 { 138 139 x=x.replace("expandingMenuNotSelected","expandingMenuSelected"); 140 141 document.getElementById("cssprop_" + sectionName).parentNode.className=x; 142 143 document.getElementById("cssprop_" + sectionName).style.display="block"; 144 145 } 146 147 else 148 149 { 150 151 x=x.replace("expandingMenuSelected","expandingMenuNotSelected"); 152 153 document.getElementById("cssprop_" + sectionName).parentNode.className=x; 154 155 document.getElementById("cssprop_" + sectionName).style.display="none"; 156 157 } 158 159 } 160 161 //--> 162 163 </script> 164 165 <!--[if lt IE 7]> 166 167 <style> 168 169 #leftcolumn{margin-left:0} 170 171 </style> 172 173 <![endif]--> 174 175 <link rel="stylesheet" type="text/css" href="/stdtheme.css" /> 176 177 <style> 178 179 #html5headline 180 181 { 182 183 font-size:24px; 184 185 text-align:center; 186 187 background-color:#D9D9D9; 188 189 margin:0; 190 191 padding:0; 192 193 height:32px; 194 195 } 196 197 div.html5header 198 199 { 200 201 border:5px solid #D9D9D9; 202 203 width:625px; 204 205 height:379px; 206 207 margin:0; 208 209 padding:0; 210 211 } 212 213 div.html5header #header_image 214 215 { 216 217 width:290px; 218 219 height:235px; 220 221 float:left; 222 223 border:10px solid #D9D9D9; 224 225 } 226 227 div.html5header #header_image div 228 229 { 230 231 width:290px; 232 233 height:235px; 234 235 margin:0; 236 237 padding:0; 238 239 } 240 241 242 243 div.html5header #header_text 244 245 { 246 247 width:275px; 248 249 height:235px; 250 251 float:left; 252 253 margin:0; 254 255 padding:0; 256 257 padding-left:10px; 258 259 padding-right:10px; 260 261 border:10px solid #D9D9D9; 262 263 } 264 265 div.html5header #header_icons 266 267 { 268 269 width:628px; 270 271 height:84px; 272 273 clear:both; 274 275 } 276 277 278 279 div.html5header #header_icons ul 280 281 { 282 283 list-style-type:none; 284 285 margin:0; 286 287 padding:0; 288 289 overflow:hidden; 290 291 } 292 293 div.html5header #header_icons li 294 295 { 296 297 float:left; 298 299 width:104px; 300 301 height:92px; 302 303 } 304 305 div.html5header #header_icons #header_html5{background:url('img_logo_map.gif') 0 0;background-repeat:no-repeat;} 306 307 div.html5header #header_icons #header_multimedia{background:url('img_logo_map.gif') -104px 0;background-repeat:no-repeat;} 308 309 div.html5header #header_icons #header_3d{background:url('img_logo_map.gif') -208px 0;background-repeat:no-repeat;} 310 311 div.html5header #header_icons #header_offline{background:url('img_logo_map.gif') -312px 0;background-repeat:no-repeat;} 312 313 div.html5header #header_icons #header_form{background:url('img_logo_map.gif') -418px 0;background-repeat:no-repeat;} 314 315 div.html5header #header_icons #header_css3{background:url('img_logo_map.gif') -521px 0;background-repeat:no-repeat;} 316 317 318 319 #header_text 320 321 { 322 323 font-size:120%; 324 325 } 326 327 #header_text h2 328 329 { 330 331 text-align:center; 332 333 } 334 335 div.html5header #header_icons #header_html5 336 337 { 338 339 background:url('img_logo_map.gif') 0 -92px; 340 341 background-repeat:no-repeat; 342 343 } 344 345 </style> 346 347 <script> 348 349 selIcon="html5"; 350 351 function changeHeader(logoId,imgPos) 352 353 { 354 355 x=document.getElementById("header_text").childNodes; 356 357 for (i=0;i<x.length;i++) 358 359 { 360 361 if(x[i].nodeType==1) 362 363 { 364 365 x[i].style.display="none"; 366 367 } 368 369 } 370 371 x=document.getElementById("header_image").childNodes; 372 373 for (i=0;i<x.length;i++) 374 375 { 376 377 if(x[i].nodeType==1) 378 379 { 380 381 x[i].style.display="none"; 382 383 } 384 385 } 386 387 try 388 389 { 390 391 document.getElementById('html5_vid').pause(); 392 393 } 394 395 catch(er) 396 397 { 398 399 400 401 } 402 403 404 405 x=document.getElementById("header_icons_list").childNodes; 406 407 408 409 document.getElementById("header_html5").style.backgroundPosition="0 0" 410 411 document.getElementById("header_multimedia").style.backgroundPosition="-104px 0" 412 413 document.getElementById("header_3d").style.backgroundPosition="-208px 0" 414 415 document.getElementById("header_offline").style.backgroundPosition="-312px 0" 416 417 document.getElementById("header_form").style.backgroundPosition="-418px 0" 418 419 document.getElementById("header_css3").style.backgroundPosition="-521px 0" 420 421 422 423 bgText="header_text_"+logoId; 424 425 bgImage="header_image_"+logoId; 426 427 bgLogo="header_"+logoId; 428 429 document.getElementById(bgImage).style.display="block"; 430 431 document.getElementById(bgText).style.display="inline"; 432 433 document.getElementById(bgLogo).style.backgroundPosition=imgPos+"px -92px" 434 435 } 436 437 function iconHover(logoId,imgPos) 438 439 { 440 441 bgLogo="header_"+logoId; 442 443 document.getElementById(bgLogo).style.backgroundPosition=imgPos+"px -92px" 444 445 } 446 447 function iconHoverOut(logoId,imgPos) 448 449 { 450 451 if (selIcon!=logoId) 452 453 { 454 455 bgLogo="header_"+logoId; 456 457 document.getElementById(bgLogo).style.backgroundPosition=imgPos+"px 0" 458 459 } 460 461 } 462 463 464 465 function playVideo() 466 467 { 468 469 try 470 471 { 472 473 document.getElementById('html5_vid').play() 474 475 } 476 477 catch(er) 478 479 { 480 481 document.getElementById('header_image_multimedia').innerHTML=""; 482 483 document.getElementById('header_image_multimedia').style.backgroundImage="url('img_html5_multimedia.jpg')"; 484 485 } 486 487 } 488 489 </script> 490 491 </head> 492 493 <body> 494 495 496 497 <div style="position:relative;width:100%;margin-top:0px;margin-bottom:0px;"> 498 499 <a id="top"></a> 500 501 <div style="width:960px;margin-top:5px;margin-left:auto;margin-right:auto"> 502 503 <div style="width:960px;height:74px;margin:0;padding:0;"> 504 505 <div style="width:340px;text-align:left;float:left;"> 506 507 <a href="http://www.w3schools.com"><img width="336" height="69" src="/images/w3schoolslogo.gif" alt="W3Schools.com" style="border:0;margin-top:5px;" /></a> 508 509 </div> 510 511 512 513 <div style="width:300px;float:right;text-align:right;margin-top:20px;margin-right:14px;margin-bottom:5px;"> 514 515 <div id="google_translate_element" style="display:none"></div> 516 517 <div id="translate_link" style="margin-bottom:14px"> 518 519 <a href="#" class="topnav" 520 521 onclick="document.getElementById('google_translate_element').style.display='inline';document.getElementById('translate_link').style.display='none';return false;"> 522 523 TRANSLATE 524 525 </a> 526 527 </div> 528 529 <form style="font-size:11px;" method="get" name="searchform" action="http://www.google.com/search" target="_blank"> 530 531 <input type="hidden" name="sitesearch" value="www.w3schools.com" /> 532 533 <input onfocus="searchfield_focus(this)" style="width:150px;color:#808080;font-style:italic;margin:0;" 534 535 type="text" name="as_q" size="20" value="Search w3schools.com" /><input type="submit" style="margin:0;" value="Search" title="Search" /> 536 537 </form> 538 539 </div> 540 541 </div> 542 543 <div id="topnav" style="clear:both;width:960px;height:25px;"> 544 545 <div style="float:left;width:400px;word-spacing:12px;font-size:90%;padding-left:15px;padding-top:6px;white-space:nowrap;text-align:left;"> 546 547 <a class="topnav" href="/default.asp" target="_top">HOME </a> 548 549 <a class="topnav" href="/html/default.asp" target="_top">HTML </a> 550 551 <a class="topnav" href="/css/default.asp" target="_top">CSS </a> 552 553 <a class="topnav" href="/xml/default.asp" target="_top">XML </a> 554 555 <a class="topnav" href="/js/default.asp" target="_top">JAVASCRIPT </a> 556 557 <a class="topnav" href="/asp/default.asp" target="_top">ASP </a> 558 559 <a class="topnav" href="/php/default.asp" target="_top">PHP </a> 560 561 <a class="topnav" href="/sql/default.asp" target="_top">SQL </a> 562 563 <a class="topnav" href="/sitemap/default.asp" target="_top">MORE...</a> 564 565 </div> 566 567 <div style="float:right;width:280px;word-spacing:6px;font-size:80%;padding-right:13px;padding-top:7px;color:#888888;white-space:nowrap;text-align:right;"> 568 569 <a class="topnav" href="/sitemap/default.asp#references" target="_top">REFERENCES</a> | 570 571 <a class="topnav" href="/sitemap/default.asp#examples" target="_top">EXAMPLES</a> | 572 573 <a class="topnav" href="/forum/default.asp" target="_top">FORUM</a> | 574 575 <a class="topnav" href="/about/default.asp" target="_top">ABOUT</a> 576 577 </div> 578 579 </div> 580 581 582 583 <div style="width:960px;height:94px;position:relative;margin-left:auto;margin-right:auto;margin:0px;padding:0px;overflow:hidden"> 584 585 <script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'> 586 587 </script> 588 589 <script type='text/javascript'> 590 591 GS_googleAddAdSenseService("ca-pub-3440800076797949"); 592 593 GS_googleEnableAllServices(); 594 595 </script> 596 597 <script type='text/javascript'> 598 599 600 601 GA_googleAddSlot("ca-pub-3440800076797949", "MainLeaderboard"); 602 603 GA_googleAddSlot("ca-pub-3440800076797949", "SmallPS"); 604 605 GA_googleAddSlot("ca-pub-3440800076797949", "LargePS"); 606 607 GA_googleAddSlot("ca-pub-3440800076797949", "BottomRectangle"); 608 609 GA_googleAddSlot("ca-pub-3440800076797949", "SkyScraper"); 610 611 612 613 GA_googleAddSlot("ca-pub-3440800076797949", "TopRectangle"); 614 615 </script> 616 617 <script type='text/javascript'> 618 619 GA_googleFetchAds(); 620 621 </script> 622 623 <!-- TopRectangle --> 624 625 <script type='text/javascript'> 626 627 GA_googleFillSlot("TopRectangle"); 628 629 </script> 630 631 <div style="width:728px;height:90px;position:absolute;right:0px;top:0px;margin:0;padding:0;overflow:hidden;"> 632 633 634 635 <!-- MainLeaderboard --> 636 637 <script type='text/javascript'> 638 639 GA_googleFillSlot("MainLeaderboard"); 640 641 </script> 642 643 644 645 </div></div> 646 647 <div style="width:960px;padding:0px;margin:0px;"> 648 649 <div id="leftcolumn" style="width:170px;margin:0;padding:0;margin-top:5px;float:left;"><h2 class="left"><span class="left_h2">HTML5</span> Tutorial</h2> 650 651 <a target="_top" href="default.asp" style='font-weight:bold;'>HTML5 Home</a><br /> 652 653 <a target="_top" href="html5_intro.asp" >HTML5 Introduction</a><br /> 654 655 <a target="_top" href="html5_new_elements.asp" >HTML5 New Elements</a><br /> 656 657 <a target="_top" href="html5_video.asp" >HTML5 Video</a><br /> 658 659 <a target="_top" href="html5_video_dom.asp" >HTML5 Video/DOM</a><br /> 660 661 <a target="_top" href="html5_audio.asp" >HTML5 Audio</a><br /> 662 663 <a target="_top" href="html5_draganddrop.asp" >HTML5 Drag and Drop</a><br /> 664 665 <a target="_top" href="html5_canvas.asp" >HTML5 Canvas</a><br /> 666 667 <a target="_top" href="html5_svg.asp" >HTML5 SVG</a><br /> 668 669 <a target="_top" href="html5_canvas_vs_svg.asp" >HTML5 Canvas vs. SVG</a><br /> 670 671 <a target="_top" href="html5_geolocation.asp" >HTML5 Geolocation</a><br /> 672 673 <a target="_top" href="html5_webstorage.asp" >HTML5 Web Storage</a><br /> 674 675 <a target="_top" href="html5_app_cache.asp" >HTML5 App Cache</a><br /> 676 677 <a target="_top" href="html5_webworkers.asp" >HTML5 Web Workers</a><br /> 678 679 <a target="_top" href="html5_serversentevents.asp" >HTML5 SSE</a><br /> 680 681 <br /> 682 683 <h2 class="left"><span class="left_h2">HTML5</span> Forms</h2> 684 685 <a target="_top" href="html5_form_input_types.asp" >HTML5 Input Types</a><br /> 686 687 <a target="_top" href="html5_form_elements.asp" >HTML5 Form Elements</a><br /> 688 689 <a target="_top" href="html5_form_attributes.asp" >HTML5 Form Attributes</a><br /> 690 691 <br /> 692 693 <h2 class="left"><span class="left_h2">HTML5</span> Reference</h2> 694 695 <a target="_top" href="html5_reference.asp" >HTML5 Tags</a><br /> 696 697 <a target="_top" href="html5_ref_globalattributes.asp" >HTML5 Attributes</a><br /> 698 699 <a target="_top" href="html5_ref_eventattributes.asp" >HTML5 Events</a><br /> 700 701 <a target="_top" href="html5_ref_av_dom.asp" >HTML5 Audio/Video</a><br /> 702 703 <a target="_top" href="html5_ref_canvas.asp" >HTML5 Canvas 2d</a><br /> 704 705 <a target="_top" href="html5_ref_dtd.asp" >HTML Valid DTDs</a><br /> 706 707 <br /> 708 709 <h2 class="left"><span class="left_h2">HTML5</span> Tags</h2> 710 711 <a target="_top" href="tag_comment.asp" ><!--></a><br /> 712 713 <a target="_top" href="tag_doctype.asp" ><!DOCTYPE></a><br /> 714 715 <a target="_top" href="tag_a.asp" ><a></a><br /> 716 717 <a target="_top" href="tag_abbr.asp" ><abbr></a><br /> 718 719 <a target="_top" href="tag_acronym.asp" ><acronym></a><br /> 720 721 <a target="_top" href="tag_address.asp" ><address></a><br /> 722 723 <a target="_top" href="tag_applet.asp" ><applet></a><br /> 724 725 <a target="_top" href="tag_area.asp" ><area></a><br /> 726 727 <a target="_top" href="tag_article.asp" ><article></a><br /> 728 729 <a target="_top" href="tag_aside.asp" ><aside></a><br /> 730 731 <a target="_top" href="tag_audio.asp" ><audio></a><br /> 732 733 <a target="_top" href="tag_b.asp" ><b></a><br /> 734 735 <a target="_top" href="tag_base.asp" ><base></a><br /> 736 737 <a target="_top" href="tag_basefont.asp" ><basefont></a><br /> 738 739 <a target="_top" href="tag_bdi.asp" ><bdi></a><br /> 740 741 <a target="_top" href="tag_bdo.asp" ><bdo></a><br /> 742 743 <a target="_top" href="tag_big.asp" ><big></a><br /> 744 745 <a target="_top" href="tag_blockquote.asp" ><blockquote></a><br /> 746 747 <a target="_top" href="tag_body.asp" ><body></a><br /> 748 749 <a target="_top" href="tag_br.asp" ><br></a><br /> 750 751 <a target="_top" href="tag_button.asp" ><button></a><br /> 752 753 <a target="_top" href="tag_canvas.asp" ><canvas></a><br /> 754 755 <a target="_top" href="tag_caption.asp" ><caption></a><br /> 756 757 <a target="_top" href="tag_center.asp" ><center></a><br /> 758 759 <a target="_top" href="tag_cite.asp" ><cite></a><br /> 760 761 <a target="_top" href="tag_phrase_elements.asp" ><code></a><br /> 762 763 <a target="_top" href="tag_col.asp" ><col></a><br /> 764 765 <a target="_top" href="tag_colgroup.asp" ><colgroup></a><br /> 766 767 <a target="_top" href="tag_command.asp" ><command></a><br /> 768 769 <a target="_top" href="tag_datalist.asp" ><datalist></a><br /> 770 771 <a target="_top" href="tag_dd.asp" ><dd></a><br /> 772 773 <a target="_top" href="tag_del.asp" ><del></a><br /> 774 775 <a target="_top" href="tag_details.asp" ><details></a><br /> 776 777 <a target="_top" href="tag_phrase_elements.asp" ><dfn></a><br /> 778 779 <a target="_top" href="tag_dir.asp" ><dir></a><br /> 780 781 <a target="_top" href="tag_div.asp" ><div></a><br /> 782 783 <a target="_top" href="tag_dl.asp" ><dl></a><br /> 784 785 <a target="_top" href="tag_dt.asp" ><dt></a><br /> 786 787 <a target="_top" href="tag_phrase_elements.asp" ><em></a><br /> 788 789 <a target="_top" href="tag_embed.asp" ><embed></a><br /> 790 791 <a target="_top" href="tag_fieldset.asp" ><fieldset></a><br /> 792 793 <a target="_top" href="tag_figcaption.asp" ><figcaption></a><br /> 794 795 <a target="_top" href="tag_figure.asp" ><figure></a><br /> 796 797 <a target="_top" href="tag_font.asp" ><font></a><br /> 798 799 <a target="_top" href="tag_footer.asp" ><footer></a><br /> 800 801 <a target="_top" href="tag_form.asp" ><form></a><br /> 802 803 <a target="_top" href="tag_frame.asp" ><frame></a><br /> 804 805 <a target="_top" href="tag_frameset.asp" ><frameset></a><br /> 806 807 <a target="_top" href="tag_hn.asp" ><h1> - <h6></a><br /> 808 809 <a target="_top" href="tag_head.asp" ><head></a><br /> 810 811 <a target="_top" href="tag_header.asp" ><header></a><br /> 812 813 <a target="_top" href="tag_hgroup.asp" ><hgroup></a><br /> 814 815 <a target="_top" href="tag_hr.asp" ><hr></a><br /> 816 817 <a target="_top" href="tag_html.asp" ><html></a><br /> 818 819 <a target="_top" href="tag_i.asp" ><i></a><br /> 820 821 <a target="_top" href="tag_iframe.asp" ><iframe></a><br /> 822 823 <a target="_top" href="tag_img.asp" ><img></a><br /> 824 825 <a target="_top" href="tag_input.asp" ><input></a><br /> 826 827 <a target="_top" href="tag_ins.asp" ><ins></a><br /> 828 829 <a target="_top" href="tag_keygen.asp" ><keygen></a><br /> 830 831 <a target="_top" href="tag_phrase_elements.asp" ><kbd></a><br /> 832 833 <a target="_top" href="tag_label.asp" ><label></a><br /> 834 835 <a target="_top" href="tag_legend.asp" ><legend></a><br /> 836 837 <a target="_top" href="tag_li.asp" ><li></a><br /> 838 839 <a target="_top" href="tag_link.asp" ><link></a><br /> 840 841 <a target="_top" href="tag_map.asp" ><map></a><br /> 842 843 <a target="_top" href="tag_mark.asp" ><mark></a><br /> 844 845 <a target="_top" href="tag_menu.asp" ><menu></a><br /> 846 847 <a target="_top" href="tag_meta.asp" ><meta></a><br /> 848 849 <a target="_top" href="tag_meter.asp" ><meter></a><br /> 850 851 <a target="_top" href="tag_nav.asp" ><nav></a><br /> 852 853 <a target="_top" href="tag_noframes.asp" ><noframes></a><br /> 854 855 <a target="_top" href="tag_noscript.asp" ><noscript></a><br /> 856 857 <a target="_top" href="tag_object.asp" ><object></a><br /> 858 859 <a target="_top" href="tag_ol.asp" ><ol></a><br /> 860 861 <a target="_top" href="tag_optgroup.asp" ><optgroup></a><br /> 862 863 <a target="_top" href="tag_option.asp" ><option></a><br /> 864 865 <a target="_top" href="tag_output.asp" ><output></a><br /> 866 867 <a target="_top" href="tag_p.asp" ><p></a><br /> 868 869 <a target="_top" href="tag_param.asp" ><param></a><br /> 870 871 <a target="_top" href="tag_pre.asp" ><pre></a><br /> 872 873 <a target="_top" href="tag_progress.asp" ><progress></a><br /> 874 875 <a target="_top" href="tag_q.asp" ><q></a><br /> 876 877 <a target="_top" href="tag_rp.asp" ><rp></a><br /> 878 879 <a target="_top" href="tag_rt.asp" ><rt></a><br /> 880 881 <a target="_top" href="tag_ruby.asp" ><ruby></a><br /> 882 883 <a target="_top" href="tag_s.asp" ><s></a><br /> 884 885 <a target="_top" href="tag_phrase_elements.asp" ><samp></a><br /> 886 887 <a target="_top" href="tag_script.asp" ><script></a><br /> 888 889 <a target="_top" href="tag_section.asp" ><section></a><br /> 890 891 <a target="_top" href="tag_select.asp" ><select></a><br /> 892 893 <a target="_top" href="tag_small.asp" ><small></a><br /> 894 895 <a target="_top" href="tag_source.asp" ><source></a><br /> 896 897 <a target="_top" href="tag_span.asp" ><span></a><br /> 898 899 <a target="_top" href="tag_strike.asp" ><strike></a><br /> 900 901 <a target="_top" href="tag_phrase_elements.asp" ><strong></a><br /> 902 903 <a target="_top" href="tag_style.asp" ><style></a><br /> 904 905 <a target="_top" href="tag_sup.asp" ><sub></a><br /> 906 907 <a target="_top" href="tag_summary.asp" ><summary></a><br /> 908 909 <a target="_top" href="tag_sup.asp" ><sup></a><br /> 910 911 <a target="_top" href="tag_table.asp" ><table></a><br /> 912 913 <a target="_top" href="tag_tbody.asp" ><tbody></a><br /> 914 915 <a target="_top" href="tag_td.asp" ><td></a><br /> 916 917 <a target="_top" href="tag_textarea.asp" ><textarea></a><br /> 918 919 <a target="_top" href="tag_tfoot.asp" ><tfoot></a><br /> 920 921 <a target="_top" href="tag_th.asp" ><th></a><br /> 922 923 <a target="_top" href="tag_thead.asp" ><thead></a><br /> 924 925 <a target="_top" href="tag_time.asp" ><time></a><br /> 926 927 <a target="_top" href="tag_title.asp" ><title></a><br /> 928 929 <a target="_top" href="tag_tr.asp" ><tr></a><br /> 930 931 <a target="_top" href="tag_track.asp" ><track></a><br /> 932 933 <a target="_top" href="tag_tt.asp" ><tt></a><br /> 934 935 <a target="_top" href="tag_u.asp" ><u></a><br /> 936 937 <a target="_top" href="tag_ul.asp" ><ul></a><br /> 938 939 <a target="_top" href="tag_phrase_elements.asp" ><var></a><br /> 940 941 <a target="_top" href="tag_video.asp" ><video></a><br /> 942 943 <a target="_top" href="tag_wbr.asp" ><wbr></a><br /> 944 945 <br /></div> 946 947 <div style="width:634px;margin:0px;padding:0px;background-color:#ffffff;color:#000000;padding-bottom:8px;padding-right:5px;padding-top:4px;float:left;"> 948 949 950 951 <h1>HTML5 <span class="color_h1">Tutorial</span></h1> 952 953 <div class="chapter"> 954 955 <div class="prev"><a class="chapter" href="/default.asp">« W3Schools Home</a></div> 956 957 <div class="next"><a class="chapter" href="html5_intro.asp">Next Chapter »</a></div> 958 959 </div> 960 961 <br /> 962 963 <div class="html5header"> 964 965 <div id="html5headline">HTML5 is The New HTML Standard</div> 966 967 <div id="header_image"> 968 969 970 971 972 973 <div id="header_image_html5" style="background:url('img_html5_html5.gif');"></div> 974 975 <div id="header_image_multimedia" style="display:none;margin:0;padding:0;padding-top:20px;height:215px;text-align:center"> 976 977 <video width="270" controls="controls" id="html5_vid"> 978 979 <source src="mov_bbb.mp4" type="video/mp4" /> 980 981 <source src="mov_bbb.ogg" type="video/ogg" /> 982 983 <source src="mov_bbb.webm" type="video/webm" /> 984 985 Your browser does not support the video tag. 986 987 </video> 988 989 <p style="text-align:center;margin:0;padding:0">Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a></p> 990 991 </div> 992 993 <div id="header_image_3d" style="display:none;background:url('img_html5_3d.jpg')"></div> 994 995 <div id="header_image_offline" style="display:none;background:url('img_html5_offline.jpg')"></div> 996 997 <div id="header_image_form" style="display:none;background:url('img_html5_form.jpg')"></div> 998 999 <div id="header_image_css3" style="display:none;background:url('img_html5_css3.jpg')"></div> 1000 1001 </div> 1002 1003 <div id="header_text"> 1004 1005 <div id="header_text_html5"> 1006 1007 <h2>HTML5</h2> 1008 1009 <ul> 1010 1011 <li>New Elements</li> 1012 1013 <li>New Attributes</li> 1014 1015 <li>Full CSS3 Support</li> 1016 1017 <li>Video and Audio</li> 1018 1019 <li>2D/3D Graphics</li> 1020 1021 <li>Local Storage</li> 1022 1023 <li>Local SQL Database</li> 1024 1025 <li>Web Applications</li> 1026 1027 </ul> 1028 1029 </div> 1030 1031 1032 1033 <div id="header_text_multimedia" style="display:none;"> 1034 1035 <h2>HTML5 Multimedia</h2> 1036 1037 <p>With HTML5, playing video and audio is easier than ever.</p> 1038 1039 <ul> 1040 1041 <li>HTML5 <a href="html5_video.asp"><video></a></li> 1042 1043 <li>HTML5 <a href="html5_audio.asp"><audio></a></li> 1044 1045 </ul> 1046 1047 </div> 1048 1049 1050 1051 <div id="header_text_offline" style="display:none"> 1052 1053 <h2>HTML5 Applications</h2> 1054 1055 <p>With HTML5, web application development is easier than ever.</p> 1056 1057 <ul> 1058 1059 <li>Local data storage</li> 1060 1061 <li>Local file access</li> 1062 1063 <li>Local SQL database</li> 1064 1065 <li>Application cache</li> 1066 1067 <li>Javascript workers</li> 1068 1069 <li>XHTMLHttpRequest 2</li> 1070 1071 </ul> 1072 1073 </div> 1074 1075 1076 1077 <div id="header_text_3d" style="display:none"> 1078 1079 <h2>HTML5 Graphics</h2> 1080 1081 <p>With HTML5, drawing graphics is easier than ever:</p> 1082 1083 <ul> 1084 1085 <li>Using the <a href="html5_canvas.asp"><canvas></a> element</li> 1086 1087 <li>Using inline <a href="/svg/default.asp">SVG</a></li> 1088 1089 <li>Using <a href="/css3/default.asp">CSS3 2D/3D</a></li> 1090 1091 </ul> 1092 1093 </div> 1094 1095 1096 1097 <div id="header_text_css3" style="display:none"> 1098 1099 <h2>HTML5 uses CSS3</h2> 1100 1101 <ul> 1102 1103 <li>New Selectors</li> 1104 1105 <li>New Properties</li> 1106 1107 <li>Animations</li> 1108 1109 <li>2D/3D Transformations</li> 1110 1111 <li>Rounded Corners</li> 1112 1113 <li>Shadow Effects</li> 1114 1115 <li>Downloadable Fonts</li> 1116 1117 </ul> 1118 1119 <p>Read more in our <a href="/css3/default.asp">CSS3 tutorial.</a></p> 1120 1121 </div> 1122 1123 <div id="header_text_form" style="display:none"> 1124 1125 <h2>Semantic Elements</h2> 1126 1127 <p>New elements for headers, footers, menues, sections and articles.</p> 1128 1129 <h2>HTML5 Forms</h2> 1130 1131 <p>New form elements, new attributes, new input types, automatic validation.</p> 1132 1133 </div> 1134 1135 </div> 1136 1137 <div id="header_icons"> 1138 1139 <ul id="header_icons_list"> 1140 1141 <li id="header_html5" onclick="changeHeader('html5','0');selIcon='html5'" onmouseover="iconHover('html5','0')" onmouseout="iconHoverOut('html5','0')" title="HTML5"></li> 1142 1143 <li id="header_multimedia" onclick="changeHeader('multimedia','-104');selIcon='multimedia';playVideo()" onmouseover="iconHover('multimedia','-104')" onmouseout="iconHoverOut('multimedia','-104')" title="HTML5 Multimedia"></li> 1144 1145 <li id="header_3d" onclick="changeHeader('3d','-208');selIcon='3d'" onmouseover="iconHover('3d','-208')" onmouseout="iconHoverOut('3d','-208')" title="HTML5 Graphics"></li> 1146 1147 <li id="header_offline" onclick="changeHeader('offline','-312');selIcon='offline'" onmouseover="iconHover('offline','-312')" onmouseout="iconHoverOut('offline','-312')" title="HTML5 Local Storage"></li> 1148 1149 <li style="width:105px;" id="header_form" onclick="changeHeader('form','-418');selIcon='form'" onmouseover="iconHover('form','-418')" onmouseout="iconHoverOut('form','-418')" title="HTML5 Semantics and Forms"></li> 1150 1151 <li id="header_css3" onclick="changeHeader('css3','-521');selIcon='css3'" onmouseover="iconHover('css3','-521')" onmouseout="iconHoverOut('css3','-521')" title="HTML5 CSS3"></li> 1152 1153 </ul> 1154 1155 </div> 1156 1157 </div> 1158 1159 <br /> 1160 1161 <h2 class="tutheader">Examples in Each Chapter</h2> 1162 1163 <p>With our HTML editor, you can edit the HTML, and click on a button to view the result.</p> 1164 1165 <div class="example"> 1166 1167 <h2 class="example">Example</h2> 1168 1169 <div class="example_code notranslate"> 1170 1171 <!DOCTYPE HTML><br /> 1172 1173 <html><br /> 1174 1175 <body><br /> 1176 1177 <br /> 1178 1179 <video width="320" height="240" controls="controls"><br /> 1180 1181 <source src="movie.mp4" type="video/mp4" /><br /> 1182 1183 <source src="movie.ogg" type="video/ogg" /><br /> 1184 1185 <source src="movie.webm" type="video/webm" /><br /> 1186 1187 Your browser does not support the video tag.<br /> 1188 1189 </video><br /> 1190 1191 <br /> 1192 1193 </body><br /> 1194 1195 </html> 1196 1197 </div> 1198 1199 <br /> 1200 1201 <a class="tryitbtn" target="_blank" href="tryit.asp?filename=tryhtml5_video_bear">Try it yourself »</a></div> 1202 1203 <p><b>Click on the "Try it yourself" button to see how it works</b></p> 1204 1205 <p><b><a href="html5_intro.asp">Start learning HTML5 now!</a></b></p> 1206 1207 1208 1209 <h2 class="tutheader">HTML5 References</h2> 1210 1211 <p>At W3Schools you will find complete references about tags, global attributes, 1212 1213 standard events, and more.</p> 1214 1215 <p> 1216 1217 <a href="html5_reference.asp">HTML5 Tag Reference</a> 1218 1219 </p> 1220 1221 1222 1223 <br /> 1224 1225 <div class="chapter"> 1226 1227 <div class="prev"><a class="chapter" href="/default.asp">« W3Schools Home</a></div> 1228 1229 <div class="next"><a class="chapter" href="html5_intro.asp">Next Chapter »</a></div> 1230 1231 </div> 1232 1233 1234 1235 <!-- **** SPOTLIGHTS 1 **** --> 1236 1237 <!-- SmallPS --> 1238 1239 <script type='text/javascript'> 1240 1241 GA_googleFillSlot("SmallPS"); 1242 1243 </script> 1244 1245 <!-- **** SPOTLIGHTS 2 **** --> 1246 1247 <!-- LargePS --> 1248 1249 <script type='text/javascript'> 1250 1251 GA_googleFillSlot("LargePS"); 1252 1253 </script> 1254 1255 <!-- **** SPOTLIGHTS 3 **** --> 1256 1257 <!-- BottomRectangle --> 1258 1259 <div style="width:340px;margin:auto"> 1260 1261 <script type='text/javascript'> 1262 1263 GA_googleFillSlot("BottomRectangle"); 1264 1265 </script> 1266 1267 </div> 1268 1269 1270 1271 <!-- BottomBanner --> 1272 1273 <script type='text/javascript'> 1274 1275 GA_googleFillSlot("BottomBanner"); 1276 1277 </script> 1278 1279 1280 1281 <div id="err_form" style="display:none"> 1282 1283 <h2>Your suggestion:</h2> 1284 1285 <p><label for="err_email">Your E-mail (optional):</label> <input type="text" id="err_email" name="err_email" /></p> 1286 1287 <p><label for="err_url">Page address:</label> <input type="text" disabled="disabled" id="err_url" name="err_url" /></p> 1288 1289 <p><label for="err_desc">Description:</label> <textarea name="err_desc" id="err_desc" cols="92" rows="20"></textarea></p> 1290 1291 <p class="submit"><input type="button" value="Submit" onclick="sendErr()" /></p> 1292 1293 <div class="err_close" onclick="hideError()">Close [X]</div> 1294 1295 </div> 1296 1297 <div id="err_sent" style="display:none"> 1298 1299 <h2>Thank you for your support.</h2> 1300 1301 <div class="err_close" onclick="hideSent()">Close [X]</div> 1302 1303 </div> 1304 1305 </div> 1306 1307 1308 1309 <div id="rightcolumn" style="width:150px;margin:0px;padding:0px;float:left"> 1310 1311 <table> 1312 1313 <tr><th>WEB HOSTING</th></tr> 1314 1315 <tr><td> 1316 1317 <a target="_blank" rel="nofollow" href="http://www.lunarpages.com/id/w3schools/goto/w3schools">Best Web Hosting</a> 1318 1319 </td></tr> 1320 1321 <tr><td> 1322 1323 <a target="_blank" rel="nofollow" href="http://www.eukhost.com">PHP MySQL Hosting</a> 1324 1325 </td></tr> 1326 1327 <tr><td> 1328 1329 <a target="_blank" rel="nofollow" href="http://www.web-hosting-top.com/coupons">Best Hosting Coupons</a> 1330 1331 </td></tr> 1332 1333 <tr><td> 1334 1335 <a target="_blank" rel="nofollow" href="http://www.heartinternet.co.uk/index.shtml">UK Reseller Hosting</a> 1336 1337 </td></tr> 1338 1339 <tr><td> 1340 1341 <a target="_blank" rel="nofollow" href="http://www.webhosting.uk.com/cloud-hosting.php">Cloud Hosting</a> 1342 1343 </td></tr> 1344 1345 <tr><td> 1346 1347 <a target="_blank" rel="nofollow" href="http://www.justhost.com/track/w3schools/textlink">Top Web Hosting</a> 1348 1349 </td></tr> 1350 1351 <tr><td> 1352 1353 <a target="_blank" rel="nofollow" href="http://www.doteasy.com/index.cfm?A=w3text">$3.98 Unlimited Hosting</a> 1354 1355 </td></tr> 1356 1357 <tr><td> 1358 1359 <a target="_blank" rel="nofollow" href="http://www.website.com/">Premium Website Design</a> 1360 1361 </td></tr> 1362 1363 </table> 1364 1365 <table> 1366 1367 <tr><th>WEB BUILDING</th></tr> 1368 1369 <tr><td> 1370 1371 1372 1373 <a target="_blank" rel="nofollow" href="http://www.altova.com/ref/?s=w3s_text&q=xmlspy">Download XML Editor</a> 1374 1375 1376 1377 </td></tr> 1378 1379 <tr><td> 1380 1381 <a target="_blank" rel="nofollow" href="http://www.wix.com/html5/now-on-wix?utm_campaign=ma_w3schools.com&experiment_id=ma_html_w3schools.comlink1">FREE Website BUILDER</a> 1382 1383 </td></tr> 1384 1385 <tr><td> 1386 1387 <a target="_blank" rel="nofollow" href="http://www.dreamtemplate.com/?ref=w3txtfree">Free Website Templates</a> 1388 1389 <a target="_blank" rel="nofollow" href="http://www.dreamtemplate.com/?ref=w3txtfree">Free CSS Templates</a> 1390 1391 </td></tr> 1392 1393 <tr><td> 1394 1395 <a href="http://www.wix.com/html5/now-on-wix?utm_campaign=ma_w3schools.com&experiment_id=ma_html_w3schools.comlink2" rel="nofollow" target="_blank">CREATE HTML Websites</a> 1396 1397 </td></tr> 1398 1399 </table> 1400 1401 <table> 1402 1403 <tr><th>W3SCHOOLS EXAMS</th></tr> 1404 1405 <tr><td> 1406 1407 <a target="_blank" href="/cert/default.asp">Get Certified in:<br />HTML, CSS, JavaScript, XML, PHP, and ASP</a> 1408 1409 </td></tr> 1410 1411 </table> 1412 1413 <table> 1414 1415 <tr><th>W3SCHOOLS BOOKS</th></tr> 1416 1417 <tr><td> 1418 1419 <a target="_blank" href="/books/default.asp"> 1420 1421 New Books:<br />HTML, CSS<br /> 1422 1423 JavaScript, and Ajax</a> 1424 1425 </td></tr> 1426 1427 </table> 1428 1429 <table> 1430 1431 <tr><th>STATISTICS</th></tr> 1432 1433 <tr><td> 1434 1435 <a target="_top" href="/browsers/browsers_stats.asp">Browser Statistics</a><br /> 1436 1437 <a target="_top" href="/browsers/browsers_os.asp">Browser OS</a><br /> 1438 1439 <a target="_top" href="/browsers/browsers_display.asp">Browser Display</a> 1440 1441 </td></tr></table> 1442 1443 <script type="text/javascript"> 1444 1445 <!-- 1446 1447 function sharethis() 1448 1449 { 1450 1451 txt='<a href="http://www.facebook.com/sharer.php?u='+document.URL+'" target="_blank" title="Facebook">' 1452 1453 txt=txt+'<img src="/images/share_facebook.gif" width="16px" height="16px" style="margin-right:4px" /></a>'; 1454 1455 txt=txt+'<a href="http://twitter.com/home?status=Currently reading '+document.URL+'" target="_blank" title="Twitter">'; 1456 1457 txt=txt+'<img src="/images/share_twitter.gif" width="16px" height="16px" style="margin-right:4px" /></a>'; 1458 1459 txt=txt+'<a href="mailto:?&subject='+document.title+'&body=Take%20a%20look%20at%20this%20page%20at%20W3Schools.com:%20'+document.URL+'" target="_blank" title="E-mail">'; 1460 1461 txt=txt+'<img src="/images/share_email.gif" width="16px" height="16px" style="margin-right:4px" /></a>'; 1462 1463 txt=txt+'<a href="http://delicious.com/save?v=5&noui&jump=close&url='+document.URL+'&title='+document.title+'" target="_blank" title="Delicious">'; 1464 1465 txt=txt+'<img src="/images/share_delicious.gif" width="16px" height="16px" style="margin-right:4px" /></a>'; 1466 1467 txt=txt+'<a href="http://www.reddit.com/submit?url='+document.URL+'" target="_blank" title="Reddit">'; 1468 1469 txt=txt+'<img src="/images/share_reddit.gif" width="16px" height="16px" style="margin-right:4px" /></a>'; 1470 1471 txt=txt+'<a href="http://digg.com/submit?url='+document.URL+'&title='+document.title+'" target="_blank" title="Digg">'; 1472 1473 txt=txt+'<img src="/images/share_digg.gif" width="16px" height="16px" style="margin-right:4px" /></a>'; 1474 1475 txt=txt+'<a href="http://www.stumbleupon.com/submit?url='+document.URL+'%26title%3D'+document.title+'" target="_blank" title="Stumbleupon">'; 1476 1477 txt=txt+'<img src="/images/share_stumbleupon.gif" width="16px" height="16px" /></a>'; 1478 1479 document.getElementById("sharethis").innerHTML=txt; 1480 1481 } 1482 1483 //--></script> 1484 1485 <table> 1486 1487 <tr><th>SHARE THIS PAGE</th></tr> 1488 1489 <tr> 1490 1491 <td id="sharethis"> 1492 1493 <div style="height:16px"> 1494 1495 <a href="#" onclick="sharethis();return false;">Share with »</a> 1496 1497 </div> 1498 1499 </td> 1500 1501 </tr> 1502 1503 </table> 1504 1505 <table> 1506 1507 <tr><td><br /> 1508 1509 <div style="width:124px;margin:auto"> 1510 1511 <!-- SkyScraper --> 1512 1513 <script type='text/javascript'> 1514 1515 GA_googleFillSlot("SkyScraper"); 1516 1517 </script> 1518 1519 </div> 1520 1521 </td> 1522 1523 </tr> 1524 1525 </table> 1526 1527 1528 1529 </div> 1530 1531 </div> 1532 1533 <br /> 1534 1535 </div> 1536 1537 <div style="width:100%;clear:both;margin:0;padding:0;background-color:transparent;background-image:url('/images/gradientbottom.jpg');background-repeat:repeat-x;position:relative;"> 1538 1539 <div id="footer" style="width:960px;margin-left:auto;margin-right:auto;height:110px;"> 1540 1541 <div style="float:left;width:200px;text-align:left;padding-left:3px;padding-top:11px;"><a href="http://www.w3schools.com"> 1542 1543 <img style="border:0" src="/images/w3schoolscom_gray.gif" alt="W3Schools.com" /></a> 1544 1545 </div> 1546 1547 <div style="word-spacing:6px;font-size:80%;padding-right:12px;padding-top:19px;float:right;width:600px;text-align:right;"> 1548 1549 <a href="" onclick="displayError();return false">REPORT ERROR</a> | 1550 1551 <a href="/default.asp" target="_top">HOME</a> | 1552 1553 <a href="#top" target="_top">TOP</a> | 1554 1555 <a href='/html5/default.asp?output=print' target="_blank">PRINT</a> | 1556 1557 <a href="/forum/default.asp" target="_blank">FORUM</a> | 1558 1559 <a href="/about/default.asp" target="_top">ABOUT</a> 1560 1561 </div> 1562 1563 <div style="padding-top:13px;color:#404040;clear:both;"> 1564 1565 W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.<br /> 1566 1567 Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.<br /> 1568 1569 While using this site, you agree to have read and accepted our 1570 1571 <a href="/about/about_copyright.asp">terms of use</a> and 1572 1573 <a href="/about/about_privacy.asp">privacy policy</a>.<br /> 1574 1575 <a href="/about/about_copyright.asp">Copyright 1999-2012</a> by Refsnes Data. All Rights Reserved. 1576 1577 </div> 1578 1579 </div> 1580 1581 </div> 1582 1583 </div> 1584 1585 <script type="text/javascript"> 1586 1587 function googleTranslateElementInit() { 1588 1589 new google.translate.TranslateElement({ 1590 1591 pageLanguage: 'en', 1592 1593 autoDisplay: false, 1594 1595 gaTrack: true, 1596 1597 layout: google.translate.TranslateElement.InlineLayout.SIMPLE 1598 1599 }, 'google_translate_element'); 1600 1601 } 1602 1603 </script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script> 1604 1605 1606 1607 </body> 1608 1609 </html> 1610