4.2 HTML与CSS基础

#### 4.2.1 HTML基础

HTML（HyperText Markup Language，超文本标记语言）是用于构建网页的标记语言。HTML文档由一系列的标签组成，这些标签定义了网页的结构和内容。

- **基本结构**：

HTML复制

```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      <h1>Hello, World!</h1>
      <p>This is a paragraph.</p>
  </body>
  </html>
  ```

- **常用标签**：

- `<h1>`到`<h6>`：标题标签。
  - `<p>`：段落标签。
  - `<a>`：超链接标签。
  - `<img>`：图片标签。
  - `<div>`：块级容器标签。
  - `<span>`：行内容器标签。

#### 4.2.2 CSS基础

CSS（Cascading Style Sheets，层叠样式表）用于定义HTML文档的样式，包括字体、颜色、布局等。

- **基本语法**：

css复制

```css
  selector {
      property: value;
  }
  ```

- **常用属性**：

- `color`：设置文本颜色。
  - `font-size`：设置字体大小。
  - `background-color`：设置背景颜色。
  - `margin`、`padding`：设置外边距和内边距。
  - `display`：设置元素的显示方式（如`block`、`inline`、`flex`等）。

示例：

HTML复制

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: #333;
        }
        p {
            font-size: 16px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>
```

###