本文目录导读：
随着互联网的快速发展，网站已经成为人们获取信息、交流互动的重要平台，在这个信息爆炸的时代，拥有一个简单、美观、实用的网站显得尤为重要，本文将为您介绍如何使用HTML和CSS技术打造一个个性化的简单网站，让您轻松入门，迈向网站制作的殿堂。
HTML基础
1、HTML简介
HTML（HyperText Markup Language）即超文本标记语言，是构建网页的基础，它使用一系列标签来描述网页的结构和内容，HTML5是当前最流行的HTML版本，具有丰富的功能和良好的兼容性。
2、HTML基本结构
图片来源于网络，如有侵权联系删除
一个简单的HTML页面通常包含以下结构：
<title>页面标题</title>
<!-- 页面内容 -->
3、HTML常用标签
标签：用于定义页面标题，分为<h1>至<h6>六级标题。
（2）段落标签：用于定义段落，使用<p>标签。
（3）列表标签：用于定义有序列表和无序列表，分别使用<ol>和<ul>标签。
（4）链接标签：用于定义超链接，使用<a>标签。
（5）图片标签：用于插入图片，使用<img>标签。
（6）表单标签：用于创建表单，收集用户输入信息，使用<form>、<input>、<button>等标签。
CSS基础
1、CSS简介
CSS（Cascading Style Sheets）即层叠样式表，用于控制网页的样式和布局，它可以将HTML结构和样式分离，提高网页的可维护性和可读性。
2、CSS基本语法
CSS的基本语法如下：
选择器 { 属性: 值; }
选择器用于指定要应用样式的HTML元素，属性用于设置元素的样式，值用于指定属性的值。
3、CSS常用属性
（1）字体：font-family、font-size、font-weight等。
（2）颜色：color、background-color等。
（3）布局：margin、padding、width、height等。
（4）边框：border、border-width、border-color等。
（5）定位：position、top、left等。
简单网站制作实例
以下是一个简单的网站制作实例，包括首页、关于我们、联系方式等页面。
1、首页
<title>我的网站</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
}
header h1 {
text-align: center;
}
nav {
background-color: #555;
color: #fff;
padding: 10px 0;
图片来源于网络，如有侵权联系删除
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
.content {
margin: 20px;
}
.footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
<header>
<h1>我的网站</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</nav>
<div class="content">
<!-- 页面内容 -->
</div>
<footer>
<p>版权所有 © 2021 我的网站</p>
</footer>
图片来源于网络，如有侵权联系删除
2、关于我们
<title>关于我们</title>
<link rel="stylesheet" href="css/style.css">
<header>
<h1>我的网站</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</nav>
<div class="content">
<h2>关于我们</h2>
<p>这里是关于我们的页面内容。</p>
</div>
<footer>
<p>版权所有 © 2021 我的网站</p>
</footer>
3、联系方式
<title>联系方式</title>
<link rel="stylesheet" href="css/style.css">
<header>
<h1>我的网站</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</nav>
<div class="content">
<h2>联系方式</h2>
<p>这里是联系方式页面内容。</p>
</div>
<footer>
<p>版权所有 © 2021 我的网站</p>
</footer>
通过本文的介绍，您已经掌握了使用HTML和CSS技术制作简单网站的基本方法，在实际操作中，您可以根据自己的需求对网站进行美化、优化和扩展，希望本文能对您的网站制作之路有所帮助。
标签： #简单的网站源码
评论列表