SlideShare a Scribd company logo
1 of 10
HTML-Basic
大綱
 Text Formatting
 Links
 Images
 Lists
 Forms
 Iframes
 Blocks
Text Formatting
 <big>放大文字</big>
 <b>粗體</b>
 <strong>粗體(強調語氣)</strong>
 <i>斜體文字</i>
 <em>斜體(強調語氣)</em>
 <sup>上標文字</sup>
 <sub>下標文字</sub>
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
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
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"
巢狀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>
Forms
 常用屬性
 Action : 資料要傳送的位置 URL
 Enctype : 資料送至Server端的編碼方式
 Method : 資料傳送方式 get 、 post
 Name : 名稱
 Target : Server Response 的呈現方式
(_blank 新頁開啟、_self 在同一個frame中開啟)
Iframes
 常用屬性
 Height: Iframe 高度
 Width: Iframe 寬度
 src : Iframe 來源位置
 Name: Iframe 的名稱
Blocks
 Div :
 Block level elements (<h1>, <p>, <table> …)
 常用於定義頁面的區塊、布局
 Span :
 Inline elements
 常用於group inline 的Elements(<b>、<a>、<td>…)
 套用後頁面上不會有視覺上的改變
 Block level 與 Inline 的明顯差異就是前者會換行

More Related Content

More from LearningTech

More from LearningTech (20)

ReactJs
ReactJsReactJs
ReactJs
 
Docker
DockerDocker
Docker
 
Semantic ui
Semantic uiSemantic ui
Semantic ui
 
node.js errors
node.js errorsnode.js errors
node.js errors
 
Process control nodejs
Process control nodejsProcess control nodejs
Process control nodejs
 
Expression tree
Expression treeExpression tree
Expression tree
 
SQL 效能調校
SQL 效能調校SQL 效能調校
SQL 效能調校
 
flexbox report
flexbox reportflexbox report
flexbox report
 
Vic weekly learning_20160504
Vic weekly learning_20160504Vic weekly learning_20160504
Vic weekly learning_20160504
 
Reflection &amp; activator
Reflection &amp; activatorReflection &amp; activator
Reflection &amp; activator
 
Peggy markdown
Peggy markdownPeggy markdown
Peggy markdown
 
Node child process
Node child processNode child process
Node child process
 
20160415ken.lee
20160415ken.lee20160415ken.lee
20160415ken.lee
 
Peggy elasticsearch應用
Peggy elasticsearch應用Peggy elasticsearch應用
Peggy elasticsearch應用
 
Expression tree
Expression treeExpression tree
Expression tree
 
Vic weekly learning_20160325
Vic weekly learning_20160325Vic weekly learning_20160325
Vic weekly learning_20160325
 
D3js learning tips
D3js learning tipsD3js learning tips
D3js learning tips
 
git command
git commandgit command
git command
 
Asp.net MVC DI
Asp.net MVC DIAsp.net MVC DI
Asp.net MVC DI
 
Vic weekly learning_20151127
Vic weekly learning_20151127Vic weekly learning_20151127
Vic weekly learning_20151127
 

Html basic

  • 2. 大綱  Text Formatting  Links  Images  Lists  Forms  Iframes  Blocks
  • 3. Text Formatting  <big>放大文字</big>  <b>粗體</b>  <strong>粗體(強調語氣)</strong>  <i>斜體文字</i>  <em>斜體(強調語氣)</em>  <sup>上標文字</sup>  <sub>下標文字</sub>
  • 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中開啟)
  • 9. Iframes  常用屬性  Height: Iframe 高度  Width: Iframe 寬度  src : Iframe 來源位置  Name: Iframe 的名稱
  • 10. Blocks  Div :  Block level elements (<h1>, <p>, <table> …)  常用於定義頁面的區塊、布局  Span :  Inline elements  常用於group inline 的Elements(<b>、<a>、<td>…)  套用後頁面上不會有視覺上的改變  Block level 與 Inline 的明顯差異就是前者會換行