html部分

一.表格标签<table>

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

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

　　2.<table>的属性:

　　border : 边框,像素为单位.

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

　　width : 宽度. 像素为单位.

　　height : 高度. 像素为单位

　　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="" style="border-collapse: collapse;">

        <caption>信息登录</caption>

        <tbody>

            <tr>

                <td>jay</td>

                <td>38</td>

                <td>男</td>

                <td rowspan="">中国</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="">

            <option >小学</option>

            <option selected>中学</option>

            <option >大学学</option>

            <option >研究生</option>

        </select>

        <br>

        <textarea name="textinfo" rows="" cols="">多行文本输入

        </textarea>

    </form>

</body>

8.表单语义化

应用:

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

 <form>

        <fieldset>

        <legend>账号信息</legend>

        姓名：<input value="呵呵" >逗比<br>

        密码：<input type="password" value="pwd" size=""><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的更多相关文章

  1. python 全栈开发，Day70(模板自定义标签和过滤器,模板继承 (extend),Django的模型层-ORM简介)

    昨日内容回顾 视图函数: request对象 request.path 请求路径 request.GET GET请求数据 QueryDict {} request.POST POST请求数据 Quer ...

  2. 巨蟒python全栈开发django7:多表增加和查询

    1.回顾内容&&补充 补充1: 补充2: 这个选择的是第二个解释器. 选择第一个的话,只是针对当前的项目,如果再开新项目的话,需要重新下载安装相关的包. 点击保存,因为我们注释掉了,创 ...

  3. 巨蟒python全栈开发django6: FBV&CBV&&单表查询的其他方法

    练习CBV用法 截图中的action="/cbv/",应该是这样 上边红图,说明mysql有问题,需要重启一下 返回,输入的内容 @wrapper==>cbv=wrapper ...

  4. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  5. 学习笔记之Python全栈开发/人工智能公开课_腾讯课堂

    Python全栈开发/人工智能公开课_腾讯课堂 https://ke.qq.com/course/190378 https://github.com/haoran119/ke.qq.com.pytho ...

  6. python 全栈开发之路 day1

    python 全栈开发之路 day1   本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...

  7. python 全栈开发，Day99(作业讲解,DRF版本,DRF分页,DRF序列化进阶)

    昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...

  8. Python全栈开发【面向对象】

    Python全栈开发[面向对象] 本节内容: 三大编程范式 面向对象设计与面向对象编程 类和对象 静态属性.类方法.静态方法 类组合 继承 多态 封装 三大编程范式 三大编程范式: 1.面向过程编程 ...

  9. Python全栈开发【模块】

    Python全栈开发[模块] 本节内容: 模块介绍 time random os sys json & picle shelve XML hashlib ConfigParser loggin ...

随机推荐

  1. web全栈应用【爬取（scrapy）数据 -> 通过restful接口存入数据库 -> websocket推送展示到前台】

    作为 https://github.com/fanqingsong/web_full_stack_application 子项目的一功能的核心部分,使用scrapy抓取数据,解析完的数据,使用 pyt ...

  2. python,可变对象，不可变对象，深拷贝，浅拷贝。

    学习整理,若有问题,欢迎指正. python 可变对象,不可变对象 可变对象 该对象所指定的内存地址上面的值可以被改变,变量被改变后,其所指向的内存地址上面的值,直接被改变,没有发生复制行为,也没有发 ...

  3. ssh远程登陆脚本（带跳板机）

    mac自带的终端不太好用,被推荐了一个iterm2的终端替代工具,确实比自带的终端好用不少.下面记录下通过脚本一键远程登录的过程: 下载地址:http://m4.pc6.com/xuh3/iTerm2 ...

  4. 迅为IMX6开发板真实产品案例分享-专为研发用芯选择

    迅为IMX6开发板: Android4.4系统 Linux + Qt5.7系统 Ubuntu12.04系统 部分真实案例:HMI:3D打印机:医疗设备:工控机:触控一体机:车载终端 核心板兼容:IMX ...

  5. 第三节，目标检测---R-CNN网络系列

    1.目标检测 检测图片中所有物体的 类别标签 位置(最小外接矩形/Bounding box) 区域卷积神经网络R-CNN 模块进化史 2.区域卷积神经网络R-CNN Region proposals+ ...

  6. [51nod1965]奇怪的式子

    noteskey 怎么说,魔性的题目...拿来练手 min_25 正好...吧 首先就是把式子拆开来算贡献嘛 \[ANS=\prod_{i=1}^n \sigma_0(i)^{\mu(i)} \pro ...

  7. 007_wireshark分析TCP的三次握手和四次断开

    要想进行抓包分析,必须先了解TCP的原理.这里介绍了TCP的建立连接的三次握手和断开连接的四次握手. 一.前言:介绍三次握手之前,先介绍TCP层的几个FLAGS字段,这个字段有如下的几种标示 SYN表 ...

  8. windows :config windows update … 一直处于假死状态

    参考文章:http://www.cnblogs.com/teacat/p/9204225.html 环境:win7 64bit 旗舰版 问题:重启后,系统更新到35%后,一直处于假死状态,未能正确进入 ...

  9. storage和memory

    memory:使用的是值传递,默认使用的是memory,传递的是值 storage:引用传递,传过来的是指针,后面一定要加上internal,private pragma solidity ^; co ...

  10. 怎么修改PDF文档图片内容

    我们想要修改PDF文件的时候应该怎么做呢,PDF文件不同于其他的文件,PDF文件的编辑需要借助PDF编辑器才能够对文件进行编辑修改,那么要怎么修改PDF文档图片内容呢,有许多的小伙伴都想知道该怎么做, ...