HTML-網頁開發第一步

更新於 2025/03/02發佈於 2025/03/02閱讀時間約 2 分鐘

基本架構

在 HTML 中，標籤提供給瀏覽器如何建立內容的資訊，

假設你想要建立一個標題，請看以下示範:

<h1>Hello World</h1>

可以看出，將內容夾在成雙的開始標籤和結束標籤中，我們就建立了標題的內容
h1標籤等級是最高的，用於網頁主題，其次是h2、h3，一直到h6，標題大小將越來越小。
通常，<h1>用於表示頁面的主標題，因此，我們每頁應該只使用一個 1 級標題。
另外，盡可能避免跳過標題等級，例如，<h1>後面不直接跟<h4> 。

那在標題底下，若要建立一般的內文，我們使用段落標籤來包住內容，以下示範:

<p>This is a paragraph.</p>

上述所寫的程式碼，毫無疑問能得到輸出，不過，這樣不是完整且有效的 HTML 程式碼，要建立完整有效的 HTML 文件格式如下:

<!DOCTYPE html>
<html>
 
    <head>
    </head>
 
    <body>
		  <h1>Hello World</h1>
      <p>This is a short paragraph.</p>
    </body>
 
</html>

首先，第一行指定文件使用的HTML版本

<!DOCTYPE html>

這確保了不同瀏覽器以相同的方式解析文件。

網頁的所有資訊，都會被放入 <html>...</html> 中，依據其性質又被分成以下兩部分。

<html>...</html>

<head>...</head>，其所包住的內容不會顯示在網頁上，主要是放一些後台資料，例如文件的字符編碼。

<head>...</head>

<body>...</body> ，其所包住的內容正文，包括將在網頁上顯示的主要內容，例如標題和段落。

<body>...</body>

請注意，上面<body>...</body> 區塊內的<h1>和<p>被稱為嵌套元素，讀者實際編寫時，要在前面放置兩個空格。

如果不想一個一個慢慢建立架構格式，可以在vscode中輸入一個驚嘆號，再按下鍵盤的TAB鍵，就會自動地產生 HTML 基本架構的標籤:

其中，<html>也可以改為<html lang=”zh-TW”>

好，我們接著要更深入的了解 HTML 中<head> … </head> 內放置的東西，

<title>標籤用來定義網頁的標題。

<meta> 是 HTML 中用於提供有關文檔的元數據的標籤。元數據不會直接顯示在網頁上，但對於搜索引擎、瀏覽器和其他技術工具來說非常重要。就目前用到的來解說。

<meta charset="UTF-8">

定義文檔的字符編碼（通常使用 UTF-8）。
必須放在 HTML 文檔的 <head> 中。
確保特殊字符（如中文）正確顯示。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width：設定視窗寬度與設備寬度相同。
initial-scale=1.0：設置初始縮放比例為 1。

接著，我們談談如何在 HTML 中使用註解，格式如下:

<!-- <p>like this</p> -->

好，接著我們再次觀察程式碼，可以發現網頁輸出的標題和段落都分別佔據了一整行，你可以稱其為區塊元素 。

常用標籤

所以底下的程式碼，實際上所有內容會顯示在一行中，HTML 會將新行折疊到一個空格中。

<p>
All that we see or seem
Is but a dream within a dream.
</p>

若要分成一行文字各一個段落，就必須這樣寫:

<p>All that we see or seem</p>
<p>Is but a dream within a dream.</p>

實際上，你也可以使用 <br> 或<br />標籤在文字中插入換行符。選擇哪個純看你偏好。

<br>

<p>
All that we see or seem<br>
Is but a dream within a dream.
</p>

切記，不要這樣使用: <br> … </br> ，<br>是自關閉標籤。

這邊再介紹一個自關閉標籤<hr>或<hr /> 標籤，用於顯示水平線。

<hr>

<p>All that we see or seem</p>

<hr>

<p>Is but a dream within a dream.</p>

Lists

接下來要介紹 Lists ，用於指定資訊。有兩種常用的清單類型，分別為:

項目清單類型
有序清單類型

