html练习

<html>
	<head>
	<!--
	Html(Hyper Text Mark-up language)超文本标记语言。
	<head></head>部分最先加载,给Html页面增加一些辅助或者属性信息。
	-->
		<title> html技术总结</title><!--显示在网页项的标题 -->
		<!--设定编码为utf-8-->
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<!--刷新,33秒后跳转到新浪网-->
		<meta http-equiv="refresh" content="330;url=http://www.sina.com.cn"/>
	</head>
	<body>
		<font size="5" color="red" face="楷体">字体标签,size大小1-7</font><br/>
		<h1>一级标题标签,最大</h1><br/>
		<h6>六级标题标签,最小</h6><br/>
		特殊字符:<br/>
		< > & " ® © ™   <br/>
		在html中所有标签都是以字母开头的,如果<>中以字母开头,就会解析;如果以数字开头,那么就原样打印到网页上,不会解析。
		<br/>
		列表标签:<br/>
		<dl>
			<dt>上层项目</dt>
				<dd>下层项目</dd>
				<dd>下层项目</dd>
		</dl><br/>
		<hr/>
		<ol type="a">
			<li>java</li>
			<li>jsp</li>
			<li>ajax</li>
		</ol>
		<ul>
			<li>java</li>
			<li>jsp</li>
			<li>ajax</li>
		</ul>
		<hr/>
		<!--图像标签-->
		<img src="1.jpg" align="middle" border="3" alt="图片说明问题" height="400" width="200"/><br/>
		<!-- 图像地图 -->
		<img src="1.jpg" alt="美女" usemap="#Map"/>
		<map name="Map">
			<area shape="circle" coords=“299,333,55” href="2.gif">
		</map>
		<hr/>
		<!-- 表格标签 -->
		<table border="2" align="center" width="70%" cellspacing="0" cellpadding="10" bordercolor="red">
			<tr align="center">
				<td colspan="5">周瑞峰</td>
			</tr>
			<tr>
				<td rowspan="2">周瑞峰</td>
				<td rowspan="2">周瑞峰</td>
				<td colspan="3" align="center">周瑞峰</td>
			</tr>
			<tr>
				<td colspan="3" align="center">周瑞峰</td>
			</tr>
			<tr>
				<td rowspan="2" colspan="2" align="center">周瑞峰</td>
				<td>周瑞峰</td>
				<td>周瑞峰</td>
				<td>周瑞峰</td>
			</tr>
			<tr>
				<td>周瑞峰</td>
				<td>周瑞峰</td>
				<td>周瑞峰</td>
			</tr>
		</table>
		<hr/>
		对表进行列的操作,搜狗浏览器不支持colgroup,腾讯浏览器可以
		<table width="100%" border="1">
			<colgroup span="2" align="center" color="red"></colgroup>
			<colgroup align="center" style="color:#000000;"></colgroup>
			<tr>
				<td>对列</td>
				<td>对列</td>
				<td>对列</td>
			</tr>
			<tr>
				<td>对列进行操作</td>
				<td>对列进行操作</td>
				<td>对列进行操作</td>
			</tr>
			<tr>
				<td>对列进行</td>
				<td>对列进行</td>
				<td>对列进行</td>
			</tr>
		</table>
		<br/>
		<table width="100%" border="1">
		  <colgroup span="2" align="left"></colgroup>
		  <colgroup align="right" style="color:#00FFFF;"></colgroup>
		  <tr>
			<th>ISBN</th>
			<th>Title</th>
			<th>Price</th>
		  </tr>
		  <tr>
			<td>3476896</td>
			<td>My first HTML</td>
			<td>$53</td>
		  </tr>
		</table>
		<br/>
		<table width="100%" border="1">
		  <colgroup span="2" align="left"></colgroup>
		  <colgroup align="right" style="color:#0000FF;"></colgroup>
		  <tr>
			<th>ISBN</th>
			<th>Title</th>
			<th>Price</th>
		  </tr>
		  <tr>
			<td>3476896</td>
			<td>My first HTML</td>
			<td>$53</td>
		  </tr>
		  <tr>
			<td>2489604</td>
			<td>My first CSS</td>
			<td>$47</td>
		  </tr>
		</table>
		<hr/>
		超链接<br/>
		<a href="http://www.sina.com.cn" target="_blank">新浪</a>
		<a href="">本地文件</a>
		<a name="定位标记">
		<a href="#定位标记">返回到定位标记</a>
		
		<br/>
		<hr/>
		表单标签:<br/>
		<form>
			用户名称:<input type="text" name="username" /><br/>
			用户密码:<input type="password" name="password"/><br/>
			用户性别:<input type="radio" name="sex" value="male"/>男
					   <input type="radio" name="sex" value="female"/>女
					   <br/>
			技术爱好:<input type="checkbox"  name="technology" value="java"/>java
						<input type="checkbox"  name="technology" value="android"/>android
						<input type="checkbox"  name="technology" value="IOS"/>IOS
						<input type="checkbox"  name="technology" value="HTML"/>HTML
						<br />
						<input type="button" value="这是按钮" οnclick="alert('hahah')"/>
						<br/>
						<input type="image" src="1.jpg" height="200" width="150" οnclick="alert('hahah')"/>
						<br/>
			上传文件:<input type="file" /><br/>
			隐藏的数据:<input type="hidden" value="time" name="hidden"/>
			<textarea name="textarea"></textarea><br/>
			选择城市:<select name="city">
							<option value="">请选择城市</option>
							<option value="bj">北京</option>
							<option value="sh">上海</option>
							<option value="sz">深圳</option>
					  </select>
			<br/>
			对下拉列表进行分组:
					<select>
						<optgroup label="北方">
							<option value="beijing">北京</option>
							<option value="dalian">大连</option>
						<optgroup label="南方">
							<option value="shanghai">上海</option>
							<option value="shenzhen">深圳</option>
					</select>
			<br/>
			<input type="submit" value="提交"/>
			<input type="reset" value ="重置"/>
			
		</form>
		
		
		<!-- <pre> 可以将文本内容按在代码区的样子显示在页面上-->
		<pre>
			class Demo
			{
				public static void main(String[] args)
				{
					System.out.println("heellll");
				}
			}
		</pre>
		
		<!--
			<marquee> 让内容动起来。
			Direction(方向) 属性:left right down up 
			Behavior(行为) 属性:scroll alternate slide

		-->
		<br/>
		<marquee direction="left" behavior="scroll">飘呀飘</marquee>
	</body>
</html>


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值