👨 Biaoge ⏰于2023-05-05 12:16发布 👓阅读量：8217 🏷️文章类型：【 前端技术 】
编写软件#
HBuilder 推荐（教程指定）
Visual Studio Code 推荐
Notepad++ 网友推荐
运行环境#（所见即所得）
除IE浏览器外，都可以。推荐使用谷歌浏览器
HBuilder官方网站#
下载网址：HBuilderX-高效极客技巧
（下载ZIP压缩包，解压到你常用安装软件的目录，双击“HBuilderX.exe”打开软件）
软件使用介绍#
设置主题#
设置左侧文件栏#
新建项目#
普通项目，名字自定义，目录自定义#
新建目录#
新建4个目录#
CSS 文件夹存放CSS样式文件JS 文件夹存放JavaScript脚本文件image 文件夹存放图片与多媒体文件font 文件夹存放字体、素材文件
新建文件#
右击“毕业设计”文件夹，新建html文件，取名为index.html（首页文件）
右击“CSS”文件夹，新建CSS文件，取名为style.css（样式文件）右击“JS”文件夹，新建JS文件，取名为main.js（样式文件）如图#
尝试编写#
选中index.html文件，输入如下#
记得点击保存#
推荐使用快捷方式Ctrl+S
运行文件#
推荐使用Chrome（谷歌浏览器）、Edge（Win10、11自带浏览器）
浏览器就可以看到#
现在就可以编写，上一次留下任务#（可以复制粘贴）
<!DOCTYPE html>
<html lang="zh">
<head>
<!--设置编码格式：UTF-8-->
<meta charset="UTF-8">
<!--设置网页在浏览器的等比例大小为1-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 导入外部的css文件 -->
<link href="css/style.css" rel="stylesheet">
<!-- 导入外部的JavaScript文件 -->
<script src="js/main.js"></script>
<title>网页标题</title>
</head>
<style>
/*CSS样式*/
#app{
color:#ff0000;/*设置红色字体*/
font-size:16px;/*设置字体大小为16个像素*/
}
h1{
color:#0000ff;/*设置蓝色字体*/
}
</style>
<body>
<div id="app">
<!--HTML主体-->
<h1>Hello,HTML！</h1>
我制作的第一个网页！
</div>
</body>
<script>
/*js代码*/
alert("Hello,JavaScript!");
</script>
</html>
1641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
