HTML5 安装并使用intelij IDEA (stage1-1)

最新推荐文章于 2025-07-01 22:19:11 发布

原创最新推荐文章于 2025-07-01 22:19:11 发布 · 7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #idea

前端专栏收录该内容

44 篇文章

订阅专栏

本文介绍了如何下载、安装和初步使用Intelij IDEA进行前端开发，特别是HTML5项目。从下载地址到启动IDEA，创建静态Web项目，新建HTML文件，以及进行代码格式调整，为初学者提供了详细步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天开始学习前端，安装并使用intelij IDEA

今天心情异常的不好，头痛的不行。逼迫自己忙起来，不要去想一些无用的事情。
之前就一直在整理自己的思路，不知道要学习些什么好，偶然间发现自己对网页设计似乎还是有点兴趣，也就是目前大家所说的 前端工程师，自己也打算尝试学习一下。
用尽各种办法，把intelij IDEA安装成功了，虽然是英文版的，但是用起来也还顺手。今天闲来无事，打算从基础开始学习，把学习的过程通过博客的形式总结出来，日后回忆起来也是不错的。

一）下载intelij IDEA
下载地址为：http://www.jetbrains.com/idea/download/
建议最好是下载整个压缩包。
二）安装：
这里不再过多赘述，步骤很简单，通过“下一步”的方式安装即可；如果遇到了问题，可以自行百度。
三）使用
1）启动IDEA
目前我下载是最新版的IDEA,可以直接在安装包中进行双击打开，如下图：
这里写图片描述
然后启动idea:

启动后的idea会弹出导航窗口，会提示一些相应的操作快捷键等，我们可以直接点击close进行关闭即可。
2）创建项目
点击菜单栏上 file–new–project,选择staic web–static web,如下图：

3）创建HTML网页
创建完成项目以后，我们可以在左侧的窗口中看到如下结构：
这里写图片描述
右击选择–new–html file,如下图:

为新建的网页文件指定一个名称，如index.html
4）HTML中几个表单标签的练习

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试表单</title>  //这里是表单的标题
</head>
<body>
<form> //表单结构
    用户名：
    <input type="text"> //插入了一个文本类型的文本框
    <br/>
    密码：
    <input type="password">//插入了一个密码类型的文本框
    <br/>
    喜欢的水果：
    <br/>   //换行
    apple<input type="checkbox">
    //显示方式为在apple后面插入一个复选框按钮
    banana<input type="checkbox">
    pear<input type="checkbox">
    orange<input type="checkbox">
    <br/>
    性别：//单选按钮
    男<input type="radio" name="sex"> 
    //在这属性后面多加了一个name，表示将这两个选项放在名称为sex的组中，只有在同一组中的数据，才可以进行单选，如果name的名称不一样，则不能实现单选
    女<input type="radio" name="sex">
    <br/>
    常用网站：//下拉列表标签
    <select>
        <option>www.baidu.com</option> //option之间输入对应的下拉列表值
        <option>www.thfund.com</option>
        <option>www.google.com</option>
    </select>
    <br/> 
    //文本区域,可不放在表单内,即放在表单外;
    //可指定行数,列数,同时在预览时,可以维护区域内的值
    <textarea cols="30" rows="30">请在此输入个人简介</textarea>
    <br/>
    //按钮标签，值显示为 按钮
    <input type="button" value="按钮">
    //提交 按钮标签，点击该按钮进行提交操作，后面value的值可以不指定，不指定默认为‘提交’
    <input type="submit" value="确定">
</form>
</body>
</html>

预览后的效果如下：
这里写图片描述

四）格式的调整
如果在编辑代码时，感觉编辑器的中默认字体或者格式不合适，可以进行调整，如下：
intellij idea字体设值分成两部分，一部分是UI部分字体字号设置；另一部分就是编辑区的字体字号设置。
前一部分的更改比较简单，在file>setting>apperance中就可以更改UI部分的字体设值。
这里写图片描述
后一部分的更改较为纠结了，位置在file>setting>Editor>colors&Fonts中。首先在Font 选中save as 新建一个主题才能用，让然后可以更改文本字体和大小。在General可以进行更详细的设置，例如加粗，斜体，背景颜色等。
这里写图片描述
设置完成后，就可以按照自己喜欢的风格进行代码的编辑与预览了。

未完待续~~