<style> body[style], body[style*="background-color: white;"] { background-color: #1e1e1e !important; } body { color: #abb2bf; background-color: #ae1e !important; stroke-width: 2; stroke: #aaf; fill: #aa6; font-family: Microsoft JhengHei; font-weight: 500; font-style: normal; } .markdown-body pre.sequence-diagram.actor { } </style> # 網頁架構 >論文研讀的預定進度 : 1.What is "HTML"、"CSS"、"JavaScript"icles/10202326 2.放到對的位置("CSS"、"JavaScript"要放在對的位子) ## 1.HTML 基本觀念 HTML 負責的就是把網頁的結構生出來 HTML 內的元素(element)有兩個重要的基本觀念：巢狀結構以及屬性(attribute)。 1. 巢狀結構:巢狀結構簡單來說就是一層一層的概念，舉例來說 ```html= <div> <p>Hello World</p> </div> ``` 2. 屬性:用來敘述 element 的相關性質，可以看到在 element 裡面寫了 class 、 placeholder 、 href 這些不是 element 的東西，這種附加在 element 上的東西就稱之為 attribute ```html= <div class="txt" id="uniqueTxt">Hello World</div> <!-- placeholder為提示文字 --> <input placeholder="請輸入文字" id="input" /> <!-- href為超連結網址 --> <a href="www.google.com.tw" class="link">Google</a> ``` ## 2.CSS CSS 就是管理網頁的外貌，負責把外貌給顯示出來，讓網頁的外貌看起來美觀一些(可以控制顏色、字體、文本大小、元素之間的間距、元素的位置和佈局方式、要使用的背景圖像或背景顏色、不同設備和屏幕尺寸的不同顯示等等) 1. 內部CSS:直接在 element 裡寫 style ```html= <!DOCTYPE html> <html> <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> ``` 2. 外部CSS:可以在任何文本編輯器中編寫，並且必須以 .css 擴展名保存，然後在HTML頁面都必須在 <link> 元素內的 head 部分內包含對外部樣式表文件的引用 ```html= <!mystyle.css> body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } ``` ```html= <!引用外部CSS:mystyle.css> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> ``` 3. 內聯CSS:直接將 style 屬性添加到相關元素。style 屬性可以包含任何 CSS 屬性 ```html= <!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body> </html> ``` ## 3.JavaScript JavaScript 是為了要控制 HTML 中的各個 element，而跟CSS一樣有分內部與外部，而JavaScript 代碼插入到<script>和</script>標記之間 >JavaScript，比較常使用外部的做比，是將 element 內寫上 onClick 之類的 attribute 綁上 function >1.click(event):事件非常的單純只負責通風報信，舉例來說當有個 element 被點擊，那這個 element 就被觸發了 click 這個 event ，他不用去管後續的動作只需要告知說我被點擊了而已。 >2.onClick:為處理事件的處理器(handler) 所以會是一個 function 型態，舉例來說當一個 element 觸發 click 事件後會呼叫 onClick 來進行 click 後的動作。 ```html= <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script> ``` 1. 內部 ```html= <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </head> <body> <h2>Demo JavaScript in Head</h2> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> </body> </html> ``` 2. 外部 ```html= <!myScript.js> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } ``` ```html= <html> <body> <h2>Demo External JavaScript</h2> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction()">Try it</button> <p>This example links to "myScript.js".</p> <p>(myFunction is stored in "myScript.js")</p> <script src="myScript.js"></script> </body> </html> ```