Html5的标签及学生档案例题

最新推荐文章于 2022-11-10 11:15:55 发布

wsy_666

最新推荐文章于 2022-11-10 11:15:55 发布

阅读量1.4k

点赞数 2

分类专栏：前端：html5(结构层) 文章标签： Html常用标签及学生档案例题

本文链接：https://blog.csdn.net/wsy_666/article/details/84202141

版权

前端：html5(结构层) 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、html5介绍：

1、网页开发包括：
结构 Html5 、样式 css3 、行为: JS 都有所增强；HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合。
2、书写特点：
①更简洁;
②更宽松:(1)单标签不用写关闭符号
(2)双标签省略结束标签html、head、body、tbody可以完全省略。

在这里插入图片描述

注：开发过程中应该书写规范，不应太随意，避免出错！

二、语义标签：

1、传统网页布局：
头部：

主体部分：

文章：

侧边栏：

底部：

2、常用新语义标签：

注：避免全局使用header、footer、aside等语义标签。
3.表单
(1)email 输入email格式

<input type="email" placeholder="格式：2962294088@qq.com" />只能输入邮件格式

(2)tel 手机号码

手机号：<input type="tel" value="1" />

(3)number 只能输入数字

<input type="number" value="1"/>

(4)search 搜索框
(6)color 拾色器

<input type="color" />请选择颜色

(7)date选择日期：
选择日期

学生档案例题：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.div1{
				width: 150px;
				height: 30px;
				/*border: 1px solid red;*/
				text-align: center;
				line-height: 30px;
				margin: auto;
			}
		</style>
	</head>
	<body>
		
				<fieldset style="width: 230px;height: 300px;background: papayawhip;box-shadow: 2px 3px 5px cornflowerblue;margin: auto;border-radius: 20px; ">
					<legend>学生档案</legend>
						<form>
							姓名:<input type="text" />
							<br />
							<input type="text" placeholder="请输入学校"list="myschool" autofocus="autofocus"/><br />
							<datalist id="myschool">
								<option>西安城市建设</option>
								<option>西安电子科技大学</option>
								<option>西北工业大学</option>
								<option>陕西师范大学</option>
							</datalist>
							<input type="radio" name="rad1"/>男
							<input type="radio" name="rad1"/>女
							<br />
							手机号：<input type="tel" value="1" />
							<br />
							邮箱地址：<input type="email" placeholder="2962294088@qq.com" />
							<br />
							所属学院：<input type="text" value="Android" />
							<br />
							<input type="number" value="1"/>
							
								<select>
									<optgroup label="省份">
										<option>--请选择省份--</option>
										<option>甘肃省</option>
										<option>西安省</option>
										<option>广东省</option>
									</optgroup>
									<optgroup label="市级">
										<option>西安市</option>
										<option>酒泉市</option>
									</optgroup>
								</select>
								<br />
							入学成绩：<input type="text" value="0" />
							<br />
							基础水平：
							<meter value="60" min="0" max="100"></meter>
							<br />
							<input type="submit" value="提交"/>
							<br />
							时间：<input type="time" />
						</form>	
				</fieldset>
				
				
	</body>
</html>

显示结果如下：
在这里插入图片描述

4、多媒体：
(1)、音频：
在这里插入图片描述
可以通过附加属性可以更友好控制音频的播放，如：
(1)autoplay 自动播放
(2)controls 是否显不默认播放控件
(3)loop 循环播放
注：preload 预加载同时设置autoplay时些属性失效
当前audio元素支持三种音频格式：
在这里插入图片描述
多浏览器支持的方案，如下图：

(2)、视频：
width 设置播放窗口宽度
height 设置播放窗口的高度

在这里插入图片描述
同样，通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
当前video元素支持三种视频格式：

wsy_666

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Html5的标签及学生档案例题

一、html5介绍：1、网页开发包括：结构 Html5 、样式 css3 、行为: JS 都有所增强；HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合。2、书写特点：①更简洁;②更宽松:(1)单标签不用写关闭符号(2)双标签省略结束标签html、head、bod...
复制链接

扫一扫