文章目錄
- meta 總結
- html 頁面結構
- img 尺寸
- 子選擇器 >
- a 錨點
- 僅屏幕閱讀器可見
- li 元素的懸停設置
- 小屏幕防止溢出
meta 總結
<head><!-- 基礎字符編碼聲明 --><meta charset="UTF-8"><!-- 視口設置，響應式設計必備 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 頁面描述（SEO重要元素） --><meta name="description" content="這里是網頁的簡要描述，約150-160字符"><!-- 關鍵詞（現代SEO中重要性降低） --><meta name="keywords" content="關鍵詞1, 關鍵詞2, 關鍵詞3"><!-- 作者信息 --><meta name="author" content="作者名"><!-- 告訴搜索引擎爬蟲如何索引頁面 --><meta name="robots" content="index, follow"> <!-- 可選項：noindex, nofollow --><!-- 控制IE瀏覽器渲染模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 社交媒體分享優化（Open Graph協議） --><meta property="og:title" content="頁面標題"><meta property="og:type" content="website"><meta property="og:url" content="https://example.com/page"><meta property="og:image" content="https://example.com/image.jpg"><meta property="og:description" content="分享時顯示的描述"><!-- Twitter卡片元數據 --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="頁面標題"><meta name="twitter:description" content="Twitter分享描述"><meta name="twitter:image" content="https://example.com/image.jpg"><!-- 移動端主題顏色（Chrome/Android） --><meta name="theme-color" content="#ffffff"><!-- 禁止電話號碼自動識別（移動端） --><meta name="format-detection" content="telephone=no"><!-- 禁止郵箱地址自動識別（移動端） --><meta name="format-detection" content="email=no"><!-- 禁止地址自動識別（移動端） --><meta name="format-detection" content="address=no"><!-- 禁止日期自動識別（移動端） --><meta name="format-detection" content="date=no"><!-- 其他可能用到的meta標簽 --><meta name="generator" content="生成此頁面的工具名稱"><meta name="copyright" content="版權信息">
</head>
html 頁面結構
<body><header><img/><h1>H1 Title</h1><nav></nav></header><main></main>
</body>
- header 元素將用于介紹頁面，以及提供導航菜單。
- main 元素將包含頁面的核心內容。
img 尺寸
img 當前是默認尺寸，這個尺寸太大。 CSS 提供了一個 max 函數，它返回一組由逗號分隔的值中最大的值。 例如：
img {width: max(250px, 25vw);
}
在以上示例中，如果視口寬度小于 1000 像素，圖像的寬度將為 250px。 如果視口寬度大于 1000 像素，圖像寬度將為 25vw。 這是因為 25vw 相當于視口寬度的 25%。
徽標應保持35/4的縱橫比，并在文本周圍添加填充。
img {width: max(10rem, 18vw);background-color: #0a0a23;aspect-ratio: 35/4; # 縱橫比padding: 0.4rem;
}
h1 {font-size: min(5vw, 1.2em);font-family: Verdana, Tahoma;
}
子選擇器 >
子組合子選擇器>用于選擇器之間，僅針對與第二個選擇器匹配并且是第一個選擇器的直接子元素的元素。
可以使用role屬性向輔助技術指示頁面上元素背后的目的。role屬性是Web Accessibility Initiative（WAI）的一部分，接受預設值。
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz"><section role="region" aria-labelledby="html-questions"><h2 id="html-questions">HTML</h2></section><section role="region"></section><section role="region"></section>
</form>
a 錨點
a 元素的錨點給定，對應元素的id，寫法如下：
<a href="#html-questions"></a>
input type="date"
僅屏幕閱讀器可見
.sr-only（??Screen Reader Only??，僅屏幕閱讀器可見）是一種常見的 CSS 類，用于創建??僅對輔助技術（如屏幕閱讀器）可見，但對普通視覺用戶不可見??的內容。它通常用于增強網頁的可訪問性（A11Y），例如為圖標添加隱藏的文本描述，或為視覺元素提供額外的上下文信息。
.sr-only {position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0, 0, 0, 0);clip-path: inset(50%);white-space: nowrap;
}
| 屬性 | 作用 | 為什么需要？ |
|---|---|---|
| position: absolute; | 將元素脫離文檔流 | 避免占據布局空間，防止影響其他元素的排列。 |
| width: 1px; height: 1px; | 設置極小尺寸 | 讓元素在視覺上“消失”，但保留 DOM 存在。 |
| overflow: hidden; | 隱藏溢出內容 | 確保內容不會從極小尺寸的盒子中溢出。 |
| clip: rect(0, 0, 0, 0); | 裁剪到 0 大小 | 徹底裁剪內容，確保不可見（舊版瀏覽器支持）。 |
| clip-path: inset(50%); | 現代裁剪方式 | 更靈活的裁剪（兼容現代瀏覽器，作為 clip的補充）。 |
| white-space: nowrap; | 禁止文本換行 | 防止文本換行導致內容意外可見。 |
??兼容性覆蓋??：
clip是舊版屬性（已廢棄，但部分舊瀏覽器仍支持）。
clip-path是現代替代方案（如 Firefox 需要它才能完全隱藏內容）。
??防御性設計??：多重屬性確保在各種瀏覽器和縮放級別下內容均不可見，避免因渲染差異導致意外暴露。
<textarea rows='3' cols="50"></textarea>
本項目的兩個最終語義HTML元素是頁腳和地址元素。頁腳元素是與頁面相關內容集合的容器，而地址元素則是頁面作者聯系信息的容器。
li 元素的懸停設置
nav > ul > li:hover {background-color: #dfdfe2;color: #1b1b32;cursor: pointer;
}
小屏幕防止溢出
在小屏幕上，導航欄中的無序列表會溢出到屏幕右側。
通過使用Flexbox來包含ul內容來解決此問題。然后，設置以下CSS屬性以正確對齊文本：
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
.info label, .info input {display: inline-block;
}
這行 CSS 代碼的作用是為 ??所有 HTML 元素??（* 是通配符選擇器）應用 scroll-behavior: smooth 屬性，實現頁面滾動時的??平滑過渡效果?（非瞬間跳轉）.
讓瀏覽器在滾動到某個位置時（如錨點跳轉、JavaScript 觸發的滾動），??平滑過渡??而不是瞬間跳轉，提升用戶體驗。
* {scroll-behavior: smooth;
}
這段CSS代碼的作用是??為頁面添加平滑滾動效果??，但會??優先考慮用戶的無障礙偏好??。
@media (prefers-reduced-motion: no-preference) {html {scroll-behavior: smooth;}
}
??prefers-reduced-motion??
這是一個CSS媒體查詢，用于檢測用戶是否在系統設置中啟用了??“減少動畫”??選項（常見于無障礙需求）。 no-preference
表示用戶未明確要求減少動效。
scroll-behavior: smooth?? 為所有元素（* 通配符）啟用平滑滾動效果。 當用戶點擊錨點鏈接（如
#section）或調用 window.scrollTo() 時，頁面會平滑滾動而非瞬間跳轉。
環境搭建)
![[硬件電路-64]：模擬器件 -二極管在穩壓電路中的應用](http://pic.xiahunao.cn/[硬件電路-64]：模擬器件 -二極管在穩壓電路中的應用)
![[NIPST AI]對抗性機器學習攻擊和緩解的分類和術語](http://pic.xiahunao.cn/[NIPST AI]對抗性機器學習攻擊和緩解的分類和術語)