# 網頁相關 [TOC] ## html #### 基本結構 由很多tag和tag的尾巴組成 內容寫在tag裡面 可以在tag的頭給定它的attribute ```haskell= <tag class="Tags"> 在這裡寫要在網頁上印出的東西 </tag> ``` 由html包著head和body 在檔案最一開始要寫`<!DOCTYPE html>`表示是使用HTML5語法標準的文件 title寫在head裡面，會顯示在瀏覽器的小框框裡(title如果寫在tag的性質裡面會變成當滑鼠移到物件位置時，會跑出小框框) p是指內文 ```htmlembedded= <!DOCTYPE html> <html> <head lang="zh-Hant"> <title>早安世界</title> </head> <body> <p> good morning! </p> </body> </html> ``` (lang是指語言) 由巢狀元素和空元素組成 巢狀元素是只有頭和尾巴的ex:`<strong></strong>`是中間文字加粗的意思 空元素是只有單一一個ex:`<img src="me.jpg">`取得同一個資料夾底下的me.jpg ### 用法 插播: 註解 ```htmlembedded= <!-- 註解 --> ``` #### Global Atributes ##### id 1.給自己存取使用，ex給超連結(`<a>`)呼叫 2.給js做存取 3.在css中當selector ##### class 1.給js做存取 2.在css中當selector ##### style 設定css樣式 ##### 比較不重要的感覺先放著 **title:** 會出現小框框 **data-*:** 存放自定義的資料，通常是用來和js存取互動。 ex:`<tag data-mytag="hello">`mytag和hello都是自己定義的 **tabindex:** 按下tab的時候可以聚焦在此物件上 ex:`<tag tabindex=1>`後面的數字表示按第幾下會跳過來 **contenteditable:** 可以由使用者編輯，如果再儲存html中寫的東西也會改變(儲存的html檔會以head裡的title命名) ex: ```htmlembedded= <div contenteditable="true"> <p>點我看看是不是可以編輯</p> </div> ``` **draggable:** 跟前一個的用法很像，拖了會出現叉叉 **hidden:** 藏起來 **accesskey:** 鍵盤快捷鍵 **lang:** 語言 **spellcheck:** 通常會和contendeditable綁在一起 ex:`<div contenteditable spellcheck="true">` **translate:** 用yes no表示要不要翻譯 #### head 裡面 ##### title 就是標題 ##### meta 好像是設定資訊 ##### style ex: ```htmlembedded= <style> p { color: #26b72b; } </style> ``` 意思是以後在使用內文`<p>`的時候都會自動轉成綠色 要使用外部寫好的模板用link ```htmlembedded= <link href="https://example.com/media/link-example.css" rel="stylesheet"> ``` ##### link 載入resources ##### script 可以寫在同一個檔中或是從外部引入 ```htmlembedded= <script src="somescript.js"></script> ``` 如果是在同一個資料夾底下 在flask上使用js ```htmlembedded= <script src="{{ url_for('static', filename='app.js') }}"></script> ``` url_for是flask裡面的API ##### noscript 如果網頁沒有使用js或是被手動關掉會跳出的訊息 ##### base 先設定超連結會連到的網址，之後在用的時候只要再加一些指令，不用貼上整個網址 ex: ```htmlembedded= <head> <base href="https://examples.com/somedir/"> </head> <body> <a href="some/place.html">link</a> </body> ``` 點下link會連到 https://examples.com/somedir/some/place.html #### body裡面 ##### label ex: ```htmlembedded= <label>Do you like peas? <input type="checkbox" name="peas"> </label> ``` 先顯示Do you like peas?後面跑出一個check box 如果label裡有for代表這個label是和哪個元素綁定(被綁定元素的id) ##### intput type = "hidden" (input有很多其他用法[HTML 表單元件 - <input> 標籤 (tag)](https://www.fooish.com/html/input-tag.html)) 如果想要保留資料用來傳給server端，或是client端，卻沒有要顯示出來，可以用type hidden來記錄 ex: ```htmlembedded= <input type="hidden" class="data" id="posInput" name="pos_name" address="pos_address" > ``` name和address都是自定義用來回傳給server的資料 ## js ### jQuery ### ajax 非同步的 JavaScript 與 XML 技術，不用重新整理就可以根伺服器溝通 #### 開始 (按照看code的順序) * load vs ready 如果使用load要等到所有要載入的資料都下載完成，才可以使用。ready是只要物件能被取得，就可以使用。 一個js當中可以有很多ready每個都會執行，但若很多load是只會執行最後一個load 優先順序:ready>load ```javascript= $(document).ready(function(){/*~~~~~~*/}); $(window).load(function(){/*~~~~~~~~*/}); ``` * alert 會跑出警告讓你按確定ex: ```javascript= alert('文字'); ``` * button ex:一個刪除建 ```javascript= $(document).on('click', '.delete', function () { $(this).parent().remove(); }) ``` on比較適合用在如果button是動態新增的時候 也可以這樣新增button ```javascript= $('#btn').click(function () { } ``` btn是在html檔中button的id (應該是"#"取得id，"."取得class) * 直接加入畫面 假如說按下button會跳出新的container ```javascript= $('#btn').click(function() { $('<div class="post">' + '<h2>' + title + '</h2>' + '<p>12345</p>' + '<button class="delete">close</button>' + '</div>').appendTo('.posts').hide().fadeIn(2000); }) ``` append to是指要跑出來的東西可以直接接在class="post"的這個div後面 hide和fade應該只是效果 * attribute vs properties attribute是html上如class或id的這種 properties是js DOM物件上的指令 (DOM:文件物件模型 - Document Object Model) * 在event中丟值回到flask去 ex:一個button事件 ```javascript= $(document).on('click', '.Button', function() { var member_id = $(this).attr('member_id'); var name = $('#nameInput'+member_id).val(); var email = $('#emailInput'+member_id).val(); req = $.ajax({ url : '/update', type : 'POST', data : { name : name, email : email, id : member_id } }); req.done(function(data) { $('#memberSection'+member_id).fadeOut(1000).fadeIn(1000); //$('#memberNumber'+member_id).text(data.member_num); $('#memberSection'+member_id).html(data); }); }); ``` 在` req = $.ajax`中把data中的3個東西丟出去 在done的時候回來把member id對應的位置的section重新刷新。`$(selector).html()`是會改變selector的值為後面html括號中的，範例中因為server端有另外開一個section.html所以意思是要把section.html的東西填回到原本的網頁 ## CSS (bootstrap) [Link](https://ithelp.ithome.com.tw/articles/10228718) bootstrap開發人員一生平安，謝謝謝謝謝謝。