網頁三兄弟 - HackMD

# 網頁三兄弟 :::danger 請愛惜共筆，勿進行惡意刪減 ::: [Slide](https://docs.google.com/presentation/d/1_joStoivDqiA0lwh9GHWbV5wgTImi95c/edit?usp=sharing&ouid=112476510912142534257&rtpof=true&sd=true) --- :::spoiler Table of Content [TOC] ::: - 網頁架構 ![](https://miro.medium.com/max/1050/1*DMLL29PVpc2xBW3Aeq-RIg.jpeg =500x350) - 使用者 - 前端 - 後端 ## 網頁三兄弟 - HTML - 骨架 - 全名:**H**yper**T**ext **M**arkup **L**anguage - 超文本**標記**語言 - 讓瀏覽器讀取，並將其視覺化 - **不是程式語言** - 是一種標記語言 - 文件的內容:純文字 - 結合文字及相關內容 - 文件結構和資料處理細節的電腦文字編碼 - **標記語言 VS. 程式與語言** - 標記語言不用於向計算機發出指令，常用於格式化和連結 - 程式語言有較強的邏輯和行為能力 - CSS - 衣服 - JAVASCRIPT - 動作 ```htmlmixed= <!DOCTYPE html> <html> <head> <title>Title!!!</title> </head> <body> <p>Text!!!</p> </body> </html> ``` ### HTML - `<!DOCTYPE html>` - 讓瀏覽器以HTML5方式渲染 - `<head></head>` - 放網頁資訊，給瀏覽器看 or 導入文件 - `<title></title>` - 網頁的標題 - `<body></body>` - 主要的網頁部分 - 主要可視內容 - `<p></p>` - 段落 - 會換行(換行是p的特性，與結束符號/無關) - `` - 註解~可以開編輯模式翻這幾天的共筆\~~  - 標題文字(從大到小) - `<h1></h1>` - `<h2></h2>` - … - `<h6></h6>` - 清單 - `<ul></ul>` - 未排序的清單 **U**nordered **L**ist ```htmlmixed= <ul> <li>Coffee</li> <li>Tea</li> <li>Juice</li> </ul> ``` - `<ol></ol>` - 排序清單 **O**rdered **L**ist ```htmlmixed= <ol> <li>first</li> <li>second</li> <li>third</li> </ol> ``` - `<a href="連結">文字</a>` - 連結到你想去的網頁 - `<img src="圖片網址" width="寬" height="高">` - 插入圖檔 - `<a href="連結"><img src="圖片網址" width="寬" height="高"></a>` - 點選圖片會進入到指定網址 > 為什麼 `img` 沒有後標籤？ > [name=sarapan19980221] >> 剛剛有提醒到某些 `tag` 語法上沒有後標籤， `img` 就是其中之一喔 >> [name=dogQ] >> 在這裡補充，大部分有前後標籤的 tag 都是為了包含某些資料進去，例如 `<a></a>` 是將東西轉化為連結，因此要變成連結的東西，需要包含在 `<a>要包起來的東西</a>`，因此像是 img 這種無須包含資料的 tag 大部分就不會給後標籤了 >> [name=CrazyFire] > 請問一下如何讓圖片換到下一行呢 > [name=m12192002] >> 如果要達到換行的效果，可以用 `<br>` 這個 tag >> [name=CrazyFire] - `<form action="" method=""></form>` - 創建表單 - `<input type="" value="顯示的文字" name="" id="">` - `type`：text, password, button… - `name`：名字，可以重複 - `id`：身分證，不可以重複 - [input 更多玩法！](https://www.fooish.com/html/input-tag.html) - `<div></div>` - 創建區塊 - 方便排版、美化 - 方便 CSS 套用 ### CSS - **C**ascading **S**tyle **S**heets - 讓網頁變漂漂 - [如果沒有的話...](https://freewebsitetemplates.com/preview/space-science/index.html) - 使用方式 - inline - internal - external - 優先權 - inline > internal > external - 多數使用 external - 好維護 ~~前端設計師才不會崩潰~~ - inline style - 寫在 style 屬性內 - `<h2 style="color: red;">Red Text</h2>` - DOM - ![](https://i.imgur.com/L49Qm6r.png =400x200) - 父元素會影響子元素 - **D**ocument **O**bject **M**odel 定義HTML的結構 - internal style - 寫在 html 內 - 只影響目前頁面 - `<style></style>` - Selector - tag、class、id ```htmlmixed= <head> <style> h1{ color: red; } </style> </head> ``` ```css= body{ background-color: black; /* body tag 中的背景變黑 */ } .class-name{ color: red; /* class-name 中的文字變紅*/ } #id-name{ color: blue; /* id-name 中的文字變藍*/ } ``` - external style - 讀入外部 CSS - 可讓多個頁面共用 ```htmlmixed= <head> <link rel="stylesheet" type="text/css" href="./路徑/名字.css"> </head> ``` ```css= body{ background-color: black; } ``` - 常見 CSS - color：顏色 - text-align：文字對齊 - center：置中 - right：靠右 - left：靠左 - size - px：絕對單位，pixel - font-size: 12px; - em：每個子元素透過倍數乘以父元素的 px 值 - font-size: 1.5em; - rem：每個元素透過倍數乘以根元素的 px 值 - font-size: 1.5rem; - %：每個子元素透過百分比乘以父元素的 px 值 - background-color：背景顏色 - [Color](https://webgradients.com/) - background-image：url("圖片網址") > link 的rel跟type是甚麼 > [name=dh10050160] >> rel 代表 relationship >> type 代表檔案類型 MIME 那些 >> 大致上就都是幫助瀏覽器辨識喔 >> 詳情可以看這些官方文件喔 >> [Official Document](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link)、[rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-rel)、[type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-type) >> [name=dogQ] ### JavaScript - **直譯**式語言 - 一行一行動態編議 + 執行 - 較靈活的型別處理 - 速度較慢 - 不是Java!! - Java是編譯式語言 - 需要先編譯完才執行 - 事先定義型態 - 執行速度較快 - 動態網頁與人互動、更新網頁內容 * 可寫在 HTML 內任意位置 ```javascript= function helloworld(){ console.log("Hello World!"); } ``` * 也可外部引用 .js 檔 ```htmlmixed= <head> <script src="./path/XXX.js"></script> </head> ``` * 變數宣告（變數名稱區分大小寫）：弱型別 ```javascript= let num = 666 //數字 let str = "666" //字串 let arr = [123, "tree"] //陣列 let bool = true // or false，布林值 ``` - 運算子 - `+ - * /` - `== != > >= < <=` - `&& ||` - `%` 取餘數，如 5 % 3 = 2 - `**` 次方 - `=== !==` 嚴格比較 ~比較值\ &\ 型態~ - 輸出 - `console.log()` - `alert()` :::success [Final Lab](https://drive.google.com/file/d/1Y_3-tg5bMp46fYois6BYAFSI68MfZjBw/view?usp=sharing) ::: ###### tags: `Enlightened` `NISRA` `2021` <style> .navbar-brand::after { content: " × NISRA"; } </style>