网页设计与制作实验六HTML5基础应用

小孙同学1024

已于 2023-11-21 15:47:31 修改

阅读量1k

点赞数 1

分类专栏：网页设计与制作实验报告文章标签： html5 css html

于 2023-06-21 00:07:20 首次发布

本文链接：https://blog.csdn.net/Annzz123/article/details/131317131

版权

网页设计与制作实验报告专栏收录该内容

10 篇文章 2 订阅

订阅专栏

一、实验目的

1．掌握使用 HTML5 构建页面的方法。

2．掌握 HTML5 新增的元素。

3．掌握 HTML5 的新特性。

二、实验环境

1．硬件：计算机。操作系统： Windows；

2．软件：HBuilder；

三、实验内容

1、HTML5 页面布局

实验步骤

1）新建html文档

2）设置网页标题

3）分别输入header,footer,nav,section,aside,articleHTML5标签，再用css进行设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5新增结构元素</title><!-- 网页标题 -->
		<style>
			header,footer,nav,section,aside,article{
				width: 500px;/* 宽度 */
				margin: 0 auto;/* 居中 */
				display: block;
				text-align: center;/* 文字居中 */
			}
			header,footer{
				height: 30px;
				background-color: aqua;
				color: red;
			}
			nav{
				height: 30px;
				background-color: orange;
			}
			section{
				height: 200px;
			}
			aside{
				width: 30%;
				height: 200px;
				background-color: seagreen;
				float: left;
			}
			article{
				height: 200px;
				background-color: burlywood;
			}
		</style>
	</head>
	<body>
		<header>&lt;header&gt;</header>
		<nav>&lt;nav&gt;</nav>
		<section>
		<aside>&lt;aside&gt;</aside>
		<article>&lt;article&gt;</article>
		</section>
		<footer>&lt;footer&gt;</footer>
	</body>
</html>

2、HTML5 页面元素的应用

实验步骤

1）新建html文档

2）设置网页标题

3）分别输入figure、hgroup、mark、time等元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5新增页面元素</title>
	</head>
	<body>
		<h1>figure元素的应用</h1>
		<figure>
			<figcation>figure元素标题用figcation</figcation>
			<p>figure元素表示文档中一个独立的流，一般是指一个独立的单元，可以使用figcation为figure元素添加标题</p>
		</figure>
		<hr>
		<header>
			<hgroup>
				<h1>hgroup元素</h1>
				<h3>上面是标题1，我是标题3</h3>
			</hgroup>
		</header>
		<hr>
		<h1>mark元素的应用</h1>
		上面的标题是<mark>标题1</mark>
		<hr>
		<h1>time元素的应用</h1>
		<p>今天是国庆节，本消息发布于<time datetime="10/1/2022">2002年10月1日</time>,使用了time元素的datetime属性</p>
		<hr>
		<details>
			<summary>details</summary>
			<hr>
			<h1>menu元素可以与li元素一起使用，表示一个列表。</h1>
			<menu>
				<li>列表1</li>
				<li>列表2</li>
			</menu>
		</details>
	</body>
</html>

3、HTML5 表单

实验步骤

1）新建html文档

2）设置网页标题

3）先用section,aside,article标签分为左右两块，在对应的块内放置相应的表单元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5表单</title>
		<style>
			form{
				width: 500px;
			}
			section{
				width: 1100px;
				height: 200px;
			}
			aside{
				width: 50%;
				height: 200px;
				float: left;
			}
			article{
				height: 200px;
				height: 200px;
				float: right;
			}
		</style>
	</head>
	<body>
		<section>
		<aside>
			<form action="#">
				<fieldset>
					<legend>请输入关键字</legend>
					<input type="search" id="sea" /><!-- 搜索输入框 -->
					<input type="submit" value="提交" />
				</fieldset>
			</form>
			<form action="#">
				<fieldset>
					<legend>请输入邮箱地地址</legend>
					<input type="email" /><!-- email输入框 -->
					<input type="submit" value="提交" />
				</fieldset>
			</form>
			<form action="#">
				<fieldset>
					<legend>请输入网址</legend>
					<input type="url" /><!-- url地址输入框 -->
					<input type="submit" value="提交" />
				</fieldset>
			</form>
			<form action="#">
				<fieldset>
					<legend>请选择出生日期</legend>
					<input type="number" min="1900" max="2022" step="1" value="1990" /><!-- 年数字类型输入框 -->
					<input type="number" min="1" max="12" step="1" value="5" />月
					<input type="number" min="1" max="31" step="1" value="17" />日
					<input type="submit" value="提交" />
				</fieldset>
			</form>
			<form action="#">
				<fieldset>
					<legend>请选择颜色值</legend>
					red:<input type="range" min="0" max="255" value="10" /><br><!-- 数字值输入域 -->
					green:<input type="range" min="0" max="255" value="0" /><br>
					blue:<input type="range" min="0" max="255" value="0" /><br>
					<span>拖动滑条可以改变颜色</span>
				</fieldset>
			</form>
		</aside>
		<article>
			<form action="#">
				<fieldset>
					<legend>请输入固定电话</legend>
					<input type="tel" pattern="^\d{3}-\d{8}|\d{4}-\d{7}$"  /><!-- 验证电话号码输入框 -->
					<input type="submit" value="提交" />
				</fieldset>
			</form><br>
			<form action="#">
				<fieldset>
					请选择颜色：<input type="color" value="#34538B" /><!-- 颜色拾取器 -->
				</fieldset>
			</form><br>
			<form action="#">
				<fieldset>
					<legend>data and time:</legend>
					<input type="date" /><!-- 日期类型 -->
					<input type="time" /><!-- 时间类型 -->
				</fieldset>
			</form>
		</article>
		</section>
	</body>
</html>

4.HTML5 播放视频

实验步骤

1）新建html文档

2）设置网页标题

3）使用HTML5video标签，并搭配source标签引入视频

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5播放视频</title>
	</head>
	<body>
		<video controls="controls" preload="auto" width="800px"><!-- 创建html5视频标签 -->
			<source src="video/云涛-好想告诉她(标清).mp4" type="video/mp4"></source><!-- 引入视频 -->
		</video>
	</body>
</html>

四、实验总结

本次实验学习了html5新标签，熟悉了HTML5页面结构，使用header,footer,nav,section,aside,article标签对页面结构的分化，省去了以往的div结构，关于表单，HTML5新增的input类型可以简单的实现以前需要使用JavaScript才能实现的功能。在HTML5播放视频或者电影不需要其他任何插件，相比之下HTML5方便了很多。版本的更新更大的方便实现了很多功能。

小孙同学1024

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
网页设计与制作实验六HTML5基础应用

本次实验学习了html5新标签，熟悉了HTML5页面结构，使用header,footer,nav,section,aside,article标签对页面结构的分化，省去了以往的div结构，关于表单，HTML5新增的input类型可以简单的实现以前需要使用JavaScript才能实现的功能。在HTML5播放视频或者电影不需要其他任何插件，相比之下HTML5方便了很多。版本的更新更大的方便实现了很多功能。
复制链接

扫一扫