python全栈开发 * 表格标签表单标签 css 引入方式 * 180807

时间 2019-11-10

标签 python 开发表格标签表单 css 引入方式栏目 Python 繁體版

原文原文链接

html部分css

一.表格标签<table>html

　　1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的.前端

　　注意: 一个表格是由行组成的(行是由列组成的),而不是由行和列组成的.浏览器

　　2.<table>的属性:安全

　　border : 边框,像素为单位.服务器

　　style="border-collapse : collapse ;" : 单元格的线和表格的边框线合并网络

　　width : 宽度. 像素为单位.app

　　height : 高度. 像素为单位post

　　bordercolor : 表格的边框颜色.网站

　　align : 表格的水平对齐方式,属性值( left ,right ,center)

注意：这里不是设置表格里内容的对齐方式，若是想设置内容的对齐方式，要对单元格标签<td>进行设置）

　　cellpadding：单元格内容到边的距离，像素为单位。默认状况下，文字是紧挨着左边那条线的，即默认状况下的值为0。若是设置属性dir="rtl"，那就指的是内容到右边那条线的距离

　　cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认状况下的值为0

　　bgcolor="#99cc66"：表格的背景颜色。

　　background="路径src/..."：背景图片 ( 背景图片的优先级大于背景颜色。)

注意 : 表格中很细表格变现的制做:

　　border="1" style="border-collapse:clooapse;"

　　css写法

3.<tr> 行

　　属性:

　　dir : 公有属性,设置这一行单元格内容的排列顺序 . ltr 从左到右 (默认) ,rtl 从右到左.

　　bgcolor : 设置这一行的单元格的背景色. (背景图片须要css实现)

　　height : 一行高度.

　　align="center" 一行的内容水平居中显示.(left ,center, right)

　　valign="middle" 一行内容垂直居中 (top ,middle ,bottom)

4.<td> 单元格

　　属性

　　align : align：内容的横向对齐方式。属性值能够填：left right center (可用css)

　　valign : 内容的纵向对齐方式。属性值能够填：top middle bottom

　　width：绝对值或者相对值(%)

　　height：单元格的高度

　　bgcolor：设置这个单元格的背景色

　　background：设置这个单元格的背景图片

5.单元格的合并:

　　若是想要将两个单元格合并,那确定就要删除一个单元格.

　　相关属性:

　　colspan : 横向合并

　　　　　　例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。

　　rowspan : 纵向合并.

　　　　　　例如rowspan="2"表示当前单元格在垂直方向上

6.<th>标签加粗的单元格至关于 <td> + <b>

　　属性

　　align：内容的横向对齐方式。属性值能够填：left right center (可用css)

　　valign : 内容的纵向对齐方式。属性值能够填：top middle bottom

　　width：绝对值或者相对值(%)

　　height：单元格的高度

　　bgcolor：设置这个单元格的背景色

　　background：设置这个单元格的背景图片

7.<caption> : 表格的标题使用时和<tr>>标签并列

8.表格的<thead>标签. <tbody>标签 <tfoot>标签

　　(1)、若是写了，那么这三个部分的代码顺序能够任意，浏览器显示的时候仍是按照thead、tbody、tfoot的顺序依次来显示内容。若是不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。

　　(2)、当表格很是大内容很是多的时候，若是用thead、tbody、tfoot标签的话，那么数据能够边获取边显示。若是不写，则必须等表格的内容所有从服务器获取完成才能显示出来。

示例 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <table border="1" style="border-collapse: collapse;">
        <caption>信息登陆</caption>
        <tbody>
            <tr>
                <td>jay</td>
                <td>38</td>
                <td>男</td>
                <td rowspan="3">中国</td>
            </tr>
        </tbody>
        <thead>
            <tr>
                <td>jj</td>
                <td>35</td>
                <td>男</td>

            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>jolin</td>
                <td>37</td>
                <td>女</td>

            </tr>
        </tfoot>

    </table>

</body>
</html>

二.表单标签<form>

　　用于与服务器的交互.表单就是收集用户信息的,就是让用户填写的,选择的

1.属性

　　name : 表单的名称,用于js来操纵或控制表单时使用;

　　id : 表单的名称,用于js来操纵或控制表单时使用;

　　action : 表单要提交到哪里.

　　method : 表单数据的提交方式,get(默认) 不安全和 post 安全

2.get 和post 的区别:

　　get:

　　将表单数据，以"name=value"形式追加到action指定的处理程序的后面，二者间用"?"隔开，每个表单的"name=value"间用"&"号隔开。

特色:只适合提交少许信息，而且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符

　　post:

　　将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序能够获取到表单数据。

特色:能够提交海量信息，相对来讲安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。

3.Enctype：
表单数据的编码方式(加密方式)，取值能够是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。

　　Application/x-www-form-urlencoded：默认加密方式，除了上传文件以外的数据均可以

　　Multipart/form-data：上传附件时，必须使用这种编码方式

4.<input> 输入标签(文本框) (单闭合标签)

属性:

type="属性值" 文本类型

　　属性值能够是如下内容:

　　(1) text (默认)

　　(2) password :密码类型

　　(3) radio: 单选按钮名字相同的按钮做为一组进行单选（单选按钮，天生是不能互斥的，若是想互斥，必需要有相同的name属性。name就是“名字”。

