HTML入門-Day2：基本語法與文檔結構
更新於 2024/09/02閱讀時間約 1 分鐘
基本語法
HTML（HyperText Markup Language）是一種用來建立網頁的標記語言。它包含一系列的標籤，這些標籤告訴網頁瀏覽器如何顯示內容。基本的HTML文檔結構包括以下部分：
<!DOCTYPE html>：聲明文檔類型和版本，這是HTML5的聲明。<html>：這個標籤包含了整個網頁的內容，是所有其他HTML標籤的容器。<head>：包含了文檔的元數據（metadata），如編碼、標題、鏈接到樣式表和腳本等。<title>：指定了網頁的標題，這在瀏覽器標籤上顯示。<body>：包含了網頁的主要內容，如文字、圖片、視頻等。
一個基本的HTML範例：
<!DOCTYPE html>
<html>
<head>
<title>我的首頁</title>
</head>
<body>
<h1>歡迎來到我的網頁</h1>
<p>這是一個段落。</p>
</body>
</html>
HTML結構類型
HTML文件的基本結構是相對固定的，包含一些核心元素來構建網頁的框架。這些元素確保網頁能在瀏覽器中正確顯示和操作。以下是一些基本的HTML結構及其變體：
標準HTML5結構
這是最常見的HTML5文件結構，適用於大多數現代網頁：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<header>
<!-- 頭部內容 -->
</header>
<nav>
<!-- 導航連結 -->
</nav>
<main>
<!-- 主要內容 -->
</main>
<footer>
<!-- 頁腳內容 -->
</footer>
</body>
</html>
簡化結構
對於一些簡單的網頁或初學者的練習項目，可以使用更簡化的結構：
<!DOCTYPE html>
<html>
<head>
<title>簡單的頁面</title>
</head>
<body>
<h1>標題</h1>
<p>段落文字。</p>
</body>
</html>
HTML4 傳統結構
在HTML5成為標準之前，HTML4和XHTML常用的結構略有不同，特別是DOCTYPE和元素使用上的一些區別：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<http://www.w3.org/TR/html4/loose.dtd>">
<html>
<head>
<title>舊版HTML文檔</title>
</head>
<body>
<div>
<h1>歷史標題</h1>
<p>內容描述。</p>
</div>
</body>
</html>
HTML5語意化增強結構
為了更好地描述網頁內容和結構，HTML5引入了更多語意化標籤：
<!DOCTYPE html>
<html>
<head>
<title>語意化結構</title>
</head>
<body>
<article>
<header>
<h1>文章標題</h1>
</header>
<section>
<h2>章節標題</h2>
<p>內容...</p>
</section>
<footer>
<p>版權信息</p>
</footer>
</article>
</body>
</html>
這些結構展示了HTML文件的多種可能形式，從基礎到高級，涵蓋不同需求和技術標準。對於學習和實踐，了解這些結構的差異及其適用情況非常重要。
常見標籤
HTML文檔由各種標籤組成，這些標籤定義了網頁的結構。以下是一些基本而常見的HTML標籤：
<h1>到<h6>：這些標籤用於標題，<h1>是最高層級，通常用於主標題，而<h6>是最低層級。<p>：用於段落，是最常用的文本標籤。<a>：用於創建超連結，通過href屬性指向其他網頁或站點。<img>：用於嵌入圖片，src屬性指定圖片的來源，alt屬性提供圖片內容的文字說明。<ul>、<ol>、<li>：分別用於無序列表、有序列表和列表項目。
註解
在HTML中添加註解是一種好習慣，可以幫助開發者理解代碼的意圖，而這些註解不會在瀏覽器中顯示。HTML的註解以<!--開始，以-->結束。例如：
<!-- 這是一個註解，它不會在網頁中顯示 -->
<p>這是一個可見的段落。</p>
註解可以放置於HTML的任何位置，用來解釋代碼或臨時禁用代碼。
透過這些基礎知識的介紹，學生可以了解HTML的結構和常用標籤，為進一步學習和實踐打下基礎。
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在這個章節中，我們介紹了HTML的基本概念，包括其作為結構化標記語言的特性、應用領域，以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎，幫助讀者了解HTML在現代網頁開發中的重要性。
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
先學習 HTML, CSS, JavaScript 基礎觀念，
再透過實作專案，慢慢熟悉不同的語法使用方式。
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
要如何利用 HTML 標籤來增加網頁的結構性呢？HTML 標籤提供了 Google 爬蟲更多有用的資訊，讓爬蟲在爬行網站時可以更輕鬆且正確地分析網頁內容。本文將為你介紹 HTML 對於 SEO 的重要性以及 10 個常見的 HTML 語法。｜SEO
HTML 是什麼？
超文本標記語言（Hyper
你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。
首先先介紹我的開發環境:
我用了vs
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在這個章節中，我們介紹了HTML的基本概念，包括其作為結構化標記語言的特性、應用領域，以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎，幫助讀者了解HTML在現代網頁開發中的重要性。
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
先學習 HTML, CSS, JavaScript 基礎觀念，
再透過實作專案，慢慢熟悉不同的語法使用方式。
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
要如何利用 HTML 標籤來增加網頁的結構性呢？HTML 標籤提供了 Google 爬蟲更多有用的資訊，讓爬蟲在爬行網站時可以更輕鬆且正確地分析網頁內容。本文將為你介紹 HTML 對於 SEO 的重要性以及 10 個常見的 HTML 語法。｜SEO
HTML 是什麼？
超文本標記語言（Hyper
你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。
首先先介紹我的開發環境:
我用了vs
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。