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;






Related Posts

Redux + React-Redux 入門

Redux + React-Redux 入門

[Git101] 版本控制

[Git101] 版本控制

小樹屋微讀書會 —— 實習篇 速記

小樹屋微讀書會 —— 實習篇 速記






Comments