关于列表、表单、表格总结 -

首页 > 博客列表 > 关于列表、表单、表格总结

博主信息

博文 4

粉丝 0

访问量 3450

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于列表、表单、表格总结

换个角度看世界

原创

1223人浏览过

在网站中必不可少的列表，列表可以有效对我们数据分组使页面更加的美观有条理性；
一、有序列表和无序列表
1、有序列表通过Ol和li实现

<ol>
        <li>牛奶一箱</li>
        <li>蛋糕一个</li>
        <li>苹果10斤</li> 
 </ol>

2、无序列表通过ul li及 dldtdd标签来实现

<ul>
      <li>牛奶一箱</li>
      <li>蛋糕一个</li>
      <li>苹果10斤</li>  
</ul>

使用dl,dt,dd方式实现列表方式为

<dl>
        <dt>名称</dt>
        <dd>PHP中文网</dd>
        <dt>地址</dt>
        <dd>合肥市政务新区置地广场</dd>
        <dt>联系</dt>
        <dd><a href="tel:18032826913" target="_blank">18032826913</a></dd>
        <dd><a href="mailto:tosakl@hotmail.com?subject=title&body=content">发送邮件</a></dd>
    </dl>

案例一 用无序列表实现导航栏
<ul class="menu"> <li><a href="#">首页</a></li> <li><a href="#">教学视频</a></li> <li><a href="#">社区问答</a></li> <li><a href="#">资料下载</a></li> <li><a href="#" target="_black">登录</a></li> </ul>
二、表格
在表格当中标签为<TABLE>,常用属性有border、cellspacing、cellpadding 以及表格name属性，当我们用极细边框时候border=1 cellspacing=0 cellpadding=0;

<TABLE> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

案例一商品信息表

 <table border=1 cellspacing=0 cellpadding=0 >
        <caption>商品信息表</caption>
        <thead>
            <tr>
                <th>ID</th>
                <th>品名</th>
                <th>单价</th>
                <th>数量</th>
                <th>金额</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>惠普128多功能打印机</td>
                <td>1280</td>
                <td>20</td>
                <td>10000</td>
            </tr>
            <tr>
                <td>2</td>
                <td>惠普128多功能打印机</td>
                <td>1280</td>
                <td>20</td>
                <td>10000</td>
            </tr>
            <tr>
                <td>3</td>
                <td>惠普128多功能打印机</td>
                <td>1280</td>
                <td>20</td>
                <td>10000</td>
            </tr>
            <tr>
                <td>5</td>
                <td>惠普128多功能打印机</td>
                <td>1280</td>
                <td>20</td>
                <td>10000</td>
            </tr>
            <tr>
                <td>6</td>
                <td>惠普128多功能打印机</td>
                <td>1280</td>
                <td>20</td>
                <td>10000</td>
            </tr>
            <tr>
                <td>7</td>
                <td>惠普128多功能打印机</td>
                <td>1280</td>
                <td>20</td>
                <td>10000</td>
            </tr>
        </tbody>
    </table>
    <p class="fy">
        <a href="#">首页</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">末页</a>
    </p>

案例二课程表

 <table border=1 cellspacing=0 cellpadding=0>
        <caption>合肥市第三十六小学课程表</caption>
        <thead>
            <tr>
                <td colspan=2></td> 
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan=4> 上午 </td>
                <td>1</td>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>历史</td>
                <td>体育</td>
            </tr>
            <tr>
                <td>2</td>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>历史</td>
                <td>体育</td>
            </tr>
            <tr>
                <td>3</td>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>历史</td>
                <td>体育</td>
            </tr>
            <tr>
                <td>4</td>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>历史</td>
                <td>体育</td>
            </tr>
            <tr>
                <td colspan=7>中午休息</td>
            </tr>
            <tr>
                <td rowspan=3>下午</td>
                <td>5</td>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>历史</td>
                <td>体育</td>
            </tr>
            <tr>
                <td>6</td>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>历史</td>
                <td>体育</td>
            </tr>
            <tr>
                <td>7</td>
                <td >课外活动</td>
                <td colspan=6>各班自行组织,自愿参加</td>
            </tr>
        </tbody>
    </table>

