html+css+javascript 使用web storm建立和管理个人网站-CFANZ编程社区

1. 创建基本的 HTML 结构

首先需要创建一个基本的 HTML 结构作为网站的骨架。可以使用以下代码作为初始模板：

<!DOCTYPE html>
 <html>
 <head>
     <title>我的个人网站</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <h1>欢迎来到我的个人网站！</h1>
     </header>
     <nav>
         <ul>
             <li><a href="index.html">首页</a></li>
             <li><a href="about.html">关于我</a></li>
             <li><a href="contact.html">联系我</a></li>
         </ul>
     </nav>
     <main>
         <!-- 此处插入内容 -->
     </main>
     <footer>
         <p>版权所有 © 2022 我的个人网站</p>
     </footer>
 </body>
 </html>

在上述代码中，我们创建了一个 <header> 元素用于显示标题，一个 <nav> 元素用于显示导航菜单，一个 <main> 元素用于显示网站的主要内容，最后是一个 <footer> 元素用于显示页脚信息。

2. 创建样式表

接下来，我们需要创建一个名为 style.css 的样式表文件，并在 HTML 文件中引入它。样式表用于设置网站的外观和布局。

在 style.css 中，你可以使用 CSS 代码来定义各种样式，例如颜色、字体、背景图像、边框等等。这里我们只提供一个简单的示例，你可以根据需要进行修改：

/* 设置导航菜单样式 */
 nav ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
  
 nav li {
     display: inline;
     margin-right: 20px;
 }
  
 nav li a {
     text-decoration: none;
     color: black;
 }
  
 /* 设置页脚样式 */
 footer {
     background-color: #ccc;
     padding: 20px;
     text-align: center;
 }

3. 创建首页内容

在 <main> 标签中，你可以插入任何你想要在首页显示的内容，例如一些自我介绍、照片、项目展示等等。

以下是一个简单的示例，你可以根据自己的情况进行修改：

<main>
     <section>
         <h2>欢迎来到我的个人网站！</h2>
         <p>我是 XXX，一个热爱前端开发的工程师。</p>
         <p>这是我的个人网站，你可以在这里了解我的技能和项目，也可以通过联系信息与我取得联系。</p>
     </section>
     <section>
         <h2>我的技能</h2>
         <ul>
             <li>HTML</li>
             <li>CSS</li>
             <li>JavaScript</li>
         </ul>
     </section>
     <section>
         <h2>我的项目</h2>
         <ul>
             <li><a href="project1.html">项目1</a></li>
             <li><a href="project2.html">项目2</a></li>
             <li><a href="project3.html">项目3</a></li>
         </ul>
     </section>
 </main>

4. 创建其他页面

除了首页，你还可以创建其他页面来展示更多内容，例如关于页面、联系页面和项目详情页面等等。可以仿照上述步骤，在 HTML 文件中创建对应的内容并在导航菜单中添加链接。

5. 在 WebStorm 中管理项目

在 WebStorm 中，你可以使用以下步骤来创建和管理个人网站项目：