这篇博客介绍了Java Web中Html的基础知识，包括Html的定义、标签结构、大小写规则，以及内部头部分和体部分的构成。强调了Html代码的起始和结束标签，以及图片的路径要求。同时提到了框架的创建注意事项，避免出现循环错误。
Java的基础部分已经学习结束，现在来稍微学习一下Java的Web的Html部分
Html
Html：超文本标记语言，最基础的网络语言
- 通过标签来定义，代码由标签组成
- 不区分大小写
- 整段代码 < html>开始 < /html>结束
- 内部=头部分（< head>开始 < /head>结束）加体部分（< body>开始 < /body>结束）
- head部分最先加载
话不多说，直接上代码学习吧
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- meta标签：网页描述信息 http-equiv：模拟http协议的响应消息头 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>这是网页标题</title>
</head>
<body>
<!-- 内部超链接 定位 -->
<a name="top">顶部位置</a>
<br />
<a href="#center">回到底部位置</a>
<br />
<h1>以上是内部超链接</h1>
<hr />
这是
<font color='red' size='8'>我的</font>
网页内容。
<!-- 这是注释，不会显示在网页上 -->
<br />
<!-- 这是回车 -->
这是第二行——
<font color="blue" size="5">古娜拉黑暗之神</font>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
这段文字应该带很多个 空格但实际上只有一个空格
<br />
这段文字可以带很多个 空格
<hr />
<!-- ******************************* -->
<h1>
<font color="red">列表标签</font>
</h1>
<dl>
<dt>一般列表</dt>
<dd>列表1</dd>
<dd>列表2</dd>
<dd>列表3</dd>
</dl>
无序列表
<ul type="square">
<li>无序1</li>
<li>无序2</li>
<li>无序3</li>
</ul>
有序列表
<ol type="a">
<li>有序1</li>
<li>有序2</li>
<li>有序3</li>
</ol>
<hr />
<!-- 这是分割线 -->
<!-- ******************************* -->
<h1>
<font color="red">图像标签</font>
</h1>
<!-- border是边缘厚度 -->
<img alt="图片" src="imgs\picture.jpg" height="150" width="300" border="10" align="middle">
<hr />
<!-- 这是分割线 -->
<!-- ******************************* -->
<h1>
<font color="red">表格标签</font>
</h1>
<table border="1" width="40%" bordercolor="#0000ee" cellpadding="10" cellspacing="0" align="center">
<caption>表格标题</caption>
<tr>
<td>
<font color="red">姓名</font>
</td>
<td>
<font color="blue">年龄</font>
</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
</tr>
</table>
<!-- 建表顺序：左右 上下 -->
<table border="1" width="40%" bordercolor="#0000ee" cellpadding="10" cellspacing="0" align="center">
<caption>表格标题</caption>
<tr>
<th rowspan="2" width="10%">编号</th>
<th colspan="2" width="20%">个人信息</th>
</tr>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>王五</td>
<td>20</td>
</tr>
</table>
<hr />
<!-- 这是分割线 -->
<!-- ******************************* -->
<h1>
<font color="red">超链接</font>
</h1>
<!-- href中需要指定协议，默认协议为file协议 -->
<a href="http://www.baidu.com">链接1：百度一下，你就知道</a>
<br />
<a href="imgs/picture.jpg">链接2：图片</a>
<br />
<a href="mailto:miesmile@163.com">链接3：邮箱</a>
<br />
<a href="http://www.99meijutv.com/vodplay/2211-2-10.html">链接4：电视 神盾局特工第二季</a>
<br />
<hr />
<h1>
<font color="red">框架:需要另外新建html</font>
</h1>
<!-- 新建的html的内容为如下：
...
</head>
<frameset rows="30%,*">
<frame src="html4test.html" />
<frameset cols="50%,*">
<frame src="right.html" />
<frame src="left.html" />
</frameset>
</frameset>
<body>
...
-->
<hr />
<h1>
<font color="red">表单</font>
</h1>
<form>
<!-- 如果需要提交数据给服务器，表单组件必须要有name和value -->
输入名称：
<input type="text" />
<br />
输入密码：
<input type="password" />
<br />
<!-- radio为单选，name相同为多选一 -->
选择性别：
<input type="radio" name="sex" />
男
<input type="radio" name="sex" />
女
<input type="radio" name="sex" />
双性
<br />
选择国家：
<select name="country">
<option value="usa">美国</option>
<option value="china">中国</option>
<option value="japan">日本</option>
<option value="asia">澳大利亚</option>
</select>
<br />
掌握技术：
<input type="checkbox">
Java
<input type="checkbox">
C
<input type="checkbox">
Python
<br />
上传附件：
<input type="file">
<br />
<textarea name="text" rows="2" cols="5"></textarea>
<input type="reset" value="清除数据">
<input type="submit" value="提交数据">
</form>
<!-- 表单格式化：将表单组件放进表格之中 -->
<hr />
<h1>
<font color="red">表单格式化：将表单组件放进表格之中</font>
</h1>
<!-- 60.176.43.3:10000根据服务器设置 -->
<!-- 提交数据方式：1.get 2.post -->
<form action="http://60.176.47.253:10000" method="post">
<!-- 如果需要提交数据给服务器，表单组件必须要有name和value -->
<table border="1" bordercolor="#0000ff" cellpadding="10" cellspacing="0">
<tr>
<th colspan="3">注册表单</th>
</tr>
<tr>
<td>输入名称：</td>
<td colspan="2">
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>输入密码：</td>
<td colspan="2">
<input type="password" name="userpassword" />
</td>
</tr>
<tr>
<td>选择性别：</td>
<td colspan="2">
<input type="radio" name="sex" />
男
<input type="radio" name="sex" />
女
<input type="radio" name="sex" />
双性
</td>
</tr>
<tr>
<td>选择国家：</td>
<td colspan="2">
<select name="country">
<option value="usa">选择国家</option>
<option value="usa">美国</option>
<option value="china">中国</option>
<option value="japan">日本</option>
<option value="asia">澳大利亚</option>
</select>
</td>
</tr>
<tr>
<td>掌握技术：</td>
<td colspan="2">
<input type="checkbox" name="skill">
Java
<input type="checkbox" name="skill">
C
<input type="checkbox" name="skill">
Python
</td>
</tr>
<tr>
<td>上传附件：</td>
<td colspan="2">
<input type="file">
</td>
</tr>
<tr>
<th rowspan="2">
<textarea name="text" rows="2" cols="5"></textarea>
</th>
</tr>
<tr>
<td align="center">
<input type="reset" value="清除数据">
</td>
<td align="center">
<input type="submit" value="提交数据">
</td>
</tr>
</table>
</form>
<hr />
<h1>
<font color="red">其他标签</font>
</h1>
<h2><font color="red">动态标签</font></h2>
<table>
<tr >
<th rowspan="5">
<marquee direction="down" behavior="alternate">上下移动</marquee>
</th>
<th rowspan="5">
<marquee direction="down" behavior="scroll">循环向下</marquee>
</th>
<th rowspan="5">
<marquee direction="down" behavior="slide">下移到底</marquee>
</th>
</tr>
</table>
<h2><font color="red">上下标</font></h2>
下标：X<sub>2</sub> 上标：X<sup>2</sup>
<h2><font color="red">格式化文本</font></h2>
<pre>
一一一一一
11111
22222
aaaaa
bbbbb
二二二二二
11111
22222
aaaaa
bbbbb
</pre>
<h2><font color="red">标签分类：块级和行内</font></h2>
<h3><font color="red">块级标签</font></h3>
标签结束后会产生换行
<br />
标题title、h1~h4，区域div，段落p，表格table
<h3><font color="red">行内标签</font></h3>
标签结束后没有换行
<br />
设置字体font，区域span，图片img，输入input，下拉列表select，超链接a
<hr />
<h1>以下是内部超链接</h1>
<!-- 内部超链接-name+href 可用于内部定位 -->
<a name="center">底部位置</a>
<br />
<a href="#top">回到顶部位置</a>
</body>
</html>
网页效果：
其中：
- 图片需要与html在同一文件夹内，否则不会正常显示
- 关于框架，需要新建html，不能在要打开的html中建立框架，否则会出现循环错误，网页效果如下
- 服务器端的代码以及相关解释如下
package webexam1;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.net.ServerSocket;
import java.net.Socket;
//接收html提交的数据
public class RegServer {
public static void main(String[] args) throws IOException {
ServerSocket ss=new ServerSocket(10000);
Socket socket=ss.accept();
System.out.println(socket.getInetAddress().getHostAddress());
InputStream in=socket.getInputStream();
byte[] buf=new byte[1024];
int len=in.read(buf);
System.out.println(new String(buf,0,len));
PrintWriter out=new PrintWriter(socket.getOutputStream(),true);
out.println("<font color='green' size='7'>注册成功</font>");
socket.close();
ss.close();
}
}
//提交方式：GET
//结果：
//60.176.43.3
//GET /?sex=on&country=china&text= HTTP/1.1
//Accept: image/gif, image/jpeg, image/pjpeg, application/x-ms-application, application/xaml+xml, application/x-ms-xbap, */*
//Accept-Language: zh-CN
//UA-CPU: AMD64
//Accept-Encoding: gzip, deflate
//User-Agent: Mozilla/5.0 (Windows NT 6.2; Win64; x64; Trident/7.0; rv:11.0) like Gecko
//Host: 60.176.43.3:10000
//Connection: Keep-Alive
//提交方式：POST
//结果：
//60.176.43.3
//POST / HTTP/1.1
//Accept: image/gif, image/jpeg, image/pjpeg, application/x-ms-application, application/xaml+xml, application/x-ms-xbap, */*
//Accept-Language: zh-CN
//Content-Type: application/x-www-form-urlencoded
//UA-CPU: AMD64
//Accept-Encoding: gzip, deflate
//User-Agent: Mozilla/5.0 (Windows NT 6.2; Win64; x64; Trident/7.0; rv:11.0) like Gecko
//Host: 60.176.43.3:10000
//Content-Length: 26
//Connection: Keep-Alive
//Cache-Control: no-cache
//
//sex=on&country=china&text=
//在html的区别
/*提交数据方式get和post的区别：
1.get-提交的信息显示在地址栏中
post-不显示在地址栏中
2.get-对于敏感的数据信息不安全
post-安全
3.get-对于大数据不行，因为地址栏存储地址有限
post-可以提交大数据
4.get-信息封装到请求消息的请求行中
post-封装到请求体中
*/
//在服务端的区别
/*
如果出现将中文提交到tomcat服务器，服务器会默认用iso8859-1进行解码，可能会出现乱码
iso8859-1编码，再指定中文码解码
或者用服务端的request对象的setCharacterEncoding方法，
设定指定的中文码，但是只对请求体中的数据进行解码，即post方式提交的数据
html和服务端交互的方式
1.地址栏输入url get
2.超链接 get
3.表单 get+post
*/
/*客户端进行增强型的校验，只要有一个组建内容错误，无法继续提交——全对才能提交
*/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
