Java语言基础-Html
Html
1.Html就是超文本标记语言的缩写，是最基础的网页语言。
2.Html是通过标签来定义的语言，代码都是有标签行组成。
3.Html代码不区分大小写。
4.Html代码由<html>开始,</html结束>。里面由头部分<head></head>和体部分<body></body>两部分组成。
5..头部分是给Html页面增加一些辅助或者属性信息，它里面的内容最先加载。
6.体部分是真正存放页面数据的地方。
简单的网页示例：
<html>
<head>
<title>这是一个标题网页</title>
<body>
这是<font color="red" size="8">我的</font>网页内容 。<br /><!-换行符->
<hr /><!--分割线-->
这是第二行。
</body>
</head>
</html>
标签的操作思想：
为了操作数据方便，通常需要标签对数据进行封装，通过标签中的属性对封装的数据进行操作。标签相当于一个容器。对容器中的数据进行操作，就是在不断的改变容器的属性值。
常用工具
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <p><font color="#0000FF">这是设计视图的文字</font></p> <p> </p> <p><font color="#FF0000" size="+6">这是演 示的文字</font> <!--空格字符 --> </p> <hr/> <h1>这是一级标题</h1> c<dc>a <!--特殊符号 --> 3<57>2 </body> </html>
列表标签：dl
上层项目：
下层项目：dd标签封装的内容，有自动缩进的效果；
有序和无序的项目列表
有序：<ol>
无序：<ul>
无论有序还是无序，条目的封装用的都是<li>，而且都有缩进效果。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<!--HTML注释：演示列表标签
列表标签：dl
上层项目：dt
下层项目：ds
-->
<dl>
<dt>上层项目内容</dt>
<dd>下层项目内容</dd>
<dt>上层项目内容</dt>
<dd>下层项目内容</dd>
</dl>
<hr/>
<!--有序和无序的项目列表
有序：<ol>
无序：<ul>
-->
<ul type="square">
<li>无序项目列表</li>
<li>无序项目列表</li>
<li>无序项目列表</li>
</ul>
<ol type="a">
<li>有序的项目列表</li>
<li>有序的项目列表</li>
<li>有序的项目列表</li>
</ol>
</body>
</html>
图像标签
<img/>是内部闭合标签
<img src="img.jpg" height=高 width=宽 border=边框 alt="图片说明文字" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--演示图片标签
<img/>是内部闭合标签
--><img src="img.jpg" height=350 width=500 border=10 alt="图片" />
</body>
</html>
表格标签
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<table border=1 bordercolor="#0000FF" cellpadding=10 cellspacing=0 width=500>
<tbody><!--表格的下一级标签是tbody，不定义也默认存在-->
<tr>
<th rowspan=2>个人信息</th><!--colspan=单元格数,合并单元格（列）-->
<td>张三</td>
</tr>
<tr>
<td>30</td>
</tr>
</tbody>
</table>
<hr/>
<table border=1 bordercolor="#0000FF" cellpadding=10 cellspacing=0 width=500>
<tr>
<th colspan=2>个人信息</th><!--colspan=单元格数,合并单元格（行）-->
</tr>
<tr>
<td>张三</td>
<td>30</td>
</tr>
</table>
<hr/>
<table border=1 bordercolor="#0000FF" cellpadding=10 cellspacing=0 width=500>
<!--表格标签-->
<caption>表格标题</caption><!-- 标题标签-->
<tr><!--行标签-->
<th><!--td单元格标签,th则加粗并居中-->姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>39</td>
</tr>
</table>
</body>
</html>
超链接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--
超链接：
作用：链接资源
当有了href属性，才有了点击效果。
href属性的值不同，解析方式也不一样。
如果在该值中没有指定过任何协议，解析时是按照默认的协议进行解析该值。
默认协议是file协议。
-->
<a href="http://www.sina.com.cn/" target="_clanf">新浪网站</a><!--target="_clanf",使用新窗口打开-->
<hr/>
<a href="img.jpg">图片</a>
<hr/>
<a href="mailto:abc@sina.com">联系我们</a><!--mailto:abc@sina.com 浏览器无法解析mailto协议，查找计算机中能解析该协议的引擎-->
<hr/>
<a href="http://www.xunlei.com/movies/fczlm.rmvb">复仇者联盟</a><!--链接资源-->
<br/>
<a href="thunder://sdfjlkwjef==">复仇者联盟</a><!--加密协议，查找能解析该协议的应用程序-->
<hr/>
<a href="javascript:void(0)" onclick="alert('弹出')">这是一个超链接</a><!--取消超链接默认效果，自定义效果-->
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--定位标记
专业术语：锚-->
<a name=top>顶部位置</a>
<hr/>
<img src="1.jpg" height=900 width=400 border=10 alt=abc/>
<hr/>
<a name=center>中间位置</a>
<hr/>
<img src="111.jpg" height=800 width=400 border=10 alt=abc/>
<br/>
<a href="#top">回到顶部位置</a><!--使用#标记位置-->
<a href="#center">回到中间位置</a>
</body>
</html>
画中画标签
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<iframe src="table.html" height=400 width=600>这是画中画标签</iframe>
</body>
</html>
表单组件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--
如果要给服务单提交数据，表单中的组件必须有name和value属性，
用于给服务端获取数据。
-->
<form>
输入名称：<input type="text" name="user" value=""/><br/>
输入密码：<input type="password" name="psw" /><br/>
选择性别：<input type="radio" name="sex" value="nan"/>男 <!--单选时，要分到同一个组-->
<input type="radio" name="sex" value="nv" checked="checked"/>女<br/><!--默认选中-->
选择技术：<input type="checkbox" value="Java"/>Java
<input type="checkbox" name="tech" value="Html"/>Html
<input type="checkbox" name="tech" value="Js"/>Js<br/>
选择文件:<input type="file" name="file"/><br/>
一个图片：<input type="image" src="11.jpg"/><br/><!--图片具有提交效果-->
<!--数据不需要客户端知道，但是可以将其提供到服务器端-->
隐藏组件：<input type="hidden" name="myke" value="myvalue"/><br/>
一个按钮：<input type="button" value="有个按钮" onclick="alert('有个按钮')" /><br/>
<select name="country"><!--下拉菜单-->
<option value="none">--选择国家--</option>
<option value="usa">美国</option>
<option value="en">英国</option>
<option value="cn" selected="selected">中国</option>
</select>
<br/>
<textarea name="text"></textarea>
<br/>
<input type="reset" name="tech" value="清除数据" /><input type="submit" value="提交数据" />
</form>
</body>
</html>
GET和POST
GET提交和POST提交的区别：
1.GET提交，提交的信息都显示在地址栏中，
POST提交，提交的信息不显示在地址栏中；
2.GET提交，对于敏感的数据信息不安全，
POST提交，对于敏感的信息安全；
3.GET提交，对于大数据不支持，因为地址栏存储空间有限，
POST提交，可以提交大体积数据。
4.GET提交，将信息封装到了请求消息的请求行中，
而POST提交，将信息封装到了请求体中。
服务端GET和POST区别：
如果将中文提交到Tomcat服务器，服务器默认使用iso8859-1进行解码，出现乱码。
通过iso8859-1重新进行编码，再用指定的中文码表解码即可。
这种方式对GET和POST提交都有效。
但是对于POST提交方式提交的中文，还有另一种解决方法：
直接使用服务端的一个对象request对象的setCharacterEncoding方法，
直接设置指定的中文码表，就可以将中文数据解析出来。
这个方法只对请求体中的数据进行解码。
综上所述：表单提交，建议使用POST。
和服务端交互的三种方式：
1.地址栏输入url地址：GET方式
2.超链接：GET方式
3.表单：GET和POST
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--
提交方式：GET提交
地址栏内容：
http://192.168.0.101:9090/?user=abc&psw=123&repsw=123&sex=male&tech=Java&country=cn
GET /?user=abc&psw=123&repsw=123&sex=male&tech=Java&country=cn HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Referer: http://127.0.0.1:8000/day29_html/reg.html
Accept-Language: zh-CN
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Accept-Encoding: gzip, deflate
Host: 192.168.0.101:9090
Connection: Keep-Alive
提交方式：post
地址栏：
http://192.168.0.101:9090/
POST / HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Referer: http://127.0.0.1:8000/day29_html/reg.html
Accept-Language: zh-CN
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Win64; x64; Trident/5.0)
Content-Type: application/x-www-form-urlencoded
UA-CPU: AMD64
Accept-Encoding: gzip, deflate
Host: 192.168.0.101:9090
Content-Length: 66
Connection: Keep-Alive
Cache-Control: no-cache
user=chenchong&psw=1234&repsw=1234&sex=female&tech=CSS&country=usa
-->
<form action="http://192.168.0.101:9090/" method="post">
<table border="1" bordercolor="#0000FF" cellpadding="10" cellspacing="0" width="600">
<tr>
<th colspan="2">注册表单</th>
</tr>
<tr>
<td>用户名称：</td>
<td><input type="text" name="user"></td>
</tr>
<tr>
<td>输入密码：</td>
<td><input type="password" name="psw"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="repsw"></td>
</tr>
<tr>
<td>选择性别：</td>
<td><input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女</td>
</tr>
<tr>
<td>选择技术：</td>
<td>
<input type="checkbox" name="tech" value="Java">Java
<input type="checkbox" name="tech" value="Html">Html
<input type="checkbox" name="tech" value="CSS">CSS
</td>
</tr>
<tr>
<td>选择国家：</td>
<td>
<select name="country">
<option value="none">--选择国家--</option>
<option value="usa">美国</option>
<option value="en">英国</option>
<option value="cn">中国</option>
</select>
</td>
</tr>
<tr>
<th colspan="2">
<input type="reset" value="清除数据"/>
<input type="submit" value="提交数据"/>
</th>
</tr>
</table>
</form>
</body>
</html>
服务端和客户端校验的问题：
如果在客户端进行了增强型的校验（只要有一个组件内容是错误的，是无法进行提交的）
问：服务端收到数据后，是否还需要校验？
需要：为了安全性。
如果服务端做了增强型的校验，客户端是否需要校验？
需要：因为要提高用户的上网体验；减轻服务器的压力。
其他标签
<meta http-equiv="refresh" content="3;url=http://www.sina.com.cn/"/>
3秒钟自动跳转到http://www.sina.com.cn/
<meta http-equiv="refresh" content="3"/> 该页面3秒钟刷新一次
<b></b> 加粗
<i><i/> 斜体
<u></u> 下划线
X<sub>2</sub> 上标
X<sup>2</sup> 下标
<marquee direction="down" behavior="alternate">Hey,原来我会飞</marquee>
文字动起来
<pre></pre> 能够保留代码的格式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<pre>
class Demo
{
public static void main(String[] args)
{
System.out.println("Hello!");
}
}
</pre>
<marquee direction="down" behavior="slide">Hey,原来我会飞</marquee>
<b>这是</b><i>演示</i><u>其他</u>常见的小标签
X<sub>2</sub>X<sup>2</sup>
</body>
</html>
XHTML是可扩展的超文本标记语言（Extensible HyperText Makeup Language）
XML是可扩展标记语言（Extensible Makeup Language）
XML是对数据信息的藐视。HTML是数据显示的描述。
XML代码规定的更为严格。如：标签不结束被视为错误。
XML规范可以被更多的应用程序解释，将成为一种通用的数据交换语言。
各个服务器，框架都将XML作为配置文件。
标签的分类
<div></div> 区域标签，没有含义，只封装数据。有换行，封装整行区域。
<span></span>区域标签，没有含义，只封装数据。无换行，封装行内区域。
<p></p>段落标签有换行，前后有空行。
标签分为两大类：
1.块级标签（元素）：标签结束后，都有换行。div、p、dl、table、title、ul、ol
2.行内标签（元素）：标签结束后，没有换行。font、span、img、input、selected、a
浙公网安备 33010602011771号