「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」。

创建第一个Web项目

1、使用Idea搭建Web项目

1）File ->New->Project

点击后：

点击New后，选择Tomat Server

选择tomcat安装的目录

点击Next后输入项目名称和项目存放地址后Finish

因为不存在这个文件夹，需要idea自动创建，点击OK

提示是在本窗口打开还是新窗口打开，点击This Window

创建成功后，整体结构：

如果上面全部正常，那么点击启动按钮，进行测试

查看启动日志信息，发现启动成功

浏览器自动打开一个窗口，说明启动成功

2、使用Idea开发Web项目基本知识

1）tomcat配置信息

2）项目编译后输入的地址及目录

HTML/CSS

创建一个index.html文件

HTML基本学习

1、介绍：

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

2、结构：

<!DOCTYPE html>       //html5标准网页声明
<html lang="en">      //向搜索引擎表示该文档是html语言,并且语言为英文网站
<head>                  //html 头部
    <meta charset="UTF-8">  //声明编码字符集，否则会出现乱码
    <title>Title</title>  //文档标题
</head>
<body>   //网页主体，可见页面的内容
测试
</body>
</html>

3、HTML标签：

HTML标签也常叫做HTML元素，但是HTML元素是包含一对HTML标签:开始和结束标签,比如：

HTML标签包含：

标签名

标签属性及属性值

常用标签：

1）div

div:块级元素，主要用来分层

我们这里给index.html分三层，头部、中部和底部。

显示结果：

使用div创建一个登录框：

2）form

form:表单，主要用于提交数据

method:提交方式,有post,get2中方式，一般form使用post提交

action:提交的url

3）table

table：表格，用于创建表格

4）input

input:输入框，主要用于输入数据

<form name="frm" method="post" action="/dologin">
            用户注册
            <table>
                <tr>
                    <td style="width: 30%">账号：</td>
                    <td style="width: 70%">
                        <!-- placeholder提示信息，maxlength限制输入的最大长度 -->
<input type="text" name="username" placeholder="请输入账号" maxlength="10">
                    </td>
                </tr>
                <tr><td >密码：</td>
                    <td><input type="password" name="password"></td>
                </tr>
                <tr><td >性别：</td>
                    <td><input type="radio" name="sex" value="男">男
                        <input type="radio" name="sex" value="女">女
                    </td>
                </tr>
                <tr><td >生日：</td>
                    <td><input type="date" name="birthday">
                    </td>
                </tr>
                <tr><td >邮箱：</td>
                    <td><input type="email" name="email">
                    </td>
                </tr>
                <tr><td >爱好：</td>
                    <td>
                        看书：<input type="checkbox" name="hobby" value="看书"><br/>
                        打篮球：<input type="checkbox" name="hobby" value="打篮球"><br/>
                        踢足球：<input type="checkbox" name="hobby" value="踢足球">
                    </td>
                </tr>
                <tr><td >备注：</td>
                    <td><textarea cols="10" rows="5" name="note">
                        我是通过cols和rows定的大小，我的cols是10，rows是5
                    </textarea></td>
                </tr>
                <tr><td >上传头像：</td>
                    <td><input type="file" name="uploadFile">
                    </td>
                </tr>

                <tr><td colspan="2">
<!--                    隐藏输入框-->
                    <input type="hidden" value="0" name="id">
                    <input type="button" value="提交">

<input type="submit" value="提交2">
</td>\
                </tr>
            </table>
        </form>

5） select 选择标签

<tr><td >年级：</td>
    <td>
        <select name="grade">
        <option value="">请选择年级</option>
        <option value="1">大一</option>
        <option value="2">大二</option>
        <option value="3">大三</option>
        <option value="4">大四</option>\
    </select>
    </td>
</tr>

6）超链接标签

7）图片

.main .main_img{
    float: left;
    margin-left: 20%;
    margin-top: 20px;
}


<div class="main_img">
    <img src="main_img.png"  width="100%" height="100%">
</div>

8）无序列表`<ul><li>` ，有序列表`<ol><li>`

<h4>无序列表:</h4>
<ul>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>人才招聘</li>
</ul>
<br>
<h4>有序列表:</h4>
<ol>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>人才招聘</li>
</ol>
<style>
    .footer ul li{
        float: left;
        width:70px;
        /*上 右 下 左*/
        margin:0 10px;
    }
    .footer ol li{
        float: left;
        width:70px;
        /*上 右 下 左*/
        margin:0 10px;
    }
</style>

IDEA初学之web项目的编写