HTML5新增标签以及扩展属性

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新增标签以及扩展属性相关推荐

前端基础8：HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签标签名描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
html5 支持php标签吗,HTML5新增标签使用方法
HTML5提供了一些新的元素和属性,例如nav(网站导航块)和footer.这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如au ...
十二、HTML5新增标签特性详解（audio、video、input）
HTML5 第一天一.什么是 HTML5 HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一个新 ...
HTML5新增标签有哪些你知道吗？
html5新增标签 <article>标签定义外部的内容. 比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本.亦或是来自其他外部源内容. HTM ...
HTML5新增的拖拽属性draggable，怎么实现拖拽？
draggable定义和用法: 1.draggable 属性规定元素是否可拖动. 2.提示: 链接和图像默认是可拖动的. 3.提示: draggable 属性经常用于拖放操作. 注意:draggabl ...
[HTML]HTML5新增标签
文章目录前言 1. HTML5 新增的语义化标签 2. HTML5 新增的多媒体标签 2.1 video 标签 2.2 audio 标签 3. HTML5 新增的 input 标签 4. HTML5 ...
HTML5新增标签及废除标签整理
HTML5新增标签及废除标签整理(有些很偏就没有列出) 1>新增的标签 1>section元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面的其他部分,其实就像div,比div更具 ...
HTML5新增标签最有用的总结
HTML5新增标签: 欢迎关注我的github: https://github.com/godkun/blog ##概要 1. HTML5 简介: (HTML5 是目前-2017年来说,是最新的一代H ...
HTML5移动开发的基础与技巧（一）HTML5新增标签及应用场景
HTML5移动开发 HTML5的发展 HTML5 是 W3C 与 WHATWG 合作的结果.WHATWG为 HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 JavaScr ...

HTML5新增标签以及扩展属性

HTML5新增标签以及属性

HTML5新增标签以及扩展属性相关推荐

最新文章

热门文章