# 北科大專題課程-2 前端概述與連接後端範例 ##### 2019/10/23 ###### 黃豊凱KevinHuang --- ### 課程目的 - [學會HTML](https://www.w3school.com.cn/html/index.asp) - [學會CSS](https://www.w3school.com.cn/css/index.asp) - [學會JQuery](https://www.w3school.com.cn/jquery/index.asp) --- ### 課後延伸 - [什麼是DOM](https://www.w3school.com.cn/htmldom/index.asp) - [怎麼使用JQ AJAX發請求](https://www.w3school.com.cn/jquery/jquery_ajax_intro.asp) --- ### 前端推薦工具 - VSCode - JSBin - WebStorm(付費,學生可免費一年) --- ## 瞭解HTML --- ### 第一步 - 常用的HTML標籤 --- #### 常見 BLOCK 區塊標籤 ```htmlmixed= <div> </div> ``` 這東西很常出現! 這東西很常出現! 這東西很常出現! (因為很重要所以說3次) --- #### 常見 BLOCK 區塊標籤 特點:獨占一行,對高度、寬度、行高以及頂和底邊距都可設置的屬性值生效;如果不給寬度,塊級元素就默認為瀏覽器的寬度,即就是100%寬; | | | | | -------- | -------- | -------- | | form | h1 | h2 | | h3 | h4 | h5 | | h6 | p | table | | ul | | | | | | | --- #### 常見 INLINE行內標籤 特點:可以多個標籤存在一行,不能直接設置行內標籤的高度、寬度、行高以及頂和底邊距,完全靠內容撐開寬高! | | | | | -------- | -------- | -------- | | a | br | label | |select | span | textarea | | | | | --- #### 常見INLINE BLOCK行內區塊標籤 特點:結合的行內和區塊的優點,不僅可以對寬高屬性值生效,還可以多個標籤存在一行顯示; | | | | -------- | -------- | | input | img | | | | --- #### 注意事項 切忌使用 行內標籤 去包 區塊標籤 會造成 HTML 解析錯誤 --- ### 第二步 - HTML屬性值 使用HTML 標籤 就會用到 專屬標籤的 “屬性值” --- ### HTML屬性值 ```htmlmixed= <img src="路徑" alt="圖片描述"/> <input type=""> ``` --- ### 其他常用到屬性值的標籤 | | | | | -------- | -------- | -------- | | button | checkbox | date | | file | hidden | number | | password | radio | search | | submit | text | time | | url | | | --- ### 第三步 - 瞭解ID CLASS NAME 屬性值 --- ### ID屬性值 ```htmlmixed= <input id="list_box"> ``` ID 是唯一值,在一份HTML 只能有一個唯一的ID 不然HTML 會解析錯誤 --- ### Class屬性值 ```htmlmixed= <input class="list_box"> <div class="list_box"> ``` CLASS 可多重宣告 --- ### name屬性值 ```htmlmixed= <form> <input name="list_box"> </form> ``` NAME 值 包在 form 裡面, 許多的程式語言都會用來當成取值的屬性 EX: PHP ASP --- 這些屬性值都是未來在CSS 、JS 或 其他各式各樣的語言所不可或缺的。 接下來的CSS JS 課程,將會教如何搭配使用這些屬性值。 --- ### 第四步 - 常用的基礎HTML架構 ```htmlmixed= <html> <head> <title> </title> <link rel="stylesheet" type="text/css" href="style.css"> <style></style> <script></script> </head> <body> 網頁內容 </body> </html> ``` --- ### 語意式HTML5架構 HTML5使用語意標籤取代掉了不具意義的`<div>`所構成的HTML文件 以下介紹六個最主要架構出HTML5的語意標籤: --- ### 六個最主要的語意標籤 ```htmlmixed= <header> ``` 位於HTML5頁面頂部,通常放置網站的Logo、大標題或是主要資訊 ```htmlmixed= <nav> ``` 通常放置代表網站的連結或選單 ![](https://i.imgur.com/Eux7JX9.png) --- ### 六個最主要的語意標籤 ```htmlmixed= <article> ``` HTML5頁面內可以有多個,可以作為區分內容之用 ```htmlmixed= <section> ``` article中可以有很多個`<section>`,通常用於章節或標題的段落區分 ![](https://i.imgur.com/Eux7JX9.png) --- ### 六個最主要的語意標籤 ```htmlmixed= <aside> ``` 定義文章區塊以外的內容,通常使用於內容相關的邊欄 ```htmlmixed= <footer> ``` 位於頁面底部,大多顯示著作權、作者等 ![](https://i.imgur.com/Eux7JX9.png) --- ### 用語意標籤製作HTML5文件的好處: (1)看標籤就可以知道哪個部份是標題、哪裡是選單 (2)搜尋引擎在搜尋網頁內容時,可以搜尋到準確的資料與資訊 (3)因為標籤都具有意義了,這樣在維護文件時,就會變得更簡單與容易,在團隊的工作中尤其重要 --- ### 語意標籤範例 ```htmlmixed= <body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body> ``` --- ## 瞭解CSS --- ### 第一步 - 如何把CSS套用到網頁上 --- ## 如何把CSS套用在網頁上 ### 1.行內套用 直接將CSS寫在HTML上 ```htmlmixed= <p style="color:#000">123</p> ``` --- ## 如何把CSS套用在網頁上 ### 2.嵌入套用 樣式可以嵌入於HTML中(通常在`<head>`內) ```htmlmixed= <head> <style> li{color:#000} </style> </head> ``` --- ## 如何把CSS套用在網頁上 ### 3.外部連接套用 ```htmlmixed= <link rel="stylesheet" type="text/css" href="路徑"> ``` 將CSS載入 假如有多個外部連結,越後面套入的CSS 優先權越高 --- ### 第二步 - 使用選擇器(Selector) 越嚴謹的選擇器 權限越高 ID、CLASS、標籤、後代選擇器 --- ### ID選擇器 ID選擇器 => # ```htmlmixed= <p id="good">123</p> ``` 要將ID為 good 的內容字顏色改成白色 ```css= #good{color:#FFF} ``` --- ### Class選擇器 CLASS選擇器 => . ```htmlmixed= <p class="good">123</p> ``` 要將CLASS為 good 的內容字顏色改成白色 ```css= .good{color:#FFF} ``` --- ### 標籤選擇器 直接選擇標籤 ```htmlmixed= <p>123</p> ``` 要將p標籤的內容字顏色改成白色 ```css= p{color:#FFF} ``` --- ### 後代選擇器 ```htmlmixed= <li>000</li> <ul> <li>123</li> </ul> ``` 要將 ul li 的內容字123顏色改成白色 ,內容字000不改變 ```css= ul li{color:#FFF} ``` --- ### Grouping 數個選擇器共同有同樣樣式 ```htmlmixed= <p>123</p> <div>456</div> <li>789</li> ``` 將p, div, li 內容字顏色都改為白色 ```css= p, div, li{color:#FFF} ``` --- ### 第三步 - 了解margin、padding、border 調整版面可能會有許多種需求 Ex:圖片外要有留白空間,最外面還要有外框,圖片與圖片之間要有間隔 就需要使用到margin padding border --- ### 了解margin、padding、border - padding :為留白,區塊與區塊裡內容的距離,增加空間 - border :為邊框,整體大小最外面的邊框 - margin :為邊界,區塊與其他區塊的距離 --- ### 了解margin、padding、border ```htmlmixed= <img src="123.jpg"/> <img src="456.jpg"/> ``` 將兩張圖片的內容 - 向外增加2px的灰色 - 邊框為1px黑色 實線 - 邊界設定上1px右2px下3px左4px (順時針) ```css= img{ background:#666; padding:2px; border:1px solid #000; margin:1px 2px 3px 4px; } ``` --- - padding是區塊內增大 - border是區塊的邊框 - margin是區塊外的邊界 --- ### 第四步 - 寬度width與float 想要調整區塊的排列就需要用到float 使用float又必定需要用到width (不然內部元素大小突然很大的時候版面會崩壞) float屬性有分為left, right, none float 是依照區塊寬度來進行排列 --- ```htmlmixed= <div class="a"> <div class="nav b">b</div> <div class="nav c">c</div> <div class="nav d">d</div> </div> ``` ```css= .a{width:300px;} .nav{width:150px;background-color:red;float:left;} ``` 畫面會為 ![](https://i.imgur.com/AUxjdI7.png) --- 如果區塊寬度超過該外框的寬度,就會往下一行排列 ```css= .a{width:300px;} .nav{width:160px;background:red;float:left;} ``` 畫面會為 (因為寬度不夠放下兩個區塊) ![](https://i.imgur.com/w2CoWTj.png) --- 如果為 ```css= .a{width:300px;} .nav{width:150px;background:#666; float:left;} .b{float:right;} ``` 畫面會為 ![](https://i.imgur.com/sm0proZ.png) --- ### 第五步 - position 相對位置、絕對位置、固定位置 --- ### position 接下來要了解的是 區塊的位置定義 - 相對位置 relative : 依照區塊與區塊之間來設定的位置 - 絕對位置 absolute : 依照瀏覽器來設定的位置 - 鎖定位置 fixed : 依照瀏覽器框框來設定的位置,不管使用者如何拉動瀏覽器的scrollbar,位置永遠固定在瀏覽器框框 --- ### position ```css= top: 以上方為基礎算位置,top:10px 上方間隔 10px left: 以左邊為基礎算位置,left:10px 左邊間隔 10px right: 以左邊為基礎算位置,right:10px 右邊間隔 10px bottom: 以左邊為基礎算位置,bottom:10px下方間隔 10px ``` Facebook 最上方的 #blueBar 就是用了 ```css= #blueBar{position:fixed;top:0;} /*鎖在瀏覽器上方*/ ``` --- ### position 子元素會繼承父元素的位置設定(很重要) 在正常的思考 絕對位置 absolute: 依照瀏覽器來設定的位置 但是當你的父元素設定了 absolute 之後,子元素也設定 absolute 子元素會依照父元素的位置當作起始位置去作定位 --- ### 瞭解JQuery --- ### 第一步 - 如何把JQuery套用在網頁上 --- ### 1 瀏覽器搜尋 google jquery ajax 找 google API ,找到 ```htmlmixed= <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> ``` (要掛載在第一個JS檔案),將JQuery 載入到頁面上,就可開始使用JQuery --- ### 2 嵌入套用 ```htmlmixed= <script> $(function(){ }) </script> ``` --- ### 3 外部連接套用 ```htmlmixed= <script src=""></script> ``` 寫的時候 架構 ```javascript= $(function(){ /*程式碼*/ }) ``` (將程式碼寫在裡面,讓JS在頁面中執行) --- ### 第二步 - 使用選擇器 --- ### ID選擇器 ID選擇器 => # ```htmlmixed= <p id="good">123</p> ``` 要將ID為 good 的內容字顏色改成白色 ```javascript= $("#good").css("color":"#FFF"); ``` --- ### CLASS選擇器 CLASS選擇器 => . ```htmlmixed= <p class="good">123</p> ``` 要將CLASS為 good 的內容字顏色改成白色 ```javascript= $(".good").css("color":"#FFF"); ``` --- ### 直接選擇標籤 ```htmlmixed= <p>123</p> ``` 要將p標籤的內容字顏色改成白色 ```javascript= $("p").css("color":"#FFF"); ``` --- ### 後代選擇器 ```htmlmixed= <li>000</li> <ul> <li>123</li> </ul> ``` 要將 ul li 的內容字123顏色改成白色 ,內容字000不改變 ```javascript= $("ul li").css("color":"#FFF"); ``` --- ### Grouping 數個選擇器共同有同樣樣式 Ex: ```htmlmixed= <p>123</p> <div>456</div> <li>789</li> ``` 將p, div, li 內容字顏色都改為白色 ```javascript= $("p,div,li").css("color":"#FFF"); ``` --- ### 第三步 - JQuery常用功能與串接性 --- ### 常用JQuery功能類方法 - .show();選擇器所在的出現 - .hide();選擇器所在的消失 - .css();選擇器的CSS改變 ```javascript= $("#A").css({"color":"#FFF"});//ID為A的 CSS改變 ``` --- ### 常用JQuery功能類方法 - .animate();選擇器的CSS動畫 Ex: ```javascript= $("#A").animate({"top":"+10"});//ID為A的CSS製作top:增加10的補間動畫 ``` - .html();選擇器的HTML改變 Ex: ```javascript= $("#A").html("<p>123</p>");//改變為<p>123</p> ``` - .append();選擇器內增加HTML架構 Ex: ```javascript= $("#A").append("<p>123</p>");//增加<p>123</p> ``` --- ### 常用JQuery功能類方法 - .attr();選擇器取標籤資訊 OR 給值 Ex: ```javascript= $("#A").attr("href"); 取得 ID為A內href的值 $("#A").attr("href","123"); 將 ID為A內href的值改變為123 ``` - .addclass();選擇器增加類別名稱 Ex: ```javascript= $("$A").addcass("nice"); ``` --- ### 常用JQuery事件類方法 - .blur() 物件失去焦點時 - .change() 物件內容改變時 - .click() 點擊物件時 - .mousedown() 按下按鍵時 - .mouseenter() 滑鼠進入時 - .mouseout() 滑鼠離開時 - .focus() 當物件被點擊或取得焦點時 --- ### 第四步 - 嘗試著做tab load --- HTML ```htmlmixed= <ul> <li alt="A1">one</li> <li alt="A2">two</li> <li alt="A3">three</li> </ul> <div class="A A1">第一頁</div> <div class ="A A2">第二頁</div> <div class ="A A3">第三頁</div> <script> $(function(){ $(".A").hide(); $(".A1").show(); $("ul li").click(function(){ var $this=$(this);/*將現在滑鼠點的這個li位置,給變數$this儲存位置*/ var alt=$this.attr("alt"); /*取得$this這個位置alt的值*/ $(".A").hide(); $("."+alt).show(); }) }) </script> ``` JQ變數的命名規則,盡量以$ 開頭的當作位置儲存變數,方便跟字串數字變數作區分 --- ### TodoList實作練習 --- ### .net core專案靜態檔案設定 ![](https://i.imgur.com/NQ4j3zi.png) --- ### 建立一個HTML File --- ### 做完頁面排版 --- ### 建立並引入CSS檔案 --- ### 完成基礎樣式 --- ### 建立並引入JS檔案 --- ### 引入JQuery CDN --- ### JQuery Function - 頁面載入時取得所有Todo資料 - Render 畫面 - 新增Todo - 更新Todo狀態 - 刪除Todo
{"tags":"北科大專題課程"}
    1307 views