iT邦幫忙

2024 iThome 鐵人賽

DAY 3
1
自我挑戰組

從零開始的HTML系列 第 3

Day3 HTML網頁標籤與影像置入

  • 分享至 

  • xImage
  •  

一、網頁標籤
在HTML中,可以使用多種標籤來插入網頁內文,以下是幾個常用的標籤:

1. 段落 (<p>)

用來插入一般的文字段落:

<p>網頁文章的段落。</p>

2. 標題 (<h1><h6>)

用來定義不同級別的標題,如前面提到的:

<h1>這是第一級標題</h1>
<h2>這是第二級標題</h2>
<h3>這是第三級標題</h3>
<h4>這是第四級標題</h4>
<h5>這是第五級標題</h5>
<h6>這是第六級標題 </h6>

3. 顯示項目清單 (<ul>, <ol>, <li>)

使用無序或有序清單來展示項目:

  • 無序清單:
<ul>
  <li>項目1</li>
  <li>項目2</li>
</ul>
  • 有序清單:
<ol>
  <li>項目1</li>
  <li>項目2</li>
</ol>

4. 捲動文字或段落的分行 (<br><hr>)

  • 強制換行:
<p>這是第一行<br>這是第二行</p>
  • 水平分隔線:
<hr>

5. 強調文字 (<strong>, <em>)

  • 粗體文字:
<strong>這是重要的粗體文字</strong>
  • 斜體文字:
<em>這是強調的斜體文字</em>

6. 超連結 (<a>)

插入連結文字:

<a href="https://www.example.com">點擊這裡訪問網站</a>

7. 預先格式化文字 (<pre>)

保留文字的原始格式(如換行和空白):

<pre>
這是預格式化文字,
保留換行和空格。
</pre>

可以使用這些標籤來組織和格式化網頁內容。

二、影像插入
在HTML中插入影像使用 <img> 標籤,並通過 src 屬性來指定影像的檔案位置。這是範例代碼:

<img src="image.jpg" alt="描述文字" width="500" height="300">
  • src:影像的路徑(可以是相對路徑或絕對路徑)。
  • alt:當影像無法顯示時,提供的替代文本,有助無障礙瀏覽。
  • widthheight:設定影像的寬度和高度(可選)。

假如影像位於不同的資料夾中,你可以使用如下格式:

<img src="images/photo.jpg" alt="描述文字">

如果影像來自外部網站,則使用URL:

<img src="https://www.example.com/image.jpg" alt="描述文字">

上一篇
Day 2 了解HTML的基本概念
下一篇
Day 4 HTML表格製作
系列文
從零開始的HTML30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言