# HTML5網頁程式設計 ###### tags: *`上課筆記` `HTML5網頁程式設計` `蘇怡仁`* [TOC] ## 第一次上課筆記 2020/3/3 :::success * 老師請假 * 俊維上課 簡單HTML5介紹 ::: ## 第二次上課筆記 2020/3/10 :::success * 課程教學 * HTML * HTML5 * JavaScript * 平時分數 - 30% * 期中考 - 30% * 上機考 * 期末考 - 40% * 交Project ::: :::info * HTML5 * TAG 為主軸 * 其實就是文字檔，用TAG來排版 * 副檔名有 * xxx.htm * xxxx.html * xxx.xml * 網頁 * 內容 -> 知識工程 -> knowlage ### HTML (Hyper Text Markup Language) * HTML 1.0 * 單方面釋放資訊 * 沒有互動性 * Web Server Site * IP+Port 稱為 Socket * port通常為80 * 通訊協定Http: * 透過通訊協定-> 找到Server-> 找到Server上的資料 * 透過Browser * 定義: 解譯的程序 * 透過解析語法來改變呈現方式 * 聲光 影像 排版 * Clien對Server發出Request * 對Server提出要求 * HTML 2.0 * 新增互動 * 可以修改資訊、可以留言等 * 社群服務 ::: :::info * ### 5G * 應用需求 ::: :::info ### HTML * TAG裡可以放 Attribute 屬性 * 粗體文字 <b>粗體</b> * 斜體文字 <i>斜體</i> * 底線 <u>底線</u> * &lt; ==&lt==是小於< &gt; ==&gt==是大於> ### Google * 搜尋引擎-被超連結最多的網站排名前面 ::: ## 第三次上課筆記 2020/3/17 :::success ```htmlmixed= <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>HTML8</title> <style> .tb{ border:3px #cccccc solid; } tr{ border:3px #cccccc solid; } td{ border:3px #cccccc solid; text-align: center; } td:hover{ background: aquamarine; } td:active{ color: blueviolet; } td::selection{ color: blueviolet; } td:nth-child(n+3)::first-letter{ color:saddlebrown; font-size: 30px; } /* tr>td{ color:saddlebrown; font-size: 30px; } */ td:hover{ color: blueㄎ; } </style> </head> <body> <div id="vdata" class=""> <table class="tb"> <!--排序功能加此 class="tablesorter"--> <caption style="background: black; color: #FFFFFF"> 陳品郎108學年第二學期加退選階段課表 &nbsp;&nbsp;&nbsp;&nbsp; </caption> <thead> <tr style="background: black; color: #FFFFFF"> <th>節次</th> <th>起訖時間 </th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th>六</th> <th>日</th> </tr> </thead> <tbody> <tr> <td width="5%" align="center">晨</td> <td width="12%" align="center">07：10~08：00</td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> </tr> <tr> <td width="5%" align="center">1</td> <td width="12%" align="center">08：10~09：00</td> <td width="12%"></td> <td width="12%"></td> <td width="12%" rowspan="2">人與自然(D0607)<br>張賢盛</td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> </tr> <tr> <td width="5%" align="center">2</td> <td width="12%" align="center">09：10~10：00</td> <td width="12%" rowspan="3">資訊安全攻防(L0730)<br>王調榮</td> <td width="12%"></td> <td width="12%"></td> <td width="12%" rowspan="3">Python 程式設計(L0725)<br>林承穎</td> <td width="12%"></td> <td width="12%"></td> </tr> <tr> <td width="5%" align="center">3</td> <td width="12%" align="center">10：10~11：00</td> <td width="12%" rowspan="2">民主與法治(DB134)<br>曹金增</td> <td width="12%"rowspan="2">資訊人生涯規劃 (L0721)<br>陳毓璋</td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> </tr> <tr> <td width="5%" align="center">4</td> <td width="12%" align="center">11：10~12：00</td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> </tr> <tr> <td width="5%" align="center">午N</td> <td width="12%" align="center">12：10~13：00</td> <td width="12%" style="background:chocolate ;letter-spacing : 50px" colspan="7"> 吃飯時間</td> </tr> <tr> <td width="5%" align="center">5</td> <td width="12%" align="center">13：10~14：00</td> <td width="12%"></td> <td width="12%"></td> <td width="12%" rowspan="2">進階英文(二)(L0526)<br>朱淑霞</td> <td width="12%" rowspan="3">軟體工程 (L0725)<br>陳智勇</td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> </tr> <tr> <td width="5%" align="center">6</td> <td width="12%" align="center">14：10~15：00</td> <td width="12%"></td> <td width="12%" rowspan="3">HTML5網頁程式設計(L0725)<br>蘇怡仁</td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> </tr> <tr> <td width="5%" align="center">7</td> <td width="12%" align="center">15：10~16：00</td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> </tr> <tr> <td width="5%" align="center">8</td> <td width="12%" align="center">16：10~17：00</td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> </tr> <tr> <td width="5%" align="center">傍E</td> <td width="12%" align="center">17：10~18：00</td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> </tr> <tr> <td width="5%" align="center">A</td> <td width="12%" align="center">18：20~19：10</td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> </tr> <tr> <td width="5%" align="center">B</td> <td width="12%" align="center">19：15~20：05</td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> </tr> <tr> <td width="5%" align="center">C</td> <td width="12%" align="center">20：10~21：00</td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> </tr> <tr> <td width="5%" align="center">D</td> <td width="12%" align="center">21：05~21：55</td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> <td width="12%"></td> </tr> </tbody> </table> <hr> </div> <form action="" method="get"> <!-- 表單傳送方式為GET --> <fieldset> <!-- 將底下的元素框起來 --> <label>姓名: <input type="text" name="name" size="30" maxlength="50" required></label><br> <p> 性別:<br> <label><input type="radio" name="comeback" value="yes" />男</label> <label><input type="radio" name="comeback" value="no" />女</label> </p> <p> <label for="hear-about">食物:</label> <select name="hear" id="hear-about"> <option value="web">蘋果</option> <!-- //select下拉式選單的選項 --> <option value="friend">香蕉</option> <option value="shop">榴槤</option> <option value="other">其他</option> </select> </p> <label><input type="range" name="comeback" value="no" /></label> </fieldset><br> </form> </body> </html> ``` * ![](https://i.imgur.com/iW0fV9C.png) ::: ## 第四次上課筆記 2020/3/24 :::success ```htmlmixed= <!DOCTYPE html> <html lang="zh"> <head> <style> p{ color:red !important; /*第一優先權*/ } p{ color:blue; /*第三優先權*/ } </style> </head> <body> <!--第二優先權--> <p style="color:azure">hi</p> </body> </html> ``` ```htmlmixed= <!DOCTYPE html> <html lang="zh"> <head> <style> :root{ --primary-color:red; } p{ color : var(--primary-color); } </style> </head> <body> <!--第二優先權--> <p>hi</p> </body> </html> ``` * posstion * relative ```htmlmixed= <!DOCTYPE html> <html lang="zh"> <head> <style> .box{ position: relative; width:400px; height:400px; top:0; left:30%; } .box1{ background-color:red; width:150px; height:150px; left:30px; position: absolute; top:30px; z-index: 2; } .box2{ background-color:blue; width:150px; height:150px; top:40px; z-index: 3; left:10px; position: absolute; } .box3{ background-color:yellow; width:150px; height:150px; top:15px; z-index: 1; left:15px; position: absolute; } p::first-letter{ color:blue; font-size:30px; } p::after{ color: saddlebrown; content:"我在前面"; } p::before{ color:aqua; content:"我在後面"; } p:hover{ color:greenyellow; } .vdiv::selection{ color:darkgreen; } .bdiv{ color: rgba(105,105,105,0.3); text-shadow : 5px 5px 10px #000000; } .cdiv{ text-align: center; } a{ color: red; text-decoration : none; } a:visited{ color:blue;text-decoration : none; } input:focus{ background-color:#67676767; } .ABCdiv{ margin:40px; width:500px; height:500px; background: linear-gradient(to right, yellow , green); box-shadow : 5px 5px 10px 10px #000000; } .ABCdiv:hover{ margin:40px; width:500px; height:500px; background:#666666; background: linear-gradient(to left, yellow , green); box-shadow : 5px 5px 10px 10px #FFFFFF; } </style> </head> <body> </body> <p>s16113220</p> <div class="vdiv">反白我，我會變色</div> <div class="bdiv">我好像有點透明 還有點陰影</div> <div class="cdiv">只有我會置中</div> <label for="tid">我是:label</label> <input id="tid" type="text" placeholder="文字文字"> <a href="##">我是A連結 變色後為藍色</a> <div class="ABCdiv"></div> <div class="box"> <div class="box1" ></div> <div class="box2"></div> <div class="box3"></div> </div> </html> ``` * ![](https://i.imgur.com/JSgnctm.png) ::: ## 第五次上課筆記 :::success * display : none; ==區塊消失== * visibility : hidden; ==區塊不會消失== ::: ## 第七次上課筆記 :::success * 第九週 期中考 => 上機考 * 期末考 => project * ==VScode 可以自訂自己的快捷鍵== * 檔案-> 喜好設定-> 使用者程式碼片段 * 可以設定 例:css javascript ``` "flex" : { "prefix" : "quickFlex", "body":[ "display:flex;", "justify-content:center;", "align-items:center;" ] ``` * 在外面打上quickFlex就可以直接呼叫出程式碼 * 取得 class * classList.add * className * querySelector 只會抓一個 * querySelectorAll 可以抓全部 * document.createElement("") * img.height=100 * 抓子元素 * childNode 舊方法 * children * parentNode 抓父元素 * previousSibling 舊方法 * e.preventDefault(); 可以擋原本要做的事情 ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button class="abtBtn">創建圖片</button> <button class="abBtn">往後添加項目</button> <button class="insertBefore">指定添加項目</button> <button class="remove">刪除添加項目</button> <button class="changeColor">改變文字顏色</button> <div class="abc"> </div> <p class="pTag">123</p> <ol class="ol"> <li><span>Hi</span></li> </ol> <input type="text" class="txtInput"> </body> <script> p=document.querySelector(".pTag"); const abcDiv=document.querySelector(".abc"); i=0; const a=document.querySelector(".abtBtn").addEventListener("click",function(){ for(j=0;j<5;j++){ const score=document.createElement("img"); score.src="https://picsum.photos/200/300?random="+i++; console.log(score); abcDiv.appendChild(score); } }); const b=document.querySelector(".abBtn").addEventListener("click",()=>{ const li=document.createElement("li"); li.innerHTML="inner"; ol=document.querySelector(".ol"); ol.appendChild(li); }); const c = document.querySelector(".insertBefore").addEventListener("click",()=>{ const li=document.createElement("li"); li.innerHTML="inner"; ol=document.querySelector(".ol"); al=window.prompt("輸入要加入的地方"); li.innerHTML="inser"; // console.log(al.text); ol.insertBefore(li,ol.children[al]); console.log(ol.children); }); const d = document.querySelector(".remove").addEventListener("click",()=>{ ol=document.querySelector(".ol"); al=window.prompt("輸入要加入的地方"); ol.removeChild(ol.children[al]); console.log(ol.children); }); const e = document.querySelector(".changeColor").addEventListener("click",()=>{ ol=document.querySelector(".ol"); ol.style.color=window.prompt("輸入要加入的地方"); }); </script> </html> ``` ::: ## 第八次上課筆記-2020/04/21 :::success * 期中考 * 在家刻版 * 5題 * 版 20% * 期末考 * 一定要用到css javascript * 盡量用自己的東西 * 不要用別人的套件 * 段落 * async await promise * 解決非同步 同步的問題 ```htmlmixed= <p>樹德 <span>科技大學</span> </p> <hr> <ol> <li>1</li> <li>2</li> <li>3</li> </ol> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> -webkit-box-reflect: below -12px linear-gradient(transparent,rgba()) user-select:none animation:bounce 1s ease-in-out infinite animation-delay:calc(0.1s * var(--i)); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .painter{ -webkit-box-reflect:below -10px linear-gradient(transparent,rgba(0,0,0,0.2)); font-size:30px; user-select: none; } .painter span{ display: inline-block; /* color:#fff; */ /* font-size:2em; */ text-transform: uppercase; animation: baunce 1s ease-in-out infinite; animation-delay: calc(0.1s * var(--i)); color:var(--z); } .painter:hover span { animation-play-state: paused; } @keyframes baunce { 0%{ transform: translateY(0px); }20%{ transform: translateY(-20px); }50%, 100%{ transform: translateY(0px); } } </style> </head> <body> <div class="painter"> <span style="--i:1 ; --z:#FF00FF">s</span> <span style="--i:2">1</span> <span style="--i:3">6</span> <span style="--i:4">1</span> <span style="--i:5">1</span> <span style="--i:6">3</span> <span style="--i:7">2</span> <span style="--i:8">2</span> <span style="--i:9">0</span> <span style="--i:10">.</span> </div> </body> </html> ``` ::: ## 第十周上課 :::success ### 期末考 * 要做一個word報告 * 動機 預期目標 * 用了哪些技術 * 原有功能 說明 * 規劃、 修改功能 * 環境、硬體、軟體、瀏覽器、資料庫、架構 * 功能&畫面 說明 * 學到什麼? * 心得 ::: :::success ## loacalStorage * 新增資料 * localstroage.setItem("user",""); * 第一個參數為key * 第二個是資料 * 取得資料 * localstorage.getItem("user"); * 可以取得要取的key ## json * jsonL={"name":"123","phone":"456"} * 取 jsonL.name * {["name":"123","phone":"456"],["name":"456","phone":"789"]} * 取 jsonL[0].name ## sessionStorage ::: ## 第十一周上課筆記 :::success ### RWD的寫法 ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @media(max-width:579.99px) { .box { background-color: #666666; width: 80%; margin: 0 auto; } #p1, #p2, #p3, #p4 { display: none; } #p1 { display: block; } } @media(min-width:579px) and (max-width:767.99px) { .box { background-color: #999999; width: 80%; margin: 0 auto; } #p1, #p2, #p3, #p4 { display: none; } #p2 { display: block; } } @media(max-width:1199.99px) and (min-width:768px) { .box { background-color: #337733; width: 80%; margin: 0 auto; } #p1, #p2, #p3, #p4 { display: none; } #p3 { display: block; } } @media (min-width:1200px) { .box { background-color: #67eaca; width: 80%; margin: 0 auto; } #p1, #p2, #p3 { display: none; } #p4 { display: block; } } </style> </head> <body> <div class="box"> <p id="p1">我會在579以下的時候顯示喔</p> <p id="p2">我會在579以上767以下的時候顯示喔</p> <p id="p3">我會在767以上1199以下的時候顯示喔</p> <p id="p4">我會在1200的時候顯示喔</p> </div> </body> </html> ``` * 阻止表單送出 * ![](https://i.imgur.com/4qiQsuk.png) ::: ## 第十二周上課 :::success * 圖片的素材 * https://unsplash.com/ * http://pngimg.com/ * https://www.pngfuel.com/ * GIF * https://www.freepik.com/stories * 刻網站的版 * icon標籤 * https://fontawesome.com/start * https://www.flaticon.com/ * 建議網站 背景圖 https://unsplash.com/t/nature 去背物體圖 http://pngimg.com/imgs/animals/bear/ 去背物體圖2 https://www.pngfuel.com/ 動畫圖 https://stories.freepik.com/ 前端版面練習 https://www.freepik.com/free-photos-vectors/story https://fontawesome.com/ https://www.flaticon.com/ * 物件名稱縮寫 * 變數名稱與key一樣可以直接寫變數 * 物件解構賦值 * ```templateData={name:"123",mail:"124",sex:123}``` * ``` let {name,mail,sex} = templateData;``` * 陣列解構賦值 ```htmlmixed= const mobileBrands = ['A','B','C'] const [one,two,three] = mobileBrands; ``` * 展開語法 ```htmlmixed= const mobilePhone = { name: "mobil phone", publishedYear:"2019" } const smartPhone ={ ...mobilePhone, name:"Apple", os:"ios" } ``` * 箭頭函數 ```htmlmixed= const sayHello = name =>{ console.log(`Hello${name}`); }; sayHello("Wei"); const sayHello =name=>console.log(`hello ${name}`); sayHello("hi"); ``` * 高階函數 * filter ```htmlmixed= const StudentData=[ {name:"wei",score:"100"}, {name:"we",score:"90"}, {name:"i",score:"70"}, ]; <!-- 看一下資料 --> const filteScore = StudentData.filter(student =>{ console.log(student); }); <!-- 新寫法 --> const filterScore=studentData.filter(student => student.score>=60); ``` * 高階函數 * Map ```htmlmixed= const students = studentData.map(student=>{ console.log(student); }); const filterScore=studentData.map(student => student.name); ``` * 取得自訂屬性值 * for of * forEach * for in ==沒有什麼用到== ```htmlmixed= const forin=document.querySelectorAll(".forin"); for(const f of forin){ console.log(f); } forin.forEach(test=>{ console.log(test); }); ``` * 自定義變數 ```htmlmixed= <style> .forin::before{ content:attr(data-num); } </style> <div class="forin" data-num="1"> </div> <div class="forin" data-num="2"> </div> <div class="forin" data-num="3"> </div> ``` ::: ## 第十三週 :::success * [台幣匯率兌換](https://api.exchangerate-api.com/v4/latest/TWD) * [隨機使用者訊息](https://randomuser.me/api/) ```htmlmixed= fetch("https://randomuser.me/api/") .then((res) => res.json()) .then((data) => console.log(data)); ``` ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html { background-image: url("images/background2.png"); background-size: cover; background-repeat: no-repeat; } .contentDiv { width: 500px; height: 600px; position: absolute; text-align: center; top: 50%; left: 50%; margin: -300px 0 0 -250px; background-color: white; border-radius: 10px; } .imgDiv { text-align: center; width:100%; height:250px; position:relative; /* background-color: blueviolet; */ margin-top:10px; } .img{ border-radius: 999em; background-color: black; position:relative; padding:5px; width: 160px; height: 160px; } </style> </head> <body> <div class="contentDiv"> <div class="imgDiv"><img class="img" src="" alt=""></div> <div class="informationDiv"><p>Name:</p></div> <div class="informationDiv"><p>Gender:</p></div> <div class="informationDiv"><p>Country:</p></div> <div class="informationDiv"><p>Phone:</p></div> <div class="informationDiv"><p>Email:</p></div> </div> <script> const newUser = [{ name: "Adam", money: 5000 }, { name: "Tom", money: 15000 }, { name: "John", money: 60000 } ] fetch("https://randomuser.me/api/") .then((res) => res.json()) .then((data) =>{ const d = data.results[0]; const {picture,name} = d; const inDiv=document.querySelectorAll(".informationDiv"); const imgDiv=document.querySelector(".img"); imgDiv.src=picture.large; inDiv[0].innerHTML=`<p>Name:${name.first+" "+name.last+" "+name.title}</p>`; inDiv[1].innerHTML=`<p>Gender:${data['results'][0]["gender"]}</p>`; inDiv[2].innerHTML=`<p>Country:${data['results'][0]["location"]["country"]}</p>`; inDiv[3].innerHTML=`<p>Phone:${data['results'][0]["phone"]}</p>`; inDiv[4].innerHTML=`<p>Email:${data['results'][0]["email"]}</p>`; console.log(data['results'][0]); }); // console.log(fetch("https://randomuser.me/api/")); </script> </body> </html> ``` ::: ## 第十四週 :::success * canvas ==網頁遊戲== * [ngen](http://ngen.io/) * [threejs](https://threejs.org/) * easeljs * [icon](https://fontawesome.com/v4.7.0/icons/) * [隨機使用者](https://randomuser.me/api) * map sort reduce :::