Day13 HTML三

今天的影片内容为介绍一些常用的元素，像是插入超连结与图片，以及表格的建立等～
一起来看看让网页变得更加吸睛的魔法吧！/images/emoticon/emoticon42.gif

P.S.建议大家将所有的HTML档与图片储存在同一个资料夹

暑假於海生馆拍摄的图片，送给大家（请将此档案命名为DSC_0394.jpg）

https://ithelp.ithome.com.tw/upload/images/20210927/20141397USDBTEfRvS.jpg

以下为影片中有使用到的程序码

<!doctype html><!-- 请将此档案存成HTML7.html -->
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>资料输出1</title>
</head>
<body>

<header>
<h1>水母的秘密</h1>
<p>撷取自维基百科</p>
</header>

<section>
<h1>水母的寿命</h1>
<p>
水母生命周期十分复杂，寿命长短不一，相关研究也较为缺乏。<br>
最特殊的是灯塔水母，它能通过反覆通常生殖和转分化达到「不老不死」。<br>
</p>
</section>

<section>
<h1>水母的天敌</h1>
<p>
鲨鱼：鲨鱼偶尔会捕食水母，但大部分的时候不会。<br>
玳瑁：目前已知玳瑁除了捕食小鱼为生，另一食物来源为水母。<br>
海龟：捕食水母为生，海龟除了眼睛外，身体其他部分都可以抵抗水母的毒性，牠们在捕食水母时会闭上眼睛。<br>
曼波鱼：捕食水母为生。<br>
紫螺：分布在热带太平洋温暖的水域，爱吃漂浮在水面的水母。<br>
</p>
</section>

<footer>
<br>
<p>此网页写於2021某个天气晴的午後</p>
<p>维基百科连结:https://zh.wikipedia.org/wiki/%E6%B0%B4%E6%AF%8D</p>
</footer>

</body>
</html>

<!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>资料输出2</title>
</head>
<body>
<h1>水母的基本介绍</h1>
<p>撷取自维基百科</p>
<br>
<p>水母是无脊椎动物，属於刺胞动物门中的一类，其中包括水母、海葵、珊瑚、水螅。<br>
全世界的海洋中有超过两百种的水母，牠们分布於全球各地的水域里，无论是热带的<br>
水域﹑温带的水域﹑浅水区﹑约百米深的海洋，甚至是淡水区都有牠们的踪影。</p>
</body>
</html>

<!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>资料输出2</title>
</head>
<body>
<h1>水母的基本介绍</h1>

<p>撷取自<a href="https://zh.wikipedia.org/wiki/%E6%B0%B4%E6%AF%8D">维基百科</a></p>

<br>
<p>水母是无脊椎动物，属於刺胞动物门中的一类，其中包括水母、海葵、珊瑚、水螅。<br>
全世界的海洋中有超过两百种的水母，牠们分布於全球各地的水域里，无论是热带的<br>
水域﹑温带的水域﹑浅水区﹑约百米深的海洋，甚至是淡水区都有牠们的踪影。</p>
</body>
</html>

<!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>资料输出2</title>
</head>
<body>
<h1>水母的基本介绍</h1>
<p>撷取自<a href="https://zh.wikipedia.org/wiki/%E6%B0%B4%E6%AF%8D">维基百科</a></p>
<br>
<p>水母是无脊椎动物，属於刺胞动物门中的一类，其中包括水母、海葵、珊瑚、水螅。<br>
全世界的海洋中有超过两百种的水母，牠们分布於全球各地的水域里，无论是热带的<br>
水域﹑温带的水域﹑浅水区﹑约百米深的海洋，甚至是淡水区都有牠们的踪影。</p>

<img src="DSC_039.jpg" alt="於海生馆拍摄的水母" height="300" width="450">

</body>
</html>

<!doctype html><!-- 请将此档案存成HTML11.html -->
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>资料输出2</title>
</head>
<body>
<h1>水母在生物学中的分类1</h1>
<p>撷取自<a href="https://zh.wikipedia.org/wiki/%E6%B0%B4%E6%AF%8D">维基百科</a></p>
<br>

<table border="1">

<thead>
    <tr><th>科学分类</th><th>类别名称</th></tr>
</thead>

<tbody>
    <tr><td>界</td><td>动物界</td></tr>
    <tr><td>亚界</td><td>真後生动物亚界</td></tr>
    <tr><td>演化支</td><td>副同源异形基因动物</td></tr>
    <tr><td>演化支</td><td>	浮浪幼虫样动物</td></tr>
    <tr><td>门</td><td>刺胞动物门</td></tr>
</tbody>

</table>


</body>
</html>

<!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>资料输出2</title>
</head>
<body>
<h1>水母在生物学中的分类</h1>
<p>撷取自<a href="https://zh.wikipedia.org/wiki/%E6%B0%B4%E6%AF%8D">维基百科</a></p>
<br>
<h2>科学分类</h2>
<ul>
    <li>界--动物界</li>
	<li>亚界--真後生动物亚界</li>
	<li>演化支--副同源异形基因动物</li>
	<li>演化支--浮浪幼虫样动物</li>
	<li>门--刺胞动物门</li>
</ul>
   
</body>
</html>

<!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>最终档案</title>
</head>
<body>
<h1>水母的基本介绍</h1>
<p>撷取自<a href="https://zh.wikipedia.org/wiki/%E6%B0%B4%E6%AF%8D">维基百科</a></p>
<br>
<p>水母是无脊椎动物，属於刺胞动物门中的一类，其中包括水母、海葵、珊瑚、水螅。<br>
全世界的海洋中有超过两百种的水母，牠们分布於全球各地的水域里，无论是热带的<br>
水域﹑温带的水域﹑浅水区﹑约百米深的海洋，甚至是淡水区都有牠们的踪影。</p>
<img src="DSC_0394.jpg" alt="於海生馆拍摄的水母" height="300" width="450">
<ul>
    <li><a href="HTML11.html">水母在生物学中的分类</a></li>
	<li><a href="HTML7.html">水母的秘密</a></li>
</ul>
</body>
</html>

如果在影片中有说得不太清楚或错误的地方，欢迎留言告诉我，谢谢您的指教。


<<:  Day12 咸香下饭好帮手-金银蛋炒四季豆

>>:  Day12 用python写UI-聊聊选项钮与核取方块checkbox

[Day 16] 以 Programmatic 取代 Annotation 的方式撰写 OpenAPI 文件

Spring Boot 使用 Annotation 撰写 OpenAPI Definition 我们...

Day 9 - 14 Must Know Dev Tools Tricks

前言 JS 30 是由加拿大的全端工程师 Wes Bos 免费提供的 JavaScript 简单应用...

【24】如果把 Dropout 放在 CNN 之後会发生什麽事

Colab连结 不知道大家有没有发现，目前现在主流的网路结构中已经愈来愈少看到 Dropout 了，...

字典与集合

字典特徵 字典和阵列类似，也是可变序列，但它是无序的，保存的内容是以「键:值」的形式存放的。 键是唯...

What is the reason behind Pacbell email login issue?

There could be a number of reasons behind the Pacb...