首页 > Web开发 > 详细

Html5新增特性

时间:2019-02-26 17:29:35      阅读:171      评论:0      收藏:0      [点我收藏+]

Html5新增特性

新增标记

<video src="" width="" ...></video>插入视频
<audio src="" width="" ...></audio>插入音频
*<canvas id="" width="" ...></canvas>画布标记,用来绘制图形
<command type=""></command>定义命令按钮
<datalist id=""></datalist>定义输入框的附带下拉列表

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

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

速度120km

油量120km

<time datatime =""></time>定义日期或时间
<summary></summary>定义元素的摘要
<details><summary>...</summary>...</details>定义元素的细节,常与<summary>标记配合

details初始时只会显示summary中的内容,当用户单击

元素时,会展开显示
元素的所有内容

<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 autofocus="true">设置元素自动获得焦点
<input pattern="正则表达式">使用正则表达式验证input元素的内容
<input placeholder="默认内容">设置文本输入框中的默认内容
<input required="true">验证文本框内容是否为空,为空,在表单提交时,显示错误信息
<input novalidate="true">提交表单时不验证表单或输入框的内容
<input autocomplete="no">设置表单或输入框是否具有自动完成功能,属性值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"/>

取消的标记(主要的)

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

加油!

Html5新增特性

原文:https://www.cnblogs.com/HQY110/p/10438749.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!