文档章节

HTML5新增标签(二)

博为峰教研组
 博为峰教研组
发布于 2016/12/22 11:05
字数 328
阅读 5
收藏 0

table新增

table新增以下标签

<table summary="财务表格" border="1"><!--summary让浏览器识别-->

    <caption>财务表格</caption>

    <colgroup>

        <col width="*"><!--*自动平均分配-->

        <col width="*">

        <col width="*">

        <col width="*">

    </colgroup>

    <tr>

        <th>1</th>

        <th>2</th>

        <th>3</th>

        <th>4</th>

    </tr>

    <tr>

        <td>01</td>

        <td>02</td>

        <td>03</td>

        <td>04</td>

    </tr>

</table>

表单新增

表单新增以下标签

姓名:<input autofocus pattern="[a-z]" id="userName" type="text" maxlength="6" placeholder="请输入姓名">

<!-- required必填项   disabled禁用项    pattern正则验证  maxlength最大长度 -->

年龄:<input type="number" max="18" min="12" step="2" >

阙值:<input type="range" id="range"  max="200" min="100" step="10" >

<!--max为最大年龄    min为最小年龄  step表示以step值进行递增-->

电话号码:<input type="tel" /> <!-- 在移动端会调用9宫格的数字键盘 -->

<!-- 只能输入数字类型 在移动端会调用9宫格的数字键盘 -->

网址:<input type="url"> <!-- 校验网址 -->

Email: <input type="email"><!-- 校验邮箱 -->

颜色:<input type="color" > <!-- 拾色器 -->    

日历1:<input type="date">    

月历1:<input type="month">    

周历1:<input type="week">    

小时历1:<input type="time">    

日历2:<input type="datetime-local"> <!-- UTC时间 -->    

<progress value="50" max="100"></progress>

<button type="submit"> 提交 </button>

 

带输入功能的下拉

<input type="text" list="name" /><!--list名须与 datalist id名一致-->

<datalist id="name">

    <option value="程序猿" />

    <option value="产品狗" />

</datalist>

 

 

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
HTML4 和 HTML5 的10个关键区别

HTML5是HTML标准的下一个版本。越来越多的程序员开始HTML5来构建网站。如果你同时使用HTML4和HTML5的话 ,你会发现用HTML5从头构建,比从HTML4迁移到HTML5要方便很多。虽然HTML5没有完全颠覆...

虫虫
2011/10/13
89.7K
14
HTML中标签的rel属性的含义_HTML5新增属性值

HTML中<a>标签有个rel属性,这篇文章简要介绍下rel属性的含义、Value,及在HTML5中新增的一些属性值。 1、rel属性定义: <a>标签的rel属性用于指出当前文档与被链接文档的关系。仅在有href属...

囧南风囧
2012/08/24
0
0
从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
07/24
0
0
微信小程序 Html2Wxml4J 0.95 更新,支持 Video 和 Audio 解析

html2wxml4J是微信小程序前端html渲染组件html2wxml的后台接口Java版 本次更新内容: 【新增】Video视频标签解析 支持html5中Video标签大部分属性 支持自动播放 支持静音播放 【新增】Audio...

山东-小木
08/07
1K
3
sessionStorage和localStorage的使用

sessionStorage和localStorage都是前端浏览器端用于缓存数据的, sessionStorage:会话级别缓存,是H5的新增的一个会话存储对象,用于临时保存同一标签页的数据,当关闭浏览器或标签页时,数...

李阳-kevin
10/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android :报错Your project path contains non-ASCII characters.

报错内容如下 Your project path contains non-ASCII characters. This will most likely cause the build to fail on Windows. Please move your project to a different directory. See ht......

lanyu96
9分钟前
0
0
[LintCode] Number of Islands(岛屿个数)

描述 给一个01矩阵,求不同的岛屿的个数。 0代表海,1代表岛,如果两个1相邻,那么这两个1属于同一个岛。我们只考虑上下左右为相邻。 样例 在矩阵: [ [1, 1, 0, 0, 0], [0, 1, 0, 0, ...

honeymose
9分钟前
0
0
Nginx平滑添加模块

Nginx已经编译安装并运行了一段时间, 然后某一天, 发现需要用到某个模块但当初没有编译, 这个时候怎么办呢? 卸载重新安装肯定可以的, 如果Nginx版本没有变更的话, 则有一个相对平滑的方法来添...

老菜鸟0217
14分钟前
1
0
spark安装测试

spark安装测试 由于本地已经安装好hadoop相关组件,所以本文是在yarn的基础上对spark进行安装及测试 确保hdfs及yarn成功启动,hadoop版本为2.7.3 安装scala,由于本人安装的spark是2.4.0,对应...

-九天-
27分钟前
3
0
周末看完了《电能计量自动化技术》

整体质量还行,下面分别将心得记录如下: 第一章:发展历程可以看看,现在算是智能电网阶段 2:讲主站系统。以文件进行各模块的交互很值得思考,尤其是批量数据,多团队合作的情况下。另外线...

max佩恩
47分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部