---
# System prepended metadata

title: HTML基礎 標籤、路徑、圖片、影音播放器
tags: [HTML]

---

# HTML基礎 標籤、路徑、圖片、影音播放器
###### tags: `HTML` 

## 標籤


* b是單純粗體，strong是強調文字內容是重要的
```
粗體字
<b> 與 <strong>  
```

* p是段落，br是換行
```
文字段落;換行
<p> 與 <br>
```

* 段落格式
```htmlmixed=
<pre></pre>    //預先格式化
<blockquote></blockquote> //左右縮排
<hr>    //水平線
```

* 特殊符號

```
| <   | &lt;     |
| --- | -------- |
| >   | &gt;     |
| &   | &amp;    |
```

* 編號與項目符號(項目符號使用CSS設定較好)
```htmlmixed=
<ol type="A" start="6"> 
    <li>特點商城我</li>
    <li>激動平台軟件一是力量</li>
    <li>分享不得已被農村移動</li>
</ol>
```


* 區塊元素與行內元素

    <div>
         &lt;div&gt;是區塊元素，會自動換行並分成段落
    </div>
    <span>
        &lt;span&gt;是行內元素，不會換行
    </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>		
```

實際顯示樣式:
![](https://i.imgur.com/PsrNqMR.png)


---
### 語意標籤
(不影響版面，但程式碼會較好維護與閱讀)
![](https://i.imgur.com/OA99xZF.png)
![](https://i.imgur.com/DEv4Kph.png)



練習:應用語意標籤排版(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的屬性
![](https://i.imgur.com/KtQQIqV.png)

* source的屬性
![](https://i.imgur.com/MFWFmlf.png)
&lt;source&gt;可以設定多個音檔來源，不同瀏覽器可辨識所支援的格式，並使用第一個可支援的音檔。

練習:寫一個音檔播放器
```htmlmixed=
<audio controls>
	<source src="music.mp3" type="audio/mpeg">
	<source src="music.wav" type="audio/wav">	
		目前瀏覽器不支援此播放格式
</audio>
```

## 影片播放器

* video的屬性
![](https://i.imgur.com/g8WYPFU.png)

* source的屬性
![](https://i.imgur.com/ieG4uiM.png)

練習:寫一個音檔播放器
```htmlmixed=
<video height="300px" width="400px" autoplay controls>
	<source src="movie.mp4" type="video/mp4">
</video>
```