--- ###### tags: `課程` --- 第二堂社課（HTML） === https://reurl.cc/e6yeRW --- ## 一個按鍵就讓你變成駭客? ---- 先打開瀏覽器 隨便點開一個網站（校網之類的） 然後按下 F12 ---- 螢幕的右方是不是跳出了一個酷酷的視窗 你剛剛做的就叫做 ## 檢視網頁原始碼 <!-- 順便講網址 + 全端/純前端網站 --> ---- 而視窗內的文字就是今天的主題 --- # HTML --- ## 網頁小知識 ---- ## 前端?後端? ![](https://i.imgur.com/RewLgaQ.png) ---- ## HTML Method - GET - POST - PUT - PATCH - DELETE ---- ## 網址 <img src="https://i.imgur.com/tswgU3j.jpg" alt="drawing" width="400"/> <img src="https://i.imgur.com/fcYKZ3g.png" alt="drawing" width="400"/> ---- ## https / http ![](https://i.imgur.com/6tDBoYl.jpg) --- ### <font color="#f00">H</font>yper <font color="#f00">T</font>ext <font color="#f00">M</font>arkup <font color="#f00">L</font>anguage --- 超文字標示語言 <!-- 不是程式語言 --> ---- ## 編輯環境 ---- 因為 html 不是程式語言 所以用任何文字編輯器（記事本 就可以編寫（但那樣超蠢 所以我們使用 VScode 做為這次的編輯器 --- https://code.visualstudio.com/ ---- ## 將檔名存為index.html 因為大部分瀏覽器都會把 index (索引)當作首頁 沒有給子連結時會預設在 index.html ---- ## html 基本架構 ![](https://i.imgur.com/WszhhyT.png) ---- ```html= <!DOCTYPE html> — 文件類型（doctype）用來連結一些應遵守的規則。 <html></html> — 根元素（root element），所有顯示在這個頁面上的 內容。 <head></head> — 裡面放不會顯示於網頁瀏覽者眼前的重要資訊。 <meta charset="utf-8"> — 這個元素指定文件使用utf-8字元編碼。 <title></title> — 呈現於網頁瀏覽者眼前的網頁標題。 <body></body> — 包含了所有會顯示於網頁瀏覽者眼前的內容。 ``` ---- ```html= 起始標籤：<你要的tag>　ex. <p> 結束標籤：</你要的tag> ex. </p> 內容：ex. My cat is very grumpy 元素： 由起始標籤、結束標籤、內容所組成。 ``` --- ![](https://i.imgur.com/EwcxpF8.png) ---- 5. 屬性 * 在元素名稱和屬性之間有一個空格 * 屬性名稱後面接「=」 * 屬性包在起始標籤裡面 --- ![](https://i.imgur.com/lPINRZ3.png) ---- ## 屬性範例 ``` html= <p style="color:#60f542"> hello world. </p> <p style="color:rgb(96,245,66)"> hello world. </p> ``` ---- # 所以現在是... # 實作時間！ ---- 如果依照剛剛的 code 得到的網頁應該像是這樣 ![](https://i.imgur.com/ewaBQBW.png) ---- # Github Pages ---- ![](https://i.imgur.com/7HNYIPI.jpg) ---- ![](https://i.imgur.com/PZS14hK.jpg) ---- ![](https://i.imgur.com/VEue7wm.jpg) --- # 其他元素 https://html-online.com/editor/ ---- ```html= <p></p> 段落 paragraph <strong></strong> 粗體字 strong <b></b> 粗體字 bold <i></i> 斜體次 italic <em></em> 強調字 emphasize <img src="" alt=""> 照片image <h1></h1> 標題heading 最大 <h2></h2> ... <h3></h3> ... <h4></h4> ... <h5></h5> ... <h6></h6> 最小 ``` ---- ```html= <ul> 無順序清單 unordered list <li></li> 清單內容 list item <li></li> <li></li> ...... </ul> <ol> 有順序清單 ordered list <li></li> 清單內容 list item <li></li> <li></li> ...... </ol> <a href=""></a> 連結 anchor *註記：href = hypertext reference ``` ---- ## 巢狀結構 ```html= <p>My <strong>cat</strong> is very grumpy</p> ``` ![](https://i.imgur.com/U2EZuxZ.png) ---- ### 巢狀結構錯誤範例 --- ``` html= <p> My <strong> cat </p> </strong> ``` ---- ## 圖片 ```html= <img src="https://upload.wikimedia.org/wikipedia/zh/c/c1/CKSH_Hsinchu_logo.jpg" alt="CKSH_logo"> ``` ![](https://i.imgur.com/iBt5aA0.png) ---- ## 標題 ```html= <h1>Hello world</h1> <h2>Hello world</h2> <h3>Hello world</h3> <h4>Hello world</h4> <h5>Hello world</h5> <h6>Hello world</h6> ``` ![](https://i.imgur.com/jSkZxiu.png) ---- ## 連結 ```html= <a href="https://hackmd.io/@ihatecheese/BJ22IWhCK#/3/6">handout</a> ``` ![](https://i.imgur.com/79wQukl.png) ---- ## 清單 ```html= <p>在建功資研，我們有</p> <ul> <li>宇謙</li> <li>宇謙</li> <li>宇謙</li> </ul> <p>你以為沒了嗎?對，沒了</p> ``` ![](https://i.imgur.com/P9Eo1RW.png) --- # 補充 ---- ## 註解 * C++ ```cpp= //這是C++的註解 ``` * html ```html= <!-- 這是html的註解 --> ``` ---- ## html的空格 ```html= <p>hello world.</p> <p>hello world.</p> ``` ![](https://i.imgur.com/QLPpsj6.png) 在html中，不管後面有多少空格 輸出結果最多都只會有一個 ---- ### 但是如果需要不只一個空格呢? ---- ## 字元參照 | < | &lt\; | | ---- | -------- | | > | &gt\; | | " | \&quot; | | ' | \&apos; | | & | \&amp; | | 空白 | \&nbsp\; | ---- ## class ---- 在html建立一個<p\>元素 並給定名為intro的class ```html= <p class="intro">This is intro</p> ``` 在CSS中參照intro這個class ```css= .intro { color: green font-weight: bold } ``` ---- ## <div\> ---- * <div\> 當作容器將 HTML 整理出不同區塊 * 為了給 CSS 做排版或 JavaScript 做互動操作 * <div\> 本身沒任何特殊意義 ---- class常用於<div\>元素 方便網頁上整個區塊的調整 ---- <!-- LaTex -->