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

悠悠 2022-06-03 10:38 240阅读 0赞

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

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

一）下载intelij IDEA  
下载地址为：[http://www.jetbrains.com/idea/download/][http_www.jetbrains.com_idea_download]  
建议最好是下载整个压缩包。  
二）安装：  
这里不再过多赘述，步骤很简单，通过“下一步”的方式安装即可；如果遇到了问题，可以自行百度。  
三）使用  
1）启动IDEA  
目前我下载是最新版的IDEA,可以直接在安装包中进行双击打开，如下图：  
![这里写图片描述][SouthEast]  
然后启动idea:  
![这里写图片描述][SouthEast 1]  
启动后的idea会弹出导航窗口，会提示一些相应的操作快捷键等，我们可以直接点击close进行关闭即可。  
2）创建项目  
点击菜单栏上 file–new–project,选择staic web–static web,如下图：  
![这里写图片描述][SouthEast 2]  
3）创建HTML网页  
创建完成项目以后，我们可以在左侧的窗口中看到如下结构：  
![这里写图片描述][SouthEast 3]  
右击选择–new–html file,如下图:  
![这里写图片描述][SouthEast 4]  
为新建的网页文件指定一个名称，如index.html  
4）HTML中几个表单标签的练习  
![这里写图片描述][SouthEast 5]  
代码如下：

<!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>

预览后的效果如下：  
![这里写图片描述][SouthEast 6]

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

未完待续~~

[http_www.jetbrains.com_idea_download]: http://www.jetbrains.com/idea/download/
[SouthEast]: /images/20220603/63cfc2772e944314a0da3b1b34dad13a.png
[SouthEast 1]: /images/20220603/ea56818c22cb45f992ba6dec437b6b4a.png
[SouthEast 2]: /images/20220603/89bcf9843d52410083df907e4b63e9ab.png
[SouthEast 3]: /images/20220603/dd2b501b7fb1462da97cca45e31f3d75.png
[SouthEast 4]: /images/20220603/fa79c125915f4392a1fb23f77d4352be.png
[SouthEast 5]: /images/20220603/0a895dbaadb7435b9a53baf289b2f337.png
[SouthEast 6]: /images/20220603/92de2a795fe44db0baff8796f649d6e2.png
[SouthEast 7]: /images/20220603/ecf7faf9b33a4406b5496678e5391b49.png
[SouthEast 8]: /images/20220603/f4288330a8ac47359919dd2efaa9c78a.png
[SouthEast 9]: /images/20220603/33ad0b28ce2745abb892c3d6eae336e6.png