HTML 簡介與基礎語法

--- tags: html title: HTML 簡介與基礎語法 description: 從HTML到MarkDown1-講義簡報-資訊社主題社課 image: 'https://i.imgur.com/1Q6Rm96.png' slideOptions: # 簡報相關的設定 theme: simple # 顏色主題 --- <style> .markdown-body hr, .markdown-body img[title='投影片才放'] {display:none} .slides h1 span {font-size:40%} .slides h1, .slides h2, .slides h3, .slides h4, .slides h5, .slides h6, .slides p, .slides blockquote {color:#656c73!important} .slides a {color:#337ab7!important} .slides img {border:0!important} .slides br {display:inline!important} br#title {display:none} .slides h2.toc {display:none!important} h2.toc {display:inline;border:0} </style> #### [md.nchuit.cc/html/](https://md.nchuit.cc/html/edit?view) # <i class="fa fa-fw fa-html5"></i>HTML 簡介<br id='title'>與基礎語法 > [<small><i class="fa fa-fw fa-github"></i>VJ</small>](https://github.com/twjmy) :::spoiler <h2 class='toc'>目錄</h2> {state=open} [ToC] ::: --- ## 呈現方式 ---- ### 記事本 ![](https://i.imgur.com/YuFRPHe.png) ---- ### <i class="fa-fw fa-file-word"></i>Word ![](https://i.imgur.com/VIIXQD2.png) ---- ### FB 社團 - 發文 ![](https://i.imgur.com/1IA2NE0.png) ---- ### [<i class="fa fa-fw fa-comments"></i>網絡論壇](https://zh.wikipedia.org/wiki/%E7%BD%91%E7%BB%9C%E8%AE%BA%E5%9D%9B) - 發帖 ![](https://i.imgur.com/igw3RE3.png) ---- ### [巴哈姆特哈啦區](https://forum.gamer.com.tw/) - 發文 ![](https://i.imgur.com/2eE3yf1.png) ### 巴哈姆特攻略百科 - 發文/編輯 ![](https://i.imgur.com/IdXjeEH.png) ---- ### 巴哈姆特我的小屋 - 創作 ![](https://i.imgur.com/hNTDIwb.png) ---- ## <i class="fa fa-fw fa-code"></i> 迷思首先，HTML 不是**程式**語言，而是**標記**語言。 ~~Progarm~~ **Code** ![](https://i.imgur.com/fSHiSS0.png) ---- ![](https://i.imgur.com/ysHmDCB.png) ---- ## [<i class="fa fa-fw fa-html5"></i>HTML](https://zh.wikipedia.org/wiki/HTML) <table><tr><td><b>H</b>yper<b>T</b>ext <b>M</b>arkup <b>L</b>anguage (超文本標記語言)，縮寫：HTML，是一種用於建立網頁的標準<b>標記語言</b>。<br>瀏覽器可以讀取HTML檔案，並將其彩現成<b>視覺化</b>網頁。<br><h6>HTML描述了一個網站的結構語意隨著線索的呈現，使之成為一種標記語言而<em>非程式語言</em>。</h6></td><td><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/HTML.svg/800px-HTML.svg.png' style="display:inline"></td></tr></table> * 最新版本： 5.2/ 5.3（工作草案）; 2017年12月14日，4年前 * 初始版本： 1993年，28年前 --- ## [HTML 元素](https://zh.wikipedia.org/wiki/HTML%E5%85%83%E7%B4%A0) HTML 中，一個 HTML 元素是 HTML 檔案(或訊息)的一個基本組成單元。HTML 檔案採用採用**樹狀結構**安排 HTML 元素。常見的 HTML 元素有**標題**、**段落**、**連結**、**列表**、**嵌入媒體**等等。 ---- ![](https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/DOM-model.svg/800px-DOM-model.svg.png =x600) ---- ### 例子(標題) 段落 [連結](https://google.com) <span style="color:red">紅色</span> + 清單項目**甲** + 清單項目*乙* 1. 列表項目***甲*** 2. 列表項目~~乙~~ ![](https://i.imgur.com/HviOatP.png "圖片") ---- ### <i class="fa fa-fw fa-gamepad"></i>動動手: 檢查方法1 - 選單>檢查 |<i class="fa fa-fw fa-chrome"></i>Chrome|<i class="fa fa-fw fa-internet-explorer"></i>Edge| |:-:|:-:| |<img style="display:inline" width="200" src="https://i.imgur.com/Utx18BP.png">|<img style="display:inline" width="200" src="https://i.imgur.com/5TQdPUX.png">| :::info 🕹快捷鍵: 在 <i class="fa fa-fw fa-chrome"></i>Chrome 或 <i class="fa fa-fw fa-internet-explorer"></i>Edge 瀏覽器中按下 <kbd>F12</kbd> 或 <kbd>Ctrl + Shift + I</kbd> 可以在 `Elements` 頁面檢視所有 HTML 元素。 ::: ---- ### <i class="fa fa-fw fa-gamepad"></i>動動手: 檢查方法2 - 選取工具 |<i class="fa fa-fw fa-chrome"></i>Chrome|<i class="fa fa-fw fa-internet-explorer"></i>Edge| |:-:|:-:| |<img style="display:inline" width="200" src="https://i.imgur.com/u7MUrsr.png">|<img style="display:inline" width="200" src="https://i.imgur.com/JIuGjD4.png">| :::info 🕹快捷鍵: 在 <i class="fa fa-fw fa-chrome"></i>Chrome 或 <i class="fa fa-fw fa-internet-explorer"></i>Edge 瀏覽器中按下 <kbd>Ctrl + Shift + C</kbd> 可以直接啟動選取模式。 ::: ![](https://i.imgur.com/gLDmcZD.png) --- ## <small>[<i class="fa fa-fw fa-tag"></i>HTML Tag](https://www.w3schools.com/tags/default.asp) `<tag>...</tag>`</small> ==很多==，特別又想用的要自己找，本次教學只介紹常用的 ![](https://i.imgur.com/gwN1YXm.png) ---- ### `*.html` 基礎框架 ```html= <html> <head> <title>網頁標題</title> <meta name="description" content="網頁描述"> <link rel="icon" href="https://hackmd.io/favicon.png">  </head> <body> 我才是一般內文  </body> </html> ``` 你可能注意到了... `<head>`內的元素都不需要用`</*>`關起來練習: 找出上面代碼整個區域是什麼 ---- ### <i class="fa fa-fw fa-child"></i>一般內文我不是一般內文 ![](https://i.imgur.com/uYPYGYT.png) ---- ![](https://i.imgur.com/93TF1CK.png =75%x) ---- ### <i class="fa fa-fw fa-paragraph"></i>段落 [`<p>`](https://www.w3schools.com/tags/tag_p.asp) ```htmlembedded=! <p>我是第一段</p> <p>我是第二段</p> ``` ---- <p>我是第一段</p> <p>我是第二段</p> ---- ![](https://i.imgur.com/HVNacF2.png) ### 段內換行 [`<br>`](https://www.w3schools.com/tags/tag_br.asp) \*不用`</br>` ```htmlembedded=! <p>段內<br>換行</p> ``` ---- <p>段內<br>換行</p> ---- ![](https://i.imgur.com/1a2q59v.png) ### <i class="fa fa-fw fa-indent"></i>首行縮排 `style="text-indent:*"` ```htmlembedded <p style="text-indent:2em">如果沒有到第二行就看不出來(?)補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字</p> ``` <p style="text-indent:2em">如果沒有到第二行就看不出來(?)補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字補字</p> ---- :::spoiler 練習: 複製***下面的文字***，用HTML標記成***下面的樣子*** ```htmlembedded <p style="text-indent:2em">早上好中國，現在我有冰淇淋，我很喜歡冰淇淋。但是，速度與激情9比冰淇淋...↓<br>速度與激情9，我最喜歡。所以現在是音樂時間，準備，1、2、3...↲</p> <p>兩個禮拜以後～速度與激情9～↓<br>兩個禮拜以↘後～速度與激情9～↓<br>兩個禮拜以後～～速度與激情9～↲</p> <p style="text-indent:2em">不要忘記，不要錯過。去電影院看速度與激情9，因為非常好，電影動作非常好。↓<br>差不多一樣，冰淇淋，再見。↲</p> ``` ::: <p style="text-indent:2em;text-align:left!important">早上好中國，現在我有冰淇淋，我很喜歡冰淇淋。但是，速度與激情9比冰淇淋...↓<br>速度與激情9，我最喜歡。所以現在是音樂時間，準備，1、2、3...↲</p> <p style="text-align:left!important">兩個禮拜以後～速度與激情9～↓<br>兩個禮拜以↘後～速度與激情9～↓<br>兩個禮拜以後～～速度與激情9～↲</p> <p style="text-indent:2em;text-align:left!important">不要忘記，不要錯過。去電影院看速度與激情9，因為非常好，電影動作非常好。↓<br>差不多一樣，冰淇淋，再見。↲</p> --- ![](https://i.imgur.com/VOP7Ivb.png "投影片才放") ![](https://i.imgur.com/UDwdHhK.png "投影片才放") ![](https://i.imgur.com/ng3cBy2.png "投影片才放") ### <i class="fa fa-fw fa-align-center"></i>置中 <i class="fa fa-fw fa-align-right"></i>置右 <i class="fa fa-fw fa-align-left"></i>置左 `style="text-align:center/right/left"` ```htmlembedded=! <p style="text-align:center">置中文字</p> <p style="text-align:right">置右文字</p> <p style="text-align:left">置左文字</p> ``` ---- <p style="text-align:center">置中文字</p> <p style="text-align:right">置右文字</p> <p style="text-align:left">置左文字</p> ---- #### <i class="fa fa-fw fa-bars"></i>屬性 (Attribute) `<TAG AAA="aaa" BBB="bbb" ...>` ![](https://i.imgur.com/alnSrAB.png =x500) ---- ![](https://i.imgur.com/aDFKCQA.png "投影片才放") ![](https://i.imgur.com/b0I2M5P.png "投影片才放") ![](https://i.imgur.com/AqoYJnG.png "投影片才放") ### <i class="fa fa-fw fa-user"></i>標題 [`<h1><h2>...<h6>`](https://www.w3schools.com/tags/tag_hn.asp) 預設只有到h6，想新增就[自己來](https://stackoverflow.com/questions/14908463/how-to-make-new-heading-tag-numbers-such-as-h7-h8-etc) ```htmlembedded=! <h4>標題四</h4> <h5>標題五</h5> <h6>標題六</h6> ``` ---- #### 標題四 ##### 標題五 ###### 標題六 ---- :::spoiler 練習: 試試將 ***任一標題*** 置中 ```htmlembedded=! <h4 style="text-align:center">置中標題四</h4> ``` <h4 style="text-align:center">置中標題四</h4> ::: ---- ![](https://i.imgur.com/T3EY710.png "投影片才放") ![](https://i.imgur.com/L7FtQ1n.png "投影片才放") ![](https://i.imgur.com/qeMmNGg.png "投影片才放") ![](https://i.imgur.com/HtjgCJY.png "投影片才放") ### <i class="fa fa-fw fa-bold"></i>粗體 <i class="fa fa-fw fa-italic"></i>斜體 <i class="fa fa-fw fa-underline"></i>底線 <i class="fa fa-fw fa-strikethrough"></i>刪除線 [`<B>`](https://www.w3schools.com/tags/tag_b.asp) [`<I>`](https://www.w3schools.com/tags/tag_i.asp) [`<U>`](https://www.w3schools.com/tags/tag_u.asp) [`<S>`](https://www.w3schools.com/tags/tag_s.asp) ```htmlembedded=! <b>粗體</b> <i>斜體</i> <u>底線</u> <s>刪除線</s> ``` <b>粗體</b> <i>斜體</i> <u>底線</u> <s>刪除線</s> ---- ### 段內區塊 `<span>` & 文字顏色 [`style="color:*"`](https://www.w3schools.com/cssref/css_colors.asp) ```htmlembedded=! <p><span style="color:blue">藍色</span> <span style="color:red">紅色</span></p> ``` <p><span style="color:blue">藍色</span> <span style="color:red">紅色</span></p> ---- :::spoiler 練習: <i><b><u style="color:red">我</u>喜歡吃</b><s>屎</s>冰淇淋</i> ```htmlembedded=! <i><b><u style="color:red">我</u>喜歡吃</b><s>屎</s>冰淇淋</i> ``` ::: --- ![](https://i.imgur.com/wvRTh7a.png "投影片才放") ![](https://i.imgur.com/xOvp9vy.png "投影片才放") ![](https://i.imgur.com/khDck8Q.png "投影片才放") ![](https://i.imgur.com/0hkINGd.png "投影片才放") ---- ### <i class="fa fa-fw fa-list-ul"></i>無序清單`<ul>` 預設是實心圓點，其他符號可以在這找，有兩種方法: 1. [`type="circle/disc/square"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul#attr-type) 2. [`style="list-style-type:'*'"`](https://www.w3schools.com/cssref/pr_list-style-type.asp) 可以直接把符號打在\*的地方 ---- ```htmlembedded=! <ul style="list-style-type:'🙏'"> <li>項目一</li><li>項目二</li><li>項目三</li> </ul> ``` <ul style="list-style-type:'🙏'"> <li>項目一</li><li>項目二</li><li>項目三</li> </ul> <ol> <li>項目一</li><li>項目二</li><li>項目三</li> </ol> ```htmlembedded=! <ol type="1/a/A/i/I"> <li>項目一</li><li>項目二</li><li>項目三</li> </ol> ``` ---- ![](https://i.imgur.com/26aJiNA.png =x350) ### <i class="fa fa-fw fa-list-ol"></i>有序清單`<ol>` 1. [`type="1/a/A/i/I"`](https://www.w3schools.com/tags/att_ol_type.asp) 2. [`style="list-style-type:'*'"`](https://www.w3schools.com/cssref/tryit.asp?filename=trycss_list-style-type_all) ---- ![](https://i.imgur.com/Scl5t51.png "投影片才放") ![](https://i.imgur.com/0mBvnt7.png "投影片才放") ![](https://i.imgur.com/agTlaUn.png "投影片才放") ### <i class="fa fa-fw fa-link"></i>超連結 [`<a>`](https://www.w3schools.com/tags/att_a_href.asp) ```htmlembedded=! <a href="https://www.google.com" target="_blank">超連結</a> <a href="https://www.google.com">我沒有 target="_blank"</a> ``` <a href="https://www.google.com" target="_blank">超連結</a> ---- ### <i class="fa fa-fw fa-image"></i>插入圖片 [`<img>`](https://www.w3schools.com/tags/tag_img.asp) \*不用`</img>` ```htmlembedded=! <img src="https://<網址>" title="提示文字" width="寬度(單位:像素)" height="高度(單位:像素)"> ``` <a href='https://www.kindpng.com/picc/m/254-2547396_javascript-html-css-logo-hd-png-download.png' title="HTML5 JS CSS3" width='500'><img src="https://www.kindpng.com/picc/m/254-2547396_javascript-html-css-logo-hd-png-download.png" title="HTML5 JS CSS3" width='500' style="display:inline"></a> :::spoiler 練習: 圖片超連結 ```html <a href='https://www.kindpng.com/picc/m/254-2547396_javascript-html-css-logo-hd-png-download.png' title="HTML5 JS CSS3" width='500'><img src="https://www.kindpng.com/picc/m/254-2547396_javascript-html-css-logo-hd-png-download.png" title="HTML5 JS CSS3"></a> ``` ::: ---- ![](https://i.imgur.com/QSh8zWB.png "投影片才放" =200x) ![](https://i.imgur.com/zrcLTBF.png "投影片才放") ---- ![](https://i.imgur.com/986y4AN.png "投影片才放") ---- ![](https://i.imgur.com/tq1YJby.png "投影片才放") ![](https://i.imgur.com/1uWej7G.png "投影片才放") ---- ### <i class="fa fa-fw fa-youtube"></i>嵌入 `<iframe>` ```htmlembedded=! <iframe width="寬度(單位:像素)" height="高度(單位:像素)" src="https://<網址>">載入中…</iframe> ``` <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PL6OTxZdzawDPD23Uq1ROv3RPsT7p0j7SD&autoplay=1&loop=1&rel=0&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>載入中…</iframe>  * [parameters](https://en.wikipedia.org/wiki/Query_string): http:\//.../x?==k1=v1&k2=v2&...== * [自動播放? `mute=1`](https://stackoverflow.com/questions/40685142/youtube-autoplay-not-working) * [單曲循環? `loop=1&playlist=影片ID`](https://stackoverflow.com/questions/13041088/getting-an-embedded-youtube-video-to-auto-play-and-loop) * [YouTube iframe 官方文件](https://developers.google.com/youtube/player_parameters?hl=zh-tw) ---- <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fnchuit.cc%2Fposts%2Fpfbid0DZMETMzyMiaxCKBHxL4xLnquV8hYdMJfzLoMRUdtNbn356hFdAqytGBJ2JGPTJi3l&show_text=true&width=256" width="256" height="458" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">載入中…</iframe> <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdVFNZkLXS3s6f9Gr8YUeKBgz3NURgSn-qKPfdmZtRTDGPCmw/viewform?embedded=true" width="256" height="626" frameborder="0" marginheight="0" marginwidth="0" style="display:inline!important">載入中…</iframe> <iframe src="https://discord.com/widget?id=782592919038328864&theme=dark" width="256" height="626" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts">載入中…</iframe> ---- ### [<i class="fa fa-fw fa-table"></i>表格 `<table>`](https://www.w3schools.com/html/html_tables.asp) ```htmlembedded=! <table> <thead> <tr><th>欄位標題A</th><th>欄位標題B</th></tr> </thead> <tbody> <tr><td>欄位A1</td><td>欄位B1</td></tr> <tr><td>欄位A2</td><td>欄位B2</td></tr> </tbody> </table> ``` <table> <thead> <tr><th>欄位標題A</th><th>欄位標題B</th></tr> </thead> <tbody> <tr><td>欄位A1</td><td>欄位B1</td></tr> <tr><td>欄位A2</td><td>欄位B2</td></tr> </tbody> </table> ---- ### [<i class="fa fa-fw fa-wpforms"></i>表單`<form>`](https://www.w3schools.com/html/html_form_input_types.asp) ```htmlembedded=! <form action="index.html" method="post"> 帳號 <input type="text" name="id" placeholder="輸入帳號" required><br> 密碼 <input type="password" name="pwd" placeholder="輸入密碼" required><br> <input name="ugly" value="true" hidden> <input type="submit" value="登入"> </form> ``` ---- ### [`<div>`](https://www.w3schools.com/tags/tag_div.ASP) `<div>` : `style="display:block"` `<span>` : `style="display:inline"` --- ## 補充 ---- ### [<i class="fa fa-fw fa-css3"></i>CSS](https://www.w3schools.com/css/default.asp) `<style>` 剛剛放在`<tag *>`開頭旁邊`style="*"`可一次寫完，但要指定哪些`<tag>`套用是門學問，像下面這樣。另外也可以存成`*.css`檔使用，`<style>`就可以拔掉 ```htmlembedded=! <style> .slides h1,.slides h2,.slides h3, .slides h4,.slides h5,.slides h6, .slides p{color:#656c73 !important} .slides a{color:#337ab7 !important} .slides img{border:0!important} hr{display:none} </style> ``` ---- ### 框架: [Bootstrap](https://getbootstrap.com/) 下面放`<head>` ```htmlembedded <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script> ``` 用[按鈕](https://getbootstrap.com/docs/5.2/components/buttons/)來舉例，放`<body>` ```htmlembedded <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button> ``` ![](https://i.imgur.com/jtVmNwd.png) ---- ## 框架: [Semantic UI](https://react.semantic-ui.com/usage/#option-2-cdn-no-bundler) `<head>` ```htmlembedded <link async rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2/dist/semantic.min.css"/> <script src="https://cdn.jsdelivr.net/npm/semantic-ui-react/dist/umd/semantic-ui-react.min.js"></script> ``` `<body>` ![](https://i.imgur.com/mxKrNyd.png) ```htmlembedded <button class="ui red basic button">Red</button> <button class="ui orange basic button">Orange</button> <button class="ui yellow basic button">Yellow</button> <button class="ui olive basic button">Olive</button> <button class="ui green basic button">Green</button> <button class="ui teal basic button">Teal</button> <button class="ui blue basic button">Blue</button> <button class="ui violet basic button">Violet</button> <button class="ui purple basic button">Purple</button> <button class="ui pink basic button">Pink</button> <button class="ui brown basic button">Brown</button> <button class="ui grey basic button">Grey</button> <button class="ui black basic button">Black</button> ``` ---- ### 圖包 ```htmlembedded <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> ``` https://fontawesome.com/icons/google ---- ### [<i class="fa fa-fw fa-code"></i>JavaScript](https://www.w3schools.com/js/default.asp) `<script>` 這才叫程式(Program')語言，讓使用者可以跟網頁互動，對資料進行流程控制等操作。詳細請見(下學期?): [<i class="fa fa-fw fa-book"></i>JavaScript 教學](https://md.nchuit.cc/js) ---- 可以直接在觸發動作時使用 ```htmlembedded=! <button onclick="this.style='display:none';window.print()">Print this page</button> ``` 也可以在網頁開啟時就跑起來 ```htmlembedded=! <html> <body> <p></p> <script> document.getElementsByTagName("p")[0].innerHTML="Hello world"; </script> </body> </html> ``` 也可以存成`*.js`，`<script>`就可以拔掉 ```htmlembedded=! <script src="myScript1.js"></script> ``` ---- ### [HTTP](https://zh.wikipedia.org/wiki/%E8%B6%85%E6%96%87%E6%9C%AC%E4%BC%A0%E8%BE%93%E5%8D%8F%E8%AE%AE) **H**yper**T**ext **T**ransfer **P**rotocol(超文本傳輸協定)，是全球資訊網絡數據通信的基礎。 #### [HTTPS](https://zh.wikipedia.org/wiki/%E8%B6%85%E6%96%87%E6%9C%AC%E4%BC%A0%E8%BE%93%E5%AE%89%E5%85%A8%E5%8D%8F%E8%AE%AE) **H**yper**T**ext **T**ransfer **P**rotocol **S**ecure，是一種透過計算機網路進行安全通訊的傳輸協定。**HTTPS**經由**實聯制**進行通訊，但利用SSL/TLS來加密封包，更安全。 ---- ### [URL(網址)](https://zh.wikipedia.org/wiki/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E5%AE%9A%E4%BD%8D%E7%AC%A6) **U**niform **R**esource **L**ocator(統一資源定位符)，俗稱網頁位址，簡稱**網址**，是網際網路上標準的資源的位址(Address)，如同在網路上的門牌。 ---- [![](https://i0.wp.com/www.design-hu.com/wp-content/uploads/2018/04/domain-1-768x418.png)](https://www.design-hu.com/web-news/domain.html) 統一資源定位符的完整格式如下： ``` [協定類型]://[使用者@][伺服器位址][:埠號]/[檔案路徑][?請求參數][#ID] ``` ###### 其中[使用者@]、[:埠號]、[檔案路徑]、[?請求參數]、[#ID]都屬於選填項。 ---- ![](https://miro.medium.com/max/875/0*s2u2kEx-8rAhxGaW) ---- ### 請求與回應 HTTP 的基本運作方式就像上圖一樣，我們開啟網頁、或在網頁上做特定的操作的時候，其實都是在向伺服器發送請求(`request`)，而伺服器則會對應 `request` 給予我們回應(`response`)。回應(`response`)的主要內容就是 ==HTML==。 ---- ### [<i class="fa fa-fw fa-server"></i>伺服器](https://developer.mozilla.org/zh-TW/docs/Learn/Common_questions/What_is_a_web_server) 「網路伺服器」(web server)可以指軟體、也可以指硬體、還可以指它們共同運作的狀態。存放網路伺服器軟體(如 [phpMyAdmin](https://zh.wikipedia.org/wiki/PhpMyAdmin))、網站檔案（如`*.html`、`*.css`、`*.js`）的電腦。它會連上網際網路(Internet)並能和其他連上網的設備做物理數據交換。 --- ### [<img style="display:inline" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/PHP-logo.svg/320px-PHP-logo.svg.png" width="10%">PHP](https://www.w3schools.com/php/default.asp) 全稱：「PHP：Hypertext Preprocessor」，即「PHP：超文字預處理器」，是一種開源的通用電腦手稿語言。PHP的應用範圍相當廣泛，尤其是在網頁程式的開發上並**可嵌入HTML中使用**。 ```php=! <?php echo 'Hello World!'; ?> ``` 需存成`*.php`，只能在伺服器上跑 ---- ### [SQL](https://www.w3schools.com/sql/default.asp) SQL（Structured Query Language:結構化查詢語言）是一種特定目的程式語言，用於管理關聯式資料庫管理系統（RDBMS），或在關係流資料管理系統（RDSMS）中進行流處理。[MySQL?](https://kknews.cc/zh-tw/code/abzrm56.html) [SQL你的Google試算表](https://www.wfublog.com/2016/11/google-4-sql.html) ---- ```sql select D, count(C) group by D order by count(C) Desc limit 3 label count(C) "簽到次數" ``` ![](https://i.imgur.com/BbeAG4O.png) <iframe width="160" height="130" frameborder="0" src="https://docs.google.com/spreadsheets/u/1/d/1q5eQpj-zFtUCNj_K1pN23RTpym9uqjOYT9wMsw_Qvz4/gviz/tq?tqx=out:html&sheet=110-1%20%E5%AF%A6%E8%81%AF%E5%88%B6&tq=select%20D%2C%20count(C)%20group%20by%20D%20order%20by%20count(C)%20Desc%20limit%203%20label%20count(C)%20%22%E7%B0%BD%E5%88%B0%E6%AC%A1%E6%95%B8%22%20">載入中</iframe> ---- ### <i class="fa fa-brands fa-markdown"></i>![](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg =10%x) MarkDown ```=! # 標題1 ## 標題2 - 無序清單 1. 有序清單 **粗體** *斜體* ~~刪除線~~ ``` 這投影片跟網頁就是用 MarkDown 寫的

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.