# HTML+CSS入門知識點有哪些
## 一、HTML基礎篇
### 1. HTML文檔結構
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文檔標題</title>
</head>
<body>
<!-- 頁面內容 -->
</body>
</html>
<!DOCTYPE> 聲明文檔類型<html> 根元素，lang屬性定義語言<head> 包含元數據和引用的外部資源<body> 包含所有可見內容<h1>~<h6> 標題標簽<p> 段落標簽<span> 行內容器<br> 換行<hr> 水平線<img src="url" alt="描述"> 圖片<audio>/<video> 音視頻<iframe> 內嵌框架<ul> 無序列表<ol> 有序列表<li> 列表項<table border="1">
<tr>
<th>表頭</th>
<td>單元格</td>
</tr>
</table>
<form action="/submit" method="post">
<input type="text" name="username">
<button type="submit">提交</button>
</form>
<!-- 內聯樣式 -->
<div style="color:red;"></div>
<!-- 內部樣式表 -->
<style>
body { background: #fff; }
</style>
<!-- 外部樣式表 -->
<link rel="stylesheet" href="style.css">
| 選擇器類型 | 示例 | 說明 |
|---|---|---|
| 元素選擇器 | p |
選擇所有 標簽 |
| 類選擇器 | .class |
選擇class=“class”的元素 |
| ID選擇器 | #id |
選擇id=“id”的元素 |
| 通配符 | * |
選擇所有元素 |
div {
width: 200px; /* 內容寬度 */
padding: 20px; /* 內邊距 */
border: 1px solid; /* 邊框 */
margin: 10px; /* 外邊距 */
box-sizing: border-box; /* 切換盒模型計算方式 */
}
.left {
float: left;
width: 30%;
}
.right {
float: right;
width: 70%;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.parent {
position: relative;
}
.child {
position: absolute;
top: 50px;
left: 100px;
}
.container {
display: flex;
justify-content: center; /* 主軸對齊 */
align-items: center; /* 交叉軸對齊 */
}
.item {
flex: 1; /* 彈性比例 */
}
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}
.item {
grid-column: span 2;
}
@media (max-width: 768px) {
body {
font-size: 14px;
}
.sidebar {
display: none;
}
}
vw/vh 視口寬高的1%rem 相對于根元素字體大小em 相對于當前元素字體大小<meta name="viewport" content="width=device-width, initial-scale=1.0">
.button {
transition: all 0.3s ease;
}
.button:hover {
transform: scale(1.1);
}
@keyframes slide {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.element {
animation: slide 1s forwards;
}
.gradient {
background: linear-gradient(to right, red, yellow);
}
.shadow {
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
text-shadow: 1px 1px 2px #000;
}
.card {
transform: rotate(15deg) perspective(500px);
transform-style: preserve-3d;
}
總結：HTML+CSS作為前端開發的基石，需要掌握：
1. 語義化的HTML結構
2. 精準的CSS選擇器使用
3. 靈活的布局方案
4. 響應式設計思維
5. 持續的實踐與創新
建議通過實際項目練習鞏固這些知識點，從簡單的個人主頁開始，逐步挑戰更復雜的布局效果。 “`
注：本文約1850字，包含了HTML和CSS的核心知識點，采用Markdown格式編寫，可直接用于技術博客或學習筆記。實際使用時可根據需要調整圖片鏈接和代碼示例。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
