Language）用于创建网页的结构，而CSS（Cascading Style Sheets）用于控制网页的样式和布局。在本文中，我们将介绍如何使用HTML和CSS来设置网页的结构和样式。
HTML基础
HTML是一种标记语言，它使用一系列标签来定义网页的内容和结构。以下是一些常用的HTML标签：
<!DOCTYPE html>：声明文档类型为HTML5。<html>：定义HTML文档的根元素。<head>：包含文档的元数据，如标题、字符集等。<title>：定义文档的标题，显示在浏览器的标签页上。<body>：包含文档的主体内容，如文本、图片、链接等。
HTML示例
下面是一个简单的HTML示例，展示了如何使用这些标签来创建一个基本的网页结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页！</h1>
<p>这是一个简单的HTML示例。</p>
</body>
</html>CSS基础
CSS用于控制网页的样式和布局。以下是一些常用的CSS属性和值：
color：设置文本颜色。font-family：设置字体族。font-size：设置字体大小。text-align：设置文本对齐方式。margin：设置元素的外边距。padding：设置元素的内边距。width和height：设置元素的宽度和高度。background-color：设置背景颜色。
CSS示例
下面是一个使用CSS来美化上述HTML示例的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
color: #333;
font-size: 24px;
text-align: center;
margin-top: 20px;
}
p {
color: #666;
font-size: 14px;
text-align: justify;
margin: 20px auto;
max-width: 800px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>欢迎来到我的网页！</h1>
<p>这是一个简单的HTML示例。</p>
</body>
</html>在这个示例中，我们使用<style>标签将CSS代码嵌入到HTML文档中。我们设置了body、h1和p元素的样式，包括字体、颜色、大小、对齐方式等。我们还设置了外边距和内边距，以及背景颜色。最后，我们使用了一些简单的布局技巧，如居中对齐和自适应宽度。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/129059.html
微信扫一扫 