Web实验1 HTML基础

最新推荐文章于 2025-02-24 20:25:20 发布
原创 最新推荐文章于 2025-02-24 20:25:20 发布 · 524 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#html #前端

一、实验目的
掌握HbuilderX的开发网页基本操作方法 。
理解并掌握HTML常用标记的使用。
二、实习题目
1.请用所学HTML，完成如下“个人简历 ”页面。
（图片文字不清楚，可放大查看；人物照片可自由选择你所喜欢的图片）
在这里插入图片描述
说明：图片素材来源于互联网，如有侵权，请联系删除。
代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<table>
			<td width="600">
			<span style="float: left;font-size: 18px;font-weight: bold;">姓名</span><!--居左-->
			<span style="float: right;font-size: 10px;">邮箱:xxxxxx@qq.com</span><!--居右-->
		<br />
		<p>
			<span style="float: left;font-size: 14px;">求职意向|新媒体运营</span><!--居左-->
			<span style="float: right;font-size: 10px;">电话:188xxxx1111</span><!--居右-->
		</p>
		<br /><hr /><br />
		<img src="img/bbb.jpg"/><br /><hr /><br /><!--调整图片大小，在src那一句后加入：width="500" height="300"-->
		<!--在学习css之前，实现页面分块，主要使用table，css中的盒子更好用-->
		<table border="1" cellspacing="2" bordercolor="#FFFFFF"><!--边框白色，与背景同色就看不到表格边框-->
			<tr>
				<th width="64">教育背景</th><td>XX大学</td><td>广告学|本科</td>
			</tr>
			<tr>
				<td> </td><td>2016.09-至今</td><td>成绩优异，GPA:3.89/5.0;年纪成绩排名:前10%;获校级一等奖学金。</td>
			</tr>
		</table><br /><hr /><br />
		<table border="1" cellspacing="2" bordercolor="#FFFFFF">
			<tr>
				<th width="64">实习经历</th>
				<td>XX视频|内容运营</td>
			</tr>
			<tr>
				<td></td>
				<td>2018.05-2018.08</td>
			</tr>
			<tr>
				<td></td>
				<td>·负责XX视频动漫频道日常运营，关注国内外热门动漫，结合时下热点策划动漫专题（热血日漫、少女动漫、良心国漫等等）;</td>
			</tr>
			<tr>
				<td></td>
				<td>·负责动漫频道内S+级项目《XXX》的内容运营策划，利用站内资源及站外渠道推广项目：独立完成前期预热海报设计，上线后策划2档专题栏目，撰写社交媒体营销稿件15篇，阅读量累计突破50w，最终视频播放量突破100w;</td>
			</tr>
			<tr>
				<td></td>
				<td>每周梳理用户偏好，输出数据分析报告，提出推荐类目优化建议，月播放时长提升13%。</td>
			</tr>
			<tr>
				<td></td>
				<td>XX新闻|实习编辑</td>
			</tr>
			<tr>
				<td></td>
				<td>2017.07-2018.05</td>
			</tr>
			<tr>
				<td></td>
				<td>·XX新闻客户端日常推送、PUSH推送，每日浏览审核自媒体文章，筛选编辑优质内容，置顶文章点击率稳定在2%（高于往常1.5%的均值）;</td>
			</tr>
			<tr>
				<td></td>
				<td>·独立负责策划栏目XX栏目旗下“XXX”、“XXX”等多个专题活动，个人制作并出镜采访的视频累计播放量达20w，原创文章撰写8篇，阅读量平均5k+。</td>
			</tr>
		</table><br /><hr /><br />
		<table>
			<tr>
				<th>技能&奖项</th>
				<td>技能</td>
				<td>英语能力：英语六级602分</td>
			</tr>
			<tr>
				<td></td>
				<td>奖项</td>
				<td>作品《XXX》获得全国大学生广告艺术大赛铜奖</td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td>纪录片《XXX》获全国《2016 EZ.ART影像大赛》百强</td>
			</tr>
		</table>
	</td>
	</table>
	</body>
</html>

