HTML、CSS 與 JavaScript

重要度:⭐⭐⭐⭐⭐⭐難度:⭐⭐

網頁三元素

HTML、CSS 與 JavaScript 分別是構成網頁的三元素，當然你可以只使用HTML來製作，不過效果大概跟建築物不漆油漆與沒有傢俱，只剩鋼筋與水泥一樣簡陋，所以建議還是將其他兩者CSS(油漆)與JavaScript (傢俱)一起學習好。

現在打開瀏覽器並按下 [F12]，你將會看到開發者工具列，其中 elements 便是HTML中的元素，

一份 HTML 文件由眾多的元素組成，單個元素的開始由標籤頭到標籤尾結束並使用英文小寫表示。

某些元素如 <br> 開始即為結束，稱之為空元素。

現在打開編輯器，將以下內容複製上去，名稱取為 index 存成 html 檔並用瀏覽器打開。

以下為一個簡單的 HTML 範本。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高中生的前端設計入門</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
  <h1>我的第一個標題</h1>
   
  <p>我的第一個段落。</p>
  
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>

我們 <head> 元素中放入 <title> 元素(網頁標題)、<script> 元素(JavaScript)或是 <link> (CSS)元素。

注意此處將<script> 元素放於<body>中且在後半部的原因有兩點。

1.在解析 JavaScript 代碼之前，將頁面的內容完全呈現在瀏覽器中，用戶會因為瀏覽器顯示空白頁面的時間縮短而感到打開頁面的速度變快了。

2.避免JavaScript操作DOM(文件物件模型)失效。

此處涉及瀏覽器解析與JavaScript，我們後面再談。

Previous必備工具 Next基本結構 HTML

Last updated 4 years ago

Was this helpful?

HTML、CSS 與 JavaScript

重要度:⭐⭐⭐⭐⭐⭐難度:⭐⭐

網頁三元素

現在打開瀏覽器並按下 [F12]，你將會看到開發者工具列，其中 elements 便是HTML中的元素，

一份 HTML 文件由眾多的元素組成，單個元素的開始由標籤頭到標籤尾結束並使用英文小寫表示。

某些元素如 <br> 開始即為結束，稱之為空元素。

現在打開編輯器，將以下內容複製上去，名稱取為 index 存成 html 檔並用瀏覽器打開。

以下為一個簡單的 HTML 範本。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高中生的前端設計入門</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
  <h1>我的第一個標題</h1>
   
  <p>我的第一個段落。</p>
  
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>

我們 <head> 元素中放入 <title> 元素(網頁標題)、<script> 元素(JavaScript)或是 <link> (CSS)元素。

注意此處將<script> 元素放於<body>中且在後半部的原因有兩點。

1.在解析 JavaScript 代碼之前，將頁面的內容完全呈現在瀏覽器中，用戶會因為瀏覽器顯示空白頁面的時間縮短而感到打開頁面的速度變快了。

2.避免JavaScript操作DOM(文件物件模型)失效。

此處涉及瀏覽器解析與JavaScript，我們後面再談。

Previous必備工具 Next基本結構 HTML

Last updated 4 years ago

Was this helpful?