一、基本表格：

表格标记<table>,行标记<tr>,单元格标记<td>

基本语法：

<table>

    <tr>

        <td>单元格内文字</td>

        <td>单元格内文字</td>

        ......

    </tr>

        <tr>

        <td>单元格内文字</td>

        <td>单元格内文字</td>

        ......

    </tr>

        ......

</table>

示例代码：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8"/>

 <title>第9章</title>

 </head>

 <style type="text/css">

 body {

   font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

   color: #4f6b72;

   background: #E6EAE9;

 }

 a {

   color: #c75f3e;

 }

 #mytable {

   width: 700px;

   padding: 0;

   margin: 0;

 }

 caption {

   padding: 0 0 5px 0;

   width: 700px;

   font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

   text-align: right;

 }

 th {

   font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

   color: #4f6b72;

   border-right: 1px solid #C1DAD7;

   border-bottom: 1px solid #C1DAD7;

   border-top: 1px solid #C1DAD7;

   letter-spacing: 2px;

   text-transform: uppercase;

   text-align: left;

   padding: 6px 6px 6px 12px;

   background: #CAE8EA url(images/bg_header.jpg) no-repeat;

 }

 th.nobg {

   border-top: 0;

   border-left: 0;

   border-right: 1px solid #C1DAD7;

   background: none;

 }

 td {

   border-right: 1px solid #C1DAD7;

   border-bottom: 1px solid #C1DAD7;

   background: #fff;

   font-size: 11px;

   padding: 6px 6px 6px 12px;

   color: #4f6b72;

 }

 td.alt {

   background: #F5FAFA;

   color: #797268;

 }

 th.spec {

   border-left: 1px solid #C1DAD7;

   border-top: 0;

   background: #fff url(images/bullet1.gif) no-repeat;

   font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

 }

 th.specalt {

   border-left: 1px solid #C1DAD7;

   border-top: 0;

   background: #f5fafa url(images/bullet2.gif) no-repeat;

   font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

   color: #797268;

 }

 </style>

 <body>

 <table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">

 <caption>The technical specifications of the Apple PowerMac G5 series</caption>

   <tr>

     <th scope="col" abbr="Configurations">设置</th>

     <th scope="col" abbr="Dual 1.8">1.8GHz</th>

     <th scope="col" abbr="Dual 2">2GHz</th>

  <th scope="col" abbr="Dual 2.5">2.5GHz</th>

   </tr>

   <tr>

     <th scope="row" abbr="Model" class="spec">lipeng</th>

     <td>M9454LL/A</td>

     <td>M9455LL/A</td>

     <td>M9457LL/A</td>

   </tr>

   <tr>

     <th scope="row" abbr="G5 Processor" class="specalt">mapabc</th>

     <td class="alt">Dual 1.8GHz PowerPC G5</td>

     <td class="alt">Dual 2GHz PowerPC G5</td>

     <td class="alt">Dual 2.5GHz PowerPC G5</td>

   </tr>

   <tr>

     <th scope="row" abbr="Frontside bus" class="spec">Lennvo</th>

     <td>900MHz per processor</td>

     <td>1GHz per processor</td>

     <td>1.25GHz per processor</td>

   </tr>

   <tr>

     <th scope="row" abbr="L2 Cache" class="specalt">Black</th>

     <td class="alt">512K per processor</td>

     <td class="alt">512K per processor</td>

     <td class="alt">512K per processor</td>

   </tr>

 </table>

 </body>

 </html>

二、让表格没有凹凸感

没有样式的情况下，表格边框是凹凸的，可以使用cellspacing和cellpadding来取消凹凸感。cellspacing是td与td之间的距离，而cellpadding是单元格内部内容与单元格边界之间的空白距离的大小。

例如：

 <table border="1" cellpadding="0" cellspacing="0">

     <tr>

         <th>单元格内的标题</th>

         <th>单元格内的标题</th>

     </tr>

     <tr>

         <td>单元格内的文字</td>

         <td>单元格内的文字</td>

     </tr>

     <tr>

         <td>单元格内的文字</td>

         <td>单元格内的文字</td>

     </tr>

 </table>

三、添加表头th

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

     <meta content="yes" name="apple-mobile-web-app-capable" />

     <meta content="black" name="apple-mobile-web-app-status-bar-style" />

     <meta name="format-detection" content="telephone=no" />

     <title>第9章</title>

     </head>

 <body>

 <table cellspacing="0">

     <tr>

         <th>序号</th>

         <th>歌曲名</th>

         <th>演唱</th>

     </tr>

     <tr>

         <th>01</th>

         <td>小苹果</td>

         <td>筷子兄弟</td>

     </tr>

     <tr>

         <th>02</th>

         <td>匆匆那年</td>

         <td>王菲</td>

     </tr>

     <tr>

         <th>03</th>

         <td>喜欢你</td>

         <td>G.E.M.邓紫棋</td>

     </tr>

     <tr>

         <th>04</th>

         <td>当你老了</td>

         <td>莫文蔚</td>

     </tr>

 </table>

 <body>

 </body>

 </html>

