查看: 558|回复: 4

[讨论交流] 1分钟教会你建立一个自己的网站——本地文件版本

本帖最后由 wdylyh 于 2024-8-19 09:24 编辑

申明：本文部分教程来自aYYSW8AepLLd，在此感谢！
前言：
本文内容讲述的是编写html代码然后运行，要想把html代码变成网址，下一个帖子会讲解。
准备工作：
新建一个文本文档：
1分钟教会你建立一个自己的网站——本地文件版本图1

然后重命名：

如果你的文件像这样没有后缀名：
1分钟教会你建立一个自己的网站——本地文件版本图4

那就这样：

编写代码：
这样打开：
1分钟教会你建立一个自己的网站——本地文件版本图5

然后另存为：

随后就开始写代码啦！
先写固定的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随便写个什么</title>
<style>
    .container {
        max-width: 720px;
        margin: 3rem auto;
        background-color: #f0f0f0;
        padding: 1.5rem;
        border-radius: 5px;
    }

    ol {
        padding-left: 20px;
    }

    ol li {
        list-style-type: square;
    }

    ol ol li {
        list-style-type: square;
    }

    ol ol ol li {
        list-style-type: disc;
    }

    a {
        text-decoration: none;
    }
    </style>
</head>
<body>
<div class="container">
复制代码

效果：

然后添加标题和副标题：

<h1>你的网站名字</h1>
<hr>
<h3>极短的介绍（20字以内）</h3>
复制代码

效果：

太单调了？加个链接！

<a href="一个网址"target="_blank">随便一个字
复制代码

效果：

好了，这就是基本的用法。
每个代码的作用：
1. <a href="XXX"target="blank">XXX</a>
第一个XXX填网址，第二个填显示出来的文字。

2. <p>XXX</p>
显示文字XXX。并换行。

3. <h1>XXX</h1>
显示标题XXX。大小最大。

4. <h2>XXX</h2>
显示标题XXX。大小居中。

5. <h3>XXX</h3>
显示标题XXX。大小最小。

6. 1~5的任意一个代码。<hr>
加上横线：
1分钟教会你建立一个自己的网站——本地文件版本图11