Html1

记事本、NotePad++、EditPlus、…
网页三剑客（DreamWeaver、FireWorks、Flash）
FrontPage

 

 <threa></thread>表头

例子

  1 //表头固定拖动效果
  2 
  3 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  4 <html>
  5 <head>
  6     <title>one page</title>
  7     <style>
  8 
  9         .fixedThead {
 10             display: block;
 11         }
 12 
 13         .scrollTbody {
 14             display: block;
 15             height: 262px;
 16             overflow: auto;
 17             width: 100%;
 18         }
 19 
 20         .table td, .table th {
 21             width: 200px;
 22             border-bottom: none;
 23             border-left: none;
 24             border-right: 1px solid #CCC;
 25             border-top: 1px solid #DDD;
 26             word-break: keep-all;
 27             white-space: nowrap;
 28         }
 29 
 30         .table tr {
 31             border-left: 1px solid #EB8;
 32             border-bottom: 1px solid #B74;
 33         }
 34 
 35 
 36     </style>
 37 </head>
 38 <body ng-controller="StudentsCtl">
 39 
 40 
 41 <div align="center">学生成绩浏览表</div>
 42 
 43 <div id="shop_top">
 44     <div class="form-group" id="shop_filter">
 45         过滤：<input type="text" class="form-control" ng-model="filter.$" placeholder="filter">
 46     </div>
 47 </div>
 48 <table class="table table-hover table-bordered" si-table>
 49     <thead class="fixedThead">
 50     <tr>
 51         <th ng-click="predicate='id'; reverse=!reverse">序号</th>
 52         <th ng-click="predicate='examNo'; reverse=!reverse">准考证号</th>
 53         <th ng-click="predicate='name'; reverse=!reverse">姓名</th>
 54         <th ng-click="predicate='schoolName'; reverse=!reverse">学校</th>
 55         <th ng-click="predicate='chinese'; reverse=!reverse">语文</th>
 56         <th ng-click="predicate='math'; reverse=!reverse">数学</th>
 57         <th ng-click="predicate='physics'; reverse=!reverse">物理</th>
 58         <th ng-click="predicate='chemistry'; reverse=!reverse">化学</th>
 59         <th ng-click="predicate='biology'; reverse=!reverse">生物</th>
 60         <th ng-click="predicate='politis'; reverse=!reverse">政治</th>
 61         <th ng-click="predicate='history'; reverse=!reverse">历史</th>
 62         <th ng-click="predicate='geography'; reverse=!reverse">地理</th>
 63         <th ng-click="predicate='englishHear'; reverse=!reverse">听力</th>
 64         <th ng-click="predicate='english'; reverse=!reverse">英语</th>
 65         <th ng-click="predicate='totalScore'; reverse=!reverse">总分</th>
 66     </tr>
 67     </thead>
 68     <tbody class="scrollTbody">
 69     <tr ng-repeat="i in stus | filter:filter|orderBy:predicate:reverse">
 70         <td>{{$index+1}}</td>
 71         <td>{{ i.examNo }}</td>
 72         <td>{{ i.name }}</td>
 73         <td>{{ i.schoolName }}</td>
 74         <td>{{ i.chinese }}</td>
 75         <td>{{ i.math }}</td>
 76         <td>{{ i.physics }}</td>
 77         <td>{{ i.chemistry }}</td>
 78         <td>{{ i.biology }}</td>
 79         <td>{{ i.politis }}</td>
 80         <td>{{ i.history }}</td>
 81         <td>{{ i.geography }}</td>
 82         <td>{{ i.englishHear }}</td>
 83         <td>{{ i.english }}</td>
 84         <td>{{ i.totalScore }}</td>
 85 
 86 
 87     </tr>
 88     </tbody>
 89 </table>
 90 <!-- 分页部件  -->
 91 <div class="pager">
 92     <span>数据库一共有{{totalItems}}条记录</span><span style="margin-left: 30px">  一共有：{{pageCount}}页</span>
 93     <span style="margin-left: 20px">当前为第：{{currentPage}}页</span>
 94     <br>
 95     <pager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" first-text="首页"
 96            next-text="下一页" prev-text="上一页" last-text="尾页" show-goto="true" goto-text="跳转到"></pager>
 97 </div>
 98 
 99 </body>
100 </html>
表头固定

 

<table border=“1”>
<tr>
<td>单元格内容</td>
</tr>
<tr>
… …
</table>

跨列的表格,使用colspan属性来实现

 

表单

HTML表单是用于搜集用户输入的
HTML表单都扩在一对form标签中
<form>的常用属性
action 表示提交的目标服务器
method 提交的方法get、post
get(默认,以url提交,就是以地址栏的方式提交)
post(通过报文提交)

 

提交按钮标签
<input type=“submit” />(如果添加name就提交了)
<input type="submit" name="btn" value="提交" /><br />
重设按钮标签
<input type=“reset” />(重置,可以添加value)
按钮标签
<input type=“button” />
<input type="button" value="按钮" onclick="alert('不要乱按')" />
图像标签

 

 

复选框标签(有name才能提交)
<input type=“checkbox” />
<input type=“checkbox” name=“ch1” value=“chone” checked=”checked“ />文字
单选按钮签(没name点不了)
<input type=“radio” />input type=“radio” name=“ra1” value=“raOne” checked=“checked“ />男(默认加checked=“checked”)
文件选择标签
<input type=“file” />
<input type=“file” name=“f1” value=“fOne” />各个浏览器不同(必须要有value就业班讲)

 

列表标签
<select>(name在这加才能提交)
<option>< /option>(Items)
</select>
<option value="0">@itcast.com</option>
属性size（1或非1）(listbox)
属性multiple(多选)
属性value和selected(默认谁是第一个)

 

 

 

 

 

posted @ 2017-04-07 16:31  liusheng11188  阅读(606)  评论(0)    收藏  举报