HTML5之新元素

自定义元素

a.先在《head》里写 js定义一下元素
b.再给元素定义样式，
c.在《body》里用新标签
d.为了让旧版本显示新标签，可以在css的display写block

如：
《head》
《script type =" text/script"》
document.createdelement(‘my’);
《/script》
《style type=“text/css”》
my{
dis:block;
background-color:red;
padding:50px;
font-size:50px
}
《/style》
《/head》
《body》
《my》你是好样的《/my》
《/body》

早期版本如何识别html5的新标签

a.在头部标签里加一段js代码
如：
《head》
《！–[if lt IE 9]>
《script src=“http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js”>
《[endif]–》
《head》

音频标签

《audio》
《source》
如：
《body》
《audio》
《source src=“test.pm3” type=“audio/mpeg”》
《/audio》
《/body》

视频

《video》
如：
《body》
《video》
《source src=“test.mp4” type="video/mp4》
《/video》
《/body》

动画

《embed》：动画标签
如：
《body》
《embed src=“test.swf”》
《body》

轨道

《track》:轨道，视频中的字幕轨道

输入框固定查询历史纪录

《 datalist》：输入框固定查询历史纪录,配合input使用
如：
《body》
《input list=“my” name=“my”》
《datalist id=“my”》
《option value=“1”>
《option value=“2”》
《/datalist》
《/body》

《keygen》：密钥对生成器标签，表单提交
如：
《body》
《input type=“text” name=“user_name”》
《keygen name=“dahua”》
《/body》

