Day6-HTML(四)：body標籤

2022 iThome 鐵人賽

DAY 6

自我挑戰組

網頁前端設計系列第 6 篇

14th鐵人賽

Alexia

2022-09-06 19:17:52

1164 瀏覽

分享至

上次詳細介紹完了<head>標籤。今天，我們來介紹另一個重要的基本元素<body>標籤！

網頁上要呈現的內容基本都會放在這裡面，所以標籤的種類非常多，這次先簡單介紹，之後會再個別詳細說明、補充，還有實作的部分～
(๑•̀ㅂ•́)و✧

HTML的標準架構簡單來說長這樣：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

<head>是放使用者看不見、給電腦看的資訊。相對於<body>主要是放使用者從螢幕上看得到的，用來呈現網頁的主要內容。

`<body>`標籤

被包含在<body>裡的標籤有：

<p> 段落
用來輸入一段文字段落。
<h1>-<h6> 標題
1-6表示不同的重要程度，依重要程度不同而有不同的文字大小。
<br> 換行
在HTML裡不是用 \n ，而是用<br>來做換行。
<a> 超連結
用來建立超連結以通往其他頁面、檔案、或其他超連結。
<img> 圖片
用來加入圖片。
<ul>, <ol>, <li>, <dl>, <dt>, <dd> 項目列表清單
可建立不同類型的項目列表清單。
<table> 表格
用來建立表格。
<form> 表單
可讓使用者輸入資料，這些資料可以用來和使用者互動。裡面也包含了許多其他的標籤元素。
容器標籤
用來當作容器，方便給CSS做樣式排版或JavaScript做互動操作，而標籤本身沒任何特殊的意義也不帶任何的標籤語意。

<span> 行內
用來包裹文字或其他行內的HTML。
<div> 區塊
用來包裹其他HTML，將其中的內容整理出不同的獨立區塊。

強調、凸顯重要性
用來強調一段文字內容特別重要。

<strong> 強調重要性
瀏覽器預設的strong樣式也是用粗體字顯示。
<em> 對內容著重強調
瀏覽器預設的em樣式也是用斜體字顯示。
<mark> 突顯高亮文字
用來高光一段文字，就像螢光筆一樣，目的是讓文字可以在它上下文中被突顯出來。
<hr> 水平分隔線
用來做文字段落的焦點或場景的轉換，看起來就像是一條水平分隔線。

引用文字

<q> 行內引用
用來引用一句短文字。
<blockquote> 區塊引用
用來引用段落文字。

<iframe> 內嵌框架
用來在一個HTML網頁裡面嵌入另一個HTML網頁或外掛。
<frameset>, <frame> 框架/分割視窗
可以把一個畫面分割成好幾個區塊，每個區塊可以各自載入不同的網頁，就像分割視窗一樣。
嵌入內容
嵌入不同檔案類型(通常是非 HTML)的瀏覽器外掛內容、資源。

<embed> 嵌入瀏覽器外掛內容
用來在網頁中嵌入外掛內容。
<object>, <param> 嵌入外部資源
用來在網頁中嵌入外部資源。

<pre> 預先格式化
用來保存原始文字內容的格式，就是其中的空白與換行都會顯示出來。
<code> 顯示程式碼內容
<center> 置中
用來把內容水平置中。
<ins> 標示新插入的文字
常和<del>一起使用。
<del> 標示被刪除的文字
常和<ins>一起使用。

Day5-HTML(三)：head標籤

Day7-HTML(五)：段落標題與空白字元

系列文

網頁前端設計共 30 篇

RSS系列文訂閱系列文

4 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22207 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

網頁前端設計系列 第 6 篇

Day6-HTML(四)：body標籤

HTML的標準架構簡單來說長這樣：

<body>標籤

尚未有邦友留言

標記使用者

網頁前端設計系列第 6 篇

`<body>`標籤