三、html表单
表单是我们通过用户输入信息发往后台进行验证及请求，通常请求的方式为GET 和POST get是从服务器上获取数据，post是向服务器传送数据。
get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。（这里有看到其他文章介绍get和post的传送数据大小跟各个浏览器、操作系统以及服务器的限制有关）get安全性非常低，post安全性较高；

在form表单属性分为action、method、entype属性分别为action 代表亲求地址接收页面，method代表请求的类型get|post然后entype就是编码类型的意思需要注意的是：默认情况下，enctype的值是application/x-www-form-urlencoded，不能用于文件上传，只有使用了multipart/form-data，才能完整的传递文件数据。

application/x-www-form-urlencoded不是不能上传文件，是只能上传文本格式的文件，multipart/form-data是将文件以二进制的形式上传，这样可以实现多种类型的文件上传。enctype：规定了form表单在发送到服务器时候编码方式，有如下的三个值。

1、application/x-www-form-urlencoded。默认的编码方式。但是在用文本的传输和MP3等大型文件的时候，使用这种编码就显得效率低下。
2、multipart/form-data 。指定传输数据为二进制类型，比如图片、mp3、文件。
3、text/plain。纯文体的传输。空格转换为 “+” 加号，但不对特殊字符编码。
表单控件分为 text文本 password 密码 email 邮件 checkbox多选框 radio单选框 hidden 隐藏域 textarea 富文本框 select 下拉框file文件上传等；
需要注意是名字name属性及value属性在服务器端，需要获取控件的名称是上传信息（值）；
案例一，用户组测
<h2 style="text-align: center;">用户注册</h2>

        <form action="" method="get" class="register">
         <label for="username">账号：</label><input type="text" id="username" name="username" value="" required placeholder="填写账号" >
         <label for="email">邮箱：</label><input type="email" id="email" name="email" placeholder="填写邮箱"  required>
         <label for="pwd">密码：</label><input type="password" id="pwd" name="pwd" placeholder="填写密码" value=""  required>
         <label for="#">性别： </label>
         <div>
        <input type="radio" name="sex" id="man" checked><label for="man">男</label> <input type="radio" name="sex" id="woman"><label for="woman">女</label><input type="radio" name="sex" id="bm" ><label for="bm">保密</label>
        </div>
        <label for="#">兴趣</label>
        <div>
        <input type="checkbox" name="hobby[]" value="摄影" id="shoot" checked>
        <label for="shoot">摄影</label>
        <input type="checkbox" name="hobby[]" value="游戏" id="game">
        <label for="game">游戏</label>
        <input type="checkbox" name="hobby[]" value="韩剧"  id="dsj">
        <label for="dsj">韩剧</label>
        <input type="checkbox" name="hobby[]" value="日剧" id="rdsj">
        <label for="rdsj">日剧</label>
    </div>
        <label for="edu">学历：</label>
        <select name="edu" id="edu">
        <option value="初中" selected>初中</option>
        <option value="高中">高中</option>
        <option value="大学">大学</option>
        <option value="博士">博士</option>
       </select>
       <label for="tx">头像</label> <input type="file" name="tx" id="tx">
       <label for="jl">简历</label> <input type="file" name="jl" id="jl">
       <label for="bz">备注</label><textarea name="bz" id="bz" cols="30" rows="10">请填写您的备注</textarea>
         <button>提交</button>
        </form>

总结：在页面上看到使用列表时候采用UL li方式在DIV+CSS 使用表格情况较为少见，在N年前还能看到表格布局网页，现在基本都是框型结构。表单当中注意上传值和名称要一一对应；

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

前端学习第一课时

2020-12-08 23:14:54