[day-17] - 淺嚐網頁的滋味 - HTML簡介

16th鐵人賽

麻糬Mouchi

2024-10-02 23:05:42

560 瀏覽

分享至

甚麼是 HTML

這邊只是快速簡介網頁的核心本體HTML是甚麼，~~~反正不是程式語言~~(大誤
HTML（HyperText Markup Language）是現代網頁開發的基礎，它是一種標記語言用於建構網頁內容。

網頁的主體結構是由一系列的元素構成，這些元素用標籤（tags）包圍起來，告訴瀏覽器如何顯示內容。下面會詳細介紹 HTML 的核心概念、元素和結構。

HTML 的核心結構

HTML 文件基本上由以下部分組成：

<!DOCTYPE html>：聲明HTML版本，告訴瀏覽器使用哪個 HTML 版本解讀（現代網頁一般使用 HTML5）。
<html>：包裹整個 HTML 文檔的根元素。
<head>：整體網頁的初始載入資料，可能會有元數據（metadata）或外部載入檔案連結。
<body>：所有顯示在瀏覽器中的內容，如文字、圖片、影片等。

常見的 HTML 標籤

<title>：定義網頁標題，顯示在瀏覽器標籤上。
<h1>至<h6>：標題標籤，<h1> 是最高的階層。
<p>：段落標籤，用於包裹文字內容。
<a>：連結標籤，用於建立一個超連結。
<img>：圖片標籤，用於嵌入圖片。
<ul>, <ol>, <li>：分別為無序列表、有序列表和列表項目。
<div> 和 <span>：用於分組和包裹內容的容器，<div> 是區塊元素，<span> 是行內元素。
<form>：用於建立表單，與用戶互動和收集數據。

HTML5 究竟新增了甚麼？

hmmmmm...只能說在這一路上歷史的發展真的蠻複雜的
但幾乎是跨世代的改進
新增了許多語意元素（顧名思義，只是用來看的）
語意元素是用於使開發者、瀏覽器在閱讀網頁時比較能理解其含義
像是 <section> 通常是指一個區段，且通常可能會有標題之類的
<nav> 是導覽列容器，告訴我們這是導覽列喔！
<footer>指的是頁尾的內容，通常包含一些聯絡資訊或是版權宣告。

從上述舉例可以發現，這些標籤本身不會改變顯示的邏輯，因此在傳統的開發中使用<div>標籤也能達到相同的作用，只是整體就會缺少閱讀性，且機器或一些特殊的閱讀器可能無法辨別內容本身，對於無障礙使用者可能會造成影響。

此外，HTML5也對表單、多媒體、圖形顯示、各種平台的API進行支援與改善，造就了現在廣泛跨平台的網頁應用程式。