{基本構造}
<!DOCTYPE html>
<html>
<head>
<title>
Shehome's Website
</title>
<meta http-http-equiv="Content-type" content="text/html ; charset=utf-8" />
<meta name="viewport" content="wide=device-width, initial-scale= 1"/>
<style media="screen">
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
</script>
</head>
<body>
<h1>Hello World!</h1>
<pre>This is description fff</pre>
<hr>
<p>That is a pen <hr> pencil</p>
<hr>
<p>That is a pen ,<mark>pencil</mark> </p>
<p>That is a pen ,<small>pencil</small> </p>
<p>That is a pen ,<del>pencil</del> </p>
<p>That is a pen ,<sub>pencil</sub> </p>
<p>That is a pen ,<sup>pencil</sup> </p>
<p>That is a pen ,<b>pencil</b> </p>
<p>That is a pen ,<strong>important</strong> </p>
<p>That is a pen ,<i>italic</i> </p>
<p>That is a pen ,<em>emphasize</em> </p>
<a href="./0.jpg" target="_blank" title="go to my image">google</a>
<img src="01.jpg" width="500px" alt="Google">
<table>
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>Tom</td>
<td>18</td>
</tr
<tr>
<td>Andy</td>
<td>23</td>
</tr>
</table>
<br><br><br>
<table>
<tr>
<th>Name</th>
<th colspan="2">Telephone Number</th>
</tr>
<tr>
<td>Bill</td>
<td>1234</td>
<td>5678</td>
</tr>
</table>
<table>
<caption>Team Leader</caption>
<tr>
<th>Name</th>
<td>Mark</td>
</tr>
<tr>
<th rowspan="2">Telephone Number</th>
<td>1234</td>
</tr>
<tr>
<td>5678</td>
</tr>
</table>
<ul>
<li>Tom</li>
<ul>
<li>24</li>
<li>1.83m</li>
</ul>
<li>john</li>
</ul>
<ol start="35">
<li>Bill</li>
<li>AMY</li>
</ol>
<br><br><br><br><br><br><br>
<dl>
<dt>Tom</dt>
<dd>He is a nice student.</dd>
</dl>
<br><br><br><br><br><br><br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/avVdERVSNvw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
{結合HTML5}
<!DOCTYPE html>
<html>
<head>
<title>
Shehome's Website
</title>
<meta http-http-equiv="Content-type" content="text/html ; charset=utf-8" />
<meta name="viewport" content="wide=device-width, initial-scale= 1"/>
<style media="screen">
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
</script>
</head>
<body>
<form>
<input list="myLists">
<datalist id="myLists">
<option value="IE"></option>
<option value="Firefox"></option>
<option value="Google"></option>
<option value="Edge"></option>
</datalist>
<br>
<input type="color" name="color" value="color">
<br>
<input type="date" name="date">
<br>
<input type="email" name="email">
<br>
<input type="number" name="number" min="1" max="6">
<br>
<input type="text" name="firstname" value="Tom" readonly<!--不能修改文字-->
<br>
<input type="text" name="firstname" value="Tom" disabled>
<br>
<input type="text" name="firstname" value="Tom" size="90">
<br>
<input type="text" name="firstname" value="Tom" maxlength="4">
</form>
</body>
</html>
{圖片、音訊}
<!DOCTYPE html>
<html>
<head>
<title>
Shehome's Website
</title>
<meta http-http-equiv="Content-type" content="text/html ; charset=utf-8" />
<meta name="viewport" content="wide=device-width, initial-scale= 1"/>
<style media="screen">
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
</script>
</head>
<body>
<audio controls>
<source src="001.mp3" type="audio/mpeg">
</audio>
<video width="600px" controls>
<source src="puppet.mp4" type="video/mp4">
</video>
</body>
</html>
{最終Project}
<!DOCTTYPE html>
<html lang="en">
<head>
<title>Shehome's webpage</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
table, th, td{
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<header>
<h1>My zoo</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section>
<img src="img/jojo.png" alt="Jojo" width="100%" >
</section>
<br/>
<section>
<h2>My video section</h2>
<br/>
<video width="500px" controls autoplay>
<source src="video/jojo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<article>
<h3>Zoo description1</h3>
<p>今天是臺北市立動物園建園106年園慶，一大早非洲動物區就傳出超級喜訊，
金剛猩猩「Tayari」順利產下寶寶，保育員已經觀察到寶寶有吸吮到母乳，
母仔平安。</p>
<p>今天是臺北市立動物園建園106年園慶，一大早非洲動物區就傳出超級喜訊，
金剛猩猩「Tayari」順利產下寶寶，保育員已經觀察到寶寶有吸吮到母乳，
母仔平安。</p>
</article>
<br/>
<hr/>
<br/>
<article>
<h3>Zoo description2</h3>
<p>今天是臺北市立動物園建園106年園慶，一大早非洲動物區就傳出超級喜訊，
金剛猩猩「Tayari」順利產下寶寶，保育員已經觀察到寶寶有吸吮到母乳，
母仔平安。</p>
<p>今天是臺北市立動物園建園106年園慶，一大早非洲動物區就傳出超級喜訊，
金剛猩猩「Tayari」順利產下寶寶，保育員已經觀察到寶寶有吸吮到母乳，
母仔平安。</p>
</article>
<section>
<table style="width:100%">
<caption>My zoo animals</caption>
<tr>
<th>Name</th>
<td>Lion</td>
<td colspan="2">Elephant</td>
</tr>
<tr>
<th>Number</th>
<td>36</td>
<td>Male:25</td>
<td>Female:20</td>
</tr>
</table>
</section>
<br/>
<hr/>
<br/>
<footer>
<form class="" action="index.html" method="post">
Username:<br>
<input type="text" name="name" value="">
<br>
Email address:<br>
<input type="email" name="email" value="">
<br>
Date:<br>
<input type="date" name="date" max="today">
<br>
Message:<br>
<textarea name="name" rows="4" cols="50"></textarea><br/><br/>
<input type="submit" value="提 交">
</form>
</footer>
<strong>© 2020 Shehome.com. All rights reserved.</strong>
</body>
</html>
留言列表
日常閒聊 (1)