# 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