码迷,mamicode.com
首页 > Web开发 > 详细

html+css快速入门教程(6)

时间:2019-12-11 18:50:23      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:管理   button   专业   视频   pad   日期   led   word   列表框   

9 综合实例
仿百度云盘下载页面实战

10 表格

10.1 table

table 为表格标签 可以让我们的表格在浏览器中显示 table 下面还有两个常用标签 tr 和 td tr表示一行 td表示一行里面的某个单元格,通常用在后台管理系统中数据表格的显示

<table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>班级</td>
                <td>成绩</td>
                <td>等级</td>
            </tr>
            <tr>
                <td>20080795113</td>
                <td>李菲</td>
                <td>3</td>
                <td>12</td>
                <td>不及格</td>
            </tr>
            <tr>
                <td>20080795114</td>
                <td>张菲</td>
                <td>3</td>
                <td>82</td>
                <td>良好</td>
            </tr>
            <tr>
                <td>20080795115</td>
                <td>赵菲</td>
                <td>3</td>
                <td>32</td>
                <td>不及格</td>
            </tr>
</table> 

注意:在table的开始标签 后面加上 border cellspacing cellpadding,这种形式 叫做给html标签添加属性,border 表示边框, cellspacing 表示单元格之间的间隙,cellpadding表示单元格内容和边框之间的距离

10.2 合并单元格

colspan 设置当前单元格的在水平方向上合并单元格的个数

<table border="1px" width="300" cellspacing="0" cellpadding="0">
      <tr>
          <td>姓名</td>
          <td>张三</td>
          <td>年龄</td>
          <td>20</td>
      </tr>
      <tr>
           <td >个人简介</td>
           <td colspan="3"></td>
      </tr>
      <tr>
           <td >专业技能</td>
           <td colspan="3"></td>
      </tr>
</table> 

rowspan 设置当前单元格的在垂直方向上合并单元格的个数。

<table border="1" cellpadding="0" cellspacing="0">
            <tr>
                <td>姓名</td>
                <td>张三</td>
                <td>年龄</td>
                <td>12</td>
                <td rowspan="3">
                    <img src="tablehead.jpg"/>
                </td>
            </tr>
            <tr>
                <td>籍贯</td>
                <td>中国</td>
                <td>民族</td>
                <td>汉族</td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td>1999.3.4</td>
                <td>政治面貌</td>
                <td>党员</td>
            </tr>
</table>

练习:

1.课程表 2.个人简历

11 表单

11.1 form标签

form 标签 表示表单,作用就是用来 收集用户的信息 并且发送给后台使用,例如:登录,注册就是通过formate表单完成

form 表单属性

action: 用于设置表单提交的地址 也就是说表单收集的数据要发送到哪里去 method: 用于设置表单提交的方法 也就是说表单是以何种方式把数据发送到action设置好的地址 get: 表单发送数据的方式之一 特点: 表单的发送的数据会显示在浏览器地址栏 post: 表单发送数据的方式之一 特点: 表单发送的数据通常不被用户看见

<form action="http://www.baidu.com/s" method="get">
            用户名: <input type="text"   name="user"/>
            密码: <input type="password"  name="password"/>
            <input type="submit" value="提交" />
</form>

11.2 input 标签

input标签为表单的某一个子项 会根据type属性的不同而功能不同 常用的几种type属性:

type = "text"
type = "password"
type = "checkbox"
type = "radio"
type = "button"
type = "submit"
type="file"
type = "hidden"

输入框

        <input type=“text” /> <!--type="text" 通常用来输入文本内容-->

密码框

<!--type="password" 通常用来输入密码,输入内容不可见-->
<input type=“password” /> 

复选框


单选框

<!--type="radio"  表示单选,几个input中只能选择一个,是否选中用checked属性-->
<input type=“radio” />

隐藏域

 <!--type="hidden" 隐藏表单元素,有些时候后台需要某个数据,但是在前端
不需要显示的时候这个数据的时候使用-->
<input type=“hidden” />

文件选择控件

<input type=“file” /> <!--type="file" 文件上传-->

提交按钮

<input type=“submit” /> <!--type="submit" 执行提交动作将数据发送到后台处理-->

普通按钮

<input type=“button” /> <!--type="button" 普通按钮 不触发提交动作-->

其他属性 name属性,规定input元素的名称,后台会根据这个属性的值来接收数据
value属性,表单项的值 readonly属性,指定控件处于只读状态,针对输入框有效,对按钮无意义 disabled属性,控件不可用,灰色,并且表单提交时不会传送此数据 注意:如果元素没有name属性,表单提交的时候,数据不会被发送出去

11.3.textarea元素

textarea 表示多行文本框 rows属性,设置多行文本框的显示行数(高度),具体尺寸取决于文字大小 cols属性,设置多行文本框的显示列数(宽度),即字符数,具体尺寸取决于文字大小

11.4.button元素

定义一个按钮。

    <button type="button">Click Me!</button>

11.5.select元素

规定下拉列表框

    <select name="city">
        <option value="bj">北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>

name属性,规定下拉框名称 size属性,规定下拉框里面选项的可见数目 multiple属性,设置后选单项目允许多选,否则只能选择一个

11.6.option元素

定义和用法

下拉框的具体每一项 value属性,下拉框的值 注意:如果value属性没有写,默认提交的时候,下拉框的值是被选中的option元素里面的内容,例如,上海,广州,当写了value属性以后,表单提交的时候,下拉框发送的值是value里面的值,例如,如果第一个option元素被选中,则提交的值是bj而不是北京

11.7.label元素

定义和用法

为 input 元素定义标注(标记) label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

    <!--显式的绑定:for属性于哪一个表单项元素绑定(通过id属性绑定)。-->
    <label for="SSN">Social Security Number:</label>
    <input type="text" name="SocSecNum" id="SSN" />
    <!--隐式的绑定:-->
    <label>Date of Birth: <input type="text" name="DofB" /></label>

螺钉课堂视频课程地址:http://edu.nodeing.com

html+css快速入门教程(6)

标签:管理   button   专业   视频   pad   日期   led   word   列表框   

原文地址:https://www.cnblogs.com/dadifeihong/p/12024071.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!