HTML + CSS 网页开发入门教程（一）：基础知识与基本结构

评论
16 views

HTML + CSS 网页开发入门教程（一）：基础知识与基本结构

在当今数字化时代，网页开发是前端开发的基础技能之一。HTML（超文本标记语言）和CSS（层叠样式表）是构建网页的两大核心工具。HTML用于定义网页的结构和内容，而CSS用于控制网页的样式和布局。本文将为你详细介绍HTML和CSS的基本知识，并通过一个实战项目帮助你快速入门网页开发。

一、HTML：构建网页的骨架

（一）什么是HTML？

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它通过一系列的标签（Tags）定义网页的结构和内容。HTML文件以.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>网页标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

1. <!DOCTYPE html>：文档类型声明

  • 声明文档类型为HTML5，确保浏览器正确解析文档。

2. <html>：根元素

  • 包含整个HTML文档的内容，lang属性指定文档的语言。

3. <head>：头部信息

  • 包含网页的元信息，如字符集声明、网页标题、链接外部资源等。
  • <meta charset="UTF-8">：指定字符编码为UTF-8。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：确保网页在移动设备上正确显示。
  • <title>：定义网页标题，显示在浏览器标签页上。

4. <body>：网页主体

  • 包含网页的可见内容，如标题、段落、图片、链接等。

二、常用HTML标签

HTML提供了丰富的标签，用于定义网页的不同内容和结构。以下是一些常用的HTML标签：

（一）标题标签（<h1>到<h6>）

  • 定义标题，<h1>是最高级别的标题，<h6>是最低级别的标题。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

（二）段落标签（<p>）

  • 定义段落。
<p>这是一个段落。</p>

（三）列表标签

  • 无序列表（<ul>）：项目列表，项目用<li>标签定义。 ```html
    • 项目1
    • 项目2

- **有序列表（`<ol>`）**：带编号的列表。html

  1. 项目1
  2. 项目2

```

（四）链接标签（<a>）

  • 定义超链接，href属性指定链接目标。
<a href="https://www.example.com">访问示例网站</a>

（五）图片标签（<img>）

  • 插入图片，src属性指定图片路径，alt属性提供图片描述。
<img src="image.jpg" alt="描述性文字">

（六）表格标签（<table>）

  • 定义表格，<tr>定义行，<td>定义单元格。
<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

三、CSS：为网页添加样式

（一）什么是CSS？

CSS（Cascading Style Sheets，层叠样式表）用于控制HTML文档的样式和布局。通过CSS，你可以定义字体、颜色、间距、布局等样式规则。CSS让网页看起来更加美观和专业。

（二）CSS的基本语法

CSS规则由选择器和声明块组成。选择器指定要应用样式的HTML元素，声明块定义具体的样式规则。

选择器 {
    属性1: 值1;
    属性2: 值2;
}

示例

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

（三）CSS选择器

选择器用于选择HTML元素并应用样式规则。以下是一些常用的选择器：

1. 元素选择器

  • 选择HTML元素。
p {
    color: blue;
}

2. 类选择器

  • 使用class属性选择元素，以.开头。
<p class="intro">这是一个段落。</p>

.intro {
    font-size: 18px;
}

3. ID选择器

  • 使用id属性选择元素，以#开头。
<p id="main">这是一个段落。</p>

#main {
    color: red;
}

4. 属性选择器

  • 根据元素的属性选择元素。
[href] {
    color: green;
}

5. 伪类选择器

  • 选择元素的特定状态，如:hover、:active。
a:hover {
    text-decoration: none;
}

四、CSS的添加方式

CSS可以通过以下三种方式添加到HTML文档中：

1. 内联样式

  • 直接在HTML标签中使用style属性。
<p style="color: red;">这是一个红色的段落。</p>

2. 内部样式表

  • 在HTML文档的<head>部分使用<style>标签。
<head>
    <style>
        body {
            background-color: #f0f0f0;
        }
        p {
            color: blue;
        }
    </style>
</head>

3. 外部样式表

  • 将样式规则写入一个单独的.css文件，并通过<link>标签引入。
<head>
    <link rel="stylesheet" href="styles.css">
</head>

/* styles.css */
body {
    background-color: #f0f0f0;
}
p {
    color: blue;
}