H5新增
一、H5新增type
1、邮箱
<input type=”email” name=”email”>
email类型格式是规定的;name=”email”用来接受邮箱
2、网址
<input type=”url”>
必须包含协议
3、搜索
<input type=”search”>
4、数字
<input type=”number” min=”最小值” max=”最大值” step=”步长(默认是1)”>
只能输入数字。
5、范围(滑块)
<input type=”range” min=”最小值” max=”最大值” value=”当前值” step=”步长(默认是1)>
6、颜色
<input type=”color”>
7、电话
<input type=”tel”>
在PC端的话就跟文本框一样
8、日期
<input type=”date”>
9、周
<input type=”week”>
10、月
<input type=”month”>
11、视频
IE6 7 8不支持
<video src=”movie.mp4” controls>
提示内容。(视频不显示的时候会显现出来)
</video>
行级元素
视频常用格式:mp4、ogg(移动端)、webM(高清格式)
不支持wav
属性:
1)autoplay: 自动播放
2)Width: 宽度
3)Height: 高度
4)Controls 控制面板
5)Loop 循环播放
6)Muted 自动静音
7)Poster=”” 视频播放前显示一张图片
8)Src 必须属性:路径
12、音频
行级元素
支持格式:mp3、ogg、wav
<audio src=”movie.mp3” controls >
提示内容。(音频不显示的时候会显现出来)
</audio>
属性:
1)autoplay: 自动播放
2)Controls 控制面板
3)Loop 循环播放
4)src 必须属性:路径
13、source
作用:给浏览器提供多种视频或者音频的选择
<video>
<source src=”movie.mp4>
<source src=”movie.ogg>
<source src=”movie.webM>
</video>
二、、H5新增属性
Placeholder=”” 默认提示
Autofocus 自动获取焦点,自动被选中,经常被加在第一个。
Required 必填项
Multiple 输入多个,多个内容要用逗号隔开(英文逗号),多配合邮箱和网址使用
Min & max 最小值和最大值,配合数字和范围使用
Minlength 最小长度
Maxlength 最大长度
用户名:<input type=”text” name=”常用的是userName” Placeholder=”用户名/邮箱/手机号”/>
密码:<input type=”password” name=”常用的是password”/>
<input type=”email” name=”email” multiple>
三、语义化标签
1、定义
看到标签知道表示的意思
正确的标签干正确的事情
2、优点
有利于搜索引擎去搜索;有利于屏幕阅读者阅读;有利于开发者维护
3、div+span
<div>没有任何语义的一个盒子</div> 段落元素
<div>没有任何语义的一个盒子</div> 段落元素
<span>没有任何语义的一个盒子</span> 行元素
<span>没有任何语义的一个盒子</span> 行元素
4、新增布局
<div>头部</div>
<div>导航条</div>
<div>
<div>
文章
</div>
<div>
侧边栏
</div>
</div>
<div>页脚</div>
HTML5新增元素IE6 7 8都不支持
以下都是双标记、块级元素:
Header 头部
Nav 导航
Footer 页脚
Aside 侧边栏
Article 文章、帖子、独立的一块
Section 章节
四、HTML5新增标签
1、元素组合
<dl>
<dt>图片</dt>
<dd>描述</dd>
</dl>
<div>
<img src=”图片”>
<p>描述</p>
</div>
<figure>
<img src=”图片”>
<figcaption>描述</figcaption>
</figure>
2、细节
<details>
<summary>标题(默认是详细信息)</summary>
内容(默认是看不见的,只有点开之后才能看)
</details>
块级元素
3、突出显示
高亮显示内容:
<mark>内容</mark>
行级元素
4、刻度
Min:最小值
Max:最大值
Low:最低临界点
High:最高临界点
(低于最低,高于最高的是会变颜色)
Value:当前值
<meter>提示内容(如:您的浏览器不支持刻度)</meter>
行级元素
5、进度条
<progress>提示内容(如:您的浏览器不支持进度条)</progress>
行级元素
6、datalist(数据列表)
必须配合input使用,通过option来显示
<input type=”text” list=”id”>
<datalist id=”id”>
<option value=”内容1”>右侧值</option>
<option value=”内容2”>右侧值</option>
<option value=”内容3”>右侧值</option>
<option value=”内容4”>右侧值</option>
<option value=”内容5”>右侧值</option>
</datalist>
7、画布canvas
得通过js画
可以设置宽高,是行级元素
<canvas></canvas>
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欢迎来到我的小家!</title>
</head>
<body>
<form action="" name="formm" method="get">
<p>
邮箱:<input type="email" name="email">
</p>
<p>
网址:<input type="url">
</p>
<p>
搜索:<input type="search">
</p>
<P>
数字:<input type="number" min="10" max="100" value="50">
</P>
<p>
范围:<input type="range">
</p>
<p>
颜色:<input type="color">
</p>
<p>
日期:<input type="date">
</p>
<p>
周:<input type="week">
</p>
<p>
月份:<input type="month">
</p>
<p>
视频:
<video src="刘耀文-Dont wanna cry (舞蹈版)(标清).mp4" width="300" controls poster="刘耀文.jpg">您的浏览器不支持该视频
</video>
</p>
<p>
音频:
<audio src="刘耀文 严浩翔 .mp3" controls></audio>
</p>
<p>
用户名:<input type="text" name="userName" placeholder="用户名/手机号/邮箱" required>
</p>
<p>
密码:<input type="password" name="password" placeholder="密码" required minlength="6" maxlength="12">
</p>
<p>
<input type="submit" value="登录">
</p>
<p>
<mark>哈哈</mark>哈
</p>
<p>
<meter min="20" low="25" value="50" max="100">您的浏览器不支持刻度</meter>
</p>
<p>
<progress>您的浏览器不支持进度条</progress>
</p>
</form>
</body>
</html>
结果: