HTML5 Level.1 Markup Professional HTML5 Level.2 Application Development Professional
http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> </title> </head> <body> </body> </html>
A. <!DOCTYPE html> B. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"> C. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> D. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> E. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
A. html B. head C. meta D. title E. body
A. html B. head C. meta D. title E. body
<link rel="stylesheet" href="style.css"> <style> </style> <script> </script> type="text/css" type="text/javascript"
center, font, basefont big, strike, acronym, tt applet, dir, isindex frameset, frame, noframes
body text, link, vlink, alink, bgcolor, background align, valign, border, size, width, height
A. align B. name C. border D. width E. height
small, strong, i, b, s, u hr, dl
<footer> <ul> <li><a href=" "> </a></li> <li><a href=" "> </a></li> <li><a href=" "> </a></li> </ul> <p> <small>copyright 2016. All rights reserved.</small> </p> </footer>
<h1> 1 <strong>!?</strong></h1> <p> <strong> </strong> </p>
<article> <hr> <p> HTML5 </p> </article>
<dl> <dt><dfn> </dfn></dt> <dd> </dd> </dl>
<dl> <dt> </dt><dd> </dd> <dt> </dt><dd> </dd> </dl> <p> </p> <p> </p>
<p> <i>marsupenaeus japonicus</i> </p>
<p> <b>wai-aria</b> </p>
<p> <s>9,800 </s> 4,980 </p>
<p> This <u>izu</u> a pen. </p>
63
<ruby> <rb> </rb> <rt> </rt> </ruby>
<ruby> <rb> </rb><rb> </rb> <rt> </rt><rt> </rt><rt> </rt> </ruby>
<ruby> <rb> </rb><rb> </rb> <rt> </rt><rt> </rt><rt> </rt> <rtc> <rt>osha</rt><rt>man</rt><rt>be</rt> </rtc> </ruby>
<ruby> <rb> </rb> <rp> </rp><rt> </rt><rp> </rp> </ruby>
http://www.w3.org/tr/html5/dom.html#global-attributes
<ol> <li data-length="11m32s"> </li> <li data-length="08m55s"> </li> <li data-length="22m04s"> </li> <li data-length="13m46s"> </li> <li data-length="30m00s"> </li> </ol>
Web Accessibility Initiative Accessible Rich Internet Applications
<ul> <li> 1</li> <li> 2</li> <li> 3</li> </ul> <div> 1 </div> <div> 2 </div> <div> 3 </div>
<ul role="tablist"> <li role="tab"> 1</li> <li role="tab"> 2</li> <li role="tab"> 3</li> </ul> <div role="tabpanel"> 1 </div> <div role="tabpanel"> 2 </div> <div role="tabpanel"> 3 </div>
<tablist> <tab> 1</tab> <tab> 2</tab> <tab> 3</tab> </tablist> <tabpanel> 1 </tabpanel> <tabpanel> 2 </tabpanel> <tabpanel> 3 </tabpanel>
<ul role="tablist"> <li role="tab" id="t1"> 1</li> <li role="tab" id="t2" > 2</li> <li role="tab" id="t3" > 3</li> </ul> <div role="tabpanel" aria-labelledby="t1"> </div> <div role="tabpanel" aria-labelledby="t2" > </div> <div role="tabpanel" aria-labelledby="t3" > </div>
<h1 role="presentation"> </h1> <p role="presentation" > </p> <div> </div>
<table role="presentation"> <tr> <td aria-owns="rd1 rd2" id="sex"> </td> <td role="radiogroup" aria-labelledby="sex"> <label><input type="radio" id="rd1" > </label> <label><input type="radio" id="rd2" > </label> </td> </tr> </table>
A. id="" B. id="123" C. id="_abc" D. id="(^_^;)" E. id="top container"
A. <a> </a> B. <a name=" "> </a> C. <a target=" "> </a> D. <a href=" " download=" "> </a> E. <a href=" "><h1> </h1></a>
A. alt B. width C. height D. width E. height
A. border="" B. border="0" C. border="1" D. border="2" E. border="1025"
Tables should not be used as layout aids. If a table is to be used for layout it must be marked with the attribute role="presentation".
div.inner div.inner 0 0 1 0 1 0 0 1 1
#logo div#logo body div#logo 1 0 0 1 0 1 1 0 2
rgb( Red, Green, Blue ) rgba( Red, Green, Blue, Alpha )
color: rgba( 255, 255, 255, 0.0 ); color: rgba( 255, 255, 255, 0.2 ); color: rgba( 255, 255, 255, 0.4 ); color: rgba( 255, 255, 255, 0.6 ); color: rgba( 255, 255, 255, 0.8 ); color: rgba( 255, 255, 255, 1.0 ); The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
hsla( Hue, Saturation, Lightness, Alpha ) 0 0% 0% 0.0 360 100% 100% 1.0
330 0 30 300 270 240 60 90 120 210 150 180
#box01{ opacity: 0.1 }; #box02{ opacity: 0.2 }; #box03{ opacity: 0.3 }; #box04{ opacity: 0.4 }; #box05{ opacity: 0.5 }; #box06{ opacity: 0.6 }; #box07{ opacity: 0.7 }; #box08{ opacity: 0.8 }; #box09{ opacity: 0.9 }; #box10{ opacity: 1.0 }; The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
transform: rotate(45deg); transform: translate(50px); transform: scale(1.5);
transform: rotate(45deg);
transform: translate(100px, 50px); = position: relative; left: 100px; top: 50px;
transform: scale(2.0);
transform: scale(2) rotate(45deg);
Demo
Demo
http://www.w3.org/tr/html5/browsers.html#offline
http://www.w3.org/tr/html5/browsers.html#manifests
<!DOCTYPE html> <html lang="ja" manifest=".appcache"> </html>.appcache text/cache-manifest UTF-8
CACHE MANIFEST CACHE: styles/default.css images/background.png NETWORK: comm.cgi FALLBACK: offline.html SETTINGS: prefer-online
CACHE MANIFEST # # # styles/default.css images/background.png NETWORK: * FALLBACK: offline.html
<link media="screen" > <style media="screen" > </style> @media screen { }
<link media="screen " > <style media="screen " > </style> @media screen { }
dpi dots per inch dpcm dots per centimeter
<link media="screen and (max-width: 1000px)" > <link media="only screen and (min-width: 500px) and (max-width: 1000px)" >
Open the Future with HTML5.