Html5新增特性

Html5新增特性

新增标记

<command type=""></command>定义命令按钮

以下两个属于状态交互元素，value属性用于设置元素展示的实际数值，默认为0，min和max属性是元素展示的最小和最大值，low和hight属性是元素展示的最低和最高值，范围在min-max之间

<meter value="" min="" max=""low="" hight="" ...></meter>定义数值条
<progress value="" min="" max="" low="" hight="" ...></progress>定义进度条

速度120km

油量120km

定义日期或时间

定义元素的摘要

...

...

定义元素的细节，常与

标记配合 details初始时只会显示summary中的内容，当用户单击details元素时，会展开显示details元素的所有内容

<details>
   <summary>河北农业大学</summary>
   <p>河北农业大学是一所全日制本科学校</p>
</details>

河北农业大学

河北农业大学是一所全日制本科学校

<figure></figure>定义媒介内容的分组，以及它们的标题
<p>...<mark>突出的文本</mark></p>给文本加背景色以突出显示
<ruby>ruby注释<rt>解释</rt></ruby>定义ruby语言的注释，定义ruby注释的解释
xml<wbr>http<wbr>request页面不足时，一个单词内字母换行的位置

页面结构标记

<header></header>头部
<footer></footer>脚步
<nav></nav>导航
<section></section>分区
<article></article>文章（主栏）
<aside></aside>左侧栏

新增表单标记和属性

 <input>标记新增类型
网址输入框  <input type="url">输入网址的文本框
E-mail输入框 <input type="email">输入E-mail地址的文本框
数字输入框 <input type="number">输入数字的文本框，并可设置输入值的范围

范围滑动条 <input type="range">可拖动滑动条，用于改变一定范围的数字

20199

日期选择框 <input type="date">可选择日期的文本框

搜索选择框 <input type="search">输入搜索关键字的文本框

##新增公共属性 设置元素自动获得焦点 使用正则表达式验证input元素的内容 设置文本输入框中的默认内容 验证文本框内容是否为空，为空，在表单提交时，显示错误信息 提交表单时不验证表单或输入框的内容 设置表单或输入框是否具有自动完成功能，属性值on或off ##新增表单元素 datalist元素

辅助表单中文本框的数据输入，该元素本身是隐藏的，需要与文本框的list属性绑定，只有将list属性值设置为datalist元素的ID即可

<input type="text" id="zhiye" list="career"/>  
<datalist id="career">
   <option value="医生"></option>
   <option value="护士"></option>
</datalist>

output元素

在页面中显示各种不同类型的表单元素的内容或运算后的结果,需要配合onFormInput事件使用

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

0100+=

keygen元素

用于生成网页的密钥

     <keygen name="userinfor" keytyp="rsa"/>

新增多媒体标记

video

src属性用于指定视频文件的路径和文件名，width和height属性设置视频的显示大小，controls属性用于设置是否显示控制条,设置视频的文件地址

 浏览器支持<video>标记，则支持H。264，则显示第一个视频，如果支持<video>标记，也支持ogg,则显示第二个视频，如果不支持<video>，也不支持flash,则显示下载视频的链接
  <video width="" height="">
    <source src="move.mp4">
    <source src="move.ogv">
    <object data="move.swf">
      <a href="move.mp4">download</a>
   </object>
 </video>

audio

 <audio width="" height="">
   <source src="song.ogg" type="audio/ogg">  
   <source src="song.mp3" type="audio/mpeg">
   你的浏览器不支持audio标记
 </audio>

以上两者共同的属性

 autoplay:媒体文件在网页打开后自动播放
 controls:播放界面下面会出现滚动条
 loop:媒体文件循环播放
 preload:媒体文件在页面加载时加载，并且预播放，如果有autoplay则忽略该属性

canvas

创建canvas元素，并定义元素的ID，设置元素的宽高
    <canvas id="mycanvas" width="" height=""></canvas>
通过js获取canvas元素，并绘制图形
   <script>
      var c = document.getElementById("mycanvas");
      var cxt = c.getContext("2d");  //getContext()方法返回一个用于在画布上绘图的环境，目前只是2d
      var img = new Image();
      img.src="images/car.jpg"//指定图像文件的URL
      cxt.drawImage(img,10,10,540,460);//从坐标点10，10开始装载图片，drawImage方法用于在画布上定位图像，并规定图像的宽和高
      cxt.fillStyle="#fff";//设置填充颜色
      cxt.fillRect(0,0,150,75);//绘制图形
      cxt.moveTo(10,10);//将画笔移动到坐标位置
      cxt.lineTo(150,150);//产生线条
      cxt.lineTo(10,50);
      cxt.stroke();
  </script>

取消的标记（主要的）

 字体标记：<font>,<b>,<center>,<marquee>等，被css取代
 java小程序嵌入标记:<applet>
 框架标记：<frameset>,<frame>