主题
HTML 和 CSS 基础
HTML（超文本标记语言）和 CSS（层叠样式表）是构建网页的两大基础技术。HTML 用于定义网页的结构和内容，而 CSS 用于控制网页的样式和布局。掌握 HTML 和 CSS 是进行 Web 开发的第一步，尤其在自适应设计中，HTML 和 CSS 的基础知识非常重要。
HTML 基础
HTML 是网页的骨架，它定义了网页上的各种元素和结构。常见的 HTML 元素包括文本、图片、链接、表单等。
常用 HTML 标签
- 结构标签：
<html>：定义整个 HTML 页面。<head>：包含页面元数据（如标题、字符集、样式表链接等）。<body>：包含页面的实际内容。
- 文本标签：
<h1>到<h6>：定义标题，<h1>为最大标题，<h6>为最小标题。<p>：定义段落。<a>：定义超链接。<ul>、<ol>、<li>：定义无序列表、有序列表和列表项。
- 图像与媒体标签：
<img>：定义图片。<video>、<audio>：定义视频和音频。
- 表单标签：
<form>：定义表单。<input>：定义输入字段。<textarea>：定义多行文本框。
- 布局标签：
<div>：定义块级元素，用于分组和布局。<span>：定义内联元素，用于文本等小区域的标识。
HTML 基础结构示例
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>页面标题</title>
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
</header>
<main>
<p>这是一个简单的HTML页面。</p>
<a href="https://www.example.com">点击这里访问示例网站</a>
</main>
</body>
</html>CSS 基础
CSS 用于控制网页的外观，它能定义元素的颜色、字体、位置、尺寸等样式。CSS 主要通过选择器（Selectors）来选择 HTML 元素，并应用样式。
常见的 CSS 语法
css
/* 选择器 { 属性: 值; } */
h1 {
color: blue; /* 设置 h1 标签的文本颜色为蓝色 */
font-size: 24px; /* 设置 h1 标签的字体大小为 24px */
}常见的 CSS 属性
- 颜色与字体：
color：文本颜色。font-size：字体大小。font-family：字体系列。line-height：行高。
- 布局与定位：
width、height：设置元素的宽度和高度。margin、padding：设置元素的外边距和内边距。display：设置元素的显示方式（如block、inline、flex等）。position：元素定位方式（如static、relative、absolute、fixed）。
- 背景与边框：
background-color：设置背景颜色。border：设置边框。
CSS 布局示例
css
/* 创建一个居中的容器 */
.container {
width: 80%;
margin: 0 auto; /* 上下为0，左右自动居中 */
padding: 20px;
background-color: #f4f4f4;
}
.item {
width: 30%;
display: inline-block;
margin: 10px;
background-color: #ddd;
padding: 10px;
}使页面响应式的基础
通过 media queries 可以实现网页在不同屏幕尺寸下的自适应调整，以下是基础的媒体查询用法：
css
/* 默认样式（适用于小屏幕） */
body {
font-size: 14px;
}
@media (min-width: 768px) {
/* 大于 768px 屏幕时，调整字体大小 */
body {
font-size: 18px;
}
}
@media (min-width: 1024px) {
/* 大于 1024px 屏幕时，调整字体大小 */
body {
font-size: 20px;
}
}总结
HTML 和 CSS 是 Web 开发的基础，掌握它们是创建自适应页面的前提。在开发过程中，我们使用 HTML 来定义页面的结构，使用 CSS 来控制页面的样式和布局。通过掌握 HTML 标签和 CSS 属性的基本用法，结合媒体查询和其他布局技术，可以创建适应各种设备屏幕的网页。