分类目录归档:HTML

html简介说明

html标签中href和onclick属性在功能上有哪些区别呢?


摘要:
下文讲述html超链接标签a上的href属性和onclick调用javascript脚本上的不同之处,如下所示:

 1.当一个超链接标签上,href属性和onclick事件同时存在,那么onclick事件会先得到执行,然后才执行href中的信息
 2.当 onclick="return fun();" 返回false时,则href属性不会得到执行
 3.href ="#" 会使页面跳到顶部,href="javscript:void(0);"可避免页面滚动至顶部
 4.onclick后面跟进js事件,href后面可跟url和javascript协议后的js函数或代码

html代码中 src href后面直接写上双斜杠(//)没有协议信息的功能说明?


摘要:
下文讲述html代码中双斜杠(//)链接地址的功能说明,如下所示:


双斜杠(//)链接的功能:

双斜杠(//)链接的功能:
自动根据当前html页面的协议匹配链接信息的协议类型,
例:

 //如:
  <script type="text/javascript" src="//maomao365.com/test.js"></script>
  <link rel="stylesheet" type="text/css" href="//maomao365.com/test.css" media="all" />
 如果当前页面为http://www.maomao365.com 
   则src后面自动匹配为http://maomao365.com/test.js  http://maomao365.com/test.css

  如果当前页面为https://www.maomao365.com 
  则src后面自动匹配为https://maomao365.com/test.js  https://maomao365.com/test.css

html代码中如何固定一个table的表头呢?


摘要:
下文讲述html代码中固定表头的方法分享,如下所示:

实现思路: 
      1.将表头和表内容放入两个table中
      2.表内容所处的表设置overflow-y hidden ,使高度超过指定值时,出现滚动
      3.表头和表内容中都使用 colgroup col关键字定义宽度
      <colgroup>
              <col style="width:100px;" />
               <col />
      </colgroup>

例:
定义一个固定表头的html代码

<meta charset='utf-8' />
<p>
  maomao365.com <br />
  table固定表头的示例分享
</p>
<hr />
<style>
.table-head{padding-right:17px;background-color:blue;}
.table-head tr th{color:white;}
.table-body{width:100%; height:200px;overflow-y:scroll;}
.table-head table,.table-body table{width:100%;}
.table-body table tr:nth-child(2n+1){background-color:RGB(242,242,242);}
</style>

<div style="width:400px;">
    <div class="table-head">
    <table>
        <colgroup>
            <col style="width:120px;" />
            <col />
        </colgroup>
        <thead>
            <tr><th>序号</th><th>内容</th></tr>
        </thead>
    </table>
    </div>
    <div class="table-body">
    <table>
        <colgroup><col style="width: 120px;" /><col /></colgroup>
        <tbody>
            <tr><td>1</td><td>猫猫教程固定表头内容--1</td></tr>
            <tr><td>2</td><td>猫猫教程固定表头内容--2</td></tr>
            <tr><td>3</td><td>猫猫教程固定表头内容--3</td></tr>
            <tr><td>4</td><td>猫猫教程固定表头内容--4</td></tr>
            <tr><td>5</td><td>猫猫教程固定表头内容--5</td></tr>
            <tr><td>6</td><td>猫猫教程固定表头内容--6</td></tr>
            <tr><td>7</td><td>猫猫教程固定表头内容--7</td></tr>
            <tr><td>8</td><td>猫猫教程固定表头内容--8</td></tr>
            <tr><td>9</td><td>猫猫教程固定表头内容--9</td></tr>
            <tr><td>10</td><td>猫猫教程固定表头内容--10</td></tr> 
        </tbody>
    </table>
    </div>
</div>
html固定表头的示例分享

html固定表头的示例分享