网页设计基础：HTML与CSS入门教程

# 1. 认识HTML与CSS ## 1.1 什么是HTML HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它由一系列的元素（elements）组成，这些元素可以用来包裹不同部分的内容，使其呈现特定的样式或格式。 ```html <!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html> ``` **代码说明**：上面的HTML代码展示了一个基本的HTML结构，包括`<!DOCTYPE html>`声明、`<html>`元素、`<head>`元素、`<title>`元素和`<body>`元素等。 ## 1.2 什么是CSS CSS（Cascading Style Sheets）是一种样式表语言，用来描述HTML或XML（包括如SVG、MathML等）文档的呈现。它控制着网页的布局、颜色、字体等样式，使得页面呈现出更丰富的视觉效果。 ```css h1 { color: blue; font-size: 24px; } p { color: green; } ``` **代码说明**：上面的CSS代码定义了`<h1>`元素和`<p>`元素的样式，`<h1>`元素的文本颜色为蓝色，字体大小为24像素，`<p>`元素的文本颜色为绿色。 ## 1.3 HTML与CSS的作用 HTML负责网页的结构和内容，而CSS负责网页的样式和布局。两者结合使用，可以创建出美观、结构清晰的网页。 ## 1.4 HTML与CSS的关系 HTML和CSS是紧密相关的，HTML负责定义网页的结构，通过标签来组织内容，而CSS则负责定义这些标签应该如何呈现。两者共同构成了完整的网页设计系统。通过这一章的学习，我们对HTML与CSS有了初步的了解，接下来我们将深入学习HTML的基础知识。 # 2. HTML入门 HTML是超文本标记语言（HyperText Markup Language）的缩写，是Web页面的基础。它由一系列的元素（elements）组成，告诉浏览器页面的内容和结构。接下来我们将学习HTML的基本知识，并通过实例来加深理解。 ### 2.1 HTML基础结构 HTML页面通常由以下基本结构组成： ```html <!DOCTYPE html> <html> <head> <title>页面标题</title> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html> ``` **代码说明：** - `<!DOCTYPE html>` 声明了文档类型和版本。 - `<html>` 元素是整个HTML页面的根元素。 - `<head>` 元素包含了页面的元信息，如标题、引入的样式表和脚本等。 - `<title>` 元素设置了页面的标题，通常显示在浏览器的标题栏。 - `<body>` 元素包含了可见的页面内容，如文本、图片等。 - `<h1>` 到 `<h6>` 用于定义标题，数字表示重要性，1最大，6最小。 - `<p>` 用于定义段落。 ### 2.2 标签与元素在HTML中，标签是用来描述内容的起始和结束的关键词，而元素是由开始标签、结束标签和其内容组成的整体，如`<p>这是一个段落。</p>`。 ### 2.3 常用HTML标签介绍 - `<div>`: 定义文档中的分区或节（division/section），常用作布局容器。 - `<a>`: 创建超链接，用于跳转到其他页面或下载资源。 - `<img>`: 插入图片。 - `<ul>` 和 `<ol>`: 分别用于无序列表和有序列表。 - `<table>`: 创建表格。 ### 2.4 HTML实践案例在这个实践案例中，我们将创建一个简单的HTML页面，展示一个包含标题、段落和图片的页面。 ```html <!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <h1>欢迎来到我的网页</h1> <p>这是我的第一个网页，很高兴和大家分享！</p> <img src="example.jpg" alt="示例图片"> </body> </html> ``` **代码说明：** - `<img>` 标签用于插入图片，`src` 属性指定图片的URL，`alt` 属性用于描述图片内容，也可用于SEO优化。以上是HTML入门章节的内容，通过学习这些基本知识，我们可以开始构建简单的网页了。 # 3. CSS入门在网页设计中，CSS（Cascading Style Sheets）被用来控制网页的样式和布局，让页面看起来更加美观和专业。本章将介绍CSS的基础知识和入门内容。 #### 3.1 CSS基本语法 CSS的基本语法由选择器和声明块组成。选择器用于选中要应用样式的HTML元素，声明块包含一个或多个属性值对，用于描述这些元素应该如何显示。示例代码： ```css /* 选择器 */ h1 { color: blue; font-size: 24px; } /* 声明块 */ p { margin: 10px; padding: 5px; } ``` 代码总结： - 选择器用来选择HTML元素 - 声明块包含属性和属性值对结果说明：上述代码将会使所有`h1`标题变为蓝色，并设置字体大小为24px；同时将所有`p`段落添加10px的外边距和5px的内边距。 #### 3.2 CSS样式表引入方法 CSS样式可以通过三种方法引入到HTML文档中：内联样式(`style`属性)、嵌入样式表（`<style>`标签）和外部样式表（`<link>`标签）。示例代