我們使用<ul>標籤來定義項目清單，並在<ul>標籤內使用<li>標籤來定義清單中的每一項。以下示範:

<ul>
  <li>papaya</li>
  <li>orange</li>
  <li>Banana</li>
  <li>Apples</li>
</ul>

輸出效果:

而我們使用<ol>標籤來定義有序清單，並在<ol>標籤內使用<li>標籤來定義清單中的每一項。以下示範:

<ol>
  <li>Eat</li>
  <li>Drink</li>
  <li>Take a shower</li>
  <li>Go to sleep</li>
</ol>

輸出效果:

清單可以包含標題、段落和其它 HTML 元素

<ul>
  <li>
      <h3>HTML</h3>
      <p>I like HTML</p>
  </li>
  <li>
      <h3>CSS</h3>
      <p>I like CSS</p>
  </li>
</ul>

輸出效果:

另外，若要在項目清單中再包含項目清單，我們可以這樣做:

<ul>
  <li> Web
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JS</li>
    </ul>
  </li>
    
  <li>NOT WEB
    <ul>
      <li>C</li>
      <li>C++</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

當然，也可以在無序列表中包含有序列表，反之亦然。

輸出效果:

Tables

將資訊以表格形式表示，使用<table>標籤來建立，其中標籤<tr>代表表格行，<td>標籤代表表格資料:

<table>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
  <tr>
    <td>Item 4</td>
    <td>Item 5</td>
    <td>Item 6</td>
  </tr>
</table>

輸出效果:

你可以看出，並沒有表格的效果，不過我們先不要在意，先讓它越來越像表格就好，我們將第一行中的資料儲存格轉換為表格標題。

<table>
 
  <tr>
    <th>Name</th>  <!-- 表頭欄位：名字 -->
    <th>Age</th>   <!-- 表頭欄位：年齡 -->
    <th>GPA</th>   <!-- 表頭欄位：GPA -->
  </tr>
 
  <tr>
    <td>Bob</td>
    <td>18</td>
    <td>4.0</td>
  </tr>
 
  <tr>
    <td>Jack</td>
    <td>18</td>
    <td>3.7</td>
  </tr>
</table>

接著，我們使用border="1"：為表格添加簡單的邊框，並使用<caption>標籤向表格添加標題或描述。

<table border="1">
  <caption>Students Info</caption>
  <tr>
    <th>Name</th> 
    <th>Age</th>
    <th>GPA</th>
  </tr>
 
  <tr>
    <td>Bob</td>
    <td>18</td>
    <td>4.0</td>
  </tr>
 
  <tr>
    <td>Jack</td>
    <td>18</td>
    <td>3.7</td>
  </tr>
</table>

輸出效果:

如此，簡單的表格就顯示出來了。

文字格式

先前提過區塊元素 ，那相對於區塊元素，也有不佔據一整行，視內容有多少就佔多少空間的元素，你可以稱其為行內元素 。

以下是我們將討論的標籤，這些標籤允許我們為文字添加不同的格式，對特定內容進行樣式修飾或語義強調。

<strong>
<em>
<u>
<sup> and <sub>

<strong> 用於將包含的文字變為粗體

<p>This is <strong>important</strong> text.</p>

<em> 用於將包含的文字變為斜體

<p>Please <em>read carefully</em>.</p>

<u> 用於將文字加下劃線

<p>This text is <u>underlined</u>.</p>

<sup>用於標記上標內容，常用於數學公式。

E = mc<sup>2</sup>

<sub>用於標記下標內容，常用於化學公式。

H<sub>2</sub>O

<sup> and <sub> 綜合使用，可以更方便處理特殊符號的格式表達

<p>x<sub>i</sub><sup>2</sup></p>

當然，還有很多文字格式，以下再示範幾種輸出效果:

<p>An example of <mark>mark</mark>.</p>
<p>An example of <small>small</small>.</p>
<p>An example of <q>quote</q>.</p>

好，我還要特別提一個常用的行內元素:

`<a>…</a>`

這是 HTML 中用於建立超連結的標籤。它是行內元素，當用戶點擊時，可以導航到其他網頁、文件或觸發特定操作。

