Day2 網頁基本結構 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 2

0

佛心分享-IT 人自學之術

新手踏入網頁前端的世界系列第 2 篇

Day2 網頁基本結構

16th鐵人賽

2024-09-06 22:32:07

219 瀏覽

分享至

語法基本結構大致如下：

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

首先

HTML 5 文件的第一行要宣告文件格式為html
其中DOCTYPE ( 是Document Type 的縮寫 )

起始與結束標籤

<html> 和 </html>標籤之間會寫入HTML文件的標頭與主體

標頭

<head>和 </head> 之間會放置title 、meta、link等標籤
(需注意一個網頁只能使用一組<head>標籤)

<title>標籤
用來顯示網頁的標題名稱在瀏覽器上
<meta>標籤
用來註明網頁資訊，以下舉三個例子：
1. <meta charset="UTF-8">
  設定網頁語系，UTF-8代表萬用字元的格式，可以顯示不同語系的文字。
2. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  此設定讓不同裝置在瀏覽網頁時，其介面會有所調整。
3. <meta http-equiv="refresh" content="3; url=https://...">
  設定網頁在3秒後執行網頁重新整理，並將網頁帶到url等號右邊的網址。

主體

<body>和</body> 之間是放置 <h1> ～ <h6>和 <p> 標籤

<h1> ～ <h6> 標籤
設定標題格式，數字越小顯示出的字體越大
<p> 標籤
p 為paragraph的縮寫，用來顯示文章不同的段落

總結

<head>和<body>比較

<head> 內寫入的是給瀏覽器判別的內容
<body>內寫入的是顯示在網頁的內容

Day 3 實作範例＆網頁區塊結構

系列文

新手踏入網頁前端的世界共 30 篇

目錄

RSS系列文訂閱系列文

0 人訂閱

完整目錄

熱門推薦

{{ item.subject }}

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

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

902 組

團體組數

37 組

累計文章數

19819 篇

完賽人數

529 人

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

IT邦幫忙