# <a id='123'>HTML_Exercise</a> <h2>HTML參考網站:<a href=https://www.runoob.com/html/html-editors.html><img src=https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQRjCP0-KRjpRa-5MtF7ePWhUzCZu03hHYeRA&usqp=CAU></a></h2> <h2>HTML編輯器</h2> >1.VS Code：https://code.visualstudio.com/ >2.Sublime Text：http://www.sublimetext.com/ >3.也可以用記事本。 <h2>標題</h2> 通過`<h1>`到`<h6>`定義，大小不一樣。 ```htmlmixed= <h1>第一大的標題</h1> <h2>第二大的標題</h2> <h3>第三大的標題</h3> <h4>第四大的標題</h4> <h5>第五大的標題</h5> <h6>第六大的標題</h6> ``` 範例: > <h1>第一大的標題</h1> > <h2>第二大的標題</h2> > <h3>第三大的標題</h3> > <h4>第四大的標題</h4> > <h5>第五大的標題</h5> > <h6>第六大的標題</h6> <h2>段落</h2> 通過`<p>`定義。 ```htmlmixed= <p>段落</p> <p>下一個段落</p> ``` 範例: > <p>段落</p> > <p>下一個段落</p> <h2>連結</h2> ```htmlmixed= <a href='https://www.google.com/'>連結到google網頁</a> ``` 範例: > <a href='https://www.google.com/'>連結到google網頁</a> <h2>圖像</h2> ```htmlmixed= <img src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2020/01/31/20200131-052418_U17017_M588719_cd2e.jpg?itok=s0SyFjTD" width="263" height="192" /> ``` 範例: <img src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2020/01/31/20200131-052418_U17017_M588719_cd2e.jpg?itok=s0SyFjTD" width="263" height="192" /> <h2>換行</h2> ```htmlmixed= 第一行<br/>第二行 ``` 範例: 第一行<br/>第二行 <h2>水平線</h2> `<hr>`標籤可以用來分隔內容 ```htmlmixed= <p>第一個段落</p> <hr> <p>第二個段落</p> ``` 範例: <p>第一個段落</p> <hr> <p>第二個段落</p> <h2>注解</h2> ```htmlmixed= <!--注解放這裡--> ``` <h2>格式化標籤</h2> |標籤|範例| |----|----| |`<b>`|<b>粗體文字| |`<i>`|<i>斜體文字| |`<strong>`|<strong>加重語氣| |`<em>`|<em>重點文字| |`<small>`|<small>較小的字| |`<sup>`|這是<sup>上標字| |`<sub>`|這是<sub>下標字| |`<ins>`|<ins>底線| |`<del>`|<del>刪除線| ```htmlmixed= <b>粗體文字 <i>斜體文字 <strong>加重語氣 <em>重點文字 <small>較小的字 這是<sup>上標字 這是<sub>下標字 <ins>底線 <del>刪除線 ``` ## 電腦輸出標籤(需要再去查) |標籤|描述| | ---- | ---- | |`<code>`|定義電腦程式| |`<kbd>`|定義鍵盤碼| |`<samp>`|定義電腦程式樣本| |`<var>`|定義變數| |`<pre>`|定義預格式文本| ## 引文，引用標籤(需要再去查) |標籤|描述| |----|----| |`<addr>`|定義縮寫| |`<address>`|定義地址| |`<bdo>`|定義文字方向| |`<blockquote>`|定義長的引用| |`<q>`|定義短的引用| |`<cite>`|定義引用| |`<dfn>`|定義一個定義項目| ## 連結id 在頁面上的某個位置設定標籤 ```htmlmixed= <a id="tips">標籤位置</a> ``` 點擊連結到標籤頁面 ```htmlmixed= <a href="#tips">帶到有標籤的頁面</a> ``` 範例: <a href="#123">回到上層</a> ## `<head>` `<title>`設定標題，一定要有。 ```htmlmixed= <title>標題</title> ``` `<base>`設定程式中所有連結的默認連結。 ```htmlmixed= <base href='https://hackmd.io/@haoli/html_exercise'> <a href>這連結我沒有設網址</a> ``` <base href='https://hackmd.io/@haoli/html_exercise'> 範例: <a href>這連結我沒有設網址</a> # `<link>` # 還不太清楚 # `<style>` # 還不太清楚 # `<meta>` # 還不太清楚 # `<script>` # 還不太清楚