网页开发基础篇-HTML常用标签

<!--无符号列表-->
<dl>
<dt>上层内容<dt>
<dt>上层内容<dt>
<dd>下层内容<dd>
<dd>下层内容<dd>
<dd>下层内容<dd>
<dd>下层内容<dd>
</dl>
<!--有符号列表-->
<!--有序列表-->
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!--无序列表-->
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>

<!--图片标签-->
<img src="1.jpg"  alt="图片说明文字"  height=350 width=500  border=10 />

<!--图像地图-->
当要在图像中选取某一部分作为连接的时候，如：中国地图每个省所对应的区域。map标签和img标签联合使用。href是超链接

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

<table border=1 bordercolor="#0000EE"   cellpadding=10>
<caption>表格标题</caption>
<tr>
<!--colspan:一格占几列，效果同横向合并单元格效果rowspan：一格占几行，效果同纵向合并单元格效果-->
<th  colspan=2>加粗并居中</th>
</tr>
<tr>
<td>第二行第一个单元格</td>
<td>第二行第二个单元格</td>
</tr>
</table>

<!--超链接标签有了属性href才有了点击效果，href属性的值不同，解析方式也不一样。如果在该值中没有指定任何协议，解析时，是按照默认的协议来解析该值的。默认协议是file协议-->\
<!--href="javascript:void(0)" 取消超链接的默认点击效果-->
<a href="http://www.baidu.com"  target="_blank">超链接标签</a>
<!--超链接定位标记，也称为锚-->
<a name="top">顶部位置</a>
<hr/>
<a name="center">中间位置</a>
<hr/>
<a name="bottom ">底部位置</a>
<img src="1.jpg" alt="1.jpg" height=900 width=400 border=5>
<a href="#top">回到顶部位置</a>
<a href="#center">回到中间位置</a>

<!--编写表单-->
<form   action=""  method="post"><!--action指定接受提交数据得服务端，绝对路径相对路径都可以-->
<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="username">
</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"/  checked="checked">男
<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>

对比get和post提交方式的不同：
<!--
提交方式：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

常见的其他标签：
<base>:href属性，指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件
target属性：指定超链接打开方式。如_blank表示所有的超链接都用新窗口打开显示

<meta>:name属性网页的描述信息。当取keywords时，centent属性的内容就作为搜索引擎的关键字进行搜索
http-equiv属性：模拟http协议的响应消息头
<meta http-equiv="refresh"  content="3;url=http://www.sina.com.cn"/>表示打开此页面3秒后自动转到新浪网页
<link>:
rel属性：描述目标文档与当前文档的关系
type属性：文档类型
media：指定目标文档在哪种设备上起作用
<link rel="stylesheet" type="text/css" href="a.css"  media="screen,print">
<marquee direction="down" behavior="alternate" >嘿，原来我会飞~</marquee>
<div>这是一个区域，没有特别的含义，类似的还有span，div换行，span不换行</div>
<p>这是一个段落标签</p>

<!--在页面上任意位置打开一个窗体-->
<iframe src="table.html">这是画中画标签</iframe>

框架：

frame.html:
<!--
定义框架。使用标签frameset
-->

<fram
a70a
eset 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>

left.html
<H3>左边栏连接</H3>
<a href="../img.html" target="right">链接一</a>
<a href="../table.html"  target="right">链接一</a>
<a href="../link.html" target="right">链接一</a>

rigth.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>

top.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>

可以在<frame src="top.html" name="top" />中定义name属性，从而在超链接中设置target属性可以控制跳转到哪个窗体去显示资源