为了更进一步区分表头与内容，对表格进行样式设计，顺便添加<thead>,<tbody>,<tfoot>标签为表格完善结构，更进一步区别不同部分：

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

     <meta content="yes" name="apple-mobile-web-app-capable" />

     <meta content="black" name="apple-mobile-web-app-status-bar-style" />

     <meta name="format-detection" content="telephone=no" />

     <title>第9章</title>

 <style type="text/css">

 th {

 font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

 color: #4f6b72;

 border-right: 1px solid #C1DAD7;

 border-bottom: 1px solid #C1DAD7;

 border-top: 1px solid #C1DAD7;

 letter-spacing: 2px;

 text-transform: uppercase;

 text-align: left;

 padding: 6px 6px 6px 12px;

 background: #CAE8EA url(images/bg_header.jpg) no-repeat;

 }

 td {

 border-right: 1px solid #C1DAD7;

 border-bottom: 1px solid #C1DAD7;

 background: #fff;

 font-size: 11px;

 padding: 6px 6px 6px 12px;

 color: #4f6b72;

 }

 thead th {

     color: red;

 }

 tfoot th {

     color: blue;

 }

 </style>

     </head>

 <body>

 <table cellspacing="0">

     <thead>

         <tr>

             <th>序号</th>

             <th>歌曲名</th>

             <th>演唱</th>

         </tr>

     </thead>

     <tbody>

         <tr>

             <th>01</th>

             <td>小苹果</td>

             <td>筷子兄弟</td>

         </tr>

         <tr>

             <th>02</th>

             <td>匆匆那年</td>

             <td>王菲</td>

         </tr>

         <tr>

             <th>03</th>

             <td>喜欢你</td>

             <td>G.E.M.邓紫棋</td>

         </tr>

         <tr>

             <th>04</th>

             <td>当你老了</td>

             <td>莫文蔚</td>

         </tr>

     </tbody>

     <tfoot>

         <tr>

             <th>序号</th>

             <th>歌曲名</th>

             <th>演唱</th>

         </tr>

     </tfoot>

 </table>

 <body>

 </body>

 </html>

四、不规则表格

colspan 属性规定单元格可横跨的列数。rowspan 属性规定单元格可横跨的行数。

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

     <meta content="yes" name="apple-mobile-web-app-capable" />

     <meta content="black" name="apple-mobile-web-app-status-bar-style" />

     <meta name="format-detection" content="telephone=no" />

     <title>第9章</title>

 <style type="text/css">

 th {

 font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

 color: #4f6b72;

 border-right: 1px solid #C1DAD7;

 border-bottom: 1px solid #C1DAD7;

 border-top: 1px solid #C1DAD7;

 letter-spacing: 2px;

 text-transform: uppercase;

 text-align: left;

 padding: 6px 6px 6px 12px;

 background: #CAE8EA url(images/bg_header.jpg) no-repeat;

 }

 td {

 border-right: 1px solid #C1DAD7;

 border-bottom: 1px solid #C1DAD7;

 background: #fff;

 font-size: 11px;

 padding: 6px 6px 6px 12px;

 color: #4f6b72;

 }

 </style>

     </head>

 <body>

 <table cellspacing="0">

     <thead>

         <tr>

             <th>序号</th>

             <th>歌曲名</th>

             <th>演唱</th>

         </tr>

     </thead>

     <tbody>

         <tr>

             <th>01</th>

             <td>小苹果</td>

             <td>筷子兄弟</td>

         </tr>

         <tr>

             <th>02</th>

             <td>匆匆那年</td>

             <td colspan="1" rowspan="2">王菲</td>

         </tr>

         <tr>

             <th>03</th>

             <td>致青春</td>

         </tr>

         <tr>

             <th>04</th>

             <td>喜欢你</td>

             <td>G.E.M.邓紫棋</td>

         </tr>

         <tr>

             <th>05</th>

             <td>当你老了</td>

             <td>莫文蔚</td>

         </tr>

         <tr>

             <th>06</th>

             <td colspan="2" rowspan="1">群星演唱最炫小苹果</td>

         </tr>

     </tbody>

 </table>

 <body>

 </body>

 </html>

五、几种常见表格设计

