IDEA初学之web项目的编写

举报
俺想吃蜂蜜 发表于 2022/04/30 10:02:26 2022/04/30
【摘要】 创建第一个Web项目 1、使用Idea搭建Web项目1)File ->New->Project点击后:点击New后,选择Tomat Server选择tomcat安装的目录点击Next后输入项目名称和项目存放地址后Finish因为不存在这个文件夹,需要idea自动创建,点击OK提示是在本窗口打开还是新窗口打开,点击This Window创建成功后,整体结构:如果上面全部正常,那么点击启动按钮...

创建第一个Web项目

1、使用Idea搭建Web项目

1)File ->New->Project

image.png

点击后:

image.png

点击New后,选择Tomat Server

image.png

选择tomcat安装的目录

image.png

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

image.png

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

image.png

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

image.png

创建成功后,整体结构:

image.png

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

image.png

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

image.png

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

image.png

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

1)tomcat配置信息

image.png

image.png

image.png

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

image.png

image.png

image.png

HTML/CSS

创建一个index.html文件

image.png

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标签:开始和结束标签,比如:<body></body>

HTML标签包含

标签名

标签属性及属性值

常用标签:

1)div

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

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

image.png
显示结果:

image.png

使用div创建一个登录框:

image.png

image.png

2)form

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

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

action:提交的url

3)table

table:表格,用于创建表格

image.png

image.png

image.png

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>

image.png

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>

image.png

6)  超链接标签

image.png

image.png

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>

image.png

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>

image.png

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200