---
# System prepended metadata

title: iSpan 1. HTML - 上課筆記本 + 整理
tags: [資展國際, HTML]

---

# iSpan 1. HTML - 上課筆記本 + 整理
>* <font color="crimson">HTML	
    >定義網頁的內容</font>
>* CSS 
>定義網頁的外觀(階層樣式表)
>* JavaScript	
>定義網頁和使用者的互動
    
<br><br><br><br>
==HTML tags 和 atrributes 名稱大小寫皆可，但使用習慣建議固定使用小寫==
==HTML 取id、class屬性的值注意區分大小寫、不能數字開頭、不要空格、可以用_==
## <font color="DodgerBlue">HTML5</font>
* **HTML5，超文本標記語言 HyperText Markup Language 第五版。**

* **副檔名為 .html。**

* **特色為 ==標記(標籤)== 定義網頁內容。**

```graphviz
digraph HTML {
                nodesep=1.0 // increases the separation between nodes
                
                node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
                edge [color=Blue, style=dashed] //All the lines look like this

                HTML文件->{html元素1 html元素2 html元素3}
                html元素1->{開始標籤，包含屬性 內容 結束標籤}
}
```
>HTML文件由許多==元素element==構成。
>> html元素由==標籤tag==建立。
>>>標籤以<>為格式，<tag>內容</tag>。
>>>有開始標籤和結束標籤，或是一個標籤本身兼具<input />。
>>>>開始標籤內、標籤名字後會有==屬性attribute==。
>>>>賦予屬性值來描述元素的特徵或特質。
:::info
:eyes: 元素可以有多個屬性，但使用到標籤不支援的屬性，不會對標籤產生效果。
:::

>[!IMPORTANT]  id屬性值 **命名規則：**
>1. 區分大小寫。
>2. 至少含一字元(不能為空)。
>3. 不能以數字開頭。
>4. 不能包含空格。
:::success
:book: JS相關屬性有==事件屬性==，通常為==on開頭==，例： onclick=""。
:::
註解方式為 `<!-- . . . -->`
對於不同版本IE，有條件註解
https://zh.wikipedia.org/zh-tw/%E6%9D%A1%E4%BB%B6%E6%B3%A8%E9%87%8A

<br><br><br><br>
### <font color="mistyrose">HTML文件架構</font>
```graphviz
digraph HTML文件架構 {

                nodesep=1.0 // increases the separation between nodes
                
                node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
                edge [color=Blue, style=dashed] //All the lines look like this

                HTML文件->{Doctype html元素 }
                html元素->{head元素 body元素}
                {rank=same;Doctype head元素 body元素}  // Put them on the same level
}
```
1. **Doctype宣告**
    ==非html標籤==，是告訴browser此份文件為什麼文件類型。
    現代網頁基本都是這個格式`<!DOCTYPE html>`，宣告為標準的HTML5文件。
	
    
2. **`<html>`**
    HTML網頁中必存在且唯一之tag。
    即==root element==。
    除了`<!DOCTYPE html>`，其他所有元素皆為`<html>`之子元素。
3. **`<head>`**
    HTML網頁中必存在且唯一之tag。
    
4. **`<body>`**
    HTML網頁中必存在且唯一之tag。
    放文件的內容。
:::success
:book: 寫新的HTML檔案，輸入 **！** 可以自動生成基本架構。
:::

<br><br><br><br>
## <font color="Dodgerblue">head標籤</font>
* `<meta>` ==文件相關資訊==，無結束標籤。

    	<meta charset="UTF-8">
    	<meta name="description" content="Free Web tutorials">
    	<meta name="keywords" content="HTML, CSS, JavaScript">
    	<meta name="author" content="John Doe">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        
* `<title>` 文件==標題==。
* `<link>` ==改變圖示==或==引入外部CSS檔案==。
    例如： `<link rel="stylesheet" href="css\myStyle.css">`
