HTML

HTML:

超文本标记语言,主要有标签组成

列表标签dl、图像标签img、表格标签table、超链接标签href、框架标签frameset、画中画标签iframe、表单标签form

get提交和post提交的区别?

1.get提交:提交的信息都显示在地址栏中

    post提交:提交的信息不显示在地址栏中

2.get提交:对于敏感的数据信息不安全

    post提交:对于敏感信息安全

3.get提交:对于大数据不行,因为地址栏存储体积有限

    post提交:可以提交大体积数据

4.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>
		
		<!--HTML注释:演示列表标签。
		
		列表标签:dl
		
		上层项目:dt
		下层项目:dd : 封装的内容是会被缩进的。 有自动缩进效果。 
		-->
		<dl>
			<dt>上层项目内容</dt>
			<dd>下层项目内容</dd>			
			<dd>下层项目内容</dd>			
			<dd>下层项目内容</dd>			
		</dl>
		
		<hr/>
		<!--有序和无序的项目列表
		
		有序:<ol>
		无序:<ul>
		无论有序和无序,条目的封装用的都是<li>
		而且它们都有缩进效果。 
		
		-->
		<ul type="square">
			<li>无序项目列表</li>
			<li>无序项目列表</li>
			<li>无序项目列表</li>
			<li>无序项目列表</li>
		</ul>
		
		<ol type="a">
			<li>有序的项目列表</li>
			<li>有序的项目列表</li>
			<li>有序的项目列表</li>
			<li>有序的项目列表</li>
		</ol>
		
	</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>
		
		<!--演示图片标签
		img.
		-->
		<img src="imgs\1.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="#0000EE" cellpadding=10 cellspacing=0 width=500>
			<tbody><!--表格的下一级标签是tbody,不定义也存在-->
			<tr>
				<th rowspan=2>个人信息</th>
				<td>张三</td>
			</tr>
			<tr>				
				<td>30</td>
			</tr>
			</tbody>
		</table>
		
		
		<hr/>
		
		<table border=1 bordercolor="#0000EE" cellpadding=10 cellspacing=0 width=500>
			<tr>
				<th colspan=2>个人信息</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>30</td>
			</tr>
		</table>
		<hr/>
		<table border=1 bordercolor="#0000EE" cellpadding=10 cellspacing=0 width=500>
			<caption>表格标题</caption>
			<tr>
				<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.sohu.com.cn" target="_blank">新浪网站</a>
		<hr/>
		<a href="imgs/1.jpg">美女图片</a>
		<hr/>
		<a href="mailto:abs@sina.com">联系我们</a>
		<hr/>
		
	<a href="http://www.xunlei.com/movies/fczlm.rmvb">复仇者联盟</a><br/>
	<a href="thunder://wertyuioasdfghjklwertyuio==">复仇者联盟</a>
	
	<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="111.jpg" height=900 width=400 border=10/>
		<hr/>
		<a name=center>中间位置</a>
		<hr/>
		
		<img src="111.jpg" height=900 width=400 border=10/>
		<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>
	
	
	
	<!--
	定义框架。使用标签frameset
	-->
	
	<frameset rows="30%,*">
		<frame src="top.html" name="top" />
		
		
		<frameset cols="30%,*">
			<frame src="left.html" name="left" />
			<frame src="right.html" name="right"/>
		</frameset>
		
		
	</frameset>
	
	
	
	
	<body>
		
		
	</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>
		<h1>这是我的网站LOGO</h1>
	</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>
		<H3>左边栏连接</H3>
		<a href="../img.html" target="right">链接一</a>
		<a href="../table.html"  target="right">链接一</a>
		<a href="../link.html" target="right">链接一</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>
		<h2> 内容显示区域</h2>
	</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="http://www.xxx.com/1.js" height=0 width=0>这是画中画标签,您如果看到该文字,很遗憾,您的浏览器不支持该标签</iframe-->
		
		<!--a href="a">下载地址1</a>
		<a href="a">下载地址2</a-->
		
		<a href="sadfsdfad"><img src="c:\2.bmp" border=0/></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>
		<!--
		如果要给服务端提交数据,表单中的组件必须有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" name="tech" value="java"/>JAVA
					 <input type="checkbox" name="tech" value="html"/>HTML
					 <input type="checkbox" name="tech" value="css"/>CSS<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>
			
			<textarea name="text"></textarea>
			<br/>
					 
			<input type="reset" value="清除数据"/><input type="submit" value="提交数据" />
		</form>
		
	</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">
		<!--meta http-equiv="refresh" content="3;url=http://www.sina.com.cn" /-->
		<title>Untitled Document</title>
	</head>
	<body>
		<!--
