HTML5之一——新标签
来源:互联网 发布:乐视1s移动数据用不了 编辑:程序博客网 时间:2024/05/29 00:30
语义化标签
页眉
<header>我是页眉</header>
hgroup标签用于页面上的标题组合
<hgroup> <h1>前端世界</h1> <h2>一个令人着迷的领域</h2> </hgroup>
导航栏
<nav>导航栏</nav>
页面上独立完整的一个主体
<article> <section>内容区域(用来划分区域)</section> <aside>侧边栏(和主体相关的附属信息)</aside> </article>
图片说明
<figure> <figcaption>黄浦江上的的卢浦大桥(图片说明)</figcaption> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>
time
<p> 我们在每天早上<time>9:00</time>开始营业。 </p> <p> 我在<time datetime="2008-02-14">情人节</time>有个约会。</p>
页脚
<footer>我是页脚</footer>
功能性标签
datalist: 选项列表与input配合使用;输入时有下拉列表,匹配输入。 (IE10以下不支持 兼容选用select)
<input type="text" list="ValList"><datalist id="ValList"><option>HTML</option><option>CSS</option><option>javascript</option></datalist>
details 描述细节,与summary配合使用
<details><summary>点我显示内容</summary><p>我是内容</p></details>
progress: 定义进度条
<progress max="100" value="76"></progress>
adress: 标签定义文档或文章的作者/拥有者的联系信息。
如果address元素位于body元素内,则它表示文档联系信息。
如果address元素位于article元素内,则它表示文章的联系信息。
address元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行
<address>58同城版权所有@copyright</address>
mark: 黄色高亮内容
<mark>高亮内容</mark>
新型表单类型
mail: 与普通输入框无区别,输入非邮箱格式会有提示
<form><input type="email" /><input type="submit" /></form>
tel: 与普通输入框无区别,移动端会直接切换到数字键盘
<form> <input type="tel" /><input type="submit" /></form>
url: 与普通输入框无区别,输入非网址会提示
<form><input type="url" /><input type="submit" /></form>
search: chrome下输入内容后会出现”x”
<form> <input type="search" /> <input type="submit" /></form>
range: 特定范围内的数值选择器 属性有min; max; step
<form> <input type="range" step="2" min="0" max="100"/></form>
number: 只能包含数字,chrome下输入框会出现上三角与下三角按钮 ie不支持
<form> <input type="number" /> <input type="submit" /></form>
color: chrome下输颜色拾取框 ie不支持
<form> <input type="color" /> <input type="submit" /></form>
datetime: 仅chrome支持
<form> <input type="datetime-local"/> <input type="submit" /></form>
time: 不含时区/仅chrome支持,还包括:date(显示日期);month(显示月份);week(显示第几周);
<form> <input type="time"/> <input type="submit" /></form>
表单新属性
提示属性placeholder
<form> <!-- chrome/firefox/IE10以上支持--> <input type="text" placeholder="请输入4-16个字符"/> <input type="submit" /></form>
自动填充属性autocomplete
<form> <!-- chrome/firefox/IE10以上支持 ,记录用户输入记录,输入相近时提示--> <input type="text" name="user" autocomplete="on"/> <input type="submit" /></form>
提交到其他地址formaction:
<form action="http://www.baidu.com"> <input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="on" /> <input type="submit" value="提交" /> <input type="submit" value="保存至草稿箱" formaction="http://www.qq.com" /></form>
其他属性:pattern(正则验证)/required(必填字段)
[放在前端很不安全]
<form > <input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="on" /> <input type="password" autocomplete="off" pattern="\d{1,5}" required="required"/> <input type="submit" value="提交" /></form>
- HTML5之一——新标签
- html5基础知识——常用标签和新标签
- HTML5新的语义标签——大纲算法
- HTML5新标签
- HTML5 中的新标签
- HTML5 新标签
- HTML5 新标签
- HTML5新标签
- HTML5新标签
- html5新标签
- HTML5 新标签
- Html5新标签注解
- html5新标签
- HTML5 中的新标签
- HTML5新标签
- HTML5新标签
- HTML5新标签
- html5新标签dataList
- Win32类型和.net类型的对应表
- 使用c3p0-0.9.2.1.jar出现NoClassDefFoundErro报错
- [新Android]--FloatingActionButton
- 解析和读取文件
- JAVA23种设计模式(2)-结构型模式7种
- HTML5之一——新标签
- 解决Win10中MSCOMM32.ocx没注册问题
- Android 如何让EditText不自动获取焦点
- excel 导入oracle 发现后台日志突然不写了,程序卡死,也不报错 log4j死锁
- Java和MATLAB混合编程,Java调用MATLAB代码
- 【java基础】静态代理 VS 动态代理
- 销售管理软件助你成功7法
- linux部署sh命令编写
- CanvasEngine