HTML5新增标签以及扩展属性
来源:互联网 发布:hbo 知乎 编辑:程序博客网 时间:2024/06/07 01:10
HTML5新增标签以及属性
1. form表单可以和里面的内容分离
<form id=login action=login.php method=post ></form><!-- 给表单一个id属性,给表单要包含的内容一个from属性去引用表单的id --><input type=text name=username from=login /><input type=password name=password from=login />
2. 新增的六个属性
*from =============> 指定所属表单的id
*fromaction =========> 指定发送请求的地址
*frommethod ========>指定发送请求的方式
*placeholder ========>文本框未输入内容时的提示内容
*autofocus =========> 页面打开时就获得焦点
*list===============>指定输入提示列表配合datalist标签使用
<!-- list和datalist配合使用示例 --><input type=text list=mydatalist /><datalist> <option>one</option> <option>tow</option> <option>three</option> <option>four</option></datalist>
*autocomplete=======>是否打开辅助输入 on、off
3.HTML5中改良的input元素的种类
*Search 类型的input是一种专门用来输入搜索关键词的文本框,与text类型仅仅在外观上有区别。但这个外观可以用css改写
<style> input[type="search"] {-webkit-appearance:textfield;}</style>
*tel 被设计为用来输入电话号码的专用文本框,它没有特殊的校验规则,不强制输入数字,可以通过pattern属性来指定对于输入的电话号码格式的验证。
<!-- title属性可以给出提示 -->tel:<input type=tel name=num title="只能输入十一位数字" pattern="^\d{11}$" />
*url是一种专门用来输入url地址的文本框,如果输入不是则不允许提交。
*Email 是一种专门输入email地址的文本框,如果不是则不允许提交,但并不检查是否存在,不加required可以为空。
*Datetime,date,month,week,time,datetime-local类型
<form action=test.php > <!-- datetime主要是检查 没有外观变化 --> Datetime:<input type=datetime name=datetime><br> date:<input type=date name=date /><br> month:<input type=month name=month /><br> week:<input type=week name=week /><br> time: <input type=time name=time /><br> datetime-local:<input type=datetime-local name=local /> </form>
*number类型的input元素是一种专门用来输入数字的文本框,并且在提交时候检查输入的内容是否为数字,它具有min、max和step属性。
<input name="num" type=number value=123 min=10 max=100 step=5 >
*Range是一种只允许输入一段范围内数值的文本框,它具有min、max和step属性默认是0-100
<input name=num2 type=range value=50 min=10 step=5 >
*output 定义不同类型的输出
<!-- range滑动块的值显示在output元素中 --><input type=range value=50 onchange="num.value=value" min=10 max=100 step=5 ><output id=num >50</output> <br>
*Color 用来选择颜色,它提供了一个颜色选择器。
Color:<input type=color name=color >
*File 文件选择框,可以通过指定multiple属性一次性选择多个文件,value的值是一个逗号分隔的一个或多个文件名。同时通过MIME类型指定给accept属性,可以限制选择文件的种类。
file:<input type=file multiple accept="image/*" name=pic >
*novalidate ===========>在form标签里面使用使所有HTML5新增的验证失效
formnovalidate=========>在input元素使用,使改元素HTML5新增验证失效(另外加的验证不会失效如require)
HTML5新增多媒体播放元素
*audio元素用于播放音频文件
<!-- 以下代码则测试你的浏览器是否支持多媒体元素 --><audio>你的浏览器不支持媒体格式!</audio><!-- 处理不同浏览器支持问题 --><audio controls autoplay loop ><!-- controls是否显示页面 autoplay 是否自动播放 loop是否循环播放 --> <source src="test.mp3" type="audio/mp3" /> <source src="test.ogg" type="audio/ogg" /> <source src="test.wav" type="audio/wav" /></audio>
*video元素用于播放视频文件
<video controls autoplay width=500 height=500 > <source src="test.webm" type="audio/webm" /> <source src="test.ogg" type="audio/ogg" /></video>
HTML5新增加标签(部分)
*mark==========>高亮显示标签之间的内容
*wbr===========>软换行,父容器宽度不够时换行,中文看不出太大效果
*progess========>定义任何类型的任务的进度条
*meter==========>定义预定义范围内的度量,仅用于已知最大最小值的度量
*canvas=========>定义图形,绘制路径,矩形,圆形,字符以及添加图像的方法Canvas元素本身没有绘图能力,所有的绘图工作必须在JavaScript内部完成渐变
*command=======>表示命令按钮,如单选按钮,复选框
*details=========>表示拥护要求得到并且可以得到的细节信息
*ruby==========>注释(中文注音或字符)
- HTML5新增标签以及扩展属性
- html5新增标签和属性
- HTML5 form标签新增属性
- HTML5新增标签及属性
- html5新增标签及属性
- HTML5新增标签以及功能
- html5 中一些标签新增的属性
- html5 总结-新增重要标签及属性
- HTML5新增的标签和属性归纳
- HTML5新增的标签及属性
- HTML5新增的标签和属性归纳
- HTML5--新增的标签、属性和事件
- HTML5新增加的标签&表单新增属性
- HTML5新增标签、表单新增类型与属性
- html5 中新添加的标签以及新增表单类型
- HTML5新增标签
- HTML5新增标签简介
- Html5 新增常用标签
- 优化VoIP语音质量
- Kotlin&Anko基础教程大全 一
- ocjp认证的作用
- 下拉框支持输入且可以模糊匹配
- hud6082度度熊与邪恶大魔王(完全背包)
- HTML5新增标签以及扩展属性
- centos 7 部署 open-falcon 0.2.0[原文复制版]
- 查看表创建的sql脚本以及字段注释
- HDU 2616 Kill the monster
- mysql LImit 慢查询报警优化
- mac 有线 QQ能上,但网页不能上
- 当比特币重回新高的时候,业界更关心的是这个神秘的交易员
- 机器学习-朴素贝叶斯
- SQL 语句记录