IDEA初学之web项目的编写
【摘要】 创建第一个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
点击后：
点击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标签:开始和结束标签,比如：<body></body>
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>
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）