--- # System prepended metadata title: HTML、CSS和JavaScript tags: [HTML] --- ## HTML、CSS和JavaScipt #### >[!Important]推薦學習網站 [W3C School](https://www.w3schools.com/) ### 一、環境準備 網頁前端三個重要技術：HTML、CSS 和 JavaScript。建立一個簡易的 Web 伺服器，將方便我們學習它們，有兩個方式： - 利用 python 內建的 http 伺服器 先切換到 Web 伺服器所在的資料夾，再利用命令 **python -m http.server 80** 其中 80 表示服務埠號 ![image](https://hackmd.io/_uploads/SyfGaupbgx.png) - 利用 XAMPP 建立 XAMPP 包含了 Apache、MariaDB、PHP 和 Perl 四個服務，請到 [XAMPP](https://www.apachefriends.org/zh_tw/index.html) 的網站下載。如果下載 portable 版本，可以不用安裝，直接解壓縮就可以使用。 ![image](https://hackmd.io/_uploads/rJDxCOTWxg.png) ### 二、HTML :::info 網頁基礎框架 ::: ```html= Document

Welcome to My Web Page

Home Section

This is the home section of the webpage.

About Section

This section contains information about the webpage.

Contact Section

You can contact us through this section.

``` :::info 元素(element)的標籤(tag)與屬性(attribute) ::: ![image](https://hackmd.io/_uploads/Skl31Kpbeg.png) >[!Tip] 常見的 HTML 元素 ```html 標題

...

分隔線
段落

換行
圖片 替代顯示 超連結 … target：_blank、_self、_top、_parent 無序清單 有序清單
  1. ...
表格
Firstname Lastname Points
Eve Jackson 94
群組
群組標題
程式碼 保持原始格式
內嵌頁框 聲音 影像 特定區塊
``` >[!Note] 特殊字元 ```html non breaking space   < < > > & & © © ® ® ``` >[!Tip] 表單元素 ```html 表單
">
按鈕 文字輸入框 隱藏資訊 多選框 Apple Banana Grape 單選框 男生 女生 下拉式選單 ``` :::info 區塊元素與行內元素 ::: HTML的標籤分為區塊元素以及行內元素。區塊元素預設會佔用所在位置的區域，因此其他元素只能在此區塊元素的前面或後面，無法與區塊元素並列一起；行內元素剛好與區塊元素相反，行內元素預設會與其他元素共存在一起，不會排斥。 常見的區塊元素 div、p、ul、ol；行內元素 a、img、span、br ### 三、CSS :::success 框格模型 box-model ::: ![image](https://hackmd.io/_uploads/ByTEVvZfge.png) :::success 選取器(Selector)、屬性 (Property)與屬性值 (Value) ::: ```css= .one /*選取器*/ { /* 屬性： 屬性值 */ width: 200px; padding: 100px; margin: 50px; border-color: darkgreen; border-style: dotted; border-width: 5px; } ``` :::success 常見的選取器 ::: ```css Class selectors（類別選擇器） .one { } Id selectors（id 選擇器） #one { } Type selectors（型態選擇器） p { } Universal selector（通用選擇器） * { } ``` :::success 虛擬類別 ::: ```css :link 連結平常的樣式 :visited 連結查閱後的樣式 :hover 滑鼠滑入的樣式 :active 滑鼠按下的樣式 :focus 目標為焦點的樣式 :first-child 第一個元素的樣式 :last-child 最後一個元素的樣式 ``` ### 四、JavaScript :::warning DOM 與 JavaScript :::