HTML2-进阶

目标:

链接标记

<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>&nbsp;&nbsp;<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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值