　　(4). checkbox :多选按钮,名字相同的按钮做为一组进行选择.

　　(5) checked: 将单选按钮或多选按钮默认处于选中状态.当<input>标签的type="radio"时，能够用这个属性。属性值也是checked，能够省略

　　(6)hidden：隐藏框，在表单中包含不但愿用户看见的信息

　　(7)button：普通按钮，结合js代码进行使用

　　(8)submit：提交按钮，传送当前表单的数据给服务器或其余程序处理。这个按钮不须要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。

　　(9)reset：重置按钮，清空当前表单的内容，并设置为最初的默认值

　　(10)image：图片按钮，和提交按钮的功能彻底一致，只不过图片按钮能够显示图片。

　　(11)file：文件选择框

　　(12)提示：若是要限制上传文件的类型，须要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。

　　(13)value="内容"：文本框里的默认内容

　　(14)size="50"：表示文本框内能够显示五十个字符。一个英文或一个中文都算一个字符。

　　(15)readonly：文本框只读，不能编辑。由于它的属性值也是readonly，因此属性值能够不写。

　　(16)disabled：文本框只读，不能编辑，光标点不进去。属性值能够不写。

5.<select>:下拉列表标签

　　<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。

属性:

　　multiple：能够对下拉列表中的选项进行多选。没有属性值。

　　size="3"：若是属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。

　　<option>标签的属性：

　　selected：预选中。没有属性值

6.<textare>标签：多行文本输入框 text就是“文本”，area就是“区域”。

　　value：提交给服务器的值。

　　rows="4"：指定文本区域的行数。

　　cols="20"：指定文本区域的列数

　　readonly：只读。

7.<lable>标签

　　input元素要有一个id，而后label标签有一个for属性，和id相同，那么这个label和input就有绑定关系了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="https://www.baidu.com" method='get'>
        <lable for="user">用户名</lable>
        <input id="user" type="text" name="username" value="" >
        <br>
        <lable for="pass">登录密码</lable>
        <input id="pass" type="text" name="password" value="">
        <br>
        <lable for ="gen">性别</lable>
        <input type="radio" name="gender" value="man" id="gen">男
        <input type="radio" name="gender" value="women"checked="checked">女
        <br>
         <lable for ="gen">爱好</lable>
        <input type="checkbox" name="love" value="eat">吃
        <input type="checkbox" name="love" value="sleep">睡
        <input type="checkbox" name="love" value="play">玩
        <br>
        <input type="submit"  value="登录">
        <br>
        <button type="submit" disabled>注册</button>
        <input type="reset"value="重置按钮"><br>
        <input type="file"value="文件选择框"><br>
        <select multiple="" size="3">
            <option >小学</option>
            <option selected>中学</option>
            <option >大学学</option>
            <option >研究生</option>
        </select>
        <br>
        <textarea name="textinfo" rows="4" cols="10">多行文本输入
        </textarea>
    </form>

</body>

8.表单语义化

应用:

　　咱们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候能够利用表单的语义化。

 <form>

        <fieldset>
        <legend>帐号信息</legend>
        姓名：<input value="呵呵" >逗比<br>
        密码：<input type="password" value="pwd" size="50"><br>
        </fieldset>

        <fieldset>
        <legend>其余信息</legend>
        性别：<input type="radio" name="gender" value="male" checked="">男 
              <input type="radio" name="gender" value="female" >女<br>
        爱好：<input type="checkbox" name="love" value="eat">吃饭
              <input type="checkbox" name="love" value="sleep">睡觉
              <input type="checkbox" name="love" value="bat">打豆豆
        </fieldset>

    </form>

css部分

一.css简介

1.如今的互联网前端分三层:

　　html : 超文本标记语言. 从语义的角度描述页面结构.

　　css : 层叠样式表.从审美的角度负责页面样式.

　　js : JavaScript .从交互的角度描述页面行为.

2.CSS：

Cascading Style Sheet，层叠样式表。CSS的做用就是给HTML页面标签添加各类样式，定义网页的显示效果。

简单一句话：CSS将网页内容和显示样式进行分离，提升了显示功能。

3.html的缺点:

(1).不能适应多种设备

(2).要求浏览器必须智能化足够庞大.

(3).数据和显示没有分开.

(4).功能不够强大

4.css优势

　　(1).使数据和显示分开

　　(2).下降网络流量

　　(3).使整个网站视觉效果一致

　　(4).使开发效率提升了(耦合性下降,一我的负责html,一个负责写css)

好比说，有一个样式须要在一百个页面上显示，若是是html来实现，那要写一百遍，如今有了css，只要写一遍。如今，html只提供数据和一些控件，彻底交给css提供各类各样的样式。

二.css的三种引入方式

　　(1).行内样式

1 <div>
2     <p style="color: green">我是一个段落</p>
3 </div>

　　(2).内接样式

<style type="text/css">
    /*写咱们的css代码*/
        
    span{
    color: yellow;
    }

</style>

　　(3).外接样式

　　　　连接是

<link rel="stylesheet" href="./index.css">

　　　　导入式

<style type="text/css">
        @import url('./index.css');
</style>

python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807

python全栈开发 * 表格标签表单标签 css 引入方式 * 180807