目标：
链接标记
<html>
<head>
<title>A链接</title>
</head>
<body>
<pre>
<a href="http://www.ncst.edu.cn" target="_self">转到一个网址：A外部链接</a>
，target可标识为“_self”:当前页面 “_blank”:打开另外一个界面
</pre>
<!--链接到邮箱-->
欢迎您到百纳学习!<br>
有问题请与<a href="mailto:wyf97402@sohu.com">学员服务部-链接到邮箱</a>联系。
<pre>
内部链接
<a href="#1">转到1标记处</a> <a href="#2">转到name为2的标记处</a>
<a name="1"></a>name为1 的地方
<a name="2"></a>name为2的地方
</pre>
</body>
</html>图像标记的使用
<html>
<head>
<title>img插入图片标记</title>
</head>
<body>
<a href="http://www.ncst.edu.cn">
<img src="logo.jpg" alt="欢迎访问" width="600" height="143" border="0" align="middle">
</a>
</body>
</html>表单标记
form容器
<html>
<head>
<title>form容器</title>
</head>
<body>
<form name="form1" method="post" action="...">
您的姓名：
<input name="name" type="text" id="name" size="20">
<input type="submit" name="Submit" value="发送">
</form>
</body>
</html>input参数设定：
<html>
<head>
<title>文本框</title>
</head>
<body>
<form action="..." method="POST">
请填入电话号码：<input type="Text" name="phone" value="" size="10" maxlength="8">
</form>
当行文本框：<input name="username" type="text" size="20"><br>
密码框：<input name="password" type="password" size="20" maxlength="10">
<form action="" method=POST>
<input type=radio name="Fruit" value="Banana" >单选框组1第一<p>
<input type=radio name="Fruit" value="Apple" checked> 单选框组1第二<p>
<input type=radio name="Fruit" value="Orange" > 单选框组1第三<p>
<input type=radio name="Fruit2" value="Apple" checked> 单选框组2第一<p>
<input type=radio name="Fruit2" value="Orange" > 单选框组2第二<p>
</form>
Checkbox复选框
<form action="" method=POST>
<input type=checkbox name="Banana" value="Banana"> Banana<p>
<input type=checkbox name="Apple" value="Apple" checked> Apple<p>
<input type=checkbox name="Orange" value="Orange"> Orange<p>
</form>
SELECT列表框
<form action="" method=POST>
<select name="fruits">
<option value="Banana" >Banana
<option selected value="Apple" >Apple
<option value="Orange" >Orange
</select>
</form>
File文件夹
<form action="" method="POST">
<input type="file" name="upload" size="30" maxlength="100" accept="text/html">
</form>
TEXTAREA文本框
<form action="" method="POST">
<textarea name="comment" rows=5 cols=60>
初始内容
</textarea>
</form>
Submit提交键及Reset清除键
<form action="" method="POST">
<textarea name="comment" rows=5 cols=60>
</textarea><br>
<input type="submit" value="提交">
<input type="reset" value="清除">
</form>
Button的使用
<form action="" method="POST">
<input type="text" size="20" ><br>
<input type="submit" value="提交">
<input type="reset" value="清除">
<input type="Button" value="回前一页" onclick="history.go( -1 );return true;">
</form>
Hidden隐藏表单
<form action="" method="POST">
<input type="text" size="20" ><br>
<input type=hidden name=add value=hoge@hoge.jp>
Here is a hidden element. <br>
<input type="submit" value="提交">
<input type="reset" value="清除">
</form>
控件失效
<form action="" id="cc">
<input type="text" id="cd" disabled>
<input type="submit" value="提交">
<input type="reset" value="清空" disabled>
</form>
</body>
</html>表格标记
<html>
<head>
<title>表格</title>
</head>
<body>
<center>
<table width="400" border="1" cellspace="2" cellpadding="10">
<tr>
<td bgcolor="#FFCCE6" width="50">可自定义每个的尺寸
<td bgcolor="#FFCCE6" width="50">可自定义每个的尺寸
<td bgcolor="#FFCCE6" width="50">可自定义每个的尺寸
<td bgcolor="#FFCCE6">可自定义每个的尺寸
</tr>
</table>
<caption align="center"> 表格的标题</caption>
table:
cellpadding="10"标识边框到字体的距离
border="1"边框宽度
bgcolor="#FFCCE6"背景颜色
cellspacing="0"边框之间的距离，元素边框到表边框，元素边框之间
bordercolor="00FF00"边框颜色
td:
bgcolor="#FFCCE6"背景颜色
colspan="2"横向合并单元格，2表示合并数量
rowspan="2"纵向合并单元格
<table width="60%" border="1" cellpadding="10">
<tr>
<td bgcolor="#FFCCE6">第一行第一列</td>
<td bgcolor="#FFFFC6">第一行第二列</td>
<td bgcolor="#FFCCE6">第一行第三列</td>
<td bgcolor="#FFFFC6">第一行第四列</td>
</tr>
<tr>
<td bgcolor="#FFD9FF">第二行第一列</td>
<td bgcolor="#DAB4B4">第二行第二列</td>
<td bgcolor="#FFD9FF">第二行第三列</td>
<td bgcolor="#DAB4B4">第二行第四列</td>
</tr>
<tr>
<td bgcolor="#FFCCE6" colspan="2" rowspan="2">第一行第一列</td>
<td bgcolor="#FFFFC6">第一行第二列</td>
</tr>
<tr>
<td bgcolor="#FFD9FF">第二行第一列</td>
<td bgcolor="#DAB4B4">第二行第二列</td> >
</tr>
</table>
</center>
</body>
</html>表格的嵌套：
<html>
<head>
<title>tr及td</title>
</head>
<body>
<center>
<table width="60%" border="1" cellspacing="0" cellpadding="2" align="CENTER" bgcolor="#FFC4E1" bordercolor="#0000FF">
<caption align="center" > 表格举例<caption>
<tr>
<td>外部表格第一行第一列</td>
<td>外部表格第一行第二列</td>
</tr>
<tr>
<td>外部表格第二行第一列</td>
<td>
<table width="100%" border="1" cellspacing="0" cellpadding="2" bordercolor="#0000FF">
<tr>
<td>内部表格第一行第一列</td>
<td>内部表格第一行第二列</td>
</tr>
<tr>
<td>内部表格第二行第一列</td>
<td>内部表格第二行第二列</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>表头：表头默认居中加粗
<html>
<head>
<title>th表格栏标题标记</title>
</head>
<body>
<center>
<table border="1" width="60%">
<caption> 用户资料列单</caption>
<tr>
<th>用户名</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>abc</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>bcd</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
</center>
</body>
</html>
扫一扫
366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
