# HTML基礎 標籤、路徑、圖片、影音播放器
###### tags: `HTML`
## 標籤
* b是單純粗體，strong是強調文字內容是重要的
```
粗體字
<b> 與 <strong>
```
* p是段落，br是換行
```
文字段落;換行
<p> 與 <br>
```
* 段落格式
```htmlmixed=
<pre></pre> //預先格式化
<blockquote></blockquote> //左右縮排
<hr> //水平線
```
* 特殊符號
```
| < | < |
| --- | -------- |
| > | > |
| & | & |
```
* 編號與項目符號(項目符號使用CSS設定較好)
```htmlmixed=
<ol type="A" start="6">
<li>特點商城我</li>
<li>激動平台軟件一是力量</li>
<li>分享不得已被農村移動</li>
</ol>
```
* 區塊元素與行內元素
<div>
<div>是區塊元素，會自動換行並分成段落
</div>
<span>
<span>是行內元素，不會換行
</span>
---
* 文字格式標籤練習
```htmlmixed=
<p>
<b>床前明月光(b)</b>，<br>
<strong>疑似地上霜(strong)</strong><br>
<i>舉頭望明月(i)</i>，<br>
<em>低頭思故鄉(em)</em><br>
</p>
<p>
<mark>黃河之水天上來(mark)</mark><br>
<small>奔流到海不復回(small)</small><br>
</p>
<p>
<s>君不見，高堂明鏡悲白髮，朝如青絲暮成雪。(s)</s><br>
</p>
<p>
<del>人生得意須盡歡(del)</del><br>
<u>莫使金樽空對月(u)</u><br>
</p>
<p>
<ins>天生我材必有用(ins)</ins><br>
<sub>千金散盡還復來(sub)</sub><br>
</p>
<p>
<sup>會須一飲三百杯(sup)</sup>
</p>
```
實際顯示樣式:
---
### 語意標籤
(不影響版面，但程式碼會較好維護與閱讀)
練習:應用語意標籤排版(nav、header、article、section、aside)
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
<h1>小動物們</h1>
<nav>
<ul>
<li>住沙漠的</li>
<li>住家裡的</li>
<li>常往外跑的</li>
<li>裝可愛的</li>
</ul>
</nav>
</header>
<article>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, fugit, aspernatur. Dicta accusantium impedit in dolor, suscipit! Dolorum nostrum at, nihil quae reiciendis sunt vel sapiente, eaque dolor saepe aut.</p>
</section>
<aside>
<h2>毛茸茸的</h2>
<ol>
<li>花豹</li>
<li>狗狗</li>
<li>兔寶</li>
<li>天豬</li>
</ol>
</aside>
<section>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti expedita nulla, et eveniet, unde incidunt iusto, magni ex beatae odio sapiente recusandae ipsa libero iste officiis voluptatem quos. Dignissimos, rem.
</blockquote>
</section>
</article>
</body>
</html>
```
---
## 絕對路徑、相對路徑
```typescript=
絕對路徑
<img src="http://網址/膽案名稱">
相對路徑
<img src="檔案名稱">
上層資料夾
<img src="../檔案名稱">
下層資料夾
<img src="資料夾名稱/檔案名稱">
target
<a href="#" target="_連結開啟方式">顯示文字或圖片</a>
_blank ←在新分頁開啟
下面這四個現在很少用了(現在網頁很少寫框架)
_parent //若有框架在上一層開啟
_self //開啟在目前視窗或框架中，是預設值
_top //重新整理框架
視窗名稱 //開啟在指定名稱視窗中
```
---
## 頁內超連結
在頁面任一位置加入id識別碼後，使用超連結語法跳至該區塊
舉例:在H2的位置設定id=apple，指定到apple的位置
```htmlmixed=
<h2 id="apple"></h2>
<a href="#apple">前往apple</a>
```
**小技巧:可以使用#top讓整個網頁捲到最上方(因為id不存在頁面中就會捲到網頁最上方)**
---
## 圖片 img
* figure標示圖片及說明文字，figcaption包含說明文字區域
<figure>
<img href="圖片檔案位置" alt="看不到圖片的說明文字" title="圖片名稱" width="寬度" height="高度">
<figcaption>圖片區塊的說明文字</figcaption>
</figure>
---
## 音樂播放器
如果沒打controls就不會顯示播放器，會自動播放(注意type屬性一定要寫)
* audio的屬性
* source的屬性
<source>可以設定多個音檔來源，不同瀏覽器可辨識所支援的格式，並使用第一個可支援的音檔。
練習:寫一個音檔播放器
```htmlmixed=
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.wav" type="audio/wav">
目前瀏覽器不支援此播放格式
</audio>
```
## 影片播放器
* video的屬性
* source的屬性
練習:寫一個音檔播放器
```htmlmixed=
<video height="300px" width="400px" autoplay controls>
<source src="movie.mp4" type="video/mp4">
</video>
```
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Connect another wallet