html 自己看系列

清單 list

ul: unorder list
ol: order list
li: list item

<ul>
    <li>hi!</li>
    <li>my name is Rich</li>
</ul>

圖片 img

exp: <img alt="這是個圖片" title="我的圖片" src="source"/>

alt: 當圖片無法顯示時，會顯示的文字敘述
title: 滑鼠在圖片上面停留，會顯示的文字
src: 圖片來源

pre 保留完整格式

在 html 裡面，任何的換行或多個空格都會被忽略。
但只要被

 包著，換行或多個空格就不會被忽略。

<pre>
    hello!
    I 
    want 
    to 
    buy a Macbook Air! 
</pre>

如果不想用這個，可以用 
 進行換行。全名為： line break
a
比較常見是用在超連結

<a href="https://google.com">here is a link</a>

但除了連到頁面之外的連結，也可以連到頁面內的其他位置。像是回到最上面的功能。

<a href="#top">back to top</a>

href 裡面的 # + 屬性id 可以跑去那個元素的位置
iframe
<iframe src="source"/>

嵌入來源網址頁面
form
<form>
    user:<input type="text"/>
    password:<input type="password"/>
    email:<input type="email"/>  // 可以自動幫你確認使用者是否輸入email 的格式
    日期: <input type="date"/>
    組別: <input type="ratio" name="gender" id="male"><label for="male">男性</label>
    <input type="ratio" name="gender" id="female"><label for="female">女性</label>
    <input type="ratio" name="gender" id="other"><label for="other">其他</label>
    興趣：<input type="ckeckbox" id="sport"><label for="sport">運動</label>
<form/>

escape
如何在網頁中顯示標籤？
& ->   &amp;
< ->   &lt;
> ->   &gt;

把標籤的符號換成上面那樣
<div></div>  =>
&lt;div&gt;&lt;/div&gt;