HTML第一章 - HackMD

--- tags: HTML,第一章 --- # HTML第一章絕對路徑 ``` 1.從磁碟機開頭寫出檔案路徑 2.完整的網址 ``` 相對路徑 ``` ./當前位置 ../返回到上一層位置 ``` # HTML正課 W3C 建議在 HTML 中使用小寫，並且對於更嚴格的文檔類型（如 XHTML ）要求使用小寫 ## 骨架 ``` <html>開始標籤 </html>結束標籤 ``` ``` <html> <head> <title></title> </head> <body> 內容 </body> </html> ``` ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> ``` ## 嵌套關係禁忌如果觸碰嵌套禁忌不會報錯，瀏覽器會自動幫你改程式碼 p標籤不要嵌套div、p、h a標籤不能嵌套a(除此之外a可以套任何標籤) ## head標籤內 title 設定瀏覽器頁籤上的名字 ... ### 語言屬性 https://www.w3schools.com/tags/ref_language_codes.asp ``` <html lang="en"> ``` ## body標籤內 ### 基本標籤 h1、h2、h3、h4、h5、h6 標題標籤h1最大h6最小 p 段落標籤 br 空行(單標籤不寫/也能運行) hr 水平線(單標籤不寫/也能運行) b 加粗 strong 加粗 u 下劃線 ins 下劃線 i 傾斜 em 傾斜 s 刪除線 del 刪除線 small 字體大小變小 ### mark標籤 ``` <p>Do not forget to buy <mark>milk</mark> today.</p> ``` 文字上會有黃色螢光筆的效果 ### sub標籤 ``` <p>H<sub>2</sub>O</p> ``` 寫化學式會用到 ### sup標籤 ``` <p>2<sup>10</sup></p> ``` 數學上表示次方會用到 ### p標籤 ``` <p title="第一段">你好這是作文</p> ``` title 滑鼠懸停時顯示的文字 ### pre標籤 ``` <pre> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </pre> ``` 不須使用br空行來做換行預設字體與其他標籤不同，通常是Courier固定寬度的字體 ### img標籤 ``` <img src="./" alt="" title="" width="" height=""/> ``` img 圖片標籤 src 路徑屬性 ./ 當前位置(相對路徑語法) alt 替換文本屬性(屬性值寫一段文字) title 提示文本屬性(滑鼠懸停圖片上時顯示的文字) width 寬度屬性 height 高度屬性 ### audio標籤 ``` <audio src="./" controls/> ``` audio 音訊標籤 src 路徑屬性 ./ 當前位置(相對路徑語法) controls 控制按鈕 autoplay 自動撥放(很多瀏覽器不支援了) loop 循環播放音訊標籤只支援三種格式:mp3、wav、ogg ### video標籤 ``` <video src="./" controls autoplay muted width="" height=""/> ``` ``` <video controls> <source src="./video.mp4"> </video> ``` video 影片標籤 src 路徑屬性 ./ 當前位置(相對路徑語法) controls 控制按鈕 autoplay 自動撥放(chrome只支援靜音撥放) muted 靜音 loop 循環播放 width 寬度屬性 height 高度屬性影片標籤只支援三種格式:mp4、webM、ogg ### a標籤(超連結) ``` <a href="https://www.google.com/">超連結顯示的字</a> <a href="https://www.google.com/" target="_blank">超連結顯示的字</a> <a href="#">空連結</a> ``` a a標籤 href 引用及跳轉地址 target="_blank" 在新分頁開啟 href：定义链接的目标地址。 target：定义链接打开的窗口或框架。常用值包括_self，_blank，_parent和_top。 download：定义链接是否下载而不是在浏览器中打开。 rel：定义链接与当前页面之间的关系，如rel="nofollow"可以告诉搜索引擎不要跟踪这个链接。 title：定义链接的标题，当用户将鼠标悬停在链接上时会显示。 type：定义链接的媒体类型，常用于指定链接是一个音频、视频、PDF等等。 ### 無序列表 ``` 無序列表 <ul> <li>蘋果</li> <li>芭樂</li> <li>香蕉</li> </ul> ``` ul標籤只能包含li標籤 li標籤可以包含任何東西 ### 有序列表 ``` 有序列表 <ol> <li>第一名</li> <li>第二名</li> <li>第三名</li> </ol> ``` ol標籤只能包含li標籤 li標籤可以包含任何東西 ### 自定義列表 ``` 自定義列表 <dl> <dt>幫助中心</dt> <dd>帳戶管理</dd> <dd>購物指南</dd> <dd>訂單操作</dd> </dl> ``` dl標籤只能包含dt dd標籤 dt dd標籤可以包含任何東西 dt 列表主題 dd 列表每一項 ### 表格 ``` 表格 <table border="1" width="600" height="400"> <caption><b>實況主成績單</b></caption> <thead> <tr> <th>姓名</th> <th>成績</th> <th>評語</th> </tr> </thead> <tbody> <tr> <td>張嘉航</td> <td>87分</td> <td>亞洲統神</td> </tr> <tr> <td>張葦航</td> <td>66分</td> <td>鼻地大師</td> </tr> </tbody> <tfoot> <tr> <td>總結</td> <td>給我重修</td> <td>兄弟齊心</td> </tr> </tfoot> </table> ``` table 表格整體，包裹多個tr caption 表格大標題 tr 表格每行，包裹td th 表頭單元格 td 表格單元格 border 邊框粗細 width 寬度屬性 height 高度屬性 (通常寬度高度是用CSS來改) 表格結構標籤 thead 表格頭部 tbody 表格整體 tfoot 表格底部 ### 表格之合併單元格 ``` 表格之合併單元格 <table border="1" width="600" height="400"> <caption><b>實況主成績單</b></caption> <thead> <tr> <th>姓名</th> <th>成績</th> <th>評語</th> </tr> </thead> <tbody> <tr> <td>張嘉航</td> <td rowspan="2">87分</td> <td>亞洲統神</td> </tr> <tr> <td>003</td>  <td>統神老婆</td> </tr> </tbody> <tfoot> <tr> <td>總結</td> <td colspan="2">兩個87</td>  </tr> </tfoot> </table> ``` 上下合併保留最上的，刪除其他左右合併保留最左的，刪除其他 rowspan 上下合併 colspan 左右合併不能跨結構合併(不能跨thead、tbody、tfoot) ### 表單 ``` 表單 <input type="text"/>文本框，輸入單行文字 <br/> <input type="text" placeholder="請輸入帳號"/> <br/> <input type="password"/>密碼框，輸入單行文字(密碼) <br/> <input type="password" placeholder="請輸入密碼"/> <br/> <input type="radio"/>單選框，用在多選一 <br/> 性別:<input type="radio" name="sex" checked/>男<input type="radio" name="sex"/>女 <br/> <input type="checkbox"/>多選框，用在多選多 <br/> <input type="file"/>文件選擇，用在上傳文件 <br/> <input type="file" multiple/> <br/> <input type="submit"/>提交按鈕 <br/> <input type="reset"/>重置按鈕 <br/> <input type="button"/>普通按鈕，須配合JavaScript才有功能 ``` input標籤可以透過type屬性值的不同，展示不同效果 checked 默認選中 multiple 多文件上傳 ### form標籤 ``` <form action=""> <input type="text" placeholder="請輸入帳號"/> <br/> <input type="password" placeholder="請輸入密碼"/> <br/> <input type="submit" value="免費註冊"/> <br/> <input type="reset"/> <br/> <input type="button" value="普通按鈕"/> </form> ``` form 表單容器，框好一坨內容為一整個表單 action="" 告訴瀏覽器要將表單內容送去哪裡 ### button標籤 ``` <button>我是按鈕</button> <button type="submit">提交按鈕</button> <button type="reset">重置按鈕</button> <button type="button">普通按鈕</button> ``` ### 下拉菜單 ``` 下拉菜單 <select> <option>陳水扁</option> <option>馬英九</option> <option selected>蔡英文</option> </select> ``` selected 默認選中 ### 文本域 ``` 文本域 <textarea></textarea> <textarea cols="60" rows="30">預設文字</textarea> ``` cols 設定寬度 rows 設定高度 (通常不用以上兩個設定寬高，長度都會失真) ### label標籤 ``` 寫法一 <input type="radio" name="sex" id="male"/><label for="male">男</label> <input type="radio" name="sex" id="female"/><label for="female">女</label> 寫法二 <label><input type="radio" name="sex"/>男</label> <label><input type="radio" name="sex"/>女</label> ``` label標籤的功能為讓用戶在點單選框時，不用精準點中框框，點到文字也能點選成功 ### 容器標籤 ``` <div></div> 屬於塊(Block)元素 <span></span> 屬於行列(Inline)元素 ``` ### 布局標籤 ``` <header>網頁頭部</header> <nav>網頁導航</nav> <footer>網頁底部</footer> <aside>側邊欄</aside> <section>網頁區塊</section> <article>文章</article> ``` 布局標籤只有在設計手機版網站會用到 ### 字符實體 ```   空格工三小    朋友 ``` html本身不認識多個空格，若要打多個空格需使用字符實體