More Related Content
More from LearningTech (20)
Html basic
- 4. Links
連結
<a href=“http://www.google.com”>link</a>
新視窗連結
<a href=“http://www.google.com” target=“_blank” >link</a>
錨點連結
<a href=“#tips”>到有用的提示</a>
<span id=“tips”>有用的提示</span>
url會改變 http://www.google.com
http://www.google.com#tips
- 5. Images
圖片
<img src=“url” alt=“替代圖片的提示” />
定義map的name,並設定area特定點擊區域
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area
shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
透過map 的name與 img的usemap對應,產生點擊特定區域呈現不同圖片
<img src=“planets.gif” width=“145” height=“126” alt="Planets" usemap="#planetmap">
參見w3school : http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
- 6. Lists
有序列表,Type: 1 、 A 、 a 、 I 、 i
<ol type=“”>
<li></li>
<li></li>
…
</ol>
無序列表, Type: disc 、 circle 、 square
<ul type=“”>
<li></li>
<li></li>
…
</ul>
Style替代type -> style="list-style-type:circle"
- 7. 巢狀Lists
無序列表
<ul>
<li>10</li>
<li>20
<ul>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25
<ul>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
</ul>
</li>
</ul>
</li>
<li>30</li>
</ul>
- 8. Forms
常用屬性
Action : 資料要傳送的位置 URL
Enctype : 資料送至Server端的編碼方式
Method : 資料傳送方式 get 、 post
Name : 名稱
Target : Server Response 的呈現方式
(_blank 新頁開啟、_self 在同一個frame中開啟)
- 10. Blocks
Div :
Block level elements (<h1>, <p>, <table> …)
常用於定義頁面的區塊、布局
Span :
Inline elements
常用於group inline 的Elements(<b>、<a>、<td>…)
套用後頁面上不會有視覺上的改變
Block level 與 Inline 的明顯差異就是前者會換行