1. HTML（Hypertext Markup Language）：
- HTML是一种标记语言，用于构建网页的结构。它由一系列的元素组成，每个元素通过标签来定义。HTML描述了页面中的文本、图像、链接等基本元素的结构和语义。
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML示例</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<img src="image.jpg" alt="An example image">
<a href="https://www.example.com">Visit Example.com</a>
</body>
</html>
2. CSS（Cascading Style Sheets）：
- CSS用于样式化网页，控制页面元素的外观和布局。通过选择器和声明，CSS允许你选择HTML元素并应用样式，使页面看起来更漂亮和有吸引力。
- 示例：
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
p {
font-size: 16px;
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
border: 1px solid #ccc;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
上述CSS样式表定义了一些基本样式，如字体、背景颜色、文本颜色、段落样式、图片样式以及链接的颜色和悬停效果。
3. 将HTML和CSS结合：
- HTML和CSS之间的集成是通过将样式表链接到HTML文档的 <head> 部分来实现的。在示例中，我们在头部引用了一个名为 "styles.css" 的外部样式表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML与CSS示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 页面内容在这里 -->
</body>
</html>
通过HTML和CSS的结合使用，你可以创建具有良好结构和吸引人外观的网页。 HTML定义页面内容和结构，而CSS定义样式和布局。这种分离的方法使得在不改变内容的情况下更轻松地修改页面的外观。
转载请注明出处：http://www.zyzy.cn/article/detail/12404/HTML