HTML & CSS
HTML 基础
文档结构
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>Hello HTML</h1>
<p>这是一个段落。</p>
</body>
</html>常用标签
<div>- 块级容器<span>- 行内容器<a>- 链接<img>- 图片<input>- 输入框<form>- 表单
CSS 基础
选择器
css
/* 元素选择器 */
p { color: red; }
/* 类选择器 */
.container { width: 100%; }
/* ID选择器 */
#header { height: 60px; }
/* 后代选择器 */
.nav li { display: inline; }盒模型
css
.box {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
margin: 10px;
box-sizing: border-box; /* 边框盒模型 */
}Flexbox 布局
css
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
flex-wrap: wrap; /* 换行 */
}
.item {
flex: 1; /* 占据剩余空间 */
}响应式设计
css
/* 媒体查询 */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}