网页制作简单-CSDN博客

本文链接：https://blog.csdn.net/weixin_64032452/article/details/140870409

制作网页涉及到多种技术和步骤，下面是一个简单的指南，帮助你开始制作自己的网页：

步骤一：学习必要的基础知识

HTML：HTML是网页的基础语言，用于描述网页的结构和内容。
- 学习HTML标签，如 , , , , , , 等。<html><head><body><div><p><a><img>
- <!DOCTYPE html><html lang="en">
- <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Web Page</title>
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  <header>
  <h1>Welcome to My Website</h1>
  <nav>
  <ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#contact">Contact</a></li>
  </ul>
  </nav>
  </header>
  <main>
  <section id="home">
  <h2>Home</h2>
  <p>This is the homepage of my website.</p>
  </section>
  <section id="about">
  <h2>About</h2>
  <p>Learn more about me and my interests.</p>
  </section>
  <section id="contact">
  <h2>Contact</h2>
  <p>Get in touch with me!</p>
  </section>
  </main>
  <footer>
  <p>© 2024 My Website. All rights reserved.</p>
  </footer>
  </body>
  </html>
CSS：CSS用于控制网页的样式和布局。
- /* styles.css */
  body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
  }
  
  header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1rem;
  }
  
  nav ul {
  list-style-type: none;
  padding: 0;
  }
  
  nav ul li {
  display: inline;
  margin-right: 1rem;
  }
  
  nav ul li a {
  color: #fff;
  text-decoration: none;
  }
  
  main {
  padding: 2rem;
  }
  
  footer {
  text-align: center;
  padding: 1rem;
  background-color: #333;
  color: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  }
  
  学习CSS选择器，属性和值，如颜色、字体、间距、布局等。
基本的网页布局：理解网页的基本结构和布局方式，如页头、导航栏、内容区域、侧边栏和页脚。