第一階段
HTML 基礎結構
<!DOCTYPE html>
<html><head><title>頁面標題</title></head><body>頁面內容</body>
</html>
常用內容標簽
文本類標簽
? <h1>~<h6>：標題（h1 每個頁面建議只用一次）
? <p>：段落
? <span>：行內文本容器
? <strong>：加粗強調
? <em>：斜體強調
媒體類標簽
? <img src="..." alt="描述" title="懸停時顯示" width="400">：圖片（alt 屬性必須寫）
? <audio controls>：音頻
? <video controls>：視頻
列表標簽
<ul> <!-- 無序列表 --><li>項目</li>
</ul><ol> <!-- 有序列表 --><li>第一項</li>
</ol>
超鏈接與錨點
<a href="https://example.com">外部鏈接</a>
<a href="#section2">跳轉到章節</a> <!-- 需配合id使用 -->
<a href="mailto:email@example.com">郵件鏈接</a>
表格
<table><tr><th>表頭</th></tr><tr><td>單元格</td></tr>
</table>
表單控件
輸入框
<input type="text"> <!-- 文本 -->
<input type="password">
<input type="email">
單選/多選
<!-- 單選框（同name為一組） -->
<input type="radio" name="gender" value="male"><!-- 多選框 -->
<input type="checkbox" name="hobby" value="sports">
提交按鈕
<input type="submit" value="提交">
<button type="submit">提交</button>
語義化標簽
| 標簽 | 用途 |
|---|---|
<header> | 頁眉 |
<nav> | 導航欄 |
<section> | 文檔獨立區塊 |
<article> | 獨立文章內容 |
<footer> | 頁腳 |
表單分組標簽
<fieldset> 和 <legend>
<fieldset><legend>目標配置</legend><label>目標 url<input type="url" name="target"></label><br><label>端口范圍<input type="text" name="port"></label><br>
</fieldset>
作用：
? 將相關的表單控件歸類為一個邏輯單元
? 默認生成一個灰色邊框包圍分組內容
? 屏幕閱讀器會朗讀<legend>內容，幫助視障用戶理解分組目的
注意事項
- 所有標簽必須閉合（如
<img>寫成<img />） - 屬性值用雙引號包裹：
src="image.jpg" - 圖片必須寫
alt屬性 - 表單元素需搭配
<label>提升可訪問性 <label>標簽的for屬性與表單元素的id對應
第一階段成果示例
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Yzd的網絡安全簡介</title>
</head>
<body><header><h1 id="top" style="color: red; text-align: center; font-size: 50px;">Yzd 的網絡安全簡介</h1><hr></header><section><h2>基本信息</h2><p><strong>職業：</strong>網絡安全研究員</p><p><strong>愛好：</strong>CS:GO競技游戲</p><p><a href="https://www.csgo.com.cn/show/index.html" target="_blank">訪問CS:GO官網</a></p><img src="2.jpg" alt="Yzd的個人照片" width="200"></section><section><h2>滲透測試工具配置</h2><form><fieldset><legend>身份驗證</legend><label for="username">測試人員名稱：</label><input type="text" id="username" name="username"></fieldset><fieldset><legend>工具選擇</legend><input type="checkbox" name="tool" id="yakit" value="yakit"><label for="yakit">Yakit安全測試平臺</label></fieldset><input type="submit" value="開始測試"></form></section>
</body>
</html>
藍色星球綜合示例
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="藍色星球聯盟 - 探索宇宙奧秘，保護地球家園"><title>藍色星球聯盟 | 探索與保護</title><style>/* 基礎樣式 */body {font-family: 'Arial', sans-serif;line-height: 1.6;color: #333;margin: 0;padding: 0;background-color: #f5f9ff;}/* 導航欄 */.navbar {background-color: #1a4b8c;padding: 1rem 0;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}.nav-container {width: 90%;max-width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}.logo {color: white;font-size: 1.5rem;font-weight: bold;text-decoration: none;}.nav-links {display: flex;gap: 2rem;}.nav-links a {color: white;text-decoration: none;transition: color 0.3s;}.nav-links a:hover {color: #7fb2ff;}/* 主要內容 */.container {width: 90%;max-width: 1200px;margin: 2rem auto;padding: 0 1rem;}/* 頁眉 */.header {text-align: center;padding: 3rem 0;background: linear-gradient(135deg, #1a4b8c, #3a7bd5);color: white;border-radius: 8px;margin-bottom: 2rem;}.header h1 {font-size: 2.5rem;margin-bottom: 1rem;}.header p {font-size: 1.2rem;max-width: 800px;margin: 0 auto;}/* 內容區塊 */.section {background: white;padding: 2rem;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);margin-bottom: 2rem;}.section h2 {color: #1a4b8c;border-bottom: 2px solid #e1e8f0;padding-bottom: 0.5rem;margin-top: 0;}/* 頁腳 */.footer {background-color: #1a4b8c;color: white;text-align: center;padding: 2rem 0;margin-top: 3rem;}/* 響應式設計 */@media (max-width: 768px) {.nav-container {flex-direction: column;gap: 1rem;}.nav-links {flex-direction: column;gap: 1rem;align-items: center;}.header h1 {font-size: 2rem;}}</style></head><body><!-- 導航欄 --><nav class="navbar"><div class="nav-container"><a href="#" class="logo">藍色星球聯盟</a><div class="nav-links"><a href="#about">關于我們</a><a href="#mission">使命愿景</a><a href="#join">加入我們</a><a href="#contact">聯系我們</a></div></div></nav><!-- 主要內容 --><div class="container"><!-- 頁眉 --><header class="header"><h1>藍色星球聯盟</h1><p>探索宇宙奧秘 · 保護地球家園 · 共創可持續未來</p></header><!-- 關于我們 --><section id="about" class="section"><h2>關于我們</h2><p>藍色星球聯盟成立于2010年，是一個致力于宇宙探索和地球環境保護的國際性非營利組織。我們匯聚了來自全球的天文學家、環境科學家和熱心公益人士，共同為人類的未來努力。</p><p><strong>我們的信念：</strong>地球是人類唯一的家園，探索宇宙和保護環境同等重要。</p></section><!-- 使命愿景 --><section id="mission" class="section"><h2>使命與愿景</h2><p><em>"探索未知，守護已知"</em> - 這是藍色星球聯盟的核心使命。</p><p>我們致力于：</p><ul><li>推動宇宙探索和天文科學研究</li><li>促進地球環境保護和可持續發展</li><li>搭建科學家與公眾之間的溝通橋梁</li><li>培養下一代的科學探索精神和環保意識</li></ul></section><!-- 加入我們 --><section id="join" class="section"><h2>加入我們</h2><p>無論您是科學家、教育工作者、學生還是熱心公益的普通公民，都可以成為藍色星球聯盟的一員。</p><p>選擇您的參與方式：</p><ol><li>成為正式會員</li><li>參與志愿者活動</li><li>捐助支持我們的項目</li><li>傳播我們的理念</li></ol><p><a href="#contact">立即聯系我們</a>，開始您的藍色星球之旅！</p></section></div><!-- 頁腳 --><footer class="footer"><div class="container"><p>? 2023 藍色星球聯盟 版權所有</p><p>聯系方式: info@blueplanet.org | 電話: +1 (800) 123-4567</p><p><span>行內文本容器示例</span> | <strong>加粗顯示重要信息</strong> | <em>斜體顯示強調內容</em></p></div></footer></body></html>
第二階段
1. CSS 基本結構實例
CSS 規則由 ??選擇器?? 和 ??聲明塊?? 組成：
/* 選擇器 { 屬性: 值; } */
p {color: blue;font-size: 16px;
}
實例解析：
p：選擇所有<p>段落元素color: blue;：將文字顏色設為藍色font-size: 16px;：將字號設為16像素
2. 三種引入方式實例
2.1 內聯樣式（直接寫在HTML標簽內）
<p style="color: red; margin: 10px;">這是一個紅色段落</p>
2.2 內部樣式表（寫在 <style> 標簽中）
<head><style>h1 {color: green;text-align: center;}</style>
</head>
<body><h1>這個標題會居中顯示為綠色</h1>
</body>
2.3 外部樣式表（最推薦的方式）
<!-- index.html -->
<head><link rel="stylesheet" href="styles.css">
</head>/* styles.css */
body {background-color: #f0f0f0;font-family: Arial;
}
3. 基礎選擇器實例
3.1 元素選擇器
/* 選擇所有div元素 */
div {border: 1px solid black;
}
3.2 類選擇器（最常用）
/* 選擇class="highlight"的元素 */
.highlight {background-color: yellow;
}
<p class="highlight">這個段落會有黃色背景</p>
3.3 ID選擇器
/* 選擇id="header"的元素 */
#header {height: 80px;background: #333;
}
<div id="header">網站頭部</div>
4. 常用樣式屬性實例
4.1 文本樣式
.title {color: #333; /* 文字顏色 - 深灰色 */font-size: 24px; /* 字號 - 24像素 */font-weight: 700; /* 加粗 - 700相當于bold */font-family: 'Helvetica Neue', Arial, sans-serif; /* 字體棧 */text-align: center; /* 水平居中 */text-decoration: underline wavy #ff5722; /* 波浪下劃線，橙色 */text-transform: uppercase; /* 文本大寫 */letter-spacing: 1px; /* 字母間距 */line-height: 1.6; /* 行高1.6倍 */text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* 文字陰影 */word-spacing: 2px; /* 單詞間距 */
}
4.2 盒模型實例
.box {/* 尺寸 */width: 200px; /* 內容寬度 */height: 100px; /* 內容高度 */min-width: 150px; /* 最小寬度 */max-width: 90vw; /* 最大寬度為視窗90% *//* 盒模型 */box-sizing: border-box; /* 更合理的盒模型計算方式 */padding: 20px; /* 內邊距 */border: 2px solid #f44336; /* 邊框 */margin: 10px auto; /* 外邊距 + 水平居中 *//* 背景 */background-color: #f5f5f5; /* 背景色 */background-image: linear-gradient(to bottom, #fff, #eee); /* 漸變背景 *//* 視覺效果 */border-radius: 8px; /* 圓角 */box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.5); /* 外陰影+內陰影 */opacity: 0.95; /* 透明度 *//* 變換 */transform: rotate(0.5deg); /* 輕微旋轉 */transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 平滑過渡 */
}
4.3 實際布局實例
<style>.container {width: 80%;margin: 0 auto; /* 水平居中 */background: white;padding: 20px;}.card {border: 1px solid #ddd;padding: 15px;margin-bottom: 20px;border-radius: 5px; /* 圓角 */}
</style><div class="container"><div class="card"><h2>卡片標題</h2><p>卡片內容...</p></div>
</div>
4.4實際布局增強版
<style>/* 容器優化 */.container {width: min(1200px, 90%); /* 不超過1200px且不超視窗90% */margin: 2rem auto; /* 垂直間距+水平居中 */padding: 2rem;background: white;/* 布局模式 */display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 1.5rem;/* 視覺效果 */box-shadow: 0 0 20px rgba(0,0,0,0.05);border-radius: 12px;}/* 卡片組件升級 */.card {--card-padding: 1.5rem;--card-radius: 8px;display: flex;flex-direction: column;border: 1px solid #eee;border-radius: var(--card-radius);overflow: hidden;transition: transform 0.3s ease, box-shadow 0.3s ease;/* 層疊上下文 */position: relative;z-index: 1;}.card:hover {transform: translateY(-5px);box-shadow: 0 10px 20px rgba(0,0,0,0.1);z-index: 2;}.card-header {padding: var(--card-padding);background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);color: white;}.card-body {padding: var(--card-padding);flex-grow: 1; /* 撐滿剩余空間 */}.card-footer {padding: var(--card-padding);border-top: 1px solid #eee;background: #f9f9f9;}/* 響應式調整 */@media (max-width: 768px) {.container {grid-template-columns: 1fr;padding: 1rem;}.card {margin-bottom: 1rem;}}
</style><div class="container"><article class="card"><header class="card-header"><h2>高級卡片標題</h2></header><div class="card-body"><p>這是一個增強版的卡片組件，包含漸變標題、懸浮效果和靈活的布局。</p><ul><li>響應式網格布局</li><li>CSS變量控制間距</li><li>平滑的懸停動畫</li></ul></div><footer class="card-footer"><button>了解更多</button></footer></article><article class="card"><header class="card-header" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);"><h2>第二張卡片</h2></header><div class="card-body"><p>展示如何使用不同的漸變背景，同時保持卡片結構一致。</p></div></article>
</div>
5. 實例練習：簡單導航欄
<!DOCTYPE html>
<html>
<head><style>/* 導航欄樣式 */.navbar {background-color: #333;overflow: hidden;}/* 導航鏈接樣式 */.navbar a {float: left;color: white;text-align: center;padding: 14px 16px;text-decoration: none;font-size: 17px;}/* 鼠標懸停效果 */.navbar a:hover {background-color: #ddd;color: black;}</style>
</head>
<body><div class="navbar"><a href="#home">首頁</a><a href="#news">新聞</a><a href="#contact">聯系</a><a href="#about">關于</a>
</div></body>
</html>