基本語法如下:

<a href="URL">Link Text</a>

href 屬性：定義目標 URL 或動作。
Link Text：顯示給用戶的連結。

基本超連結:

<a href="<https://www.example.com>">Visit Example</a>

我們也可以將title屬性與<a>標籤一起使用，當使用者將滑鼠懸停在超連結上時，標籤就會出現。

<a href="https://www.example.com" title="Learn to code interactively">Visit Example</a>

我們可以在文字行中放置鏈接:

<p>Visit <a href="https://www.example.com">Example Website</a>. It's a test.</p>

在新窗口打開連結：

<a href="<https://www.example.com>" target="_blank">Open in New Tab</a>

指向頁面內特定的點：

<a href="#section1">Go to Section 1</a>

<h2 id="section1">Section 1</h2>
<p>This is Section 1 content.</p>

下載文件：

<a href="file.pdf" download>Download PDF</a>

指向目錄中的某個網頁
```
<a href="page.html">Visit Page</a>
```

好，這邊穿插一個小知識，如果在文字輸出中有包含< 或 > ，瀏覽器可能會將他們與標籤混合，導致輸出不合預期，這時我們透過使用改成以下寫法來解決:

<p>&lt;Hi&gt;</p>

當然也有其它可能導致問題的字元需要執行相對應的實體操作

<!-- 顯示其他常用特殊字符 -->
<p>Display an ampersand: &amp;</p>
<p>Display a double quote: &quot;</p>
<p>Display a single quote: &apos;</p>
<p>Display a non-breaking space: &nbsp;</p>
<!-- 有時如果螢幕太小，導致必須相鄰的文字分成上下兩行，你可以使用 &nbsp 放在相鄰文字的中間，讓必須相鄰的文字顯示不間斷 -->

不過，這在我們使用<pre>時不會有影響，因為<pre>標籤定義了預先格式化的文本，它完全按照編寫的方式顯示文字。

<pre>All that we see or seem
Is but a 'dream' within a "dream".</pre>

圖像

接下來，要來示範如何使用<img>標籤將圖像插入網頁中。假設圖像位於 image 子目錄下:

要嵌入此圖像，我們使用以下程式碼：

<img src="images/image.png" alt="A physics problem">

我們也可以嵌入圖像的網址，不過切忌不要使用未經許可的圖片網址。
上面程式碼中包含的alt屬性，會在圖片無法正常顯示(路徑不正確、圖像未加載之類的) 時出現

另外，我們使用title屬性，當您將滑鼠懸停在圖像上時，可以看到屬性名稱，以下示範:

<img src="images/image.png" alt="A physics problem" title="a physics problem">

接下來更進一步，我們使用width和height屬性來指定圖像的寬度和高度。

<img 
    src="images/image.png" 
    alt="A physics problem" 
    title="a physics problem" 
    width="1000" 
    height="600" >

最後，<img>是行內元素，以下示範:

<strong>A complex physics problem</strong>
<img src="images/image.png" alt="A physics problem" title="a physics problem">

那當然，若我們想將圖片佔據整個行寬度，我們使用標籤<figure>，此標籤可以包含一個可選的<figcaption>元素，為圖片提供標題。

特別注意，<figure>是區塊級元素。

<strong>Title</strong>
<figure>
  <img src="images/image.png" alt="A physics problem" title="a physics problem">
  <figcaption>A complex physics problem</figcaption>
</figure>

我們可以使用圖像作為超連結，點擊圖像後，將跳到指定的網頁，以下示範:

<a href="https://www.example.com">
  <img src="images/image.png" alt="A physics problem">
</a>

表單

使用<form>標籤來建立 HTML 表單，以下示範:

<form action="URL" method="METHOD">
  <!-- 表單元素 -->
</form>

action：指定表單提交的目標 URL，當使用者提交此表單時，使用者將被導向到 URL。
method：
- GET：將數據附加在 URL 後（適合查詢操作）。
- POST：不會將數據附加在 URL 後（適合敏感或大量數據）。
- 大小寫都可

