HTML练习

现在的位置: 首页 > 综合 > 正文

2017年10月20日 ⁄ 综合 ⁄ 共 6054字 ⁄ 字号小中大 ⁄ 评论关闭

简单记录一下，这两天的学习，新手，刚看html没两天。如果，你发现问题，请指出：

先上代码：

<HTML>
	<HEAD>
		<TITLE>首 页</TITLE>
	</HEAD>
	<body background="C:\Teacher\images\1.png" width="320" height="480">
	<BODY>
		<FONT FACE="微软雅黑">
		<BR><BR><BR><BR><BR><BR>
		          
		<A ALIGN="CENTER" HREF="file:///C:/Teacher/teacher.html" style="text-decoration:none"><B><BIG>老会员通道</BIG></B></A>
		<BR><BR><BR><BR>
		          
		<A HREF="file:///c:/Teacher/newStrudents.html" style="text-decoration:none"><B><BIG>新会员通道</FONT></BIG></B></A>
	</BODY>
</HTML>

效果图：

注意：超链接除去下划线

点击老会员通道，代码：

<HTML>
	<HEAD>
		<TITLE>教 练</TITLE>
	</HEAD>
	<body background="c:\Teacher\images\3.png" width="320" height="480">
	<BODY>
		<BR><BR>
		<FONT  FACE="微软雅黑">
		<P ALIGN="CENTER" >老会员预约</P>
	<script language="javascript">
	function LocalDateDemo() {
   	var d, s;                      // 声明变量。
   	d = new Date();      // 创建 Date 对象。
   	s = '';               
   	s += d.toLocaleString();       // 转换为当前区域。
   	return(s);                    // 返回转换的日期。
	}
	with(document) {
		writeln('');
		writeln('<FONT FACE="微软雅黑"></FONT>');
		writeln();
		writeln(LocalDateDemo());
	}
	</script>

		<TABLE ALIGN="CENTER" CELLPADDING="5" BORDERRCOLOR="#FF3399" CELLSPACING="0" BGCOLOR="#DEB887" BORDER="5" WIDTH="300">
			<TR ALIGN="CENTER"><TD ROWSPAN="1">教练</TD><TD>今日安排</TD><TD>这周安排</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">张 三</TD><TD>AM9~10</TD><TD>
				<A ALIGN="CENTER" HREF="file:///c:/Teacher/schoolTimetable.HTML" style="text-decoration:none">详细 </A>
			</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">李 四</TD><TD>AM10~11</TD><TD>
				<A ALIGN="CENTER" HREF="file:///c:/Teacher/schoolTimetable.HTML" style="text-decoration:none">详细 </A>
			</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">王 五</TD><TD>PM3~4</TD><TD>
				<A ALIGN="CENTER" HREF="file:///c:/Teacher/schoolTimetable.HTML" style="text-decoration:none">详细 </A>
			</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">赵 三</TD><TD>AM9~10</TD><TD>
				<A ALIGN="CENTER" HREF="file:///c:/Teacher/schoolTimetable.HTML" style="text-decoration:none">详细 </A>
			</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">王小二</TD><TD>PM2~5</TD><TD>
				<A ALIGN="CENTER" HREF="file:///c:/Teacher/schoolTimetable.HTML" style="text-decoration:none">详细 </A>
			</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">王小明</TD><TD>AM10~11</TD><TD>
				<A ALIGN="CENTER" HREF="file:///c:/Teacher/schoolTimetable.HTML" style="text-decoration:none">详细 </A>
			</TD></TR>
			</FONT>
		</TABLE>
	</BODY>
</HTML><HTML>
	<HEAD>
		<TITLE>教 练</TITLE>
	</HEAD>
	<body background="c:\Teacher\images\3.png" width="320" height="480">
	<BODY>
		<BR><BR>
		<FONT  FACE="微软雅黑">
		<P ALIGN="CENTER" >老会员预约</P>
	<script language="javascript">
	function LocalDateDemo() {
   	var d, s;                      // 声明变量。
   	d = new Date();      // 创建 Date 对象。
   	s = '';               
   	s += d.toLocaleString();       // 转换为当前区域。
   	return(s);                    // 返回转换的日期。
	}
	with(document) {
		writeln('');
		writeln('<FONT FACE="微软雅黑"></FONT>');
		writeln();
		writeln(LocalDateDemo());
	}
	</script>

		<TABLE ALIGN="CENTER" CELLPADDING="5" BORDERRCOLOR="#FF3399" CELLSPACING="0" BGCOLOR="#DEB887" BORDER="5" WIDTH="300">
			<TR ALIGN="CENTER"><TD ROWSPAN="1">教练</TD><TD>今日安排</TD><TD>这周安排</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">张 三</TD><TD>AM9~10</TD><TD>
				<A ALIGN="CENTER" HREF="file:///c:/Teacher/schoolTimetable.HTML" style="text-decoration:none">详细 </A>
			</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">李 四</TD><TD>AM10~11</TD><TD>
				<A ALIGN="CENTER" HREF="file:///c:/Teacher/schoolTimetable.HTML" style="text-decoration:none">详细 </A>
			</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">王 五</TD><TD>PM3~4</TD><TD>
				<A ALIGN="CENTER" HREF="file:///c:/Teacher/schoolTimetable.HTML" style="text-decoration:none">详细 </A>
			</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">赵 三</TD><TD>AM9~10</TD><TD>
				<A ALIGN="CENTER" HREF="file:///c:/Teacher/schoolTimetable.HTML" style="text-decoration:none">详细 </A>
			</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">王小二</TD><TD>PM2~5</TD><TD>
				<A ALIGN="CENTER" HREF="file:///c:/Teacher/schoolTimetable.HTML" style="text-decoration:none">详细 </A>
			</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">王小明</TD><TD>AM10~11</TD><TD>
				<A ALIGN="CENTER" HREF="file:///c:/Teacher/schoolTimetable.HTML" style="text-decoration:none">详细 </A>
			</TD></TR>
			</FONT>
		</TABLE>
	</BODY>
