Html5的标签及学生档案例题

一、html5介绍：

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

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

二、语义标签：

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

主体部分：

文章：

侧边栏：

底部：

2、常用新语义标签：

表示导航

表示页眉

表示页脚 表示区块

表示文章 如文章、评论、帖子、博客

表示侧边栏 如文章的侧栏 表示媒介内容分组 与 ul > li 做个比较

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

只能输入邮件格式

(2)tel 手机号码

手机号：

(3)number 只能输入数字

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

请选择颜色

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

学生档案例题：

	
		
		
		
	
	
		
				

					
学生档案
						

							姓名:
							

							

							
							男
							女
							

							手机号：
							

							邮箱地址：
							

							所属学院：
							

							
							
								
									
										--请选择省份--
										甘肃省
										西安省
										广东省
									
									
										西安市
										酒泉市
									
								
								

							入学成绩：
							

							基础水平：
							
							

							
							

							时间：
						
	
				
				
				
	

显示结果如下：

4、多媒体：
(1)、音频：

可以通过附加属性可以更友好控制音频的播放，如：
(1)autoplay 自动播放
(2)controls 是否显不默认播放控件
(3)loop 循环播放
注：preload 预加载 同时设置autoplay时些属性失效
当前audio元素支持三种音频格式：

多浏览器支持的方案，如下图：

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

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