H5_Node1_新标签&新属性& 硬件调用
HTML5简介
‘ HTML5=HTML+CSS+JS＋APIS '
HTML5新功能
新增标签
input新类型及新属性
硬件调用
一、HTML5简介
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改
目标:HTML5取代HTML4和XHTML成为新标准
1、Html5 时间表
2004年--提出构想
2008年--发布第一份草案
2012年--推广阶段
2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。
2、Html5 新特性
新增标签：语义化更好
多媒体功能：video\audio
表单功能增强
新的属性
本地存储、离线存储
获取拖拽内容信息
地理位置信息
canvas画布 ......
3、浏览器支持情况
![]()
新版本的 Safari、Chrome、Firefox 、Opera以及IE10+ 支持大部分HTML5的新特性。IE9 支持部分 HTML5 新特性，IE6 7 8基本都不支持HTML5新特征。
1、新增标签
新增的结构元素----语义化标签
<header>-----定义页眉
<nav>---------定义导航
<article>------定义外部的内容
<section>-----定义章节、区段
<aside>-------定义当前页面或文章的附属信息部分<footer>------定义页脚
<hgroup>-----定义网页标题元素（h1-h6）的组合
<figure>-------定义媒介内容的分组，以及它们的标题
<figcaption>--定义 figure 元素的标题
新标签带来的是网页布局的改变及提升对搜索引擎的友好
2、新增的其他元素
<time>--------定义日期/时间(语义化标签)
<mark>-------定义有记号的文本
<progress>---定义任务的进度
<progress min=“" max=“" value=“”progress>
<datalist>-----定义输入域的选项列表
<option value=“红色1”></option>
<embed>----定义外部交互内容或插件
<audio>------定义声音内容
<video>------定义视频
<source>-----定义媒介源
<canvas>-----定义图形
新增的其他标签
<bdi> <command> <wbr>
<details> <dialog> <keygen> <meter> <output> <summary>
<ruby> <rp> <rt> <track>
被弃用的标签：
<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、 <s>、<isindex>、<noframes>、 <frameset> 、<strike>、<tt>、<u>和<xmp>。
3、input的新属性
placeholder: 占位符，输入框提示信息
required: 该input为必填项
autofocus: 在页面加载时，域自动地获得焦点
pattern: 正则验证 如: pattern="[0-9]{7,12}"
min/max: input能输入的最小/最大字节的长度
step: 针对number和range类型，每次递增step的值
list: 指定一个datalist，作为下拉提示单
list值为datalist标签的id
4、input的新类型
email: 提交表单时检测值是否是一个电子邮件格式
url: 提交表单时检测值是否是一个url格式
date: 年-月-日格式的控件
time: 时:分格式的控件
datetime: 年-月-日 时:分 格式的控件（UTC时间）
datetime-local: 年-月-日 时:分 格式的控件（本地时间）
month: 年-月格式的控件
week: 年-周数格式的控件
number: 数字输入框
range: 选择区域
tel: 电话输入框
search: 用于搜索
color: 调用系统选色器
浏览器兼容
opera对新属性的支持性最好，ie10以下不支持，其他主流浏览器部分支持
5、调用本地硬件
调用本地摄像头
<input type="file" accept="image/*" capture="camera">
调用本地相册
<input type="file" capture="photo">
拨打电话
<a href="tel:110" mce_href="tel:110">报警请使劲戳</a>
发送短信
<a href="sms:13520559717">发短信</a>
‘ HTML5=HTML+CSS+JS＋APIS '
HTML5新功能
新增标签
input新类型及新属性
硬件调用
一、HTML5简介
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改
目标:HTML5取代HTML4和XHTML成为新标准
1、Html5 时间表
2004年--提出构想
2008年--发布第一份草案
2012年--推广阶段
2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。
2、Html5 新特性
新增标签：语义化更好
多媒体功能：video\audio
表单功能增强
新的属性
本地存储、离线存储
获取拖拽内容信息
地理位置信息
canvas画布 ......
3、浏览器支持情况
新版本的 Safari、Chrome、Firefox 、Opera以及IE10+ 支持大部分HTML5的新特性。IE9 支持部分 HTML5 新特性，IE6 7 8基本都不支持HTML5新特征。
1、新增标签
新增的结构元素----语义化标签
<header>-----定义页眉
<nav>---------定义导航
<article>------定义外部的内容
<section>-----定义章节、区段
<aside>-------定义当前页面或文章的附属信息部分<footer>------定义页脚
<hgroup>-----定义网页标题元素（h1-h6）的组合
<figure>-------定义媒介内容的分组，以及它们的标题
<figcaption>--定义 figure 元素的标题
新标签带来的是网页布局的改变及提升对搜索引擎的友好
2、新增的其他元素
<time>--------定义日期/时间(语义化标签)
<mark>-------定义有记号的文本
<progress>---定义任务的进度
<progress min=“" max=“" value=“”progress>
<datalist>-----定义输入域的选项列表
<option value=“红色1”></option>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增标签</title>
<style>
*{margin:0;padding:0;list-style: none;}
body{font-size: 40px;text-align: center;color:#333;}
.wrap{width:1020px;margin:0 auto;overflow:hidden;color:#fff;background: #e3e3e3;font-family: '微软雅黑';margin-bottom: 10px;}
.header{
height:60px;
line-height: 60px;
background: #666;
}
.nv{
height:40px;
line-height: 40px;
font-size: 28px;
margin:10px 0;
background: #666;
}
.article{
overflow: hidden;
}
.section{
width:700px;
height:450px;
float: left;
background: #333;
}
.aside{width:300px;height:450px;float: left;background: #666;margin-left: 20px;}
.footer{height:60px;line-height: 60px;background: #666;margin-top:10px;}
.pic{border:1px solid #333;}
.pic img{width:200px;height:200px;}
progress{width:800px;height:40px;}
input{width:600px;height:40px;}
</style>
</head>
<body>
<div class="wrap">
<div class="header">header</div>
<div class="nv">nav</div>
<div class="article">
<div class="section">section</div>
<div class="aside">aside</div>
</div>
<div class="footer">footer</div>
</div>
<div class="wrap">
<header class="header">header</header>
<nav class="nv">nav</nav>
<article class="article">
<section class="section">section</section>
<aside class="aside">aside</aside>
</article>
<footer class="footer">footer</footer>
</div>
<!-- <hgroup>-定义网页标题元素（h1-h6）的组合 -->
<hgroup>
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
</hgroup>
<div class="pic">
<h3>标题</h3>
<img src="01.jpeg" alt="">
<p>内容内容呢哦</p>
</div>
<!-- <figure>-定义媒介内容的分组，以及它们的标题 -->
<figure class="pic">
<!-- <figcaption>-定义 figure 元素的标题 -->
<figcaption>标题</figcaption>
<img src="01.jpeg" alt="">
<p>内容内容呢哦</p>
</figure>
<!-- <time>-定义日期/时间(语义化标签)
<mark>-定义有记号的文本 -->
<h1><time>2016年10月19日</time>：今天有雾霾，注意<mark>戴口罩</mark>！</h1>
<!-- <progress>-定义任务的进度 -->
<progress id="progress" min="0" max="100" value="0"></progress>
<button id="btn">下载</button><br>
<!-- list->连接选项列表 -->
<!-- list: 指定一个datalist，作为下拉提示单 list值为datalist标签的id -->
<input type="text" list="val">
<!-- <datalist>-定义输入域的选项列表 -->
<datalist id="val">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</datalist>
</body>
<script>
var pro=document.getElementById('progress');
var btn=document.getElementById('btn');
var x=0,timer=null;
btn.onclick=function(){
timer=setInterval(function(){
x++;
if(x>pro.max){
clearInterval(timer);
btn.innerHTML='已下载完成';
}else{
btn.innerHTML='已下载'+x+'%';
}
pro.value=x;
},100)
}
</script>
</html>
<embed>----定义外部交互内容或插件
<audio>------定义声音内容
<video>------定义视频
<source>-----定义媒介源
<canvas>-----定义图形
新增的其他标签
<bdi> <command> <wbr>
<details> <dialog> <keygen> <meter> <output> <summary>
<ruby> <rp> <rt> <track>
被弃用的标签：
<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、 <s>、<isindex>、<noframes>、 <frameset> 、<strike>、<tt>、<u>和<xmp>。
3、input的新属性
placeholder: 占位符，输入框提示信息
required: 该input为必填项
autofocus: 在页面加载时，域自动地获得焦点
pattern: 正则验证 如: pattern="[0-9]{7,12}"
min/max: input能输入的最小/最大字节的长度
step: 针对number和range类型，每次递增step的值
list: 指定一个datalist，作为下拉提示单
list值为datalist标签的id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input新属性</title>
<style>
*{margin:0;padding:0;list-style: none;}
input{
font-size:30px;
color:#333;
}
/*伪元素*/
input::-webkit-input-placeholder{
color:#ccc;
}
/*火狐*/
input::-moz-placeholder{
color:#ccc;
}
/*IE*/
input::-ms-input-placeholder{
color:#ccc;
}
</style>
</head>
<body>
<form action="https://www.baidu.com/">
<!-- placeholder: 占位符，输入框提示信息 -->
<!-- autofocus: 在页面加载时，域自动地获得焦点 -->
<input type="text" placeholder="请输入用户名" autofocus><br>
<!-- pattern: 正则验证 如: pattern="[0-9]{7,12}" -->
<input type="text" placeholder="请输入电话号码" pattern="[0-9]{7,12}"><br>
<!-- required: 该input为必填项 -->
<input type="text" placeholder="请输入身份证" required pattern="[0-9]{12,18}"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
4、input的新类型
email: 提交表单时检测值是否是一个电子邮件格式
url: 提交表单时检测值是否是一个url格式
date: 年-月-日格式的控件
time: 时:分格式的控件
datetime: 年-月-日 时:分 格式的控件（UTC时间）
datetime-local: 年-月-日 时:分 格式的控件（本地时间）
month: 年-月格式的控件
week: 年-周数格式的控件
number: 数字输入框
range: 选择区域
tel: 电话输入框
search: 用于搜索
color: 调用系统选色器
浏览器兼容
opera对新属性的支持性最好，ie10以下不支持，其他主流浏览器部分支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>placeholder</title>
<style>
*{margin:0;padding:0;list-style: none;}
body{
font-size:30px;
}
input{
font-size:30px;
color:#333;
padding:5px;
}
/*伪元素*/
input::-webkit-input-placeholder{
color:#ccc;
}
.range{
padding:0;
}
</style>
</head>
<body>
<form method="get" action="https://www.baidu.com/">
<!-- email: 提交表单时检测值是否是一个电子邮件格式 -->
email:<input type="email" placeholder="请输入email" required>
<input type="submit" value="提交">
</form><br>
<form method="get" action="https://www.baidu.com/">
<!-- url: 提交表单时检测值是否是一个url格式 -->
url:<input type="url" placeholder="请输入网址" required>
<input type="submit" value="提交">
</form><br>
<!-- date: 年-月-日格式的控件 -->
date:<input type="date" required><br>
<!-- time: 时:分格式的控件 -->
time:<input type="time" required><br>
<!-- datetime不支持 -->
<!-- datetime: 年-月-日 时:分 格式的控件（UTC时间）-->
datetime:<input type="datetime" required><br>
<!-- datetime-local: 年-月-日 时:分 格式的控件（本地时间）-->
datetime-local:<input type="datetime-local" required><br>
<!-- month: 年-月格式的控件-->
month:<input type="month" required><br>
<!-- week: 年-周数格式的控件-->
week:<input type="week" required><br>
<!-- number: 数字输入框-->
<!-- min/max: input能输入的最小/最大字节的长度 -->
<!-- step:针对number和range类型，每次递增step的值-->
number:<input type="number" min="0" max="100" step="10" required><br>
<!-- range: 选择区域-->
<!-- min/max: input能输入的最小/最大字节的长度 -->
<!-- step:针对number和range类型，每次递增step的值 -->
range:<input class="range" type="range" max="100" step="10" step="10" value="20"><br>
<form method="get" action="https://www.baidu.com/">
<!-- 无效 -->
<!--tel: 电话输入框-->
tel:<input type="tel" required>
<input type="submit" value="提交">
</form><br>
<!-- 无效 -->
<!-- search: 用于搜索 叉号清空内容-->
search:<input type="search" required><br>
<div>
<!-- color: 调用系统选色器-->
color:<input type="color" id="col">
<span id="txt">您选择的颜色</span>
</div>
</body>
<script>
var col=document.getElementById('col');
var txt=document.getElementById('txt');
txt.innerHTML='您选择的颜色'+col.value;
// input有输入值时触发事件
col.oninput=function(){
txt.innerHTML='您选择的颜色'+col.value;
txt.style.color=col.value;
}
</script>
</html>
5、调用本地硬件
调用本地摄像头
<input type="file" accept="image/*" capture="camera">
调用本地相册
<input type="file" capture="photo">
拨打电话
<a href="tel:110" mce_href="tel:110">报警请使劲戳</a>
发送短信
<a href="sms:13520559717">发短信</a>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>硬件调用</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width,minimum-scale=0.5,maximum-scale=1.0,initial-scale=1,user-scalable=no"/>
<style>
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 20px;
left: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
</style>
</head>
<body>
<!-- 拨打电话 -->
<a href="tel:110" mce_href="tel:110">报警请使劲戳</a>
<br/>
<!-- 发送短信 -->
<a href="sms:13520559717">发短信</a>
<br/>
<!-- 调用本地摄像头 -->
<a href="javascript:;" class="file">摄像头
<input type="file" accept="image/*" capture="camera">
</a>
<br/>
<!-- 调用本地相册 -->
<a href="javascript:;" class="file">相册
<input type="file" capture="photo">
</a>
</body>
</html>