效果图：
在这里插入图片描述
2.利用表格技术制作如下表格。
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div align="center"> <font size="5">校招信息共享表</font></div>
		<font size="2">2019年秋季校园招聘信息共享，欢迎大家互助补充，禁止删除、造假！人品爆灯，秋招必胜！</font>
		<table border="1" cellspacing="0" bordercolor="#FFFFFF">
			<tr bgcolor="aquamarine">
				<th>序号</th><th>企业名称</th><th>行业</th><th>网申地址</th>
				<th>招聘有效期</th><th>校园宣讲会</th><th>宣讲会时间</th>
				<th>宣讲会地址</th><th>是否现场收简历</th>
			</tr>
			
			<tr bgcolor="lightgrey">
				<td>1</td><td>XX有限公司</td><td>人工智能</td>
				<td>XXXXXX</td><td>08/20-10/12</td><td>有宣讲</td>
				<td>2019/09/10 19:00:00</td>
				<td>XX大学XX校区国际会议厅</td><td>是</td>
			</tr>
			
			<tr bgcolor="white">
				<td>2</td><td>XX有限公司</td><td>移动互联网</td>
				<td>XXXXXX</td><td>08/26-10/26</td><td>有宣讲</td>
				<td>2018/09/07 19:00:00</td>
				<td>XX大学南校区XX学院101</td><td>是</td>
			</tr>
			
			<tr bgcolor="lightgrey">
				<td>3</td><td>XX银行</td><td>金融</td>
				<td>XXXXXX</td><td>-</td><td>无宣讲</td>
				<td>——————</td>
				<td>——————</td><td>否</td>
			</tr>
			
			<tr bgcolor="white">
				<td>4</td><td></td><td></td>
				<td></td><td></td><td></td>
				<td></td>
				<td></td><td></td>
			</tr>
			
			<tr bgcolor="lightgrey">
				<td>5</td><td></td><td></td>
				<td></td><td></td><td></td>
				<td></td>
				<td></td><td></td>
			</tr>
			
			<tr bgcolor="white">
				<td>6</td><td></td><td></td>
				<td></td><td></td><td></td>
				<td></td>
				<td></td><td></td>
			</tr>
			
			<tr bgcolor="lightgrey">
				<td>7</td><td></td><td></td>
				<td></td><td></td><td></td>
				<td></td>
				<td></td><td></td>
			</tr>
			
			<tr bgcolor="white">
				<td>8</td><td></td><td></td>
				<td></td><td></td><td></td>
				<td></td>
				<td></td><td></td>
			</tr>
			
			<tr bgcolor="lightgrey">
				<td>9</td><td></td><td></td>
				<td></td><td></td><td></td>
				<td></td>
				<td></td><td></td>
			</tr>
			
		</table>
	</body>
</html>

效果图：
在这里插入图片描述
3.制作本班本学期的课程表。
请在学校教务系统中查看本班课程表。
代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div align="center"> <font size="5">课表查看</font></div>
		<table border="1"  cellspacing="0" bordercolor="#FFFFFF" width="1000" height="200">
			<tr bgcolor="lavender">
				<th>节次/星期</th><th>星期一</th><th>星期二</th><th>星期三</th>
				<th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th>
			</tr>
			<tr>
				<td bgcolor="lavender">
					<table>
						<tr>第1节</tr>
						<tr>第2节</tr>
					</table>
				</td>
				<td></td>
				<td bgcolor="hotpink">《web技术及应用》<br /> XXX，XXX <br /> 北校区，xxx教室</td>
				<td></td><td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td bgcolor="lavender">
					<table>
						<tr>第3节</tr>
						<tr>第4节</tr>
						<tr>第5节</tr>
					</table>
				</td>
				<td bgcolor="aqua">
					《web技术及应用》<br />XXX <br />北校区，xxx教室
				</td>
				<td></td>
				<td bgcolor="khaki">
					《web技术及应用》<br />XXX<br />北校区，xxx教室
				</td>
				<td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td bgcolor="lavender">
					<table>
						<tr>第6节</tr>
						<tr>第7节</tr>
						<tr>第8节</tr>
					</table>
				</td>
				<td></td><td></td>
				<td bgcolor="aqua">
					《web技术及应用》 <br />XXX <br />北校区，xxx教室
				</td>
				<td bgcolor="aquamarine">
					《web技术及应用》<br />XXX<br />北校区，xxx教室
				</td>
				<td></td><td></td><td></td>
			</tr>
			<tr>
				<td bgcolor="lavender">
					<table>
						<tr>第9节</tr>
						<tr>第10节</tr>
					</table>
				</td>
				<td></td><td></td>
				<td bgcolor="aqua">
					《web技术及应用》<br />XXX <br />北校区，xxx教室
				</td>
				<td bgcolor="aquamarine">
					《web技术及应用》<br />XXX<br />北校区，xxx教室
				</td>
				<td></td><td></td><td></td>
			</tr>
			<tr>
				<td bgcolor="lavender">
					<table>
						<tr>第11节</tr>
						<tr>第12节</tr>
						<tr>第13节</tr>
					</table>
				</td>
				<td></td><td></td><td></td>
				<td bgcolor="khaki">
					《web技术及应用》实验课<br />XXX<br />北校区，xxx教室
				</td>
				<td bgcolor="aquamarine">
					《web技术及应用》实验课<br />XXX<br />北校区，xxx教室
				</td>
				<td></td><td></td>
			</tr>
		</table>
	</body>
