文、意如
認識行內樣式
<標籤 style="屬性:值; 屬性:值;">
基本文字樣式
<p style="color: red; font-size: 20px;">文字</p>背景顏色與內距
<div style="background-color: lightblue; padding: 10px;">
背景顏色與內距
</div>加上邊框
<span style="border: 1px solid black; padding: 5px;">加上邊框</span>對齊與粗體
<h2 style="text-align: center; font-weight: bold;">對齊與粗體</h2>調整圖片大小
<img src="example.jpg" style="width: 200px; height: auto;">多個屬性一起用（常見在按鈕）
<button style="background-color: green; color: white; border: none; padding: 10px 20px;">
按我
</button>
完整程式碼:
<html> <!-- HTML 文件開始 -->
<head> <!-- 頁首區塊開始，通常放置標題與樣式、引用等資訊 -->
<title>行內樣式</title> <!-- 網頁標題，顯示在瀏覽器標籤上 -->
</head>
<body> <!-- 網頁內容開始 -->
<!-- 段落文字，使用行內樣式設定字體顏色為紅色，字體大小為 20px -->
<p style="color: red; font-size: 20px;">文字</p>
<!-- 區塊 div，背景顏色為淡藍色，內距為 10px -->
<div style="background-color: lightblue; padding: 10px;">
背景顏色與內距
</div>
<br> <!-- 插入換行 -->
<!-- span 行內元素，加上黑色實線邊框與 5px 內距 -->
<span style="border: 1px solid black; padding: 5px;">加上邊框</span>
<!-- 標題文字 h2，文字置中，並設定為粗體 -->
<h2 style="text-align: center; font-weight: bold;">對齊與粗體</h2>
<!-- 顯示圖片，寬度設定為 200px，高度自動調整比例 -->
<img src="images/img1.jpeg" style="width: 200px; height: auto;">
<br> <!-- 插入換行 -->
<!-- 按鈕元件，綠色背景、白色文字、無邊框、上下左右內距設定 -->
<button style="background-color: green; color: white; border: none; padding: 10px 20px;">
按我
</button>
</body> <!-- 網頁內容結束 -->
</html> <!-- HTML 文件結束 -->
Yiru@Studio - 關於我 - 意如
