超链接顶部位置
列表标签:
<!--HTML注释:列表标签,可用于做目录等
列表标签:<dl> (define list)
上层项目:<dt> (define title)
下层项目:<dd> (define data)
<dl>
<dt>标题</dt>
<dd>数据1</dd>
<dd>数据2</dd>
<dd>数据3</dd>
</dl>
<hr/>
-->
-
标题
- 数据1
- 数据2
- 数据3
有序列表和无序列表:
<!-- 有序列表和无序列表
有序列表:<ol> (ordered list)
无序列表:<ul> (unordered list)
有序无序列表中,条目都:<li> (list item) 表示。
-->
<ol type="a">
<li>有序条目1</li>
<li>有序条目2</li>
<li>有序条目3</li>
</ol>
<ul type="square">
<li>无序条目1</li>
<li>无序条目2</li>
<li>无序条目3</li>
</ul>
<hr/>
- 有序条目1
- 有序条目2
- 有序条目3
- 无序条目1
- 无序条目2
- 无序条目3
表格标签:
<!-- 表格标签:<table>
<table>属性:
height:表格高度
width:表格宽度
border:表框宽度
bordercolor:边框颜色
cellpadding:单元格内边距,单元格内部数据里单元格边框的距离
cellspacing:单元格之间的距离
<tbody>:(table body)表格的下一级标签,不定义也存在。
<caption>表格标题<caption>
<tr>:(table row)行数据标签,注意表格没有列标签
colspan:单元格所占列数
rowspan:单元格所占行数
<td>:(table data)表格单元格数据标签
<th>:(table head)表头,<td>的加粗居中版
-->
<table border=3 bordercolor=red cellpadding=10 cellspacing=10 width=300>
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>
<hr/>
<table border=3 bordercolor=red cellpadding=10 cellspacing=0 width=300>
<tr>
<th colspan=2>个人基本信息</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>
<hr/>
<table border=3 bordercolor=red cellpadding=10 cellspacing=0 width=300>
<tr>
<th rowspan=2>个人基本信息</th>
<th>张三</th>
</tr>
<tr>
<td>25</td>
</tr>
</table>
<hr/>
姓名 | 年龄 |
---|---|
张三 | 25 |
个人基本信息 | |
---|---|
张三 | 25 |
个人基本信息 | 张三 |
---|---|
25 |
超链接中间位置
图片标签:
<!--图片标签,为内部闭合标签
<img src="1.jpg" height="300" width="600" border="10" alt="说明文字" align=""/>
src:源图片文件地址
height:高度
width:宽度
border:边框
alt:说明
align:排列布局
-->
<img src="1.jpg" height="300" width="600" border="10" alt="说明文字" align=""/>
<hr/>
超链接标签:
<!--
超链接标签:<a>
href:(high reference) 链接地址
href属性的值不同,解析的方式也不一样。
如果在值中没有指定任何协议,解析时按照默认file协议解析,如:href="www.baidu.com",不会打开网址,而会按照文件查找。
target:目标资源打开方式
onclick:自定义点击监听事件
-->
1:链接资源<br/>
<a href="1.jpg" target="_blank">链接文件</a><br/>
<a href="http://www.baidu.com" target="_blank">链接网址:http://百度</a><br/>
<a href="mailto:abs@qq.com" target="_blank">链接邮箱</a><br/>
<a href="thunder://wejiafjiefafeklji==">迅雷自定义协议:复仇者联盟</a><br/>
<hr>
2:执行js代码<br/>
<a href="javascript:void(0)" onclick="alert('我弹!')">链接javascript脚本,并定义点击监听事件</a><br/>
<hr/>
3:定位标记<br/>
<a name=top>超链接顶部位置</a><br/>
<a name=mid>超链接中间位置</a><br/>
<a href="#mid">回到中间位置</a><br/>
<a href="#top">回到顶部位置</a><br/>
<hr/>
1:链接资源
链接文件
链接网址:http://百度
链接邮箱
迅雷自定义协议:复仇者联盟
2:执行js代码
链接javascript脚本,并定义点击监听事件
画中画标签:
<!--
画中画标签:<iframe>
可以在页面任意位置打开一个其他页面。
-->
<iframe src="http://www.baidu.com" width="100%">不支持画中画时显示!!</iframe>
<hr/>
不支持画中画时显示!!
框架标签:
放在 <head> 和 <body> 之间
<!--
框架标签:<frameset>
rows:按行划分页面
cols:按列划分页面
-->
<frameset rows="30%,*">
<frame src="top.html"/>
<frameset cols="30%,*">
<frame src="left.html"/>
<frame src="right.html"/>
</frameset>
</frameset>
表单标签:
<!--
表单标签:<form>
action:表单提交的地址
method:表单提交的方式,get或post
<input>:
<input type="text"/>:文本框
<input type="password"/>:密码框
<input type="radio"/>:单选框
同一组单选框使用相同的name来标记,checked="checked"设置默认选项
<input type="checkbox"/>:复选框
<input type="file" name="file"/>:文件选择框
<input type="image" src=""/>:一个用图片显示的比较按钮,漂亮的提交
<input type="reset" value="重置">
<input type="submit" value="提交">:
如果表单的数据需要提交,每个输入框都需要定义name,和默认值value,便于服务端解析
<input type="hidden" name="page" value="1"/>:隐藏按钮,数据不需要客户端知道,但是可以提交到服务器。
<input type="button" value="按钮" onclick="alert('我是一个按钮。')"/>:一个自定义按钮,可以自己在上面添加点击事件。
<select>:下拉框
<option>
<textarea>:文本区域
-->
<form action="http://192.168.43.237:9090" method="post">
<table border="2" bordercolor="red" width="500" cellpadding="10" cellspacing="10">
<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" checked="checked" value="man"/>男
<input type="radio" name="sex" value="woman"/>女
</td>
</tr>
<tr>
<td>选择爱好:</td>
<td>
<input type="checkbox" name="hobby" value="java"/>Java
<input type="checkbox" name="hobby" value="html"/>HTML
<input type="checkbox" name="hobby" value="css"/>CSS
<input type="checkbox" name="hobby" value="dom"/>DOM
</td>
</tr>
<tr>
<td>选择国家:</td>
<td>
<select name="country">
<option value="none">--选择国家--</option>
<option value="cn" selected="selected">--中国--</option>
<option value="usa">--美国--</option>
<option value="en">--英国--</option>
</select>
</td>
</tr>
<tr>
<th colspan="2">
<input type="reset" value="重置"/>
<input type="submit" value="提交">
</th>
</tr>
</table>
</form>
<hr/>
# 自定义web客户端和服务器:
<!--自定义服务器:
import java.io.*;
import java.net.*;
class WebServer
{
public static void main(String[] args) throws Exception
{
ServerSocket ss = new ServerSocket(9090);
Socket s = ss.accept();
System.out.println(s.getInetAddress().getHostAddress());
InputStream in = s.getInputStream();
byte[] buf = new byte[1024];
int len = in.read(buf);
System.out.println(new String(buf,0,len));
PrintWriter out = new PrintWriter(s.getOutputStream());
out.println("<font color='green'>注册成功!</font>");
s.close();
ss.close();
}
}
1:get提交方式
地址栏:http://192.168.43.237:9090/?user=xjy&psw=123&repsw=123&sex=man&hobby=java&hobby=html&country=cn
向服务器提交的数据信息:
GET /?user=xjy&psw=123&repsw=123&sex=man&hobby=java&hobby=html&country=cn HTTP/1
.1
Accept: image/jpeg, application/x-ms-application, image/gif, application/xaml+xm
l, image/pjpeg, application/x-ms-xbap, */*
Accept-Language: zh-CN
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; Trident/7.0; rv:11.0) like
Gecko
UA-CPU: AMD64
Accept-Encoding: gzip, deflate
Host: 192.168.43.237:9090
Connection: Keep-Alive
2:post提交方式
地址栏:http://192.168.43.237:9090/
向服务器提交的数据信息:
POST / HTTP/1.1
Accept: image/jpeg, application/x-ms-application, image/gif, application/xaml+xm
l, image/pjpeg, application/x-ms-xbap, */*
Accept-Language: zh-CN
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; Trident/7.0; rv:11.0) like
Gecko
Content-Type: application/x-www-form-urlencoded
UA-CPU: AMD64
Accept-Encoding: gzip, deflate
Host: 192.168.43.237:9090
Content-Length: 70
Connection: Keep-Alive
Cache-Control: no-cache
user=xjy&psw=123&repsw=123&sex=woman&hobby=java&hobby=html&country=usa
3:get提交方式和post提交方式的区别:
1.
get提交,提交的信息都显示在地址栏中
post提交,提交信息不显示在地址栏中
2.
get提交,对于敏感数据不安全
post提交,数据安全
3.
get提交,对于大数据不行,因为地址栏存储体积有限
post提交,可提交大体积数据
4.
get提交,将信息封装到请求信息的请求行中
post提交,将信息封装到了请求体中
-->
其他标签:
<!--
<b>:粗体
<i>:斜体
<u>:下划线
<sub>:下标
<sup>:上标
<marquee>:滑动窗体
<pre>:保留文字代码原始格式
<div>:封装行数据,有换行
<span>:封装行内数据,没有换行
<p>:段落标签,前后都有空行
-->
这是演示其他常见标签。
x2 x3
我要飞的更高!
class Demo { public static void main(String[] args) { System.out.println("hello world"); } }
div区域1
div区域2
span区域1
span区域2
段落1
段落2
标签分为两大类: 1:块级标签(元素):标签结束后有换行。div p dl ol ul table title 2:行内标签(元素);标签结束后没有换行。font span img input select a