1、圆角表格

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

     <meta content="yes" name="apple-mobile-web-app-capable" />

     <meta content="black" name="apple-mobile-web-app-status-bar-style" />

     <meta name="format-detection" content="telephone=no" />

     <title>第9章</title>

     </head>

 <body>

 <style>

 body {

     width: 600px;

     margin: 40px auto;

     font-family: 'trebuchet MS', 'Lucida sans', Arial;

     font-size: 14px;

     color: #444;

 }

 table {

     *border-collapse: collapse; /* IE7 and lower */

     border-spacing: 0;

     width: 100%;

 }

 .bordered {

     border: solid #ccc 1px;

     -moz-border-radius: 6px;

     -webkit-border-radius: 6px;

     border-radius: 6px;

     -webkit-box-shadow: 0 1px 1px #ccc;

     -moz-box-shadow: 0 1px 1px #ccc;

     box-shadow: 0 1px 1px #ccc;

 }

 .bordered tr:hover {

     background: #fbf8e9;

     -o-transition: all 0.1s ease-in-out;

     -webkit-transition: all 0.1s ease-in-out;

     -moz-transition: all 0.1s ease-in-out;

     -ms-transition: all 0.1s ease-in-out;

     transition: all 0.1s ease-in-out;

 }    

 .bordered td, .bordered th {

     border-left: 1px solid #ccc;

     border-top: 1px solid #ccc;

     padding: 10px;

     text-align: left;

 }

 .bordered th {

     background-color: #dce9f9;

     background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));

     background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);

     background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);

     background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);

     background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);

     background-image:         linear-gradient(top, #ebf3fc, #dce9f9);

     -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;

     -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;

     box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;

     border-top: none;

     text-shadow: 0 1px 0 rgba(255,255,255,.5);

 }

 .bordered td:first-child, .bordered th:first-child {

     border-left: none;

 }

 .bordered th:first-child {

     -moz-border-radius: 6px 0 0 0;

     -webkit-border-radius: 6px 0 0 0;

     border-radius: 6px 0 0 0;

 }

 .bordered th:last-child {

     -moz-border-radius: 0 6px 0 0;

     -webkit-border-radius: 0 6px 0 0;

     border-radius: 0 6px 0 0;

 }

 .bordered th:only-child{

     -moz-border-radius: 6px 6px 0 0;

     -webkit-border-radius: 6px 6px 0 0;

     border-radius: 6px 6px 0 0;

 }

 .bordered tr:last-child td:first-child {

     -moz-border-radius: 0 0 0 6px;

     -webkit-border-radius: 0 0 0 6px;

     border-radius: 0 0 0 6px;

 }

 .bordered tr:last-child td:last-child {

     -moz-border-radius: 0 0 6px 0;

     -webkit-border-radius: 0 0 6px 0;

     border-radius: 0 0 6px 0;

 }

 </style>

 <table class="bordered">

     <caption>金曲排行</caption>

     <thead>

         <tr>

             <th>序号</th>

             <th>歌曲名</th>

             <th>演唱</th>

             <th>人气</th>

         </tr>

     </thead>

     <tbody>

         <tr>

             <th>01</th>

             <td>小苹果</td>

             <td>筷子兄弟</td>

             <td>120093</td>

         </tr>

         <tr>

             <th>02</th>

             <td>匆匆那年</td>

             <td colspan="1" rowspan="2">王菲</td>

             <td colspan="1" rowspan="2">38490</td>

         </tr>

         <tr>

             <th>03</th>

             <td>致青春</td>

         </tr>

         <tr>

             <th>04</th>

             <td>喜欢你</td>

             <td>G.E.M.邓紫棋</td>

             <td>37449</td>

         </tr>

         <tr>

             <th>05</th>

             <td>当你老了</td>

             <td>莫文蔚</td>

             <td>93947</td>

         </tr>

         <tr>

             <th>06</th>

             <td colspan="2" rowspan="1">群星演唱最炫小苹果</td>

             <td>93984</td>

         </tr>

     </tbody>

 </table>

 <body>

 </body>

 </html>