提交方式:get提交。
地址栏:http://10.1.31.69:9090/?user=abc&psw=123&repsw=123&sex=nan&tech=java&tech=html&country=cn
		
GET /?user=abc&psw=123&repsw=123&sex=nan&tech=java&tech=html&country=cn HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */*
Accept-Language: zh-cn,zu;q=0.5
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; InfoPath.2)
Host: 10.1.31.69:9090
Connection: Keep-Alive


提交方式:POST
地址栏:http://10.1.31.69:9090/

POST / HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */*
Accept-Language: zh-cn,zu;q=0.5
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; InfoPath.2)
Host: 10.1.31.69:9090
Content-Length: 68
Connection: Keep-Alive
Cache-Control: no-cache

user=hahah&psw=8989&repsw=8989&sex=nv&tech=html&tech=css&country=usa
		
		
		
		GET提交和POST提交的区别?
		1,
		get提交,提交的信息都显示在地址栏中。
		post提交,提交的信息不显示地址栏中。
		
		2,
		get提交,对于敏感的数据信息不安全。
		post提交,对于敏感信息安全。
		
		3,
		get提交,对于大数据不行,因为地址栏存储体积有限。
		post提交,可以提交大体积数据。 
		
		4,
		get提交,将信息封装到了请求消息的请求行中。
		post提交,将信息封装到了请求体中。
		
		在服务端的一个区别。
		如果出现将中文提交到tomcat服务器,服务器默认会用iso8859-1进行解码会出现乱码,
		通过iso8859-1进行编码,在用指定的中文码表解码。即可。
		这种方式对get提交和post提交都有效。 
		
		但是对于post提交方式提交的中文,还有另一种解决办法,就是直接使用服务端一个对象
		request对象的setCharacterEncoding方法直接设置指定的中文码表就可以将中文数据解析出来。
		这个方法只对请求体中的数据进行解码。 
		
		
		综上所述:表单提交,建议使用post。
		
		
		
		和服务端交互的三种方式:
		1,地址栏输入url地址。get
		2,超链接。 get
		3,表单。 get 和  post
		

		
		如果在客户端进行增强型的校验(只要有一个组件内容是错误,是无法继续提交的。只有全对才可以提交)
		问,服务端数据后,还需要校验吗?
		需要,为了安全性。
		
		如果服务端做了增强型的校验,客户端还需要校验吗?
		需要,因为要提高用户的上网体验效果,减轻服务器端的压力。
		
		
		-->
		
		
		<form action="http://10.1.31.69: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="nan" />男 
						<input type="radio" name="sex" value="nv" />女
					</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>


其他标签:

<!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>
		
		
		<hr/>
		<marquee direction="down" behavior="slide">嘿,原来我会飞!</marquee>
		<b>这是</b><i>演示</i><u>其他</u>常见的小标签。 
		
		X<sub>2</sub> X<sup>2</sup>
		
	</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>
		<div>这是一个div区域1</div>
		<div>这是一个div区域2</div>
		<span>span区域1</span>
		<span>span区域2</span>
		<p>这是一个段落1</p>
		<p>这是一个段落2</p>
		
		<!--
		标签分为两大类。
		1,块级标签(元素):标签结束后都有换行。div p dl table title ol ul 
		2,行内标签(元素):标签结束后没有换行。 font span img input select a
		-->
		<dl>
			<dt>ddddd</dt>
			<dd>eeeee</dd>
		</dl>
		hahahahh
	</body>
</html>








评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值