HTML、CSS和JavaScript

HTML、CSS和JavaScipt

推薦學習網站

W3C School

一、環境準備

網頁前端三個重要技術：HTML、CSS 和 JavaScript。建立一個簡易的 Web 伺服器，將方便我們學習它們，有兩個方式：

利用 python 內建的 http 伺服器
先切換到 Web 伺服器所在的資料夾，再利用命令
python -m http.server 80
其中 80 表示服務埠號

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

利用 XAMPP 建立
XAMPP 包含了 Apache、MariaDB、PHP 和 Perl 四個服務，請到 XAMPP 的網站下載。如果下載 portable 版本，可以不用安裝，直接解壓縮就可以使用。

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

二、HTML

網頁基礎框架


















































<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- 網頁內容描述  -->
    <meta name="description" content="A simple HTML document">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="Your Name">
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- 網頁標題 -->
    <title>Document</title>
</head>
<body>
    <header>
        <h1>Welcome to My Web Page</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    <main>
        <section id="home">
            <h2>Home Section</h2>
            <p>This is the home section of the webpage.</p>
        </section>
        <section id="about">
            <h2>About Section</h2>
            <p>This section contains information about the webpage.</p>
        </section>
        <section id="contact">
            <h2>Contact Section</h2>
            <p>You can contact us through this section.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2025 Your Name. All rights reserved.</p>
    </footer>

    <!-- JavaScript -->
    <script src="script.js"></script>
</body>
</html>

元素(element)的標籤(tag)與屬性(attribute)

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

常見的 HTML 元素

標題
<h1> ... <h6>   
    
分隔線
<hr>   
    
段落
<p> </p>   
    
換行
<br>
    
圖片
<img src="#" text="說明" alt="替代顯示">   
    
超連結
<a href="#" target=" ">…</a>   
target：_blank、_self、_top、_parent
    
無序清單
<ul>
   <li> ... </li>
</ul>
    
有序清單
<ol>
     <li> ... </li>
</ol>

表格
<table>  
 <tr>
       <th>Firstname</th>
       <th>Lastname</th> 
       <th>Points</th>
  </tr>
  <tr>
       <td>Eve</td>
       <td>Jackson</td> 
       <td>94</td>
  </tr>
</table>

群組
<fieldset> 
   <legend> 群組標題 </legend>
    
</fieldset>

程式碼
<code> </code>
    
保持原始格式
<pre> </pre>

內嵌頁框
<iframe src="http://www.w3schools.com">
</iframe>

聲音    
<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
   Your browser does not support the audio element.
</audio>
    
影像
<video width="320" height="240" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   Your browser does not support the video tag.
</video>
    
特定區塊 
<div>    </div>
<span>   </span>

特殊字元

non breaking space  &nbsp;
<   &lt;
>   &gt;
&   &amp;
©   &copy;
®   &reg;

表單元素

表單
<form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
  <label for="username">ID:</label>
  <input type="text" id="username" name="username">
  
  <label for="passwd">Password:</label>
  <input type="password" id="passwd"  name="passwd" >   
</form>


按鈕
<input type="button" name="mybutton" value="確定" >
<input type="submit" name="submit" value="送出" >
<input type="reset" name="reset" value="重設" >

文字輸入框
<input type="password" name="passwd" />
<input type="text" name="username" value="exam" />
<textarea name="memo" rows="10" cols="30">
人生不相見，動如參與商。
</textarea>

隱藏資訊
<input type="hidden" name="page" value="exam" />

多選框
<input type="checkbox" name="fruits[]" value="Apple" > Apple
<input type="checkbox" name="fruits[]" value="Banana" > Banana
<input type="checkbox" name="fruits[]" value="Grape" > Grape

單選框
<input type="radio" name="sex" value="男" >男生 
<input type="radio" name="sex" value="女" >女生 

下拉式選單
<select name="cars">
  <option value="Volvo"> Volvo </option>
  <option value="Bmw"> Bmw </option>
  <option value="Toyota"> Toyota </option>
</select>

區塊元素與行內元素

HTML的標籤分為區塊元素以及行內元素。區塊元素預設會佔用所在位置的區域，因此其他元素只能在此區塊元素的前面或後面，無法與區塊元素並列一起；行內元素剛好與區塊元素相反，行內元素預設會與其他元素共存在一起，不會排斥。

常見的區塊元素 div、p、ul、ol；行內元素 a、img、span、br

三、CSS

框格模型 box-model

選取器(Selector)、屬性 (Property)與屬性值 (Value)










.one /*選取器*/
{
  /* 屬性： 屬性值 */
  width: 200px;
  padding: 100px;
  margin: 50px;
  border-color: darkgreen;
  border-style: dotted;
  border-width: 5px;
}

常見的選取器

Class selectors（類別選擇器）
.one {   }

Id selectors（id 選擇器）
#one {   }

Type selectors（型態選擇器）
p {   }

Universal selector（通用選擇器）
* {    }

虛擬類別

:link     連結平常的樣式
:visited  連結查閱後的樣式
:hover    滑鼠滑入的樣式
:active   滑鼠按下的樣式
:focus    目標為焦點的樣式
:first-child  第一個元素的樣式
:last-child   最後一個元素的樣式

四、JavaScript

DOM 與 JavaScript

HTML、CSS和JavaScipt

一、環境準備

二、HTML

三、CSS

四、JavaScript

Read more

Python 課程簡報

Matplotlib

Numpy

C++ foundation