html，CSS，Web项目的开发
html5的框架
<!DOCTYPE html><!--这是一个声明-->
<!--框架-->
<html>
<!--头部文件-->
<head>
<!--设置编码格式-->
<meta charset="utf-8">
<!--设置文件标题-->
<title>文件标题</title>
</head>
<body>
helloWorld文档内容
</body>
</html>
html5中常用的标签
<!DOCTYPE html>
<html>
<head>
<title>
静夜思
</title>
</head>
<body>
<!--
标题标签<hn>标题<hn>
n指的1-6的数字，其中1最大，6最小
标题和段落的属性
align 水平对齐的方式
值有：left center right
段落标签<p>
换行标签<br>
下划线标签<hr>
字体标签<font>
字体的属性：
color
size
face
照片标签<img>
-->
<h1 align='center'>静夜思</h1>
<!-- <h2 align="right">静夜思</h2>
<h3 align="left">静夜思</h2>
<h4>静夜思</h2>
<h5>静夜思</h2>
<h6>静夜思</h2> -->
<p align='center'>床前明月光，</p>
<p align='center'>疑是地上霜。</p>
<p align='center'>举头望明月，</p>
<p align='center'>低头思故乡。</p>
<hr>
<p align='center'>
<font color="red" size="6" face="微软雅黑">
李白
</font>
</p>
<!-- <img src="c://Users/段晨曦/Desktop/前端/BaiLi.jpg"> -->
<img src="BaiLi1.jpg" title="这就是李白，就是这么帅！！！" alt="李白太帅了，没加载出来">
</body>
</html>
html5中的字体标签，表格标签和表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签大全</title>
</head>
<body>
<!-- 文字标签 -->
<b>加粗</b>
<strong>强调</strong>
强调
<br>换行
<i>i 斜体</i>
<del>del 删除线</del>
<ins>ins 我带下划线</ins>
<sub>sub 下标的文字</sub>普通的文字
<sup>sup 上标的文字</sup>
<q>q 带有引号的文字</q>
<blockquote>blockquote 这里面的内容是添加了外边距，并且添加了换行</blockquote>
普通文字
我在<time datetime="2019-02-15">正月十一</time>有个约会
<!-- 外连接，blank可以新建一个页面 -->
<a href="http://www.taobao.com" target="blank">点我一下</a>
<!-- 列表 -->
<ul>
<li>1</li>我是内容
<li>2</li>我是内容2
<li>3</li>我是内容3
</ul>
<ol>
<li>a</li>dsadsadsdasd
<li>b</li>dasdasd
<li>c</li>dasdasdas
</ol>
<dl>
<dt>定义标题1</dt>
<dd>定义的内容一</dd>
<dt>定义标题2</dt>
<dd>定义的内容2</dd>
</dl>
<!-- 表格 -->
<table border="1" align=center>
<!-- 表格的提示信息 -->
<caption>这是表格</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>f</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
<table border="1" align=center>
<caption>大数据课程表</caption>
<!-- 表格的头部信息 -->
<thead>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
</thead>
<tbody>
<!-- 第一行 -->
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
<td>生物</td>
<!-- colspan 表示向右合并的栏数 -->
<td colspan="2" rowspan="3">休息</td>
</tr>
<!-- 第二行 -->
<tr>
<td>java</td>
<td>html</td>
<td>hiphop</td>
<td>打篮球</td>
<td>踢足球</td>
</tr>
<!-- 晚上 -->
<tr>
<td>自习</td>
<td>自习</td>
<td>自习</td>
<td>自习</td>
<td>自习</td>
</tr>
</tbody>
</table>
<!-- 表单 -->
<form action="http://www.baidu.com" method="GET|POST">
文本输入框<input type="text" placeholder="请输入账号"><br>
密码输入框<input type="password" placeholder="请输入密码"><br>
多选框<input type="checkbox" name="hobby" value="sleep">sleep
<input type="checkbox" name="hobby" value="study">study
<input type="checkbox" name="hobby" value="lol">lol<br>
单选框<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女<br>
文件上传<input type="file">
<input type="submit" value="提交">
<input type="button" value="清理系统垃圾" onclick="">
<input type="reset" value="重置"><br>
<select>
<option>黑长直</option>
<option>白富美</option>
<option>富萝莉</option>
</select>
<input id="mycar" list="cars">
<datalist id="cars">
<option value="BMW"></option>
<option value="lanbojini"></option>
<option value="falali"></option>
</datalist>
</form>
<textarea name="longtext" cols="50px" rows="5px"></textarea>
</body>
</html>
CSS的选择器
元素选择器
格式：
<style>
元素的名称{
属性名称：属性值;
属性名称2：属性值;
}
</style>
ID选择器
格式：
<style>
#ID的名称{
属性名称：属性值;
属性名称2：属性值;
}
</style>
类选择器
<style>
.类的名称{
属性名称：属性值;
属性名称2：属性值;
}
</style>
派生选择器
<style>
#标签名1 标签名2{
属性名称：属性值;
属性名称2：属性值;
}
<style>
通配符选择器
<style>
*{
属性名称：属性值;
属性名称2：属性值;
}
</style>
CSS的引入方式
- 新建一个.css文件：
.shuiguo{
color: pink;
}
.shucai{
color: blue;
}
- 通过link标签引入这个外部的css文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style1.css"/>
</head>
<body>
<div class="shuiguo">甘蔗</div>
<div class="shucai">青瓜</div>
<div class="shuiguo">苹果</div>
<div class="shucai">茄子</div>
<div class="shuiguo">橘子</div>
</body>
</html>
web项目的开发基础
servlet的配置：
<servlet>
<servlet-name>DemoServlet</servlet-name>
<servlet-class>com.servlet.test.DemoServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DemoServlet</servlet-name>
<url-pattern>/De</url-pattern>
</servlet-mapping>
servlet获取输入参数：
public class Demo1Servlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
if(password != null && password.equals(dpassword) ){
User user = new User(username,password,rename,sex,uid,age);
request.setAttribute("user",user);
request.getRequestDispatcher("/Success.jsp").forward(request,response);
}else{
request.setAttribute("error","错误");
//请求转发
request.getRequestDispatcher("/index.jsp").forward(request,response);
//重定向（请求转发和重定向二选一）
response.sendRedirect(request.getContextPath()+"/success.jsp");
}
}
}
request和response的区别和作用
request：请求，想要从浏览器中获取数据用request，同时，还可以作为容器存储数据
response：响应，想要向浏览器响应数据或页面用response
request相关方法：
- setAttribute
- getAttribute
- getParameter
- getRequestDispatcher().forward(request,response);
- getContextPath()
response相关的方法： - sendRedirect(request.getContextPath()+"");
请求转发和重定向的区别
请求转发：
request.getRquestDispatcher("").forward(request,response);
重定向：
response.sendRedirect(request.getContextPath+"");
- 转发是在服务器端完成的，重定向是在客户端发生的；
- 转发的速度快，重定向速度慢；
- 转发是同一次请求，重定向是两次请求；
- 转发地址栏没有变化，重定向地址栏有变化；
- 转发必须是在同一台服务器下完成，重定向可以在不同的服务器下完成
- 转发可以共享request，而重定向不可以
扫一扫
6486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
