HTML：网页结构基础
HTML（超文本标记语言）是网页的骨架，通过标签定义内容结构。常用基础标签包括：
<html>：根元素，包裹整个页面。<head>：包含元信息如标题（<title>）、引用的CSS/JS文件（<link>、<script>）。<body>：页面可见内容区域。- 文本标签：
<h1>到<h6>标题，<p>段落，<span>行内元素。 - 结构化标签：
<div>块级容器，<ul>/<ol>列表，<table>表格。
示例代码：
html
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>主标题</h1>
<p>这是一个段落。</p>
<div class="container">内容区块</div>
</body>
</html>CSS：样式与布局
CSS（层叠样式表）控制HTML元素的外观和布局。核心概念包括：
- 选择器 ：通过类（
.class）、ID（#id）、标签名（如p）定位元素。 - 盒模型 ：
width、height、padding、margin、border控制元素尺寸和间距。 - 布局方式 ：
display（block、inline、flex）、position（relative、absolute）、float等。
示例代码：
css
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
}
h1 {
color: blue;
text-align: center;
}响应式设计基础
使用媒体查询（@media）适配不同设备屏幕：
css
@media (max-width: 600px) {
.container {
width: 100%;
padding: 10px;
}
}常用工具与资源
- 开发工具：浏览器开发者工具（F12）调试HTML/CSS。
- 学习平台：MDN Web Docs、W3Schools提供权威文档。
- 框架：Bootstrap、Tailwind CSS加速开发。
通过结合HTML的结构化能力和CSS的样式控制，可以构建出功能完整、视觉美观的网页。