使用IDEA创建并编写一个HTML界面保姆级教程

使用IDEA创建并编写HTML代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>注册页面</title><style>body{background: url("../守望先锋图片/天使.png");}.center {

文章共4,918字 · 阅读需要大约17分钟

一键AI生成摘要，助你高效阅读

问答

爱学习爱生活111

41555人浏览 · 2022-01-16 01:33:11

爱学习爱生活111 · 2022-01-16 01:33:11 发布

使用IDEA创建并编写HTML代码

创建一个新项目，选择New Project

选择New Project

选择自己的jdk版本，点击Next

选择自己版本的jdk，点击Next

注意这里不要勾选从模板创建项目，然后点击Next

注意这里的从模板创建项目不要勾选

给自己的项目起名字是最难的事了，这里给我们宝起个HTML，然后点击Finish

输入我们项目的名字，点击Finish

出现这个界面，不习惯的同学可以把Project改到右边，直接拖动选项卡就好

出现这个界面，不习惯的同学可以把Project改到右边

在这里选择我们的src文件夹

在这里插入图片描述

然后右键New->Package，就是新建一个目录的意思

在这里插入图片描述

我们给这个目录命名为web，我们即将写的HTML界面和所需的资源文件（如图片）都在这个web目录下

在这里插入图片描述

然后右键New->HTML File，这步是创建一个HTML文件

在这里插入图片描述

给他起个"注册界面"的名字，单击回车键

在这里插入图片描述

将下面的代码复制进去，我们做一个简单的注册界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body{
            background: url("./img/img.png");
        }
        .center {
            /*背景颜色*/
            background: white;
            /*宽度设置*/
            width: 400px;
            /*文本对齐方式*/
            text-align: center;
            /*外边距设置*/
            margin: auto;
        }
    </style>
</head>
<body>
    <div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </div>
    <!--中间注册信息-->
    <div class="center">
        <div>注册详情</div>
        <hr>
        <!--表单标签-->
        <form action="#" method="get" autocomplete="off">
            <div>
                <label for="username">姓名：</label>
                <input type="text" id="username" name="username" value="" placeholder="在此输入姓名" required/>
            </div>

            <div>
                <label for="password">密码：</label>
                <input type="password" id="password" name="password" value="" placeholder="在此输入密码" required/>
            </div>

            <div>
                <label for="email">邮箱：</label>
                <input type="email" id="email" name="email" value="" placeholder="在此输入邮箱" required/>
            </div>

            <div>
                <label for="sel">手机：</label>
                <input type="sel" id="sel" name="sel" value="" placeholder="在此输入手机" required/>
            </div>
            <hr>

            <div>
                <label for="gender">性别：</label>
                <input type="radio" id="gender" name="gender" value="men" />男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="gender" value="women" />女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>

            <div>
                <label for="hobby">爱好：</label>
                <input type="checkbox" id="hobby" name="hobby" value="music" />音乐
                <input type="checkbox" name="hobby" value="movie" />电影
                <input type="checkbox" name="hobby" value="game" />游戏
            </div>

            <div>
                <label for="birthday">出生日期：</label>
                <input type="date" id="birthday" name="birthday" value=""/>
            </div>

            <div>
                <label for="city"> 所在城市：</label>
               <select name="city"id="city">
                <option>---请选择所在城市---</option>
                <optgroup label="直辖市">
                    <option>北京</option>
                    <option>上海</option>
                    <option>广州</option>
                    <option>深圳</option>
                </optgroup>
                <optgroup label="省会市">
                    <option>西安</option>
                    <option>杭州</option>
                    <option>郑州</option>
                    <option>武汉</option>
                </optgroup>
            </select>
            </div>
            <hr>

            <div>
                <label for="desc">个性签名：</label>
                <textarea name="desc" id="desc" cols="40" rows="5" placeholder="请写下您的与众不同"></textarea>
            </div>
            <hr>

            <button type="submit">注册</button>
            <button type="reset">重置</button>
        </form>
    </div>
</body>
</html>

你会发现代码报错了，这是因为我们没有导入项目所需的图片，现在我们来进行导入，单击web，然后右键->New->点击Package，这步是生成一个存放图片的文件夹

在这里插入图片描述

给他起个img的名字

在这里插入图片描述

生成好了

在这里插入图片描述

把这张镁铝图片作为我们的背景，把他复制下来

在这里插入图片描述

点击img->右键->点击Paste，把他复制进我们的img文件夹

在这里插入图片描述

修改我们url的参数，这步是把我们的图片路径写进代码中去，.是回退的意思 /是代表下一层文件夹

在这里插入图片描述

晃一晃你的鼠标，你会发现右上角的四个浏览器，使用小公鸡点到谁就选谁的原则，点击一个你已经装好的浏览器，wow运行成功了，界面如下：

在这里插入图片描述
保姆级idea创建html教程，希望大家喜欢
这要学不会，听话，咱不学了，换一行吧
喜欢的话可以为我打赏1分钱支持一下，谢谢大家

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

【目标检测】目标检测的一些常用神经网络模型及方法

我的阶段性总结????文章目录1.概述1.2 目标检测的任务1.3 目标检测的分类2.R-CNN系列2.1 [R-CNN（Region with CNN features）](https://arxiv.org/pdf/1311.2524.pdf)2.2 [Fast R-CNN](https://www.cv-foundation.org/openaccess/content_iccv_2015/