---
# System prepended metadata

title: 網頁架構

---

<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>

```
