《网络基础之 HTML 与 CSS 基础 —— 网页的基本结构解析》-CSDN博客

本文链接：https://blog.csdn.net/anyifeiyi/article/details/142816055

《网络基础之 HTML 与 CSS 基础 —— 网页的基本结构解析》

在当今数字化的时代，网页成为了人们获取信息、进行交流和开展业务的重要平台。了解网页的基本结构，对于想要涉足网页开发领域或者仅仅是对网络技术感兴趣的人来说，至关重要。而 HTML 和 CSS 则是构建网页基本结构的基石。

一、HTML：网页的骨架

HTML（超文本标记语言）是一种用于创建网页的标准标记语言。它定义了网页的结构和内容。

1. 标签结构

HTML 使用标签来标记网页中的不同元素。例如，标签表示整个网页的开始和结束，标签包含了网页的元信息，如标题、字符编码等，标签则包含了网页的可见内容。

2. 标题与段落

< h1 >到< h6 >标签用于定义不同级别的标题，

标签用于定义段落。这些标签使得网页的内容具有层次结构，方便用户阅读和理解。

3. 链接与图像

< a >标签用于创建链接，可以链接到其他网页、文件或锚点。< img >标签用于插入图像，通过指定图像的源文件地址，可以在网页中展示各种图片。

4. 列表与表格

< ul >和< ol >标签用于创建无序列表和有序列表，< li >标签用于定义列表项。< table >标签用于创建表格，< tr >标签表示表格行，< td >标签表示表格单元格。这些标签可以帮助组织和展示数据。

二、CSS：网页的美容师

CSS（层叠样式表）用于控制网页的外观和布局。它可以让网页更加美观、易读和易用。

选择器

CSS 使用选择器来选择要应用样式的 HTML 元素。常见的选择器有标签选择器、类选择器、ID 选择器等。通过选择器，可以精确地控制网页中特定元素的样式。

样式属性

CSS 可以控制的样式属性包括字体、颜色、背景、边框、尺寸、位置等。例如，可以使用font-size属性设置字体大小，color属性设置文本颜色，background-color属性设置背景颜色等。

布局

CSS 可以实现网页的布局，包括流式布局、固定布局、弹性布局等。通过设置元素的display属性、float属性、position属性等，可以控制元素在网页中的位置和大小。

三、网页的基本结构示例
下面是一个简单的网页结构示例，展示了 HTML 和 CSS 的结合使用：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>My Web Page</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <h1>Welcome to My Web Page</h1>
  <p>This is a simple web page created using HTML and CSS.</p>
  <img src="image.jpg" alt="An image">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</body>

</html>

在这个示例中，HTML 定义了网页的结构和内容，包括标题、段落、图像和列表。同时，通过标签引入了外部的 CSS 文件styles.css，用于控制网页的样式。
以下是styles.css的内容：

h1 {
  color: blue;
  font-size: 36px;
}

p {
  font-size: 18px;
  color: black;
}

img {
  border: 2px solid gray;
}

ul {
  list-style-type: square;
}

在 CSS 文件中，使用选择器选择了不同的 HTML 元素，并设置了相应的样式属性，使得网页更加美观和易读。
总之，HTML 和 CSS 是构建网页基本结构的重要工具。HTML 提供了网页的骨架，定义了网页的内容和结构；CSS 则为网页增添了美观和风格，控制了网页的外观和布局。通过深入学习和掌握 HTML 和 CSS，可以创建出功能强大、美观大方的网页。