</HTML>

效果图：

注意：时间的显示

点击详细后，代码：

<HTML>
	<HEAD>
		<TITLE>教 练</TITLE>
	</HEAD>
	<script type="text/javascript">
	function disp_sure () {
		alert("恭喜你，预约成功！");
	}
	</script>
	<body background="c:\Teacher\images\3.png" width="320" height="480">
	<BODY>
		<FONT FACE="微软雅黑">
		<BR>
		<P ALIGN="CENTER" ><FONT FACE="微软雅黑">赵三教练的课表</FONT></P>
		<TABLE ALIGN="CENTER">
			<TR ALIGN="CENTER"><TD CLOSPAN="3">
				</TD><TD></TD><TD>
			</TD></TR>
		</TABLE>

		<TABLE ALIGN="CENTER" CELLPADDING="5" BORDERRCOLOR="#FF3399" CELLSPACING="0" BGCOLOR="#FFF999" BORDER="5" WIDTH="300">
			
			<TR ALIGN="CENTER" ><TD ROWSPAN="1">星 期</TD><TD>空闲时间</TD><TD>点击预约</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">星期一</TD><TD>AM9~10</TD><TD>
				<A ALIGN="CENTER" HREF="file:///C:/Teacher/appointment.html" style="text-decoration:none">我要预约</B></A>
			</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">星期二</TD><TD>AM10~11</TD><TD>
				<A ALIGN="CENTER" HREF="#" <a href="#" style="text-decoration:none" onclick="javascript:alert('恭喜你，预约成功')" > 我要预约 </a>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">星期三</TD><TD>PM3~4</TD><TD>
				<A ALIGN="CENTER" HREF="#" <a href="#" style="text-decoration:none" onclick="javascript:alert('恭喜你，预约成功')" > 我要预约 </a>
			</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">星期四</TD><TD>AM9~10</TD><TD>
				<A ALIGN="CENTER" HREF="#" <a href="#" style="text-decoration:none" onclick="javascript:alert('恭喜你，预约成功')" > 我要预约 </a>
			</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">星期五</TD><TD>PM2~5</TD><TD>
				<A ALIGN="CENTER" HREF="#" <a href="#" style="text-decoration:none" onclick="javascript:alert('恭喜你，预约成功')" > 我要预约 </a>
			</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">星期六</TD><TD>AM10~11</TD><TD>
				<A ALIGN="CENTER" HREF="#" <a href="#" style="text-decoration:none" onclick="javascript:alert('恭喜你，预约成功')" > 我要预约 </a>
			</TD></TR>
			<TR ALIGN="CENTER"><TD ROWSPAN="1">星期日</TD><TD>AM10~11</TD><TD>
				<A ALIGN="CENTER" HREF="#" <a href="#" style="text-decoration:none" onclick="javascript:alert('恭喜你，预约成功')" > 我要预约 </a>
			</TD></TR>
		</TABLE>
		</FONT>
	</BODY>
</HTML>

效果：

注意：表的练习

点击预约后，代码：

<HTML>
	<HEAD>
		<TITLE>首 页</TITLE>
	</HEAD>
	<body background="C:\Teacher\images\1.png" width="320" height="480">
	<BODY>
		<FONT FACE="微软雅黑" ALIGN="CENTER">
		<BR><BR><BR><BR><BR><BR>
			<P ALIGN="CENTER"><BIG>请输入卡号及密码完成预约！</BIG></P>
				      
				卡号:<input type="text"><BR>
				<BR>
				      
				密码:<input type="PASSWORD"><BR>
				<BR>
				                  

				<A ALIGN="CENTER" ALIGN="CENTER" HREF="#" <a href="#" style="text-decoration:none" onclick="javascript:alert('恭喜你，预约成功')" > <BIG>我要预约</BIG> </a>
			
		</FONT>		
	</BODY>
</HTML>

效果：

注意：输入框，文字、密码

不要喷我，这只是个小练习。我是新手！

【上篇】proteus7 和 keil4 仿真流水灯
【下篇】常用的HTML标签和属性

作者: zombi

该日志由 zombi 于7年前发表在综合分类下，最后更新于 2017年10月20日.
转载请注明: HTML练习 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

HTML练习

作者: zombi

书签

最新文章New

本站推荐

返回首页