<!DOCTYPE html>
<html>
<head>
<title>HTML 和 CSS 区别示例</title>
<style>
/* CSS 用于样式设置 */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
width: 50%;
margin: 0 auto;
padding: 20px;
background-color: white;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<!-- HTML 用于结构定义 -->
<div class="container">
<h1>HTML 和 CSS 的区别</h1>
<p>HTML (HyperText Markup Language) 是一种标记语言,用来定义网页的结构和内容。它通过标签来描述文档中的不同部分,如标题、段落、链接等。</p>
<p>CSS (Cascading Style Sheets) 是一种样式表语言,用来描述 HTML 文档的外观和格式。它可以控制页面的布局、颜色、字体等样式。</p>
</div>
</body>
</html>
<h1> 标签表示一个一级标题,<p> 标签表示一个段落。body 样式设置了整个页面的字体和背景颜色,.container 类设置了容器的宽度、边距、内边距等。通过这个示例,可以看到 HTML 和 CSS 的不同职责:HTML 定义了页面的内容结构,而 CSS 则决定了这些内容如何显示。
上一篇:html如何添加背景图片
下一篇:html 下拉列表
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站