《canvas》：用于图形的绘制，给id通过js来调用来完成。
如：
《body》
《img src=“1.png” id=“img” width=“200px” height=“200px”》
《canvas id=“mycancvas” width=“300px” height=“300px” style=“border:1px solid red”》
《/canvas》
//蓝色矩形框
《script type=“javascript”》
var c=doctment.getElementById(“mycanvas”);
var cxt = c.getContext(‘2d’）；
cxt.fillStyle=“blue";
cxt.fillRect(0,0,300,300);
《/script》
//射线
《script type=“javascript”》
var c=doctment.getElementById(“mycanvas”);
var cxt = c.getContext(‘2d’）；
cxt.moveTo(0,0);
cxt.lineTo(300,300);
cxt.stroke();
《/script》
//圆形
《script type=“javascript”》
var c=doctment.getElementById(“mycanvas”);
var cxt = c.getContext(‘2d’）；
cxt.beginPath();
cxt.arc(95,50,40,0,2*Math.PI);
cxt.stroke();
《/script》
//实心的文字
《script type=“javascript”》
var c=doctment.getElementById(“mycanvas”);
var cxt = c.getContext(‘2d’）；
cxt.font=“30px Arial”;
cxt.fillText(“hello world”,100,100);
《/script》
//空心的文字
《script type=“javascript”》
var c=doctment.getElementById(“mycanvas”);
var cxt = c.getContext(‘2d’）；
cxt.font=“30px Arial”;
cxt.strokeText(“hello world”,100,100);
《/script》
//颜色从左到右渐变
《script type=“javascript”》
var c=doctment.getElementById(“mycanvas”);
var cxt = c.getContext(‘2d’）；
//创建渐变
var grd=cxt.createLinearGradient(0,0,300,0);
grd.addColorStop(0,“red”);
grd.addColorStop(1,“white”);
//填充渐变
ctx.fillStyle=grd;
cxt.fillRect(10,10,150,85);
《/script》
//从圆心向四周扩散
《script type=“javascript”》
var c=doctment.getElementById(“mycanvas”);
var cxt = c.getContext(‘2d’）；
//创建渐变
var grd=cxt.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,“red”);
grd.addColorStop(1,“white”);
//填充渐变
ctx.fillStyle=grd;
cxt.fillRect(10,10,150,85);
《/script》
//在画布上插入图片
《script type=“javascript”》
var c=doctment.getElementById(“mycanvas”);
var cxt = c.getContext(‘2d’）；
var img = document.getElementById('img);
img.onload = function(){
cxt.dwowImage(img,10,10);
}
《/script》
《/body》

svg

《svg》:用xml描述的 2D图像
如：
《body》
《svg xmlns=“http://www,w3.org/2000/svg” version=“1.1” height=“190”》
《polygon points=“100,10,40,180,190,60,10,60,160,180”
style=“fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;”>
《/svg》
《/body》

《mathML》：在页面上写数学符号或者公式。用xml描述。
如：
《body》
《math xmlns=“http://www.w3.org/1998/math/mathML”》
《mrow》
《msup》《mi》a《mi》《mn》2《mn》《/msup》
《mo》+《/mo》
《msup》《mi》b《mi》《mn》2《mn》《/msup》
《mo》+《/mo》
《msup》《mi》c《mi》《mn》2《mn》《/msup》
《/mrow》
《/math》
《/body》

a2+b2=c2

拖放

《drop》《drag》：拖放;
如：
//在《head》里给div样式,padding从边框多少距离开始显示；
《style type=“text/css”》
#div{
width:300px:height:70px,padding:10px;border：1px solid red;
}
《/style》
《script type=“text/javascript”》
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData(“Text”,ev.garget.id);
}
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData(“Text”);
ev.target.appendchild(document.getElementById(data));
}
《/script》
《body》
《p》请拖动图片到框子里《/p》
《div id=“div1” “drop(event)” “allowdrop(event)”》《/div》
《img src=“1.png” draggable=“true” “drag(event)” width="'336px" height=“70px”》
《/body》

获取地理位置

如：
《body》
《p id=“where”》请获取你的坐标《/p》
《button onclike=“getwhere()”》点我《/button》
《script》
var x = document.getElementById(‘where’);
function getwhere(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}else{
x.innerHTML(‘该浏览器不支持获取地理定位功能’);
}
}

function showPosition(position){
x.innerHTML=“纬度：”+position.coords.latitude+"《br》经度："+position.coords.longitude;
}
《/script》
《/body》

input的新输入类型

《type=“color”》：颜色
《date》：日期
《datetime》：自定义时间
《datetime-local》：时间给日期给时分秒
《email》：邮件
《month》：显示月份和年来选择
《number》：数字选择。
《range》：范围内的数字值,滑块
《search》：定义搜索字段。
《tel》：定义手机号码
《time》：时分的选择
《url》：提交自动检查地址
《week》：选择周和年
如：
《body》
《input type=“color”》
《br》
《input type=“date”》
《br》
《input type=“datetime”》
《br》
《input type=“datetime-local”》
《br》
《input type=“email”》
《br》
《input type=“month”》
《br》
《input type=“number”》
《br》
《input type=“range”》
《br》
《input type=“search”》
《br》
《input type=“tel”》
《br》
《input type=“time”》
《br》
《input type=“url”》
《br》
《input type=“week”》
《/body》

表单新元素

《output》：用于不同的类型的输出
如：
《body》
《form oninput = “x.value = parseInt(a.value) + parseInt(b.value)”》0
《input type=“range” id=“a” value=“50”》100+
《input type=“number” id=“b” value=“50”》=
《output name=“x” for=“a b”》《/output》
《/form》
《/body》

表单新属性

autocomplete :自动完成功能。
如：
《form action=“1.php” autocomplete=“on”》
first-name《input type=“text” 》《br》
last-name《input type=“text”》《br》
email《input type=“email” autocomplete=“off”》《br》
《 input type=”submit“》
《/form》

novalidate:内容无需验证直接提交
如：
《form action=“1.php” method=“post” novalidate》
firstname:《input type=“email” name=“name”》《input type=“sumbit”》
《/form》

autofocus:当页面加载时，输入自动获得焦点。
如：
《form active=“1.php” mothod=“post”》
firstname:《input type=“text” name=“name” autofocus》《input type=“submit”》
《/form》

form：input的输入域属于一个或多个表单。
如：
《body》
《form action=“1.php” method=“post” id=“form1”》
firstname:《input type=“text” name=“name”》 《input type=”submit“》
《/form》
lastname:《input type=“text” name=“da” form=“form1” 》
《/body》

formaction： 跳转到另一个页面，不去表里的给定的页面；
如：
《body》
《form action=“1.php” method=“post”》
firstname:《input type=“text” name=“name”》
《input type=“submit”》
《input type=“submit” formaction=“2.php”》
《/form》
《/body》

formmethod：两个按钮不同的提交方式；
如：
《body》
《form action=“1.php” method=“post”》
firstname:《inpit type=“text” name=“name”》
《input type=""submit》
《input type=“submit” formaction=“2.php” formmethod=“get”》
《/form》
《/body》

formenctype：以什么编码发送到表单。
如：
《body》
《form action=“1.php” method=“post”》
firstname:《input type=“text” name=“name”》
《input type=“submit”》
《input type=“submit” formenctype=“multipart/form-data”》
《/form》
《/body》

formtarget：提交到新的表单。
如：
《body》
《form action=“1.php” method=“post”》
firstname:《input type=“text” name=“name”》
《input type=“submit”》
《input type=“submit” formtarget="_blank"》
《/form》
《/body》

width和height ：input的图片提交按钮
如：
《body》
《form actio=“1.php” method=“post”》
firstname：《input type=“text” name=“name”》
《input type=“image” src=“1.png” width=“100” height=“100”》
《/form》
《/body》

max和mix：数值选择做限制；
《body》
《form action=“1.php” method=“post”》
数字：《input type=“number” name=“name” max=“5” min=“1”》
《input type=“submit”》
《/form》
《/body》

multiple:该属性用于图片提交。
如：
《body》
《form action=“1.php” method=“post”》
图片：《input type=“file” name=“name” multiple》
《input type=“submit”》
《/form》
《/body》

pattern：正则匹配；
如：
《body》
《form action=“1.php” method=“post”》
name:《input type=“text” name=“name” pattern="[A-Za-z]{3}" title=“请按照要求填写”》
《input type=“submit”》
《/form》
《/body》

placeholder：提示输入框填的是什么类型内容
如：
《body》
《form action=“1px” method=“post”》
《input type=“text” name=“name” placeholder=“name”》
《input type=“submit”》
《/form》
《/body》

required ：必填项不能为空：
如：
《body》
《form action=“1.php” method=“post”》
name:《input type=“text” name=“name” required》
《input type=“submit”》
《/form》
《/body》

step：选的数字成倍数
如：
《body》
《form action=1.php"" method=“post”》
name:《input type=“number” name=“name” step=“3”》
《input type=“submit”》
《/form》
《/body》