Java Web 程序设计 第三章 HTML基础

3.2 HTML简介

1.HTML简介--核心知识点

3.3常用标签

1.HTML常用标签--核心知识点

2.学习任务--诗歌鉴赏

设计下图所示的静态网页: poem.html。

poem.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML常用标签</title>
</head>
<body>
	<h1>山行</h1>
	<h2>杜牧</h2>
	<font size="4" face="黑体">
	远上寒山石径斜,白云深处有人家。<br/>
	停车坐爱枫林晚,霜叶红于二月花。
	</font>
	<hr width="280" align="left" color="red" size="3">
	<p>
	<b>注释</b><br>
	<ol>
		<li>山行:在山中行走。</li>
		<li>寒山:指深秋时候的山。</li>
		<li>径:小路。</li>
		<li>白云深处:白云升腾、缭绕和漂浮种种动态,也说明山很高。</li>
		<li>斜:此处读xiá,为伸向的意思。</li>
		<li>坐:因为。</li>
	</ol>
</body>
</html>

3.4表格标签

1.HTML表格标签--核心知识点

2.学习任务--求职表格设计

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人简历</title>
</head>
<body>
	<table border="1">
		<!-- <tr>
			<td align="center" height="25" width="378"><font size="4"><b>个人简历</b></font></td>
		</tr>
	</table> -->
	<caption><font size="4"><b>个人简历</b></font></caption>
	<!-- <table border="1"> -->
		<tr height="25">
			<td width="80" align="center">姓名</td>
			<td width="100" align="center"></td>
			<td width="80" align="center">籍贯</td>
			<td width="100" align="center"></td>
		</tr>
		<tr height="25">
			<td align="center">性别</td>
			<td align="center"></td>
			<td align="center">民族</td>
			<td align="center"></td>
		</tr>
		<tr height="25">
			<td align="center">年龄</td>
			<td align="center"></td>
			<td align="center">学历</td>
			<td align="center"></td>
		</tr>
		<tr height="25">
			<td align="center">出生年月</td>
			<td align="center"></td>
			<td align="center">专业</td>
			<td align="center"></td>
		</tr>
		<tr height="25">
			<td align="center">身高</td>
			<td align="center"></td>
			<td align="center">电子邮箱</td>
			<td align="center"></td>
		</tr>
		<tr height="25">
			<td align="center">毕业院校</td>
			<td align="center"></td>
			<td align="center"></td>
			<td align="center"></td>
		</tr>
		<tr height="25">
			<td align="center">家庭住址</td>
			<td align="center"></td>
			<td align="center"></td>
			<td align="center"></td>
		</tr>
		<tr height="25">
			<td align="center" >联系电话</td>
			<td align="center"></td>
			<td align="center"></td>
			<td align="center"></td>
		</tr>		
		<tr height="70">
			<td align="center">计算机水平</td>
			<td align="center" colspan="3"></td>
		</tr>
		<tr height="35" >
			<td align="center" rowspan="2">工作经验</td>
			<td align="center" colspan="3"></td>
		</tr>
		<tr height="35">
			<td align="center" colspan="3"></td>
		</tr>
		<tr height="220">
			<td align="center">自我评价</td>
			<td align="center" colspan="3"></td>
		</tr>
	</table>
</body>
</html>

3.5表单标签

1.HTML表单标签-- 核心知识点

2.学习任务--注册页面设计

设计下图所示的静态网页: registe.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签的应用</title>
</head>
<body>
	<b>欢迎注册</b>
	<br><br>
	<form>
		输入账号(文本框)<input type="text">
		<br>
		输入密码(密码框)<input type="password">
		<br>
		选择性别(单选按钮)<input type="radio" name="sex" checked>男	<!--如果没有name属性,将变为多选;checked属性默认为男 -->
					<input type="radio" name="sex">女
		<br>
		选择爱好(复选框)<input type="checkbox">唱歌					<!--checkbox本就为复选,所以不需要name值-->
					<input type="checkbox">跳舞
					<input type="checkbox" checked>打球
					<input type="checkbox">游戏
		<br>
		选择籍贯(下拉菜单)<select size="2" multiple>		<!--size属性显示能看到的选项数量,multiple属性可以多选-->
						<option>北京</option>
						<option>山海</option>
						<option>广州</option>
						<option>重庆</option>
					</select>
		<br>
		<input type="submit" value="提交">
		<input type="reset" value="重置">	
	</form>
</body>
</html>

3.6其他标签

1.HTML其他标签--核心知识点

2.学习任务--网页框架应用

制作如下静态网页: index.html、menu.html、content.html。

index.html 

<!DOCTYPE html>
<html>
	<frameset rows="10%,80%">
		<frame src="menu.html" name="menu"></frame>
		<frame src="content.html" name=content></frame>
	</frameset>	
</html>

menu.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<a href="poem.html">诗歌欣赏</a>
	<a href="registe.html">注册</a>
	<a href="resume.html">简历</a>
</body>
</html>

content.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h2>欢迎光临本网站</h2>
	</body>
</html>

3.7 CSS样式

1.CSS技术--核心知识点

2.学习任务--CSS技术应用

制作下图所示的静态网页:css.htmI

css.htmI

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器实例</title>
	<style type="text/css">
		.red{color:red}
		.green{color:green}
		.font18{font-size:18px}
		#bold{font-weight:bold}
		#font24{font-size:24px}
	</style>
</head>
<body>
	<h1 class="red">标题一:class="red",设置文字为红色</h1>
	<p class="green font18">段落一:class="green font18",设置文字为绿色,字号为18px。</p>
	<p class="red font18">段落二:class="red font18",设置文字为红色,字号为18px。</p>
	<p id="bold">段落1:id="bold",设置粗体文字。</p>
	<p id="font24">段落2:id="font24",设置字号为24。</p>
	<p id="font24">段落3:id="font24",设置字号为24。</p>
	<p id="bold font24">段落4:id="bold font24",同时设置粗体和字号为24。</p>
</body>
</html>

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值