一、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元素支持三种视频格式: