前端程式設計

# 前端程式設計 ## 概論網頁的架構分為前端+後端前端負責版面，後端負責資料庫儲存前端常用的三種語言 : html 骨架、 css 美編、 js 動作 ## html **標記性語言(marking language)** 感覺就是hackmd的左邊這裡，透過一些規範好的關鍵詞，製造出某些特殊效果例如換行，**加粗**，*斜體* HTML在這塊是既定的，通用的也算被人寫死的，相對來說，有人說XML是類似ㄉ，但它就可以做自定義標籤，於是你可以寫自己常用的它說穿了就是文字，滿滿的文字，但像我們看到句點會截斷一句話一樣，某些特定字元或字詞，對電腦來說有特殊意義，僅此 ```htmlmixed= <html> <head> <meta charset="utf-8"> // 指定UTF-8作為字元編碼，是最常用的之一 <title>My test page</title> </head> <body> <img src="images/firefox-icon.png" alt="My test image"> //這樣的<img>只需要標籤即可，不需內文 </body> </html> ``` (好像大部分都是html (head + body)) ### head ![](https://i.imgur.com/SzZKJoe.png) https://www.fooish.com/html/ - **style** : 用word時要選字型大小、字體、顏色...但現在用style一個就解決了，不過大部分的作法是寫在css然後透過link的方式接上 ```htmlembedded= <style> .p{ color:aquamarine } .shadowbox { width: 15em; border: 1px solid #333; box-shadow: 8px 8px 5px #444; padding: 8px 12px; background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); } </style> ``` - **meta** : 放網站的資訊，比如網頁說明，關鍵字，指定網站編碼，作者資訊，自動跳轉網頁，搜尋引擎標記(感覺這個不太需要學，因為我沒那麼厲害，笑死) ```htmlmixed= <head> <meta charset="utf-8"> <meta name="description" content="Free Web Tutorial"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="Mike"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> ``` - **link** : 載入會用到的資源，具體而言有CSS樣式表(最常用的)、設定favicon(網頁左上的小圖示)、載入預設資源(蠻多東西的)、標記標準網址簡單來說link的格式是固定的，rel接動作，herf接對象 ```htmlembedded= <head> <link rel='stylesheet' herf='網址or本機檔案位置名稱' > CSS樣式 <link rel="icon" href="網址or本機檔案位置名稱"> <link rel='preload' href='網址or本機檔案位置名稱' as=''> as後面可以接很多，audio,image,video <link rel="canonical" href="https://example.com/post/id">標準網址 </head> ``` - **script** : 連結java script用的 ### body - 文件標題 : 跟hackmd超像，有六層，標記方式\<h1><\/h1> ```html <h5>ex</h5> ``` - 段落 : \<p><p\/> ```html <p>ex</p> ```` - 清單 : 分為有序\<ul>和無序排列\<ol>，每條前面還要再加 ```html \<li> <ol> <li> 牛奶 <li> 麵包 </ol> ``` - 連結 :\<a herf = "網址"> 提示字\<a> ```html <a href="http://www.youtube.com/" target="_blank">Youtube</a> ``` - 圖片 : \<img src = "網址or本機檔案位置/名稱"> ```html <img src="image.jpg"> <img src="images/firefox-icon.png"> ``` - div : 「本質上不特別代表任何東西的通用内容流容器,樣式化用途（使用 class 或 id 屬性）、或是共享同一個屬性的元素集合」，我覺得很像**群組**的概念 ```html <div class=x> <p>nothing</p> <p>nothing</p> </div> .x{ color: blue } ``` - span : 同樣的概念，只是div是多行的群組，span是單行的 ```html <p> hi<span calss=x> mom</span> </p> .x{ color = blue } ``` - em : 重點，瀏覽器通常預設為斜體 ```html <em> you</em> ``` ------------------------ ## CSS 為一種風格頁面語言，如上述所說，在html裡的head可以link到CSS檔，便可使用CSS檔中寫好的美化效果基本架構: ![](https://i.imgur.com/zzCynEa.png) 整體架構被稱作規則集(rule set) - 選擇器(selector) ，位於大括號前面，種類眾多，很自由 - 元素選擇器 : 涵蓋最廣，直接修改該元素的呈現方式 - id選擇器 : 跟class比較，id只能用一次 - class選擇器 : 有點像用呼叫的，可重複使用，所以很棒 - 屬性選擇器 : 特定屬性元素 - - 宣告(declaration) ，制定該元素的呈現樣貌 - 屬性(property) ，每一元素都有其可以設定的屬性，比如p有color這樣的屬性，改變屬性即影響該元素的呈現 - 屬性值(property value) ，屬性有其對應的值 code * 可以同時使用多個元素 ```css= p ,li{ color:red; } ``` * 選擇器的各種命名 ```css= p{ 元素選擇器 } #x{ id選擇器 } .x{ class選擇器 } img[src]{ 屬性選擇器控制img裡的src } ``` - 之前講過html中有em這個標籤，往往瀏覽器以斜體呈現，但如果我想要不同效果，可以修改 ```css= p em{ color: red; } ``` ### 架構剛剛發現一件事，比起整齊的html，css因為是一個個類似函數的東西，所以沒什麼排版，就很亂，想到甚麼就寫什麼的樣子 CSS布局基於box的概念: 在每個box都分為，padding(內容周圍的空白)，border(矩形外部的實線)，margin(元素外部的空間) ### 通用 ![](https://i.imgur.com/6UlBr6V.png) code ```css= body { width: 600px; margin: 0 auto; /*前者影響頂部和底部，後者影響左右寬距*/ background-color: #FF9500; padding: 0 20px 20px 20px; border: 5px solid black; } ``` ```css= html /*文字*/ font-size: 10px; /*px「畫素」，算是控制字體大小的尺寸字體大小*/ font-size: bold; /*加粗*/ text-align: center;/*置中*/ line-height: 2 ;/*行高*/ letter-spacing: 1px; /*間距*/ text-decoration: none/*無線*/ text-decoration: underline/*無線*/ text-decoration: overline/*無線*/ text-decoration: line-through/*刪除線*/ } ``` ```css= /*選擇器的一種，但它比較複雜，是鼠標有沒有在它上面時的狀態改變*/ a:link { color: pink; } a:visited { color: green; } ``` ### 注意事項 - 父元素所附加的css格式會被子元素繼承，比如說加在<\html>的就會涵蓋整個網頁 - 其中除了固定的顏色可以選擇，可以參考色碼表，比如#00539F ### 在html中使用css的三種方式 1. 最有效最常用的: 就是CSS檔，然後用link接過去 ```htmlmixed= <link rel="stylesheet" href="styles.css"> ``` 2. 不常用 : 在html的head中加style的宣告，在單獨檔案中，這是個好方法，但多個檔案的情況中，一次修改就很麻煩 3. 最沒用的 : 在該元素的<>中打style，這實在很廢，所以除非像我一開始學html否則應該沒人這樣搞