上課學到的 html5 基本架構與用得上的功能...之後再把每行的筆記註記上去好了@@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "refresh" content = "100" charset= "utf-8">
<title>Meow-Eletric</title>
</head>
<body>
<!-- Comment Here-->
<header>
<img src="images/img_logo.gif" alt="W3C-LOGO"/>
</header>
<nav>
<a href="html5.html">Home</a>
<a href="">About Me</a>
</nav>
<p contenteditable spellcheck>
Enter here
</p><hr>
<section>
<h1>Heading</h1><hr>
<p>H1~H6</p>
</section>
<section>
<h1>List</h1><hr>
<p>
<h2>ordered list</h2>
<ol>
<li>WOW</li>
<li>WAW</li>
<li>WEW</li>
<li>WIW</li>
</ol>
</p>
<p>
<h2>unordered list</h2>
<ul>
<li>MOM</li>
<li>MAM</li>
<li>MEM</li>
<li>MIM</li>
</ul>
</p>
</section>
<section>
<h1>quote</h1>
<blockquote cite="http://www.google.com.tw">
BBBBLOCK QUOTEEEEE
</blockquote>
<p>
This is a <q>inline quote</q>
</p>
</section><hr>
<section>
<h1>TABLE</h1>
<table>
<tr>
<th>1-1</th>
<th colspan="2">Temp</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
<br/>
</section><hr>
<section>
<h1>Foooorm</h1>
<form method="get" action="http://www.test.php">
<label for="f_id">ID: </label><input id="f_id" name="f_id" type="text" required /><br/>
<label for="f_pw">Password: </label><input id="f_pw" name="f_pw" type="password" required /><br/>
<label for="f_mail">Email: </label><input id="f_mail" name="f_mail" type="email" required/><br/>
<label for="f_phone">Phone: </label><input id="f_phone" name="f_phone" title="Enter 10 numbers" placeholder="Enter 10 numbers" pattern="[0-9]{10}">
<input type="radio"/><br/>
<input type="file"/><br/>
<input type="submit" value="Send" />
<input type="reset"/>
</section><hr>
<section>
<video src="media/movie.mp4" alt="Oops" preload controls>
</video>
</section>
<section>
<h1>audio</h1>
<audio src="media/horse.mp3" controls>
</audio>
</section><hr>
<section>
<img id="Image-Maps-Com-image-maps-2016-05-22-082617" src="http://www.image-maps.com/m/private/0/igcoegbla295k48ofeo0u6vsf6_faceq1437474812182.png" border="0" width="590" height="590" orgWidth="590" orgHeight="590" usemap="#image-maps-2016-05-22-082617" alt="" />
<map name="image-maps-2016-05-22-082617" id="ImageMapsCom-image-maps-2016-05-22-082617">
<area alt="MikeChan Github" title="MikeChan Github" href="https://github.com/mikechan0731" shape="rect" coords="120,131,488,495" style="outline:none;" target="_blank" />
<area shape="rect" coords="588,588,590,590" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
</map>
</section>
<footer>
MikeChan @2016 All Rights Preserved ©
<a href="https://github.com/mikechan0731" target ="__blank">Github</a>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "refresh" content = "100" charset= "utf-8">
<title>Meow-Eletric</title>
</head>
<body>
<!-- Comment Here-->
<header>
<img src="images/img_logo.gif" alt="W3C-LOGO"/>
</header>
<nav>
<a href="html5.html">Home</a>
<a href="">About Me</a>
</nav>
<p contenteditable spellcheck>
Enter here
</p><hr>
<section>
<h1>Heading</h1><hr>
<p>H1~H6</p>
</section>
<section>
<h1>List</h1><hr>
<p>
<h2>ordered list</h2>
<ol>
<li>WOW</li>
<li>WAW</li>
<li>WEW</li>
<li>WIW</li>
</ol>
</p>
<p>
<h2>unordered list</h2>
<ul>
<li>MOM</li>
<li>MAM</li>
<li>MEM</li>
<li>MIM</li>
</ul>
</p>
</section>
<section>
<h1>quote</h1>
<blockquote cite="http://www.google.com.tw">
BBBBLOCK QUOTEEEEE
</blockquote>
<p>
This is a <q>inline quote</q>
</p>
</section><hr>
<section>
<h1>TABLE</h1>
<table>
<tr>
<th>1-1</th>
<th colspan="2">Temp</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
<br/>
</section><hr>
<section>
<h1>Foooorm</h1>
<form method="get" action="http://www.test.php">
<label for="f_id">ID: </label><input id="f_id" name="f_id" type="text" required /><br/>
<label for="f_pw">Password: </label><input id="f_pw" name="f_pw" type="password" required /><br/>
<label for="f_mail">Email: </label><input id="f_mail" name="f_mail" type="email" required/><br/>
<label for="f_phone">Phone: </label><input id="f_phone" name="f_phone" title="Enter 10 numbers" placeholder="Enter 10 numbers" pattern="[0-9]{10}">
<input type="radio"/><br/>
<input type="file"/><br/>
<input type="submit" value="Send" />
<input type="reset"/>
</section><hr>
<section>
<video src="media/movie.mp4" alt="Oops" preload controls>
</video>
</section>
<section>
<h1>audio</h1>
<audio src="media/horse.mp3" controls>
</audio>
</section><hr>
<section>
<img id="Image-Maps-Com-image-maps-2016-05-22-082617" src="http://www.image-maps.com/m/private/0/igcoegbla295k48ofeo0u6vsf6_faceq1437474812182.png" border="0" width="590" height="590" orgWidth="590" orgHeight="590" usemap="#image-maps-2016-05-22-082617" alt="" />
<map name="image-maps-2016-05-22-082617" id="ImageMapsCom-image-maps-2016-05-22-082617">
<area alt="MikeChan Github" title="MikeChan Github" href="https://github.com/mikechan0731" shape="rect" coords="120,131,488,495" style="outline:none;" target="_blank" />
<area shape="rect" coords="588,588,590,590" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
</map>
</section>
<footer>
MikeChan @2016 All Rights Preserved ©
<a href="https://github.com/mikechan0731" target ="__blank">Github</a>
</footer>
</body>
</html>
留言
張貼留言