HTML样式模板
在网页设计中，HTML样式模板是用于定义网页内容和布局的标记语言，它允许你定义一组HTML标签和属性，以控制网页在不同浏览器和设备上的显示效果，下面是一个简单的HTML样式模板，包含了基本的结构和样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML样式模板</title>
<style>
/* CSS样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f8f9fa;
padding: 20px;
text-align: center;
}
main {
margin: 20px;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}
footer {
background-color: #f8f9fa;
padding: 20px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>欢迎来到我的网页</h1>
</header>
<main>
<h2>这是一个HTML样式模板</h2>
<p>这是一个段落，用于演示HTML样式模板的效果。</p>
<p>这个模板使用了一些基本的CSS样式，如字体、边距、背景颜色和边框。</p>
<p>你可以根据需要修改这些样式，或者添加更多的样式来定制你的网页。</p>
</main>
<footer>
<p>版权所有 © 2023</p>
</footer>
</body>
</html>
这个HTML样式模板包含了以下几个部分：
1. ``：声明这是一个HTML5文档。
2. ``：定义整个HTML文档的根元素。
3. ``：包含了文档的元数据，如标题、字符集和样式表。
4. ``：定义文档使用的字符编码为UTF-8。
5. ``：定义文档的标题，显示在浏览器的标题栏或标签页上。
6. ``：包含了文档的CSS样式，这里定义了一些基本的样式，如body、header、main和footer元素的背景颜色、边距、内边距和文本对齐方式。
7. ``：定义了一个页眉区域，包含一个居中的标题。
8. ``：定义了文档的主要内容区域，包含一个二级标题和几个段落，这些内容用一些基本的CSS样式进行了美化。
9. ``：定义了一个页脚区域，包含版权信息，这个页脚区域使用了固定的位置，使其始终显示在页面底部。
