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

最新推荐文章于 2024-05-17 04:41:38 发布
最新推荐文章于 2024-05-17 04:41:38 发布
阅读量4.4w 收藏 422
点赞数 104
分类专栏： Java HTML 文章标签： intellij-idea html java idea
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_40819191/article/details/122517529
版权

使用IDEA创建并编写HTML代码

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

选择New Project

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

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

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

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

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

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

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

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

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

  1. web目录生成好了，别害怕单击他

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

  1. 将下面的代码复制进去，我们做一个简单的注册界面
    在这里插入图片描述
<!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>
  1. 你会发现代码报错了，这是因为我们没有导入项目所需的图片，现在我们来进行导入，单击web，然后右键->New->点击Package，这步是生成一个存放图片的文件夹

在这里插入图片描述

  1. 给他起个img的名字

在这里插入图片描述

  1. 生成好了

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

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

爱学习爱生活111
关注
  • 104
    点赞
  • 踩
  • 422
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
idea中写html,用IDEA写HTML
weixin_29039773的博客
05-31 1349
# -*-coding: UTF-8 -*-import urllib'获取web页面内容并返回'def getWebPageContent(url):f = urllib.urlopen(url)data = f.read()&n...原地址：http://www.phpchina.com/html/61/31261-15911.html 现在有一个明显的趋势让PHPer必须清醒地认识...
idea中使用 HTML、CSS 和 JavaScript 进行实时编辑
☆往事随風☆的博客
03-05 1万+
idea中配置LiveEdit实现html页面实时编辑预览 一、说明 推荐使用Chrome浏览器 Live Edit 仅在调试会话期间可用 只有Google Chrome和其他基于 Chromium 的浏览器支持调试 JavaScript 代码。 二、首先下载LiveEdit插件 首先进入设置中的插件商店：Settings ---> Plugins ---> Marketplace 然后搜索Live Edit，点击 install进行下载 下载完成后按照提示重启idea 三、配置ide
使用IDEA创建的一个简单的react项目
07-25
一个简单的React项目，在IDEA创建的初始React项目基础上添加了一个简单的点击计数组件
Web前端最全手把手教程-使用idea创建vue项目_idea怎么创建vue，2024年最新lv面试结果
最新发布
2401_84122902的博客
05-17 1067
*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。aScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。
2020.2idea创建web_利用idea快速搭建一个项目
weixin_39901412的博客
11-19 586
一、前提准备：电脑安装好jdk1.8，安装好IDEA二、步骤 1.点击创建一个新项目2.选择 Spring initializr选项，这是一个非常方便的生成Springboot的工具，确认信息无误后next 3.修改group、artifact、name、description、package后next 4.这一步是选择依赖，小白就只选一个Spring web吧，后面要用啥就手动添加，然后next...
怎么在html中插入图片
2202_76088586的博客
07-31 1154
img src="图片路径" alt="图片得正常加载时提示语" title="鼠标悬停"时的提示语" width="图片的边框" height="图片高度" border="边框"我这边是建议先创建一个文件夹 里面包含 css html img 平常把需要用的照片放在img里面 也方便插入。在这里获取图片路径 我们有一个快捷键 shift+alt+c 然后把复制的图片路径粘贴到src即可。下面来告诉大家 html插入图片的代码语句。
使用IDEA编写HTML
FairyKunKun的博客
03-30 8697
（1）创建一个web工程 （2）新建一个网页，名叫hello.html （3）编写代码 （4）使用浏览器运行 中文： 设置中文编码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&
2、使用IDEA开发html代码
热门推荐
qq_43535992的博客
01-31 1万+
1、开发html常见的IDE 记事本（早期） Dreamweaver IDEA webstorm Hbuilder …… 2、使用IDEA创建一个文件 这里选择IDEA 完全是为了尝鲜。。。 与创建Java项目一样：先建一个项目，什么项目都可以，这里创建的是Java项目。创建完成了之后，可以将src文件夹删掉，也可以不删，因为对接下来的开发完全没有影响。为了方便管理html文件，可以创建一个文...
用idea创建 HTML 文档
qq_45554909的博客
12-16 1257
1、创建一个 web 工程（静态的 web 工程） 2、在工程下创建 html 页面
stu01-IDEA怎么创建一个HTML项目
qq_49742153的博客
09-12 2835
2.点击Java，选择你的jdk，没有下载的点击“Download JDK”/已经下载有JDK但在这里没显示的→点击“Add JDK”，选择你安装的JDK的路径，然后next。8.现在测试一下，在标签里写上“test”或者“hello world”，随你喜欢。6.在弹出的框里填写文件名字“test”，选择类型“HTML 5 file”，然后回车。5.右键新建的项目“HTML”→new→HTML File。4.起好名字，我这里是“HTML”→finish。7.新建HTML5文件成功。
初识HTML、W3C标准、如何利用IDEA创建HTML项目、HTML基本结构、网页基本信息
m0_59800431的博客
03-11 1682
主要介绍了HTML、W3C标准、如何利用IDEA创建HTML项目、HTML基本结构、网页基本信息的基础内容
IntelliJ IDEA 的使用界面图文教程
08-26
主要介绍了IntelliJ IDEA 的使用界面图文教程,需要的朋友可以参考下
使用IDEA创建Java Web项目并部署访问的图文教程
08-27
"使用IDEA创建Java Web项目并部署访问的图文教程" 本文主要介绍了使用IDEA创建Java Web项目并部署访问的详细教程，涵盖了IDEA的基本概念、安装和配置、创建Java Web项目、部署到Tomcat服务器、配置Tomcat服务器、...
idea使用maven创建web项目详细教程
02-23
本教程将指导您使用 IDEA 创建一个 Maven Web 项目，从安装 Maven 到配置 Maven 环境、创建 Maven 工程、pom.xml 文件配置、依赖管理等。 1. 安装 Maven 在 IDEA 中使用 Maven 之前，需要先安装 Maven。在 Maven ...
使用idea搭建一个spring mvc项目的图文教程
08-19
本文主要介绍了使用IDEA直接创建一个Spring MVC项目的图文教程，通过图文并茂的方式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值。 一、Spring MVC项目的创建 使用IDEA创建一个Spring MVC项目...
六、IDEA编写HelloWorld并运行
weixin_44425979的博客
01-08 3539
IDEA编写HelloWorld
如何使用 IntelliJ IDEA 创建 HTML页面
m0_57448314的博客
10-18 5717
如何使用 IntelliJ IDEA 创建 HTML页面
用idea是可以写html文件的
m0_57434037的博客
04-25 2204
用idea是可以写html文件的
用idea学习HTML
ff_11111的博客
08-25 1028
文章目录什么是HTML？网页基本信息网页基本标签图像标签链接标签 什么是HTML？ HTML：Hyper Text Markup Language(超文本标记语言)，一种标识性的语言。 超文本包括：文字、图片、音频、视频、动画等； 网页基本信息 <!DOCTYPE html> <!--DOCTYPE(文档类型):告诉浏览器要使用什么规范，默认HTML5--> <html lang="en"> <!--所有网页代码都要写在这里面--&gt
在idea在使用tomcat创建一个登录注册中文界面
05-27
下面是使用 IntelliJ IDEA 在 Tomcat 中创建一个简单的登录注册中文界面的步骤： 1. 创建一个动态 Web 项目 在 IntelliJ IDEA 中，选择 File -> New -> Project，然后在左侧的菜单中选择 Java Enterprise，再选择 Web Application。在右侧的面板中，输入项目名称，选择项目位置，然后点击 Next。在下一个页面中，选择 Web Application，选择 Web Server，然后点击 Next。在下一个页面中，选择 Java EE Version，然后点击 Finish。 2. 添加依赖 在 pom.xml 文件中添加以下依赖： ```xml <!-- Servlet API --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>4.0.1</version> <scope>provided</scope> </dependency> <!-- JSP API --> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>javax.servlet.jsp-api</artifactId> <version>2.3.2-b02</version> <scope>provided</scope> </dependency> <!-- JSTL --> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> ``` 3. 创建登录和注册 JSP 页面 在项目的 WebContent 目录下，新建一个 login.jsp 文件和一个 register.jsp 文件。在这两个文件中，添加一个表单，用于用户输入用户名和密码。并且，为了中文界面，你可以在表单中使用中文。 4. 添加 Servlet 类 在项目中新建一个 LoginServlet 类和一个 RegisterServlet 类。这两个类分别继承 HttpServlet 类，并且实现 doGet() 和 doPost() 方法。在 doGet() 和 doPost() 方法中，处理用户登录和注册的逻辑。 5. 配置 web.xml 文件 在项目的 WEB-INF 目录下，新建一个 web.xml 文件。在这个文件中，配置 Servlet 类和 URL 映射。 6. 配置 Tomcat 在 IntelliJ IDEA 中，选择 Run -> Edit Configurations，然后点击左上角的加号，选择 Tomcat Server -> Local。在右侧的面板中，配置 Tomcat 的安装目录和端口号等信息。 7. 运行项目 在 IntelliJ IDEA 中，选择 Run -> Run 'Tomcat'，然后等待 Tomcat 启动完成。然后，在浏览器中输入 http://localhost:8080/ 以访问项目。 以上是一个简单的登录注册中文界面的实现步骤。当然，这只是一个简单的示例，你可以根据自己的需求进行扩展和修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值