技術學習

HTML 學習一 - 基礎

📢 本文由 gemini-2.5-flash 翻譯

前言

HTML 學習一 - 基礎: https://blog.yexca.net/archives/146
HTML 學習二 - 清單、表格與表單: https://blog.yexca.net/archives/150
HTML 學習三 - 網頁版面配置: https://blog.yexca.net/archives/195

基本架構

1
2
3
4
5
6
7
8

<html>
    <head>
        <title>網頁標題</title>
    </head>
    <body>
        網頁主體
    </body>
</html>

通常會由軟體生成，舉例來說，在 VS Code 裡可以新建 .html 檔案後輸入英文字元 !，再按 TAB 鍵自動生成。

head 標籤通常是給瀏覽器看的，body 標籤則是給使用者看的。

註解

1

<!-- 註解內容 -->

在 VS Code 中，可以選取該行，使用快捷鍵 Ctrl + / 一鍵註解。

瀏覽器不會顯示註解的內容。

標題與段落

1
2
3
4
5
6
7
8

<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<p>段落內容</p>
<p>段落內容</p>

標題標籤會顯示粗體文字，並獨佔一行。

段落標籤內容會獨佔一行，段落之間會有空隙。

換行與水平線

在段落標籤中的內容換行並不會顯示出來，如需換行需使用換行標籤。

1

<br />

水平線標籤的程式碼如下：

1

<hr />

效果如下：

文字格式化標籤

結果標籤名稱縮寫
粗體strongb
斜體emi
底線insu
刪除線dels

一般不建議使用縮寫，範例如下：

1
2
3
4

<p>
    您好，我是 <em>yexca</em>，<strong>歡迎</strong>造訪<ins>此部落格</ins><br />
    <del>然後我該寫些什麼呢？</del>
</p>

效果如下：

您好，我是 yexca，歡迎造訪此部落格
然後我該寫些什麼呢？

圖片標籤

圖片標籤需要在 src 屬性中指定圖片的位置。

1

<img src="path" alt="圖片無法載入時顯示的內容" />

路徑分為絕對路徑和相對路徑，假設目前的目錄為 (Linux 系統)：

1
2
3

/home/yexca/code
	index.html
	photo.jpg

程式碼寫在 index.html 檔案中，那麼相對路徑如下：

1

<img src="./photo.jpg" />

絕對路徑如下：

1

<img src="/home/yexca/code/photo.jpg" />

超連結標籤

1

<a href="目標頁面" target="方式">連結文字</a>

這個標籤用於跳轉網頁，也就是網頁中的連結。如果需要在新視窗開啟網頁，只需將 target 屬性值設為 _blank，例如以下程式碼：

1
2
3
4
5

<p>
    跳轉到
    <a href="https://yexca.net">yexca</a><br />
    這是新的分頁：<a href="https://yexca.net" target="_blank">yexca</a>
</p>

效果如下：

跳轉到 yexca
這是新的分頁：yexca

影音標籤

1
2

<audio src="path">音訊標籤</audio>
<video src="path">視訊標籤</video>

音訊標籤屬性如下：

屬性作用說明
src音訊路徑必要屬性，支援 mp3、ogg、wav
controls顯示音訊控制面板
loop循環播放
autoplay自動播放瀏覽器通常會禁止自動播放

視訊標籤屬性如下：

屬性作用說明
src視訊路徑必要屬性，支援 mp4、webm、ogg
controls顯示視訊控制面板
loop循環播放
muted靜音播放
autoplay自動播放瀏覽器支援在靜音狀態下自動播放

假設目前的目錄如下：

1
2
3
4

/home/yexca/code
	index.html
	audio.mp3
	video.mp4

例如以下程式碼：

1
2
3
4
5
6
7
8

<audio src="./audio.mp3" controls loop></audio>
<!-- 顯示控制面板，播放完畢後會循環回到開頭播放 -->
<video src="./video.mp4" controls loop></video>
<!-- 顯示控制面板，播放完畢後會循環回到開頭播放 -->
<video src="./video.mp4" controls muted autoplay></video>
<!-- 這段程式碼會自動播放 -->
<video src="./video.mp4" controls autoplay></video>
<!-- 這段程式碼不會自動播放 -->

版面配置標籤

沒有實質意義，用於網頁版面配置的標籤，用來劃分區域或擺放內容。

  • div: 獨佔一行
  • span: 不換行

例如以下程式碼：

1
2
3
4
5
6
7
8

<div>
    div1
</div>
<div>
    div2
</div>
<span>span1</span>
<span>span2</span>

效果如下：

div1
div2
span1 span2

字元轉換

用於在網頁中顯示預留字元。例如顯示空白、<、>。

結果描述Entity NameEntity Number
non-breakingspace&nbsp;&#160;
<less than&lt;&#60;
>greater than&gt;&#62;
&ampersand&amp;&#38;
“double quotation mark&quot;&#34;
‘single quotation mark (apostrophe)&apos;&#39;
¢cent&cent;&#162;
£pound&pound;&#163;
¥yen&yen;&#165;
€euro&euro;&#8364;
©copyright&copy;&#169;
®registered trademark&reg;&#174;

例如顯示 <p>：

1
2
3

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

參考來源： HTML字元符號 &Nbsp; &Ensp; &Emsp; 的差異