来源：自学PHP网 时间：2015-04-14 14:51 作者： 阅读:次
[导读] 简单复习一下html语言。html的基本结构如下：[html] html head title/title /head body /body /html html是由一系列标签组成的！标签HTML 标签是用来标记......
|
简单复习一下html语言。
html的基本结构如下：
[html]
<html>
<head>
<title></title>
</head>
<body> </body>
</html>
html是由一系列标签组成的！
标签
HTML 标签是用来标记 HTML 元素的。
HTML 标签被 < 和 > 符号包围。
这些包围的符号叫作尖括号。
HTML 标签是成对出现的。例如 <b> 和 </b>。
位于起始标签和终止标签之间的文本是元素的内容。
HTML 标签对大小写不敏感，<b> 和 <B> 的作用的相同的。
规范：标签必须要封闭！
对 HTML 元素的重新认识
每个 HTML 元素都有一个元素名（比如 body、h1、p、br）
开始标签是被括号包围的元素名
结束标签是被括号包围的斜杠和元素名
元素内容位于开始标签和结束标签之间
某些 HTML 元素没有内容
某些 HTML 元素没有结束标签
p,br,b,i,u,hr，h1~h6等简单标签就不解释了，主要记忆以下特殊的标签：
marquee标签：控制文字等内容移动
[html]
<marquee direction="left">会飞的文字</marquee>
sub下标，sup上标：
[html]
<p>m<sub>2</sub></p>
<p>m<sup>2</sup></p>
label标签：
向控件定义标注（标记）。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。譬如：
[html]
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />
<label>Date of Birth: <input type="text" name="DofB" /></label>
当用户点击了Social Security Number这些字之后，光标自动切换到输入框内,而不必点击输入框.
有两种使用方式，一种是通过id控制，即你要控制的控件和label 的for属性值必须相同，另一种方式是将要控制的控件和文字包含到标签内.
列表：
分为有序列表和无序列表：
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
[html]
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
[html]
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
表格：table
基本格式如下
<table border = "1" width = "200px" cellspacing = "0" cellpadding = "2">
<caption>表格标题</caption>
<tr>
<th>aa</th>
<th>bb</th>
</tr>
<tr>
<td>a1</td>
<td>a2</td>
</tr>
</table>
table标签表示一个表格，tr表示表格的边框，td标签表示每个单元格,th下的单元格内容会居中并加粗显示。
table有一系列的属性:align,cellpadding,cellspacing,border,width,height,bgcolor等....
合并行：
[html]
<table border = "1" width = "200px" cellspacing = "0" cellpadding = "2">
<caption>表格标题</caption>
<tr>
<th colspan = "2">aa</th>
</tr>
<tr>
<td>a1</td>
<td>a2</td>
</tr>
</table>
和并列：
[html]
<table border = "1" width = "200px" cellspacing = "0" cellpadding = "2">
<caption>表格标题</caption>
<tr>
<th rowspan = "2">aa</th>
<th>bb</th>
</tr>
<tr>
<td>a2</td>
</tr>
</table>
tbody标签：使用 <tbody> 标签，可以将表格分为一个单独的部分。<tbody> 标签可将表格中的一行或几行合成一组。
相应地还有tfoot标签.
图像标签:img
[html]
<img src="boat.gif" alt="Big Boat" >
src代表图片地址，可以用相对地址也可以用绝对地址，alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。当鼠标放到图片上时会显示该文字.
超链接：a
用法1：转到某个页面，或者邮箱等服务
<a href = http://www.baidu.com targrt = "_blank">百度</a>
用法2：锚,定位
[html]
<a name = "top">顶部</a>
.....
<a href = "#top">回到顶部</a>
target属性有以下值：
_blank
_parent
_self
_top
这个标签表示
在何处打开目标 URL。
表单标签：form
[html]
<html>
<head>
<title>标题</title>
<style type = "text/css">
body{
margin:0;
padding:0;
}
form{
margin : 10px;
padding : 10px;
border : 1px solid blue;
width : 400px;
}
p #myTextarea{
border : 1px solid blue;
display : block;
}
p span{
font-family : "黑体";
font-size : 20px;
}
</style>
</head>
<body>
<div>
<form>
<p>文本框:<input type = "text" name = "user" /></p>
<p>密码：<input type = "password" name = "password"/></p>
<p>单选框:
<!--注意name必须保持一致,放在同一个组中-->
男<input type = "radio" name = "sex" value = "man"/>
女<input type = "radio" name = "sex" value = "woman"/>
</p>
<p>多选框：
<input type = "checkbox" name = "option" value = "1"/>选项1
<input type = "checkbox" name = "option" value = "2"/>选项2
<input type = "checkbox" name = "option" value = "3"/>选项3
<input type = "checkbox" name = "option" value = "4"/>选项4
</p>
<p>
文件上传:
<input type = "file" />
</p>
<p>
<input type = "button" value = "按钮"/>
</p>
<p>
提交<input type = "submit" />
重置<input type = "reset" />
</p>
<p>
<span>这是自定义按钮:</span><input type = "image" src = "start.png"/>
</p>
<p>
<span>下拉菜单：</span>
<select name = "country">
<option value = "none">---选择国家---</option>
<option value = "Englend">英国</option>
<option value = "America">美国</option>
<option value = "China">中国</option>
</select>
</p>
<p>
<span>文本域:</span>
<textarea rows="3" cols="30" id = "myTextarea"></textarea>
</p>
</form>
</div>
</body>
</html>
简单做个表单：
[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>
<style type="text/css">
body,input,mainDiv{
margin : 0;
padding:0;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:bold;
}
body{
margin:auto 250px;}
.style{
border:2px solid black;
}610071131208209
</style>
</head>
<body>
<div id="mainDiv">
<form action="http://127.0.0.1:10001" method="post">
<table border="1" cellspacing="0" bordercolor="#3300FF" width="700" height="400" cellpadding="2px">
<tr>
<th colspan="2" >信息注册页面</th>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" name="user" class="style" />
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name = "password" class="style" />
</td>
</tr>
<tr>
<td>确定密码</td>
<td>
<input type="password" name = "confirmpwd" class="style" />
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="woman"/>女
</td>
</tr>
<tr>
<td>技术</td>
<td>
<input type="checkbox" name="tec" value="java"/>java
<input type="checkbox" name="tec" value="jsp"/>jsp
<input type="checkbox" name="tec" value="servlet"/>servlet
</td>
</tr>
<tr>
<td>国家</td>
<td>
<select name="country">
<option value="none">---选择国家---</option>
<option value="China">中国</option>
<option value="America">美国</option>
<option value="Japan">日本</option>
</select>
</td>
</tr>
<tr >
<td colspan="2" align="center">
<input type="submit" value="提交数据" />
<input type="reset" value="清除数据" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
写一个java服务端测试表单提交：
[java] view plaincopy
import java.io.BufferedInputStream;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.ServerSocket;
import java.net.Socket;
public class Server
{
public static void main(String[] args) throws IOException
{
ServerSocket ss = new ServerSocket(10001);
Socket s = ss.accept();
PrintWriter pw = new PrintWriter(s.getOutputStream(), true );
pw.println( "<font color = red size = 20px>注册</font>" ); //往服务端发数据
BufferedInputStream bufi = new BufferedInputStream(s.getInputStream()); //接收数据
byte [] buff = new byte [1024];
int len = bufi.read(buff);
System. out .println( new String(buff,0,len));
s.close();
ss.close();
} }
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
