搭建一个属于自己的网站——HTML ｜青训营想要了解前端的uu们怎么能不给自己做个人网站呢？现在让我们一起动手，搭一个

想要了解前端的uu们怎么能不给自己做个人网站呢？现在让我们一起动手，搭一个属于自己的网站吧！这一节我们主要以写HTML为主，因为HTML承载着一个网站的内容，这个内容不仅仅是文字，还可以是图片，视频，音频等等。

打开1024code，新建一个项目，网站很贴心的给我们把三大件的模板给准备好了。点开index.html，输入以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>个人网页</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <header>
    <h1>欢迎来到我的个人网页</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#about">关于我</a></li>
      <li><a href="#skills">技能</a></li>
      <li><a href="#projects">项目</a></li>
      <li><a href="#contact">联系我</a></li>
    </ul>
  </nav>

  <section id="about">
    <h2>关于我</h2>
    <p>在这里写上你自己的介绍和一些个人背景信息。</p>
  </section>

  <section id="skills">
    <h2>技能</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>前端框架（如React、Vue等）</li>
    </ul>
  </section>

  <section id="projects">
    <h2>项目</h2>
    <ul>
      <li>项目1 - 描述项目1</li>
      <li>项目2 - 描述项目2</li>
      <li>项目3 - 描述项目3</li>
    </ul>
  </section>

  <section id="contact">
    <h2>联系我</h2>
    <p>在这里提供你的联系方式，例如电子邮件、电话号码或社交媒体账号。</p>
  </section>

  <footer>
    <p>版权所有 © 2023 我的个人网页</p>
  </footer>
</body>
</html>

我们可以发现HTML的大部分标签都是成对出现的。需要注意的是，并非所有的HTML元素都需要结束标签。有些元素被称为“空元素”，它们在起始标签中就已经闭合，例如<br>和 <img> ,这些元素没有相应的结束标签。

<head></head>可以放置一些元数据和引用外部资源的标签。

<title></title>用来设置网页的名称

<link>用来关联外部样式表文件:

rel="stylesheet" 属性指定了链接的关系类型，表示这个链接是一个样式表。
type="text/css" 属性定义了链接的媒体类型，表示这个样式表是使用CSS语言编写的。
href="style.css" 属性指定了样式表文件的路径，这里的 "style.css" 是一个相对路径，表示样式表文件位于当前HTML文件所在的目录中。 <body></head>可以放置页面的内容

<script src="script.js"></script>被用来关联外部JavaScript文件

<h1></h1>是一级标题

<header></header> 用于表示网页或文档的页眉部分。它通常包含网站的标题、导航菜单、搜索框等与页面相关的内容。这个语义化的标签，用于将页眉内容从文档的主要内容中区分出来。它可以在HTML文档的任何位置使用，但通常放置在页面的顶部或者导航栏下方。

<nav></nav>用于表示网页的导航部分。它通常包含网站的导航菜单、链接列表或其他用于导航网页的内容。

<ul></ul>用于表示无序列表（Unordered List）。无序列表是一组项目或条目，这些项目之间没有特定的顺序或层次关系。

<li></li> 用于表示列表中的一个项目或条目（List Item）。它通常用于在有序列表（<ol>）或无序列表（<ul>）中定义每个项目。

<a></a> 用于创建超链接（Anchor Link）。通过 <a> 元素，你可以在HTML文档中创建链接到其他页面、文档、文件或特定位置的链接。用法： <a href="https://www.example.com">点击这里</a>

<section><\section> 用于表示文档中的一个独立部分或内容区块。它可以用于组织和标记文档中的相关内容，并为其提供语义化的结构。

<p><\p> 用于表示段落（Paragraph）。它用于将文本内容组织成段落，并在浏览器中显示为一个块级元素。

<footer><\footer> 用于表示网页或文档的页脚部分。它通常包含与页面相关的版权信息、联系方式、导航链接、社交媒体图标等内容。

最后来看看我们网站的初步效果吧！

搭建一个属于自己的网站——HTML ｜ 青训营

搭建一个属于自己的网站——HTML ｜青训营