我們先建立一個要求使用者輸入名稱的文字欄位，使用<input>標籤:

<form action="https://www.example.com" method="POST">
  <input type="text">
</form>

預設輸入欄位是空的，而type="text"標籤的屬性表示input輸入欄位接受文字輸入。

接著我們嘗試定義輸入為密碼屬性。以下示範:

<form action="https://www.example.com" method="POST">
  <input type="password">
</form>

再來，我們建立一個用於提交的按鈕:

<form action="<https://www.example.com>" method="POST">
  <input type="submit">
</form>

這將會有一個提交按鈕出現
另外，還有一種等效的寫法:
```
<button type="submit">Submit</button>
```
- 不同之處在於，我們可以在<button>內包含其他元素，像是<img>、<strong> 等，更利於設計。

好，接著我們要提到<label> 標籤以及name屬性。

<label>用於定義表單元素的標籤，而name 用於辨識哪些資料對應於哪個欄位。這時將method改成GET，測試看看。

<form action="URL" method="get" target="_blank">
  <label>Username:</label> <input type="text" name="account_name"><br>
  <label>Password:</label> <input type="password" name="account_password"><br>
  <input type="submit">
</form>

target="_blank 用於在新視窗開啟。
這邊讀者可能沒辦法做測試，不過，你還是可以了解概念。
以這個程式碼來看，新網頁窗口的URL後面會出現?account_name=Bob123&account_password=123456
也就是說網址為: URL?account_name=Bob123&account_password=123456
如果我們使用POST方法，表單資料將不會在 URL 中可見。但是，我們仍然可以使用name屬性的值來識別每個欄位

好，我們接著介紹value屬性，用於指定 HTML 元素的初始值。通常用來更改按鈕的預設文字，以下示範:

<form action="URL" method="get" target="_blank">
  <label>Username:</label> <input type="text" name="account_name" value="Bob123"><br>
  <label>Password:</label> <input type="password" name="account_password"><br>
  <input type="submit" value="Register">
</form>

好，接著介紹<textarea>標籤，用於建立一個文字區域。

<form action="URL" method="post">
  <label>Write a plot.</label><br>
  <textarea name="plot" rows="3" cols="20"></textarea>
</form>

rows屬性指定高度。
cols屬性指定寬度。

好，接著介紹<select>標籤，用於建立一個下拉清單，而下拉選單的每一項使用<option>標籤定義。

<form action="URL" method="get" target="_blank">
  <label>Choose a programming language:</label>

  <select name="language">
      <option value="python">Python</option>
      <option value="cpp">C++</option>
      <option value="js">JavaScript</option>
  </select>

  <input type="submit" value="Select">
</form>

下拉清單的預設選項為為第一項。
這裡，name 屬性為language，若是選擇了C++ ，則新網頁窗口的網址為URL?language=cpp

好，接下來介紹更多常用表單輸入項，<input>元素支援許多其他類型和屬性。不過在此之前，我們先了解以下程式碼的概念。

<label for="username">Username:</label>
<input type="text" id="username" name="username">

for="username"：
- 這告訴瀏覽器，該 <label> 與 id="username" 的輸入框相關聯。
- 當用戶點擊 "Username:" 標籤文字時，光標會自動定位到 <input> 框內。
id="username"：
- 唯一標識該 <input> 元素，使其能與 <label> 關聯。
- 還可以通過 JavaScript 或 CSS 操作該元素。

好，接下來繼續示範更多表單輸入項:

單選框

<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>

單選框的name屬性必須要一樣，如此，就能達到一次只能選擇一個的功能。

多選框

<label><input type="checkbox" name="hobby" value="reading"> Reading</label>
<label><input type="checkbox" name="hobby" value="traveling"> Traveling</label>

文件上傳

<label for="file">Upload File:</label>
<input type="file" id="file" name="file">

日期選擇

<label for="date">Choose Date:</label>
<input type="date" id="date" name="date" value="2025-01-02" min="2024-09-01" max="2025-01-31">

日期預設值為2025-01-02
其日期最早可以選到2024-05-09
其日期最晚可以選到2025-01-31

