Day29:描述head的內容&製作header頁首區塊

2024 iThome 鐵人賽

DAY 29

佛心分享-IT 人自學之術

HTML&CSS網頁設計學習心得系列第 29 篇

16th鐵人賽

gogococo

2024-10-13 20:13:13

100 瀏覽

分享至

全螢幕網站描述在 head 部分

<head>
    <!-- 指定 HTML 文件的字符編碼 -->
    <meta charset="UTF-8">
    
    <!-- 確保網站在移動設備上正確顯示，使用設備視口的全部寬度 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 設置網頁的標題，顯示在瀏覽器標籤中 -->
    <title>我的個人頁面</title>
    
    <!-- 連結到外部 CSS 文件來設計網頁，啟用布局、字體、顏色等的自訂樣式 -->
    <link rel="stylesheet" href="style.css">
    
    <!-- 可選：指定顯示在瀏覽器標籤中的網站圖標（favicon） -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    
    <!-- 可選：連結到 Google 字體，使用自訂字體（可根據需要替換成其他字體） -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    
    <!-- 可選：SEO（搜尋引擎優化）meta標籤，提供網站的簡短描述，便於搜尋引擎檢索 -->
    <meta name="description" content="展示我最喜歡的電影和音樂的個人頁面。">
    
    <!-- 可選：社交媒體分享的 meta 標籤，當在 Facebook 或 Twitter 等平台上分享時生成預覽 -->
    <meta property="og:title" content="Coco 的個人頁面">
    <meta property="og:description" content="探索我最喜歡的電影和音樂收藏。">
    <meta property="og:image" content="https://example.com/preview-image.jpg">
    <meta property="og:url" content="https://example.com">
</head>

主要元素解釋：
<meta charset="UTF-8">：設置頁面的字符編碼，確保能正確顯示特殊字符、符號及不同語言。

<meta name="viewport" content="width=device-width, initial-scale=1.0">：確保網站具有響應式設計，能夠自動適應不同屏幕大小（例如：手機、平板電腦、桌面電腦）。

<link rel="stylesheet" href="style.css">：連結到外部的 CSS 文件，用於設計整個網站。

<meta name="description" content="...">：提供簡短的頁面描述，便於搜尋引擎的檢索和優化。

Open Graph (og) Meta 標籤：這些標籤在網站分享到社交媒體平台時非常有用，提供標題、描述和圖片信息，幫助平台生成頁面的預覽。

製作header頁首區塊
在 HTML 中，header 元素用於定義頁面的頁首區塊，通常包含網站的標誌、標題、導航連結等。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的網站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 頁首區塊 -->
    <header>
        <div class="logo">
            <img src="logo.png" alt="網站標誌">
        </div>
        <nav>
            <ul class="nav-links">
                <li><a href="#home">首頁</a></li>
                <li><a href="#about">關於我們</a></li>
                <li><a href="#services">服務</a></li>
                <li><a href="#contact">聯絡我們</a></li>
            </ul>
        </nav>
    </header>

    <!-- 其他內容 -->
    <main>
        <h1>歡迎來到我的網站</h1>
        <p>這是我們網站的首頁。</p>
    </main>

    <footer>
        <p>&copy; 2024 我的網站. 保留所有權利。</p>
    </footer>
</body>
</html>

CSS設計


body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logo img {
    width: 100px; 
    height: auto;
}

nav {
    display: flex;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
}

.nav-links li {
    margin: 0;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #007bff; 
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        text-align: center;
    }

    .nav-links {
        flex-direction: column;
        gap: 10px;
    }

    .logo img {
        margin-bottom: 10px;
    }
}

解釋：
// HTML 部分：header 元素包含一個 logo 區塊和一個 nav 區塊，用於顯示網站的標誌和導航連結。
導航連結使用無序列表（<ul>），每個連結用 <li> 和 <a> 包裹。
// CSS 部分：頁首使用 flexbox 布局，確保標誌和導航連結在同一行顯示，並且能夠隨著螢幕大小調整排列。
當螢幕寬度小於 768px 時，頁首將轉換為縱向布局，使其在移動設備上也能清晰顯示。