引言

HTML基础

HTML（HyperText Markup Language，超文本标记语言）是构建网页的基本框架。以下是一些HTML基础元素：

1. 文档结构

  • <html>：定义整个HTML文档。
  • <head>：包含文档的元数据，如标题、字符集等。
  • <body>：包含可见的页面内容。

2. 文本内容

  • <h1>至<h6>：定义标题，<h1>为最高级别。
  • <p>：定义段落。
  • <a>：定义超链接。

3. 图片与多媒体

  • <img>：插入图片。
  • <video>：插入视频。

CSS样式

CSS（Cascading Style Sheets，层叠样式表）用于控制网页元素的样式。以下是一些CSS基础概念：

1. 选择器

  • 类型选择器：如h1、p。
  • 类选择器：如.class-name。
  • ID选择器：如#id-name。

2. 基本属性

  • color：设置文本颜色。
  • font-size：设置字体大小。
  • margin、padding：设置外边距和内边距。

3. 布局

  • display：控制元素显示方式，如block、inline。
  • float：控制元素浮动。
  • position：控制元素定位。

实用图片素材

1. 图片类型

  • 矢量图：如SVG，适用于图标和图形。
  • 位图：如JPEG、PNG，适用于照片和复杂图像。

2. 图片来源

  • 免费图库：如Unsplash、Pixabay。
  • 商业图库：如Shutterstock、Getty Images。

3. 图片优化

  • 压缩图片：减少文件大小，提高加载速度。
  • 使用适当的格式：如PNG-8、JPEG。

实战案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人网页设计</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        img {
            max-width: 100%;
            height: auto;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
        }
        .gallery img {
            margin-bottom: 20px;
            border: 1px solid #ddd;
            padding: 5px;
        }
    </style>
</head>
<body>
    <header>
        <h1>我的个人网页</h1>
    </header>
    <div class="container">
        <div class="gallery">
            <img src="image1.jpg" alt="作品1">
            <img src="image2.jpg" alt="作品2">
            <img src="image3.jpg" alt="作品3">
        </div>
    </div>
</body>
</html>

总结