當然，還有許多的輸入類型，我沒辦法一一談到，一旦掌握了基礎知識，您就可以隨時透過搜尋網路來探索其他輸入類型。

好，接下來再來談談一些常用的表單屬性，增強表單的功能。

使用placeholder屬性為輸入內容欄位提供提示，以下示範:

<form>

  <input type="email" name="email" placeholder="Enter email."><br>
  <input type="password" name="password" placeholder="Enter password."><br>
  <textarea name="description" placeholder="Describe your question" rows="3" cols="30"></textarea><br>
  <input type="submit" value="Submit">

</form>

使用required屬性要求在提交表單之前必須填寫輸入欄位。

<form>
  <label for="username">Username:</label>
  <input type="text" id= "username" name="username" required><br>
 
  <button type="submit">Submit</button>
</form>

這邊提供一個綜合練習:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Form Example</title>
</head>
<body>
    <h1>Sample Form</h1>
    <form action="URL" method="POST">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" placeholder= "Enter your name" required><br><br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" placeholder= "Enter your password" required><br><br>

        <label>Gender:</label>
        <label><input type="radio" name="gender" value="male" required> Male</label>
        <label><input type="radio" name="gender" value="female" required> Female</label><br><br>

        <label for="country">Country:</label>
        <select id="country" name="country" required>
            <option value="us">United States</option>
            <option value="uk">United Kingdom</option>
            <option value="ca">Canada</option>
        </select><br><br>

        <label for="message">Message:</label><br>
        <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

        <label for="file">Upload File:</label>
        <input type="file" id="file" name="file"><br><br>

        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
    </form>
</body>
</html>

輸出效果:

好，接著簡單介紹<link>標籤，<link> 是一個自閉合標籤，用於將 HTML 文件與外部資源（如樣式表、圖標或其他文檔）連結起來。<link>標籤是放置在<head> 區域中。

基本語法如下:

<link rel="relationship" href="URL" type="MIME-type">

rel：指定資源與當前文檔的關係（例如樣式表、圖標等）。
href：指定外部資源的 URL。
type：定義資源的 MIME 類型（可選，現代瀏覽器中通常省略）。

目前先介紹2種常見用法:

網站圖標

<link rel="icon" href="favicon.ico" type="image/x-icon">

rel="icon"：指定網站圖標。
type="image/x-icon"：設置圖標的 MIME 類型。
href="favicon.ico"：指定圖標文件的位置。

與外部 CSS 檔案之間建立連結

<link rel="stylesheet" href="mystyle.css">

建立此連結後，我們可以在mystyle.css檔案中加入 CSS 程式碼來設定網頁的樣式。

好，最後我們再進入 CSS 章節前，還有必須了解的知識，就是 HTML 5語意標籤。

HTML 5語意標籤用於標示不同區域內容的元素，以下為語意標籤的不同用途:

優點:

讓開發者和瀏覽器都能直觀地理解標籤的含義。
結構清晰的語意化標籤使代碼更易於管理和擴展。

好，接著再談談 HTML 中的 class 這邊 class 的意思可不是類別，此class屬性是用於為多個 HTML 元素指派描述性名稱。它幫助我們使用單一名稱對多個元素進行分組。方便 CSS 與 JavaScript 操作。

示範如下:

<p class="red">This text is red.</p>
<p class="red bold">This text is red and bold.</p>

一個元素可以擁有多個類別名稱，用空格分隔。
不同的元素可以共享同一個類別名稱。
類別名稱是區分大小寫的。
當我們需要設定這些段落的樣式時，我們可以簡單地將 CSS 套用到該類別。此樣式將套用於具有相同類別名稱的所有元素。

好，有關 HTML 的一些基本知識就講到這邊，我們下一章就會開始了解如何使用 CSS，當然，如果有需要補充或額外的 HTML 知識，也會盡量完備的呈現出來。

電資鼠 - 您的學習好夥伴前端網頁程式設計入門前端三劍客

電資鼠 - 您的學習好夥伴

3會員

32內容數