</html>

效果图：
在这里插入图片描述
4.制作如下图所示表单。
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form method="post" action="ok.do">
			Departing from<input name="departing name" 
			value="Airport code or city name"
			onFocus="if(value==defaultValue){value='';this.style.color='#000'}" 
			onBlur="if(!value){value=defaultValue; this.style.color='#999'}" 
			style="color:#999"/><a href="https://www.baidu.com">Nearby</a><br />
			Destination<input name="destination"
			value="Airport code or city name"
			onFocus="if(value==defaultValue){value='';this.style.color='#000'}"
			onBlur="if(!value){value=defaultValue; this.style.color='#999'}" 
			style="color:#999"/><a href="https://www.baidu.com">Nearby</a><br />
			Dates<input type="radio" name="dates" value="Search exact dates" />Search exact dates<br />
			<input type="radio" name="dates" value="See calendar of lowest fares" />See calendar of lowest fares <br />
			Departure date<input name="departure date"
			value="mm/dd/yyyy"
			onFocus="if(value==defaultValue){value='';this.style.color='#000'}"
			onBlur="if(!value){value=defaultValue; this.style.color='#999'}" 
			style="color:#999"/><br />
			Return date<input name="return date"
			value="mm/dd/yyyy"
			onFocus="if(value==defaultValue){value='';this.style.color='#000'}"
			onBlur="if(!value){value=defaultValue; this.style.color='#999'}" 
			style="color:#999"/><br />
			Adults<select>
			  <option value="1">1</option>
			  <option value="2">2</option>
			  <option value="3">3</option>
			  <option value="4">4</option>
			</select><a href="http://www.airchina.com.cn/cn/service/index.shtml">Chlidren,seniors</a>
			<br />
			<div align="center">
			<a href="http://www.airchina.com.cn/cn/index.shtml" ><strong>Advanced search options</strong></a> <br />
			</div>
			<div align="right">
				<button type="search">Search</button>
			</div>
		</form>
	</body>
</html>

效果图：

想要第二列对齐的友友可以使用表格布局。

