📅 最后修改于: 2023-12-03 14:57:38.439000 🧑 作者: Mango
HTML（HyperText Markup Language）是用于创建 Web 页面的标准标记语言。HTML 允许程序员定义文本、图像、视频、链接等内容，以及用于呈现这些内容的样式和布局。
HTML 网页通常由三部分组成：头部（head）、主体（body）和脚部（footer）。其中，头部用于设置页面的元数据和样式，主体包含实际的内容，脚部用于放置脚注、版权信息等。
以下是一个基本的 HTML 页面结构：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<meta charset="UTF-8">
<meta name="description" content="页面描述">
<meta name="keywords" content="关键字1,关键字2">
<link rel="stylesheet" href="样式表文件路径">
</head>
<body>
<!-- 页面内容 -->
<h1>页面标题</h1>
<p>段落内容</p>
<img src="图片路径" alt="图片描述">
<a href="链接地址">链接文本</a>
</body>
<footer>
<!-- 脚注或版权信息 -->
</footer>
</html>
以上代码片段包含了以下元素：
<!DOCTYPE html>：声明此文件为 HTML 文档，并告诉浏览器使用最新的 HTML 版本。<html>：HTML 根元素，包含了整个页面结构。<head>：用于设置页面的元数据和样式，其中包括了页面标题、编码格式、页面描述、关键字等。<title>：设置页面的标题，将会显示在浏览器的标题栏中。<meta>：设置页面的元数据，包括编码格式、页面描述、关键字等。其中，charset 属性用于设置编码格式，description 属性用于设置页面的描述，keywords 属性用于设置页面的关键字，可输入多个关键字，用逗号分隔。<link>：引用页面的样式表文件，其中 href 属性用于引用样式表文件的路径。<body>：页面的主体部分，其中包括了整个页面的内容。<h1>：HTML 标题元素，用于设置页面的标题。<p>：HTML 段落元素，用于设置页面的文本内容。<img>：HTML 图片元素，用于在页面中显示图片。<a>：HTML 链接元素，用于在页面中添加链接。<footer>：页面的脚部部分，用于设置脚注或版权信息。HTML 中的元素可以通过 CSS（Cascading Style Sheets）来设置样式和布局。CSS 可以控制文本的颜色、字体、大小、文本对齐方式、背景颜色、边框样式等，使程序员能够创建出具有丰富样式的网页。
以下是一个使用 CSS 设置样式的 HTML 页面：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<meta charset="UTF-8">
<meta name="description" content="页面描述">
<meta name="keywords" content="关键字1,关键字2">
<link rel="stylesheet" href="样式表文件路径">
<style>
/* 设置样式 */
body {
font-family: Arial, sans-serif; /* 设置字体 */
font-size: 16px; /* 设置字号 */
color: #333; /* 设置字体颜色 */
background-color: #f0f0f0; /* 设置背景颜色 */
}
h1 {
font-size: 32px; /* 设置标题字号 */
color: #333; /* 设置标题颜色 */
text-align: center; /* 设置标题居中对齐 */
margin-top: 30px; /* 设置标题与页面顶部的间距 */
}
p {
line-height: 1.5; /* 设置文本行高 */
margin-bottom: 20px; /* 设置段落与段落之间的间距 */
}
img {
max-width: 100%; /* 设置图片最大宽度为页面宽度 */
height: auto; /* 设置图片高度自适应 */
}
a {
color: #e60012; /* 设置链接颜色 */
text-decoration: none; /* 去除链接下划线 */
}
a:hover {
text-decoration: underline; /* 设置链接鼠标悬浮下划线 */
}
</style>
</head>
<body>
<!-- 页面内容 -->
<h1>页面标题</h1>
<p>段落内容</p>
<img src="图片路径" alt="图片描述">
<a href="链接地址">链接文本</a>
</body>
<footer>
<!-- 脚注或版权信息 -->
</footer>
</html>
以上代码片段包含了一个 <style> 元素，用于设置页面的样式。其中，body、h1、p、img、a 分别代表 HTML 中的不同元素，通过设置不同的 CSS 属性，可以实现各种样式效果。
设置 HTML 网页需要编写 HTML 和 CSS 代码，掌握基本的 HTML 和 CSS 语法以及常用的元素和属性，可以帮助程序员快速创建出具有丰富样式的网页。