HTML + CSS 题目

HTML 和 CSS 简介

HTML（超文本标记语言）和 CSS（层叠样式表）是构建网页的基础。HTML 用于网页的结构和内容，CSS 用于网页的样式和布局。两者结合，能够创建出具有良好视觉效果和交互体验的网页。

HTML：通过标签定义网页的结构，如文本、图像、链接、表单等。
CSS：用于定义网页的样式，比如字体、颜色、间距、布局等。

HTML 基础

HTML 标签

HTML 文档由一系列的标签构成。每个标签通常有一个开始标签和结束标签，标签之间可以包含内容或者其他标签。以下是一些常见的 HTML 标签及其作用：

<html>：定义 HTML 文档的开始和结束。
<head>：包含文档的元数据（如标题、链接到样式表、字符集等）。
<title>：定义文档的标题，显示在浏览器的标签栏中。
<body>：定义文档的主体，包含网页的可见内容。
<h1> ~ <h6>：定义标题标签，其中 <h1> 是最高级别，<h6> 是最低级别。
<p>：定义段落。
<a>：定义超链接。
<img>：定义图像。
<ul>, <ol>, <li>：分别定义无序列表、有序列表和列表项。
<div>：定义文档中的块级元素（用于布局和分组）。
<span>：定义内联元素。

示例：

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <title>HTML 基础示例</title>
  </head>
  <body>
    <h1>欢迎来到我的网页！</h1>
    <p>这是一个简单的 HTML 示例。</p>
    <a href="https://www.example.com">点击这里访问示例网站</a>
    <img src="example.jpg" alt="示例图像" />
  </body>
</html>

HTML 页面结构

一个基本的 HTML 页面通常包括以下几个部分：

<!DOCTYPE html>：声明文档类型，告诉浏览器这是一个 HTML5 文档。
<html>：HTML 文档的根元素。
<head>：包含文档的元数据，例如字符集、标题、外部样式表的链接等。
<body>：页面的主要内容部分。

HTML 表单元素

HTML 提供了多种表单元素，用于收集用户输入。常见的表单元素包括：

<input>：定义各种类型的输入框，如文本框、密码框、单选框、复选框等。
<textarea>：定义多行文本输入框。
<select>：定义下拉列表。
<button>：定义按钮。
<form>：定义表单。

示例：

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <title>HTML 表单示例</title>
  </head>
  <body>
    <h1>填写表单</h1>
    <form action="/submit" method="post">
      <label for="name">姓名：</label>
      <input type="text" id="name" name="name" required><br><br>
      <label for="email">电子邮件：</label>
      <input type="email" id="email" name="email" required><br><br>
      <label for="message">留言：</label><br>
      <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
      <button type="submit">提交</button>
    </form>
  </body>
</html>

CSS 基础

CSS 选择器

CSS 选择器用于选择 HTML 元素并应用样式。常见的选择器有：

元素选择器：选择所有指定类型的元素。
```
cssCopy Code
p {
  color: blue;
}
```
类选择器：选择具有指定类名的元素。
```
cssCopy Code
.myClass {
  font-size: 16px;
}
```

ID 选择器：选择具有指定 ID 的元素。

cssCopy Code
#myId {
  background-color: yellow;
}

通用选择器：选择所有元素。

cssCopy Code
* {
  margin: 0;
  padding: 0;
}

后代选择器：选择位于某个元素内部的指定子元素。
```
cssCopy Code
div p {
  color: red;
}
```

CSS 布局

CSS 提供了多种布局方法，包括：

块级布局：通过设置元素的 display 属性为 block 来实现块级布局。
内联布局：通过设置元素的 display 属性为 inline 来实现内联布局。
浮动布局：通过设置元素的 float 属性来实现浮动布局。
Flexbox 布局：使用 display: flex 来实现灵活的布局。
Grid 布局：使用 display: grid 来创建网格布局。

Flexbox 示例：

cssCopy Code
.container {
  display: flex;
  justify-content: space-between;
}

.item {
  background-color: lightgray;
  padding: 10px;
}

htmlCopy Code
<div class="container">
  <div class="item">项 1</div>
  <div class="item">项 2</div>
  <div class="item">项 3</div>
</div>

CSS 动画与过渡

CSS 动画用于创建动态效果，常用的属性包括 @keyframes 和 transition。

动画（Animation）：使用 @keyframes 定义动画的关键帧。
过渡（Transition）：在元素的状态发生变化时添加过渡效果。

动画示例：

cssCopy Code
@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: green;}
}

.animated-element {
  width: 100px;
  height: 100px;
  animation: example 5s infinite;
}

htmlCopy Code
<div class="animated-element"></div>

HTML 与 CSS 高级用法

响应式设计

响应式设计是一种设计理念，使网页能够在不同的设备上显示良好，无论是桌面电脑、平板设备还是手机。使用媒体查询可以根据设备的屏幕大小应用不同的样式。

响应式设计示例：

cssCopy Code
/* 默认样式 */
body {
  font-size: 16px;
}

/* 针对屏幕宽度小于768px的设备 */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

CSS Grid 布局

CSS Grid 是一种二维布局系统，它可以方便地在行和列中组织网页内容。

Grid 示例：

cssCopy Code
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.item {
  background-color: lightblue;
  padding: 10px;
}

htmlCopy Code
<div class="container">
  <div class="item">项 1</div>
  <div class="item">项 2</div>
  <div class="item">项 3</div>
</div>

CSS Flexbox 布局

Flexbox 是一种一维布局模型，可以轻松地实现响应式布局，尤其在处理不同大小的元素时非常有用。

Flexbox 示例：

cssCopy Code
.container {
  display: flex;
  justify-content: space-between;
}

.item {
  background-color: lightgreen;
  padding: 10px;
}

htmlCopy Code
<div class="container">
  <div class="item">项 1</div>
  <div class="item">项 2</div>
  <div class="item">项 3</div>
</div>

案例和应用场景

构建一个简单网页

为了演示 HTML 和 CSS 的基本用法，我们将构建一个简单的网页，包含一个导航栏、正文内容和页脚。

HTML 代码：

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <title>简单网页</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">服务</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </nav>
    </header>

    <section>
      <h1>欢迎访问我们的网页</h1>
      <p>这是一个简单的网页示例，展示了基本的 HTML 和 CSS 使用。</p>
    </section>

    <footer>
      <p>&copy; 2025 我的公司</p>
    </footer>
  </body>
</html>

CSS 代码：

cssCopy Code
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  padding: 10px 0;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

nav ul li {
  display: inline;
  margin-right: 20px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

section {
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
}

制作响应式网站

我们可以通过媒体查询和灵活的布局来制作一个响应式网站，使其在不同设备上都能良好展示。

实现一个简易表单

在 HTML 中创建一个表单，并使用 CSS 美化它，使其看起来更现代化。

总结

本文介绍了 HTML 和 CSS 的基本知识，从标签的使用到布局技术，再到响应式设计和动画的实现。通过多个实例和场景，我们学习了如何利用 HTML 和 CSS 创建现代化的网页。掌握这些基础技能后，你可以继续探索更多的高级用法，设计更复杂和互动性强的网页。