电大web开发基础形考5.pdf
02-22
电大web开发基础形考5.pdf
实验一：HTML基础
海洋之心的博客
03-26 1065
DIV、表格、表单
国开电大《WEB开发基础》形考任务1答案实验1实验1：电商网站前端页面内容编写（16分）
05-13
国开电大《WEB开发基础》形考任务1【答案】实验1实验1：电商网站前端页面内容编写（16分）
网页设计与制作实验四CSS盒子模型应用
Annzz123的博客
06-20 2816
只有通过实验才会发现对知识的具体掌握程度，通过本次实验，又一次复习了a标签的各种css样式，复习了float的用法，div的嵌套和背景图像的一些重要设置属性。
深圳大学Web实验一：HTML标签应用
weixin_52828997的博客
03-16 1955
深圳大学基于Web的编程选修课实验一。主要内容为使用html标签快速编写一个个人主页。本实验为课程第一个实验，全部使用原生html和css实现，没有任何复杂的内容，适合零基础初学者。
web程序设计基础实验之 HTML语言
qq_52052302的博客
08-16 418
物联网工程javaweb实验之HTML语言
【Web前端基础】实验1 HTML基础、格式化文本与段落
Lailalalala的博客
07-30 1724
文本与段落标记的应用
【亲测免费】 国开电大《WEB开发基础》形考任务1答案资源推荐
gitblog_09758的博客
10-31 758
国开电大《WEB开发基础》形考任务1答案资源推荐 去发现同类优质开源项目:https://gitcode.com/ 项目介绍 国开电大《WEB开发基础》形考任务1答案资源是一个专为国开电大学生设计的学习辅助工具。该项目提供了形考任务1中实验1的详细答案，帮助学生顺利完成电商网站前端页面内容编写的任务。通过这个资源，学生可以快速掌握实验要求，提升学习效率，同时也能在参考答案的基础上进行独立思考和实践...
Web前端开发——HTML基础
最新发布
2302_81032013的博客
02-24 1237
1HTML是超文本标记语言，用于构建网页结构，由Tim Berners-Lee在1990年创建。HTML5为最新版本通俗易懂一点。
web 实验1
cillin9的博客
04-22 283
使用纯HTML，不使用CSS，利用的table布局模仿PC网页：https://hadoop.apache.org/releases.html。本实验目标为，熟悉前端编程工具，html的基本结构、常用标签的使用。实验报告中写上网页制作的步骤，绘制出表格布局的设计图，并附上重要步骤及结果的截图。5、复制网页图片，在图片上点击右键选择“图片另存为”，使用<img>标记定义图片。4、复制网页链接地址，在链接上点击右键选择“复制链接”，使用<a>标记定义链接。1、创建一个文本文件main.html，用记事本打开。
国开电大《WEB开发基础》形考任务【答案】实验1-5：电商网站前端页面内容编写
weixin_40351820的博客
05-13 4884
实验报告由实验目标、实验环境、实验内容、实验结果、实验体会五个方面构成，其中，实验结果为本阶段编写的网页的运行效果截图。7．除完成设计效果图规定的内容外，还要模仿当前网页设计，自行添加一个自定义的网页内容区域，并用HTML实现其基础内容和结构。根据素材中的设计图，编写网站首页，查询列表页和详情页三个网页的html内容（暂时不用编写CSS代码）3．根据素材中给定的房屋详情页面设计图实现租房详细信息页面的HTML内容。2．根据素材中给定的房源查询页面设计图实现“租房”页面的HTML内容。
纯html的form表单实操练习
m0_64336780的博客
04-05 9617
纯html的form表单实操练习
网页设计与制作实验一HTML基础应用
Annzz123的博客
06-20 5617
通过本次实验，了解HTML文档结构，熟练掌握HTML基本标记及属性，能够运用HTML制作简单的页面。掌握了常用特殊字符标记、到标记的使用、图像的srcwidthheightborder等属性的应用和文本标记和图像标记的混合应用。
网页设计与制作实验六HTML5基础应用
Annzz123的博客
06-21 1764
本次实验学习了html5新标签，熟悉了HTML5页面结构，使用header,footer,nav,section,aside,article标签对页面结构的分化，省去了以往的div结构，关于表单，HTML5新增的input类型可以简单的实现以前需要使用JavaScript才能实现的功能。在HTML5播放视频或者电影不需要其他任何插件，相比之下HTML5方便了很多。版本的更新更大的方便实现了很多功能。
html实验原理及目的,网页设计实验报告_图文
weixin_35901163的博客
05-31 4025
网页设计实验报告_图文更新时间：2017/2/12 11:45:00浏览量：1270手机版JIANGXI AGRICULTURAL UNIVERSITY本 科 课 程 报 告题目： 网页制作实验报告学 院： 软件学院 姓 名： 徐潇 学 号： 20101506 专 业： 软件工程 班 级： 软件1002班 指导教师： 唐建军、胡昶二0一一年...
HTML作业（一）
ll_j_21的博客
10-16 6319
一、 在这里插入代码片
前端面试实操题二：用HTML，CSS写一个三级菜单
qq_45259815的博客
07-23 2692
制作一个三级菜单，html，css，主要用display以及定位position
HTML实验一
张毅轩的博客
04-19 8728
一、实验目的及要求 1. 了解HTML 文档结构，学习如何编写HTML文档；； 2. 初步掌握基本标记的使用；   练习使用HTML中最基本的一些标签，如定义标题、段落及标记文字的显示格式、背景图片、图像、水平线和超链接等。 3. 能够运用文本编辑器制作简单网页。 二、实验环境及相关情况（包含使用软件、实验设备、主要仪器及材料等） 操作系统为Windows XP，应用软件为Macrom
HTML 实操试题（一）
专研计算机网络，数据通信，网络安全，系统集成
12-25 708
【代码】【无标题】
HTML、CSS、JavaScript日常问题整理
qq_43877180的博客
06-12 903
alert("字体加粗已完成")},3000);})})点击我，让我们一起变大吧！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值