开源项目 `beginner-html-site-scripted` 使用教程

最新推荐文章于 2024-11-07 16:10:58 发布

魏鹭千Peacemaker

最新推荐文章于 2024-11-07 16:10:58 发布

阅读量296

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00610/article/details/141547611

版权

开源项目 `beginner-html-site-scripted` 使用教程

beginner-html-site-scriptedA simple one page website created to help complete beginners learn HTML basics. which in this repo has also had some script added to help beginners learn JavaScript basics.项目地址:https://gitcode.com/gh_mirrors/be/beginner-html-site-scripted

1. 项目的目录结构及介绍

beginner-html-site-scripted/
├── index.html
├── scripts/
│   └── main.js
└── README.md

index.html: 项目的主页面文件，包含HTML和JavaScript代码。
scripts/: 存放JavaScript脚本的目录。
- main.js: 主要的JavaScript文件，包含页面交互逻辑。
README.md: 项目的说明文档，介绍项目的基本信息和使用方法。

2. 项目的启动文件介绍

项目的启动文件是 index.html。这个文件包含了HTML的基本结构和一些简单的JavaScript代码，用于帮助初学者学习HTML和JavaScript的基础知识。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Beginner's HTML Site</title>
</head>
<body>
    <h1>Mozilla is cool</h1>
    <p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
    <p>Read the <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a> to learn even more about the values and principles that guide the pursuit of our mission.</p>
    <button>Change user</button>
    <script src="scripts/main.js"></script>
</body>
</html>

3. 项目的配置文件介绍

该项目没有专门的配置文件。所有的配置和功能实现都直接在 index.html 和 scripts/main.js 中完成。

index.html 中包含了页面的基本结构和一些简单的交互元素。
scripts/main.js 中包含了页面的交互逻辑，例如按钮点击事件的处理。

// scripts/main.js
var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');

function setUserName() {
    var myName = prompt('Please enter your name.');
    localStorage.setItem('name', myName);
    myHeading.textContent = 'Mozilla is cool, ' + myName;
}

if (!localStorage.getItem('name')) {
    setUserName();
} else {
    var storedName = localStorage.getItem('name');
    myHeading.textContent = 'Mozilla is cool, ' + storedName;
}

myButton.onclick = function() {
    setUserName();
};

以上是 beginner-html-site-scripted 项目的基本使用教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望这些内容能帮助初学者更好地理解和使用该项目。