# HTML > - HyperText Markup Language > - Tim Berners-Lee 發明 > - 歷程 > - HTML(1993) > HTML2(1995) > HTML3.2(1996) > HTML4.0.1(1999) > HTML5(2008) > - HTML(1999) > XHTML1.0(2000) > HTML1.1(2001) > - [w3school](https://www.w3school.com.cn/index.html) > - [MDN文檔](https://developer.mozilla.org/zh-CN/docs/Web/HTML) > - [HTML規範](https://whatwg-cn.github.io/html/multipage/) ## 標籤 > - 不區分大小寫, 一般都小寫 > - 雙標籤 vs 單標籤 > - 雙標籤 `<標籤名></標籤名>` > - `/` : 結束符 > - 需要兩個標籤才能完整描述 > - 單標籤 `<標籤名 />` > - 一個標籤就能描述完成 > - 嵌套 vs 並列 > - 嵌套 > ```html > <父標籤> > <子標籤></子標籤> > </父標籤> > ``` > - 並列 > ```html > <兄標籤></兄標籤> > <弟標籤></弟標籤> > ``` ## 結構 ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title></title> <link src='style.css' rel='stylesheet' type='text/css'/> <script src='xx.js'></script> </head> <body></body> </html> ``` ### `<!DOCTYPE>` > - 文檔標籤, 向瀏覽器說明使用哪種協議 ( `html` `xml` ) 與版本 > - `<!DOCTYPE html>` : 使用 html5 > - 放在文檔最前面 ### `<meta>` `<meta charset="UTF-8">` : 編碼方式 > - utf-8: 全世界通用字符集 > - gb2312: 簡中 > - BIG5: 繁中 > - GBK: 繁簡中 ### `<base />` > - 設置全局屬性 > #### 屬性 > - href > - target ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base target="_blank"> </head> <body> <a href="http://www.google.com">google</a><br /> <a href="http://www.yahoo.com" target="_self">yahoo</a> </body> </html> ``` ### `<title></title>` > - 標題 ### `<link></link>` > - 連結標籤 > - 常用來引入 CSS ### `<script></script>` > - JS 標籤 > - 放上面的話, JS 必要時要開 `window.onload` ## Block Level `<h1>~<h6>` `<p>` `<div>` `<ul><li>` `<ol>` > - 特點: > - 從新行開始(獨佔一行) > - 可朔性高 > - 寬度默認100% > - 內容可以隨便塞 > - 文字類塊級 ( `<p>` `<h1>~<h6>` `dt` ) 只能放文本, 不能放塊級, 否則會有bug : > `<p><div></div></p>` 解析後會變成 `<p></p><div></div><p></p>` ### 標題標籤 > - `<h1></h1>` ~ `<h6></h6>` ### `<p></p>` > - paragraph ### `<div></div>` > - 佈局盒子 > - division ## Inline Level `<a>` `<strong>` `<b>` `<em>` `<i>` `<del>` `<s>` `<ins>` `<u>` `<span>` > - 特點: > - 和相鄰行內元素在一行 > - 可朔性低 > - 高寬調整無效 > - 水平方向可用padding,margin設置 > - 垂直方向調整無效 > - 默認寬度為內容本身寬度 > - 除 `<a>` 外, 內容只能容納文本或其他行內, 不允許塊級 > - `<a>` 不能再放 `<a>`, 否則點了要連誰？ > - `<a>` 也不能放 `<input>` ### `<span></span>` > - span 有一種橫跨一小段距離的意思, 常用來改一小段文字的樣式 > - 有點類似看書畫螢光筆的那段螢光筆的概念 ### 文本格式化標籤 > - 小東西常用 i, s , u 來裝, 例如 icon, 但一般都會把樣式清掉 > #### 粗體 > - `<b></b>` > - `<strong></strong>` (薦) > #### 斜體 > - `<i></i>` > - `<em></em>` (薦) > #### 刪除線 > - `<s></s>` > - `<del></del>` (薦) > #### 底線 > - `<u></u>` > - `<ins></ins>` (薦) ### `<a></a>` `<a href="跳轉目標URL" target="彈出方式">內容</a>` ```htmlmixed= <a href="01_課堂練習-新聞頁面.html">課堂練習</a> <br /> <a href="www.google.com">Google</a> <br /> ``` > - href: > - Hypertext Reference > #### 錨點定位 > - 常用於長篇頁面, 設定錨點可快速到達 > - `href="#"` 傳送到空錨點 ```htmlmixed= <a href="#test">test</a><br /> <!-- 點擊傳送到 id=text --> <h3 id="test"> ``` > - target: > - _self: 默認值, 直接跳轉 > - _blank: 新窗口 ## Inline-Block Level `<img />` `<input />` `<td>` > - 特點: > - 和相鄰行內元素在一行 > - 可朔性高 > - inline-block 間會有一點點縫隙, 那是 innerHTML 裡標籤間的空格 > <img src='https://i.imgur.com/v2LRMVU.png' style='width: 200px;'/><img src='https://i.imgur.com/0pSeonD.png' style='width: 200px;'/> > - 解決辦法: 就把父元素的 font-size 設 0 就好了 > - 或是標籤間不要換行, 只是源碼看起來會很怪 ```htmlmixed= <!-- 解決中間縫隙 --> <head> <meta charset='utf-8'> <style> body { font-size: 0; /* 父層文字大小設為 0 */ } div { display: inline-block; width: 100px; height: 100px; border: 1px solid red; } </style> </head> <body> <div></div> <div></div> </body> ``` ### `<img />` > - 圖片標籤 > #### 屬性 > - src > `src="圖片的URL"` > - img 幾乎是綁定了這個屬性, 沒有 src 的 img 差不多也廢了 > - 測試用路徑: > - `src='https://api.fnkr.net/testimg/大小/背景顏色/字體顏色'` > - `https://api.fnkr.net/testimg/100x100/FFF/000` > - `src='https://picsum.photos/寬/高?random=1'` > - https://picsum.photos/ > - alt > `alt="text"` > - 圖掛掉時顯示的文字 > - 可能影響 SEO, 有空要寫 > - title > `title="text"` > - 鼠標懸停時的文字 > - width & height > - `width="Pixel"` > - `height="Pixel"` > - 寬高只改一個時, 等比縮放 > - border > - `border="Num"` > - 編框 > #### 其他 > - Icon 資源 > - [iconfinder](https://www.iconfinder.com/) ## 列表 ### 無序列表 ```htmlmixed= <ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> <li> <ul> <li>111</li> </ul> </li> </ul> ``` > - `<ul>` 只能嵌套 `<li>` > - `<li>` 可以嵌套其他元素 ### 有序列表 \<ol>\</ol> ```htmlmixed= <ol> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> <li> <ol> <li>111</li> </ol> </li> </ol> ``` ### 自定義列表 ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> <dd>名詞1解釋2</dd> <dd>名詞1解釋3</dd> <dt>程式語言</dt> <dd>python</dd> <dd>c++</dd> <dd>java</dd> </dl> </body> </html> ``` ## 表格 \<table> > - tr別亂放, td隨便放 > - 表格沒有列元素, 列由行(tr)中的單元格(td)個數決定 ```htmlembedded= <table> <!-- 表格 --> <caption>a</caption> <!-- caption : 表格標題 --> <thead> <!-- thead : 表頭 --> <tr> <!-- tr : 行 --> <th>1</th> <!-- th : 表頭單元格 --> <th>1</th> </tr> </thead> <tbody> <!-- tbody : 表身 --> <tr> <td>2</td> <!-- td : 單元格 --> <td>2</td> </tr> <tr> <td>2</td> <td>2</td> </tr> </tbody> <tfoot> <!-- tfoot : 表尾 --> <tr> <td>3</td> <td>3</td> </tr> <tr> <td>3</td> <td>3</td> </tr> </tfoot> </table> ``` ### `<table></table>` > - `border="Pixel"`: 邊框 > - `cellspacing="Pixel"`: 單元格間的距離(默認為2) > - `cellpadding="Pixel"`: 單元格與內容間的距離(默認為1) > - `width="Pixel"`: 寬 > - `height="Pixel"`: 高 > - `align="Center/Right/Left"`: 「水平」對齊方式 ### `<td></td>` > - `rowspan="行數"`: 跨行合併 > - `colspan="列數"`: 跨列合併 ```htmlembedded= <!-- 表格標籤 --> <table border="1" cellspacing="0" cellpadding="1" width="300" height="100" align="center"> <caption>LMS</caption> <!-- 表格標題--> <thead> <!-- 定義表頭--> <tr> <!-- 行標籤 --> <th>Name</th> <!-- 表頭標籤--> <th>Sex</th> <th>Trait</th> </tr> </thead> <tbody> <!-- 定義主體--> <tr> <td>GodJJ</td> <!-- 單元格標籤--> <td>男</td> <td rowspan="2">怪怪的</td> <!--跨行合併--> </tr> <tr> <td>Toyz</td> <td>男</td> </tr> <tr> <td>Stanly</td> <td>男</td> <td>哭啊</td> </tr> <tr> <td>七龍珠</td> <td colspan="2">Man</td> <!-- 跨列合併--> </tr> </tbody> </table> ``` ## 表單標籤 > - 表單三部分 > - 表單控件 > - Input > - Select > - textarea > - button > - 提示信息 > - 表單域 ### Input 控件 ```htmlmixed= <!--text 文本--> 帳號: <input type="text" value="輸入帳號"/><br /> <!--password --> <!-- 常使用maxlength來設定最大長度--> 密碼: <input type="password" maxlength="8"><br /> <!--radio單選--> <!--name要設定一樣才有意義--> 性別: <input type="radio" name="sex" checked="checked" value="male">男 <input type="radio" name="sex" value="female">女<br /> <!--checkbox多選--> 興趣: <input type="checkbox" name="hobby" checked="checked">棒球 <input type="checkbox" name="hobby">藍球<br /> <!-- button普通按鈕--> <input type="button" value="HAHA"/> <!-- submit提交紐--> <input type="submit" /> <!-- reset重置鈕--> <input type="reset"> <!-- image圖片鈕--> <!-- 記得設置圖片src--> <input type="image" src="trump.jpeg"/ > <!-- file文件域--> <input type="file"/> ``` #### 屬性 > - type > - text: 單行文本 > - password: 密碼 > - radio: 單選按鈕 > - checkradio: 複選按鈕 > - button: 普通按鈕 > - submit: 提交按鈕 > - reset: 重置按鈕 > - image: 圖片按鈕 > - src > - file: 文件域 > - name: 控件名 > - `input.name` 很重要, > - 他是 URL 參數的 key > - 輸入的值 `input.value` 是參數的value > - 也就是 `?<input.name>=<input.value>` > - value: 默認值 > - checked: 定義選擇控鍵默認 > - maxlength: 最大字符數 > - 正整數 > - size: 空鍵寬度 > - `disabled: disabled` : 讓文本框不能點擊 ### label > - 綁定表單元素, 點擊被綁定的內容, 皆會獲得input焦點 > - 當元素有兩個以上時, 可以使用for來指定id名 ```htmlmixed= <label>帳號: <input type="text" value="輸入帳號"/ size="30"></label><br /> <!--for指定two, 點擊時會跳至id="two"那格--> <label for="two">密碼: <input type="password" maxlength="8"> <input type="password" maxlength="8" id="two"> </label><br /> ``` ### textarea文本域 `<textarea></textarea>` #### 屬性 > - cols: 每行字符 > - rows: 顯示行數 ### select 下拉菜單 ```htmlmixed= <select> <option>1</option> <option>2</option> <!--selected 默認選項--> <option selected="selected">3</option> </select> ``` ### 表單域 form > - 創建表單, 實現信息收集與傳遞給服務器 > - 每個標單都要有自己的表單域 ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="haha.py" method="post" name="login"> <input type="text" name="user"/><br /> <input type="password" name="pwd"/><br /> <input type="submit"/> <input type="reset"/> </form> </body> </html> ``` #### 屬性 > - action: 指定要傳給誰，沒指定會傳到當前頁面中 > - method > - get: 較快, 但會顯示表單內容 > 不能做密碼提交 > `/haha?user=123&pwd=456` > - post: 慢些, 不會顯示表單內容 > 安全一些 > `/haha` > - name ### Button > - 類似於 `<input type="button"/>` > - 只是這個是雙標籤 ```htmlmixed= <!-- 差異 - 事實上都能用, - 如果是送表單, 語意上a就比較不適合, a比較是導覽的概念 - 但是如果懶惰的話, 用 a 比較快(不用清一堆樣式) - 如果不考慮清樣式, button 看起來比較清爽且語意比較合 --> <a>Test</a> <input type='button' value='Test'/> <button>Test</button> ``` ## HTML5 ### 常用新標籤 > - `<header>頁面頭部</header>` > - `<footer>頁面尾部</footer>` > - `<header>` 跟 `<footer>` 雖然常常被用在整個頁面的頭尾, > 所以常常一個頁面可能只有一組這個 > - 但是這組合可能可以把它想成一個盒子的頭尾區域來使用 > - `<nav>導航鏈接</nav>` > - 既然是導航鏈接, 裡面包的應該大多都是 `<a>` 為主體的東西 > - `<article>文章</article>` > - `<section>節，小區域</section>` > - 常見的搭配語意: 章節裡面的文章 > - `<aside>側邊欄</aside>` > - `<datalist></datalist>` > - 標籤製造選項列表, 與input配合使用 > - 可以製造Google輸入的關聯效果 ```htmlmixed= <input type="text" list="star"/> <!--list連結datalist--> <datalist id="star"> <option>彭政閔</option> <option>彭恰恰</option> <option>林志玲</option> <option>林志穎</option> </datalist> ``` > - fieldset > - 搭配legend使用 > - 效果: > ![](https://i.imgur.com/vOJ1pcv.png) ```htmlmixed= <fieldset> <legend>xx</legend> oo </fieldset> ``` > - `<figure></figure>` 與 `<figcaption></figcation>` > <img src='https://i.imgur.com/U72wHFT.png' style='width: 100px'/> ```htmlmixed= <!-- 在做這種盒子的時候, 以往可能常常用這種方式來做 但盒子的語意非常不明確 --> <body> <div> <img src=''/> <span>圖片描述</span> </div> </body> <!-- 現在可以考慮使用 <figure></figure>包<figcaption></figcation>, 語意上會比較明確些 --> <figure> <div> <img src=''/> <figcaption>圖片描述</figcaption> </div> </figure> ``` > - `<meter>` > - 進度條 > ![](https://i.imgur.com/HzvhnjB.png) > - 屬性 > `min` : 最小值, 預設為0 > `max` : 最大值, 預設為1 > `value` : 當前數值, 必須在 `min` 跟 `max` 之間, 說白了就是顯示進度 ```htmlmixed= <meter value='50' min='0' max='100'></meter> ``` ### 常用新Type屬性值 > 這些標籤在手機上效果更明顯, 會依據標籤跳出不同鍵盤 ```htmlmixed= <form> email:<input type="email"><br/> tel:<input type="tel"><br/><!-- 跳出數字鍵盤--> number:<input type="number"><br/> <!--只能輸入數字--> url:<input type="url"><br/> search:<input type="search"><br/> range:<input type="range"><br/> time:<input type="time"><br/> date:<input type="date"><br/> datetime:<input type="datetime"><br/> month:<input type="month"><br/> week:<input type="week"><br/> color:<input type="color"><br/> <input type="submit"><input type="reset"> </form> ``` ### 常用新屬性 ```htmlmixed= <form> <!--placeholder: 佔位符--> <!--autofocus: 自動獲焦--> <input type="text" value="帳號"/><br /> <input type="text" placeholder="帳號" autofocus/><br /> <!--multiple: 多文件上傳--> <input type="file"/><br /> <input type="file" multiple/><br /> <!-- - autocomplete - 紀錄輸入, 自動填資料 - 必須要有name來儲存紀錄, 且需有提交鈕傳輸資料 - 預設為on, 另一value為off --> <input type="text" autocomplete="off" name="haha"/><br /> <!--required必填--> <!--accesskey設定快捷鍵--> <input type="text" required accesskey="s"/><br /> <input type="submit"/> </form> ``` ## 多媒體 ```htmlmixed= <!-- 嵌入: 直接複製貼上--> <iframe width="400" height="200" src="https://www.youtube.com/embed/jWpGRSh7iCU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <!-- audio基本寫法 <audio src="兜圈.mp3" autoplay controls loop="-1"></audio> 缺點: 如果瀏覽器不支援該播放格式就掛了, 故可以將src拆出來寫 --> <audio autoplay controls loop> <source src="兜圈.mp3"> <!-- <source src="兜圈.ogg"> --> <!-- 瀏覽器會依序判斷--> </audio> <!-- vedio同上 <video src="兜圈.mp4" autoplay controls loop="-1" width="400"></audio> --> <video autoplay controls loop width="400"> <source src="兜圈.mp4"> </video> <!-- Key - loop - value代表重複播放幾次 - 不寫或寫-1 代表無限重播 --> ``` ## 其他 ### \<hr /> > - horizontal ### \<br /> > - break ### 特殊字符 > - 空格 &nbsp; > - 不論文本有多少個空格, 解析都只會有一個 > - 故空格最好都用 &nbsp; ` G&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;O&nbsp; D J J ` > - `<` \&lt; > - `>` \&gt; > - 大小於會被當成標籤, 故大小於屬特殊字符 > - `&` \&amp; > - & 會被當成特殊字符解析 > - `©` : \&copy; > - `"` : \&quot > - `\` : \&apos ### 註釋 > `<!-- 內容 -->` > - Sublime 註釋快捷 Ctrl+/ ### 為什麼不要全部div+css？ > - 因為一些輔助身障人士的功能是讀取原始碼來告訴他們這邊是標題，那邊是列表，這個列表有一二三項等的 > - Google排序也是依據原始碼來解讀你的網站功能，去找相關資料(Title, Description, Keywords, h1)來排序(SEO)，例如標題，如果都沒有用標題，google怎麼知道你這個網站是在幹嘛的 ### 標籤的選擇 > - 簡單說就是根據人性語意去選擇合理的標籤, 只要不違反規則, 例如a包a, p包div等