在當今數位時代，電資領域人才需求爆發式成長，不論是前端網頁設計、嵌入式開發、人工智慧、物聯網還是軟硬體整合，這些技術都在改變世界。而掌握 C/C++、Python、數位邏輯、電路學與嵌入式開發等大學電資領域的課程，正是進入這個高薪、高需求產業的關鍵！

留言

留言分享你的想法！

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

你可能也想看

Google News 追蹤

Michael楊

2024/08/13

HTML入門-Day1：語言介紹、應用領域、誰在使用

在這個章節中，我們介紹了HTML的基本概念，包括其作為結構化標記語言的特性、應用領域，以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎，幫助讀者了解HTML在現代網頁開發中的重要性。

#HTML

前端轉職經驗談

2024/08/05

[前端自學轉職攻略] 5. 決定要學了，怎麼開始？

先學習 HTML, CSS, JavaScript 基礎觀念，再透過實作專案，慢慢熟悉不同的語法使用方式。

這節課的學習目標是了解 CSS 的基本語法結構和使用方法。

#CSS

Michael楊

2024/07/14

CSS入門-Day1：語言介紹、觸及的領域、誰在使用

CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。

你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。首先先介紹我的開發環境: 我用了vs

奧莉薇走在成為後端工程師之路上

2024/05/05

※ 認識DOM(二)

※ Javascript和HTML的關係當我們輸入新的網址或按下重新整理時，從解析檔案到畫面顯示出來，瀏覽器會進行以下流程：解析 HTML / CSS 檔案，建立物件模型： HTML → DOM (Document Object Model)。 CSS → CSSOM (CSS Obje

咖啡因學習教室

2024/03/14

2024 網頁x人因xDjango 實務課程 11 選擇器

前言今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。選擇器介紹還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看： .highlight { co

咖啡因學習教室

2024/03/14

2024 網頁x人因xDjango 實務課程 10 CSS 連結方式

前言終於要到這個振奮人心的章節了，我們終於要來學習，如何讓自己的網頁更加美觀。但在這之前，我們肯定得先學習，如何將我們的 CSS 檔案，連接到 HTML 當中。連結分類首先，我們在連結 CSS 的方法中，有分為三種：內聯連結在 .html 當中，任一標籤的裡面，用屬性 s

咖啡因學習教室

2024/02/29

2024 網頁x人因xDjango 實務課程 04 建立一個新的網頁

本文章介紹了建立網頁的整個流程，包括設置 Templates, Views, Urls 等步驟。透過這些步驟，大家便能創建一個新的網頁，並成功測試。

#網頁 #測試 #django

DavidHi的沙龍

2023/12/06

免費部落格架站教學(7) Hexo建立選單頁面

本篇介紹:設定about與categories、tags相關獨立頁面，讓自己的文章利於統整與搜尋。

#免費 #部落格 #網誌

Michael楊

2024/08/13

HTML入門-Day1：語言介紹、應用領域、誰在使用

#HTML

前端轉職經驗談

2024/08/05

[前端自學轉職攻略] 5. 決定要學了，怎麼開始？

先學習 HTML, CSS, JavaScript 基礎觀念，再透過實作專案，慢慢熟悉不同的語法使用方式。

這節課的學習目標是了解 CSS 的基本語法結構和使用方法。

#CSS

Michael楊

2024/07/14

CSS入門-Day1：語言介紹、觸及的領域、誰在使用

2024 網頁x人因xDjango 實務課程 11 選擇器

咖啡因學習教室

2024/03/14

2024 網頁x人因xDjango 實務課程 10 CSS 連結方式

咖啡因學習教室

2024/02/29

2024 網頁x人因xDjango 實務課程 04 建立一個新的網頁

本文章介紹了建立網頁的整個流程，包括設置 Templates, Views, Urls 等步驟。透過這些步驟，大家便能創建一個新的網頁，並成功測試。

#網頁 #測試 #django

DavidHi的沙龍

2023/12/06

免費部落格架站教學(7) Hexo建立選單頁面

本篇介紹:設定about與categories、tags相關獨立頁面，讓自己的文章利於統整與搜尋。

#免費 #部落格 #網誌