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

最新推荐文章于 2022-10-18 13:24:14 发布

君弈

最新推荐文章于 2022-10-18 13:24:14 发布

阅读量428

点赞数

分类专栏： Java Web 程序设计文章标签： java web

本文链接：https://blog.csdn.net/m0_43443133/article/details/105378759

版权

Java Web 程序设计专栏收录该内容

24 篇文章 9 订阅

订阅专栏

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
评论
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...
复制链接

扫一扫