H5_Node1_新标签&新属性& 硬件调用

来源：互联网发布：灰度共生矩阵 svm 编辑：程序博客网时间：2024/05/22 04:33

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新特征。

二、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>

<!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>

0 0