# HTML、CSS 與 JavaScript
## 網頁三元素
HTML、CSS 與 JavaScript 分別是構成網頁的三元素，當然你可以只使用HTML來製作，不過效果大概跟建築物不漆油漆與沒有傢俱，只剩鋼筋與水泥一樣簡陋，所以建議還是將其他兩者CSS(油漆)與JavaScript (傢俱)一起學習好。
{% hint style="success" %}
現在打開瀏覽器並按下 \[F12]，你將會看到開發者工具列，其中 elements 便是HTML中的元素，
{% endhint %}
{% hint style="info" %}
一份 HTML 文件由眾多的元素組成，單個元素的開始由標籤頭到標籤尾結束並使用英文小寫表示。
某些元素如 \ 開始即為結束，稱之為空元素。
{% endhint %}
{% hint style="success" %}
現在打開編輯器，將以下內容複製上去，名稱取為 index 存成 html 檔並用瀏覽器打開。
{% endhint %}
以下為一個簡單的 HTML 範本。
```markup
高中生的前端設計入門
我的第一個標題
我的第一個段落。
```
我們 \ 元素中放入 \ 元素(網頁標題)、\<script> 元素(JavaScript)或是 \<link> (CSS)元素。
{% hint style="danger" %}
注意此處將\<script> 元素放於\<body>中且在後半部的原因有兩點。
1.在解析 JavaScript 代碼之前，將頁面的內容完全呈現在瀏覽器中，用戶會因為瀏覽器顯示空白頁面的時間縮短而感到打開頁面的速度變快了。
2.避免JavaScript操作DOM(文件物件模型)失效。
{% endhint %}
此處涉及瀏覽器解析與JavaScript，我們後面再談。
\<meta> 元素將包含關鍵字、網頁內容編碼等只給瀏覽器看內容。
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://zhang-hao-wei.gitbook.io/introduction-to-front-end-design-for-high-school/htmlcss-yu-javascript.md?ask=<question>
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.