* `<style>` 嵌入CSS樣式表，裡面宣告為CSS樣式的語法。
    CSS樣式的語法 ![image](https://hackmd.io/_uploads/ByHEuLOLR.png)
    CSS樣式可指定多個選擇器，用,分隔即可。
    可以用==media屬性==指定，例如`<style media="print">`，規定打印樣式。
    會在CSS章節介紹更多。
* `<script>` 執行JavaScript程式碼，可以直接寫入其中或是載入外部程式碼，也可以放在body內。

<br><br><br><br>
## <font color="Dodgerblue">body標籤</font>
### <font color="mistyrose">基本標籤/特殊字元</font>
* `<br>` 換行。
* `<hr>` 分隔線。
* `&nbsp;` 同 `&#160;` 空格。
* `&lt;` 同 `&#60;` 小於符號 "<"。
* `&gt;` 同 `&#62;` 大於符號 ">"。

<br><br>
### <font color="mistyrose">文字格式</font>
可以不使用標籤，直接放入純文字。
* `<b></b>` 粗體。
* `<i></i>` 斜體。
* `<s></s>` 刪除線。
* `<u></u>` 底線。
* `<strong></strong>` 粗體，意涵重要的內容。
* `<em></em>` 斜體，意涵強調的內容。
* `<del></del>` 刪除線，意涵刪除的內容。
* `<ins></ins>` 底線，意涵插入的內容。
*  `<h1> ~ <h6>` 標題，預設換行。
*  `<p></p>` 段落，預設換行。
*  `<pre></pre>` 保留文字格式。

<br><br>
### <font color="mistyrose">段落和區塊</font>
* `<div></div>` **區塊元素**，會在前後換行。
* `<span></span>` **行內元素**，不會在前後換行。
:::success
:book: 區塊元素內可以包含區塊元素或行內元素。
:::

<br><br>
### <font color="mistyrose">列表清單 list</font>
* `<ul></ul>` **無序列表**。
    屬性：**==style="list-style-type"==** 改變項目符號圖示。
    -> **disc / circle / square / none** 
* `<ol></ol>` **有序列表**。
    屬性：**==type==** 改變編號類型。
    -> **1 / A / a / I / i**
    屬性：**==start==** 改變編號初始號。
* `<li></li>` **列的內容**。
* `<dl></dl>` **定義列表**。
* `<dt></dt>` **定義名詞**。
* `<dd></dd>` **名詞的解釋**。

![image](https://hackmd.io/_uploads/SyZmpYq8C.png)

<br><br>
### <font color="mistyrose">連結 link</font>
* `<a href=""></a>` **連結**。
    必用：**==href==** 連結目標。
    -> 網址 / 內部路徑檔案 / 網頁內元素#id 
    屬性：**==target==** 選擇開啟方式。
    -> **_self / _blank** 
    -> 本身網頁(預設) / 新網頁。
:::success
:book:　href屬性的內容設定為 ==**#**== 或是 **#top** 都會回到網頁頂端。
:::

<br><br>
### <font color="mistyrose">img</font>
* `<img src="" alt="">` **嵌入圖片**。
    必用：==src==，圖片資料的路徑。
    屬性：==alt==，圖片無法顯示時的替代文字。
    屬性：height，圖片高。
    屬性：width，圖片寬。
:::success
:book:　CSS樣式 ( 高、寬 ) 建議還是使用CSS設定。
:::

<br><br>
### <font color="mistyrose">video</font>
* `<video src=""></video>` **嵌入影片**。
    屬性：src，即路徑，之後會略過已介紹過的屬性。
    布林屬性：controls，控制面板。
    布林屬性：loop，循環播放。
    布林屬性：muted，靜音。
    屬性：poster，設置封面。
* `<iframe src=""></iframe>` **嵌入YT影片**，在YT影片右鍵嵌入程式碼貼製src即可。

<br><br>
### <font color="mistyrose">表格 table</font>
* `<table></table>` **表格**。
    屬性：style="border-collapse"，
    -> ==collapse== / separate(預設)
    -> 格線間分隔 / 格線間無分隔
![image](https://hackmd.io/_uploads/B174dc98R.png)
* `<tr></tr>` **表格的一列** ( row ) 。
* `<th></th>` **表格的標題欄** ( head ) 。
* `<td></td>` **表格的資料欄** ( data ) 。
    屬性：==colspan==，跨列合併儲存格，==左右合併==
    屬性：==rowspan==，跨行合併儲存格，==上下合併==
    ![image](https://hackmd.io/_uploads/rJ_Hq0lW1e.png)
:::success
:book:　設置一個column寬度(每欄)，其寬度會套用到每一個row(每一筆的對應欄位)，設置多個則以最大寬度為主。
:::
共用屬性：style="border:寬度 樣式 顏色"，樣式不能為空。
-> dotted / dashed / solid / . . . . . . 

<br><br>
### <font color="mistyrose">表單 form</font>
先介紹HTML課程後面的東西，表單有兩個重要的屬性
1. value，值。
2. name，名字。

這兩個屬性都是為了==和後端溝通==，後端藉由name確認是由誰提交的，在接收提交的值，即value。
練習HTML純前端時可以不用顧慮，也不會使用；唯一例外是`<datalist>`設置選項。

* `<form></form>` **表單**。
* `<select></select>` **下拉式選單**。
* `<optgroup></optgroup>` **下拉式選單的選項分區**。
    屬性：label，選項分區的名稱。
* `<option></option>`**下拉式選單的選項**。

`<select> <optgroup> <option> 使用`
![image](https://hackmd.io/_uploads/B1BNM1bZyx.png)

* `<fieldset></fieldset>` **表單元件分組**。
* `<legend></legend>` **分組標題**。

`<fieldset> <legend> 使用`
![image](https://hackmd.io/_uploads/S1CEEy-b1l.png)

* `<label></label>` **表單欄位標題**。
對輸入欄位和表單欄位產生效果，可以點擊標題==聚焦==到設定的欄位。
共兩種方法：
    1. 屬性：for，連結欄位的id。
    ![image](https://hackmd.io/_uploads/Ske6xk-b1g.png)
    2. 直接包在標籤內
    ![image](https://hackmd.io/_uploads/BkxzWJWZkg.png)
* `<input>` **輸入欄位**。
* `<datalist></datalist>` **輸入資料選擇清單**，和input搭配。

`<input> <datalist> 使用`
![image](https://hackmd.io/_uploads/HkA6zybZyx.png)
:::info
:eyes:　這裡的選項內容不是放在肚子，而是使用屬性：value 來設定的。
:::


<br><br><br><br>
## <font color="DodgerBlue">CSS、JS相關</font>
1. 屬性：id
    * 每個標籤必有的屬性。
    * value 區分大小寫、不能數字開頭、不要空格
    * 設定 value 時需要==獨特且限一==。
    * 若重名，雖然CSS、HTML執行不會抱錯，但在js執行功能會出問題。
2. 屬性：class
    * 每個標籤必有的屬性。
    * value 區分大小寫、不能數字開頭、不要空格
    * 設定 value 時==可不只一個==，空格隔開就會視為不同Class。
3. `<div>`默認為 display: block
4. `<span>`默認為 display: inline
5. `<input>`有屬性：pattern，設置成正規表示法來規範輸入內容。

<br><br><br><br>
## <font color="DodgerBlue">連結</font>
* HTML 的==所有 tags==
https://www.w3schools.com/tags/
* HTML內建tags 和 CSS的屬性對應
https://www.w3schools.com/cssref/css_default_values.asp
* 特殊字元
https://www.w3schools.com/html/html_entities.asp
* HTML Form 表單
https://www.w3schools.com/html/html_forms.asp
* HTML 表單元素
https://www.w3schools.com/html/html_form_elements.asp
* HTML 的==所有屬性==
https://www.w3schools.com/tags/ref_attributes.asp