2、条纹表格

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

     <meta content="yes" name="apple-mobile-web-app-capable" />

     <meta content="black" name="apple-mobile-web-app-status-bar-style" />

     <meta name="format-detection" content="telephone=no" />

     <title>第9章</title>

     </head>

 <body>

 <style>

 body {

     width: 600px;

     margin: 40px auto;

     font-family: 'trebuchet MS', 'Lucida sans', Arial;

     font-size: 14px;

     color: #444;

 }

 table {

     *border-collapse: collapse; /* IE7 and lower */

     border-spacing: 0;

     width: 100%;

 }

 .zebra td, .zebra th {

     padding: 10px;

     border-bottom: 1px solid #f2f2f2;

 }

 .zebra tbody tr:nth-child(even) {

     background: #f5f5f5;

     -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;

     -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;

     box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;

 }

 .zebra th {

     text-align: left;

     text-shadow: 0 1px 0 rgba(255,255,255,.5);

     border-bottom: 1px solid #ccc;

     background-color: #eee;

     background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee));

     background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);

     background-image:    -moz-linear-gradient(top, #f5f5f5, #eee);

     background-image:     -ms-linear-gradient(top, #f5f5f5, #eee);

     background-image:      -o-linear-gradient(top, #f5f5f5, #eee);

     background-image:         linear-gradient(top, #f5f5f5, #eee);

 }

 .zebra th:first-child {

     -moz-border-radius: 6px 0 0 0;

     -webkit-border-radius: 6px 0 0 0;

     border-radius: 6px 0 0 0;

 }

 .zebra th:last-child {

     -moz-border-radius: 0 6px 0 0;

     -webkit-border-radius: 0 6px 0 0;

     border-radius: 0 6px 0 0;

 }

 .zebra th:only-child{

     -moz-border-radius: 6px 6px 0 0;

     -webkit-border-radius: 6px 6px 0 0;

     border-radius: 6px 6px 0 0;

 }

 .zebra tfoot td {

     border-bottom: 0;

     border-top: 1px solid #fff;

     background-color: #f1f1f1;

 }

 .zebra tfoot td:first-child {

     -moz-border-radius: 0 0 0 6px;

     -webkit-border-radius: 0 0 0 6px;

     border-radius: 0 0 0 6px;

 }

 .zebra tfoot td:last-child {

     -moz-border-radius: 0 0 6px 0;

     -webkit-border-radius: 0 0 6px 0;

     border-radius: 0 0 6px 0;

 }

 .zebra tfoot td:only-child{

     -moz-border-radius: 0 0 6px 6px;

     -webkit-border-radius: 0 0 6px 6px

     border-radius: 0 0 6px 6px

 }

 </style>

 <table class="zebra">

     <caption>金曲排行</caption>

     <thead>

         <tr>

             <th>序号</th>

             <th>歌曲名</th>

             <th>演唱</th>

             <th>人气</th>

         </tr>

     </thead>

     <tfoot>

         <tr>

             <td>&nbsp;</td>

             <td></td>

             <td></td>

             <td></td>

         </tr>

     </tfoot>

     <tbody>

         <tr>

             <td>01</td>

             <td>小苹果</td>

             <td>筷子兄弟</td>

             <td>1200903</td>

         </tr>

         <tr>

             <td>02</td>

             <td>匆匆那年</td>

             <td>王菲</td>

             <td>138490</td>

         </tr>

         <tr>

             <td>03</td>

             <td>致青春</td>

             <td>王菲</td>

             <td>138489</td>

         </tr>

         <tr>

             <td>04</td>

             <td>喜欢你</td>

             <td>G.E.M.邓紫棋</td>

             <td>137449</td>

         </tr>

         <tr>

             <td>05</td>

             <td>当你老了</td>

             <td>莫文蔚</td>

             <td>93947</td>

         </tr>

         <tr>

             <td>06</td>

             <td colspan="2" rowspan="1">群星演唱最炫小苹果</td>

             <td>93984</td>

         </tr>

     </tbody>

 </table>

 <body>

 </body>

 </html>

HTML系列（八）：表格的更多相关文章

  1. 微软云平台windows azure入门系列八课程

    微软云平台windows azure入门系列八课程: Windows Azure入门教学系列 (一): 创建第一个WebRole程序与部署 Windows Azure入门教学系列 (二): 创建第一个 ...

  2. SQL Server 2008空间数据应用系列八：基于Bing Maps(Silverlight)的空间数据存储

    原文:SQL Server 2008空间数据应用系列八:基于Bing Maps(Silverlight)的空间数据存储 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft S ...

  3. java多线程系列(八)---CountDownLatch和CyclicBarrie

    CountDownLatch 前言:如有不正确的地方,还望指正. 目录 认识cpu.核心与线程 java多线程系列(一)之java多线程技能 java多线程系列(二)之对象变量的并发访问 java多线 ...

  4. C语言高速入门系列(八)

    C语言高速入门系列(八) C语言位运算与文件 本章引言: 在不知不觉中我们的C高速入门系列已经慢慢地接近尾声了,而在这一节中,我们会对 C语言中的位运算和文件进行解析,相信这两章对于一些人来说是陌生的 ...

  5. struts2官方 中文教程 系列八：异常处理

    在本教程中,我们将探讨如何启用Struts 2框架处理web应用程序生成的任何未捕获的异常.Struts 2提供了健壮的异常处理,包括能够自动记录任何未捕获的异常,并将用户重定向到错误web页面. 贴 ...

  6. C#编译器优化那点事 c# 如果一个对象的值为null，那么它调用扩展方法时为甚么不报错 webAPI 控制器（Controller）太多怎么办？ .NET MVC项目设置包含Areas中的页面为默认启动页 （五）Net Core使用静态文件 学习ASP.NET Core Razor 编程系列八——并发处理

    C#编译器优化那点事   使用C#编写程序,给最终用户的程序,是需要使用release配置的,而release配置和debug配置,有一个关键区别,就是release的编译器优化默认是启用的.优化代码 ...

  7. Bing Maps进阶系列八：在Bing Maps中集成OpenStreetMap地图

    Bing Maps进阶系列八:在Bing Maps中集成OpenStreetMap地图 OSM(OpenStreetMap-开放街道地图)服务就是一种发布自己地图数据图片为服务的一种实现类型,开放街道 ...

  8. 爬虫系列(八) 用requests实现天气查询

    这篇文章我们将使用 requests 调用天气查询接口,实现一个天气查询的小模块,下面先贴上最终的效果图 1.接口分析 虽然现在网络上有很多免费的天气查询接口,但是有很多网站都是需要注册登陆的,过程比 ...

  9. 在 Apache 上使用网络安全服务(NSS)实现 HTTPS--RHCE 系列(八)

        在 Apache 上使用网络安全服务(NSS)实现 HTTPS--RHCE 系列(八) 发布:linux培训 来源:Linux认证 时间:2015-12-21 15:26 分享到: 达内lin ...

  10. Keil MDK STM32系列(八) STM32F4基于HAL的PWM和定时器输出音频

    Keil MDK STM32系列 Keil MDK STM32系列(一) 基于标准外设库SPL的STM32F103开发 Keil MDK STM32系列(二) 基于标准外设库SPL的STM32F401 ...

随机推荐

  1. java转换字符串的编码(转)

    package com.Alex.base; import java.io.UnsupportedEncodingException; /** * 转换字符串的编码 */ public class C ...

  2. Objective-C编程调试技巧

    为Objective-C编程调试技巧(译) http://www.cocoawithlove.com/2008/10/debugging-tips-for-objective-c.html 这篇文章是 ...

  3. Hoeffding连接到机器学习

    统计学场景: 一个罐子中有红球和绿球,红球比例$v$未知,数量未知,如何得到红球比例?方法---随机抽样N个球,在其中红球占比为$u$ 由hoeffding可以知道:$P(|u-v|>\epsi ...

  4. js生成随机数的方法实例总结 [收藏]

    js生成随机数的方法实例总结 js生成随机数主要用到了内置的Math对象的random()方法.用法如:Math.random().它返回的是一个 0 ~ 1 之间的随机数.有了这么一个方法,那生成任 ...

  5. Mock, 让你的开发脱离接口

    在前后台共同进行一个项目的时候常会遇到一种情景, 后台定义好接口,前端按照接口进行开发, 当前端开发完成后台接口却还没有开发完成, 这个时候要进行接口测试, 只能等后台开发完成才能测试, 在这中间浪费 ...

  6. html系列教程--base button canvas caption

    <base> 标签 <base> 标签为页面上的所有链接规定默认地址或默认. demo: <head> <base href="http://www ...

  7. iOS技术

    iOS技术 OC:分类(好处,和延展的区别) 分类: 在不修改原有的类的基础上增加新的方法  一个庞大的类可以分模块开发 一个庞大的类可以由多个人来编写,更有利于团队合作 分类是对原有类的一种扩展,在 ...

  8. 根据老赵轻量级Actor进行修改的Actor模型

    学习了老赵轻量级Actor模型,并在实际中使用,效果不错. 老赵轻量级Actor模型: ActorLite:一个轻量级Actor模型实现(上) ActorLite:一个轻量级Actor模型实现(中) ...

  9. 【转】java jawin api 中文 invoke方法

    org.jawin Class FuncPtr java.lang.Object org.jawin.FuncPtr ----------------------------------------- ...

  10. 关于html标签元素的data-*属性

    关于这个主题的文章和博客其实已经非常多了,这里并非要重复造轮子,只是看到一些例子稍微有点麻烦,其实也很简单,但是对于一个刚刚入门的人,w3c的例子甚至可能看不懂,这里列出一个最简单不过的小案例以供参考 ...