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的样式控制,可以构建出功能完整、视觉美观的网页。