当前位置：首页 > CSS

HTML CSS制作

2026-02-27 09:12:40CSS

HTML 和 CSS 基础

HTML（HyperText Markup Language）用于定义网页的结构和内容，CSS（Cascading Style Sheets）用于控制网页的样式和布局。以下是两者的基本使用方法：

HTML 基本结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <div class="container">这是一个容器</div>
</body>
</html>

CSS 基本样式

/* 选择器 */
h1 {
    color: blue;
    font-size: 24px;
}

p {
    color: #333;
    line-height: 1.5;
}

.container {
    width: 80%;
    margin: 0 auto;
    background-color: #f0f0f0;
}

常用 HTML 标签

文本标签
- <h1> 到 <h6>：标题标签，<h1> 最大，<h6> 最小。
- <p>：段落标签。
- <span>：行内元素，用于包裹小段文本。
- <a href="url">链接文本</a>：超链接标签。
结构标签
- <div>：块级容器，常用于布局。
- <section>：定义文档的某个区域。
- <header> 和 <footer>：页眉和页脚。
- <nav>：导航栏。
列表和表格
- <ul> 和 <ol>：无序列表和有序列表。
- <li>：列表项。
- <table>、<tr>、<td>：表格标签。
表单标签
- <form>：表单容器。
- <input>：输入框（文本、密码、单选、复选框等）。
- <textarea>：多行文本输入框。
- <button>：按钮。

常用 CSS 属性

布局属性
- display：控制元素的显示方式（block、inline、flex、grid）。
- margin 和 padding：外边距和内边距。
- width 和 height：宽度和高度。
- position：定位方式（static、relative、absolute、fixed）。
文本样式
- color：文本颜色。
- font-family：字体。
- font-size：字体大小。
- text-align：文本对齐方式（left、center、right）。
背景和边框
- background-color：背景颜色。
- border：边框样式（border: 1px solid #000;）。
- border-radius：圆角边框。

Flexbox 布局

.container {
    display: flex;
    justify-content: center; /* 水平对齐 */
    align-items: center;    /* 垂直对齐 */
}

Grid 布局

.container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列布局 */
    gap: 10px; /* 列间距 */
}

响应式设计

使用媒体查询（Media Queries）实现不同屏幕尺寸的适配：

HTML CSS制作

/* 移动设备（小于 768px） */
@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}

/* 平板设备（768px 到 1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        width: 90%;
    }
}

/* 桌面设备（大于 1024px） */
@media (min-width: 1024px) {
    .container {
        width: 80%;
    }
}

动画效果

使用 CSS 动画和过渡：

/* 过渡效果 */
.button {
    transition: background-color 0.3s ease;
}
.button:hover {
    background-color: #007bff;
}

/* 关键帧动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.element {
    animation: fadeIn 1s ease-in-out;
}

最佳实践

语义化 HTML
- 使用语义化标签（如 <header>、<nav>）代替 <div>，提高可读性和 SEO。
CSS 模块化
- 使用类名和 ID 合理命名，避免样式冲突。
- 采用 BEM（Block-Element-Modifier）命名规范：
```
.block__element--modifier {
    color: red;
}
```
性能优化
- 减少不必要的 DOM 元素。
- 使用 CSS 压缩工具（如 PostCSS）优化代码。
浏览器兼容性
- 使用 Autoprefixer 自动添加浏览器前缀（如 -webkit-、-moz-）。