python web day15

作业总结： 1、inline-block;额外会有3px宽度

　　　　　 2、改造标签；例如小三角造成视觉效果

　　　　    3、补充；默认img标签边框在IE里会显示出来，所以要设置boder=0

上节补充：

　　　　　属性选择器

　　　　　清除浮动

　　　　　设置标签默认值

JavaScript：

　　　　　1、存在形式

　　　　　2、放置位置 body内部最下面

　　　　　3、变量 var a = ‘123‘;创建局部变量 a = ‘123‘; 全局变量 ===> 先写var 变量，如果要用全局变量再去掉var,不容易出错

上节回顾：

    HTML
        头部：编码，title，style，link
        身体：
            内联
            块级
            -->inlie-block
            a标签：
                    target,href,锚
            img标签：
                src,alt
            iframe(伪Ajax，上传文件)
                src
            form标签：
                actino提交url,method提交方式，enctype.....
            input系列
                text
                password
                checkbox，
                        name相同，value不同
                radio,互斥name属性相同
                file
                botton，无效果
                submit,提交当前form表单
                reset，重置当前form表单

            select标签：
            textarea
            =========>
                <input value=‘123‘/>
                <textarea>123</textarea>

    CSS
        存在形式
            标签属性
            style块
            文件导入
            优先级最高：color:red ！important

    寻找：
        标签选择器
        class选择器
        ID选择器
        层级选择器
        组合选择器
        属性选择器

    样式：
        coler,width,height
        width;用百分比需要在外层设置宽度
        background:
        透明度：
            pocity:0.6
            background:rgba(0,0,0,.6)
        position:
            fixed
            absolute
                定义位置：
                滚动
            relative
                结合absolute
            ===>遮罩层 z-index:
            页面布局，fixed
        边距补充
            input
            图标
            做图标的软件font awesome

        float:好方式
            ：hover
            :after
            :before
            网站：
                CSS
                    .clearfix:after{

                    }
            布局：
                主站（w，剧中）
                后台管理

上节回顾

小三角视觉效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .icon{
            display: inline-block;
            border-left: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-top: 15px solid #d7143e;
            border-right: 15px solid transparent;
        }
    </style>
</head>
<body>
    <div class="icon"></div>
</body>
</html>

//transparent是让其隐藏

小三角

上节补充：

属性选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1[alex=‘a‘]{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <div class="c1" alex="a">1</div>
        <div class="c1" alex="b">2</div>
        <div class="c1">3</div>
        <div class="c1" alex="a">4</div>
        <div class="c1">5</div>
    </div>
</body>
</html>

清除浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            float: left;
        }
        .clearfix:after{
            /*加.撑起来一行*/
            content: ".";
            clear: both;
            /*默认撑起来的是内联标签但是需要编程块级标签*/
            display: block;
            /*把.隐藏*/
            visibility: hidden;
            height: 0;
        }
    </style>
</head>
<body>
    <div class="c1">ddddssdsd</div>
    <div class="c2">uuuuuuu</div>
    <div style="background-color: red" class="clearfix">
        <div class="left" style="height: 100px;background-color: green">234</div>
        <div class="left">5555</div>
    </div>
</body>
</html>

设置标签默认值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input value="123"/>
    <textarea>123</textarea>
    <select>
        <option>上海</option>
        <option selected="selected">广州</option>
        <option>北京</option>
    </select>
    男：<input type="radio" name="g1"/>
    女：<input type="radio" name="g1" checked="checked"/>

    <input type="checkbox" name="c1" checked="checked"/>
    <input type="checkbox" name="c1"/>
    <input type="checkbox" name="c1" checked="checked"/>
    <input type="checkbox" name="c1"/>
</body>
</html>

JavaScrip

JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。

1、JavaScript代码存在形式

<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>

<!-- 方式二 -->
<script type"text/javascript">
    Js代码内容
</script>

一个色在文件里，一个色在代码块里。

<!DOCTYPE html>
<html lang="en">
<head>

<!--http://www.cnblogs.com/wupeiqi/tag/python%E4%B9%8B%E8%B7%AF/-->
    <meta charset="UTF-8">
    <title>title</title>

</head>
<body>
    <h1>ssssddddd</h1>
    <script src="commonts.js"></script>
    <script>
        alert(123);
    </script>
</body>
</html>

存在两种形式

2、JavaScript代码存放位置

  • HTML的head中
  • HTML的body代码块底部(推荐)

由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

<script type="text/javascript">

    // 全局变量
    name = ‘seven‘;

    function func(){
        // 局部变量
        var age = 18;

        // 全局变量
        gender = "男"
    }
</script>

JavaScript中代码注释：

  • 单行 //
  • 多行 /*  */

注意：此注释仅在Script块中生效。

数据类型

JavaScript 中的数据类型分为原始类型和对象类型：

  • 原始类型

    • 数字
    • 字符串
    • 布尔值
  • 对象类型
    • 数组
    • “字典”
    • ...

特别的，数字、布尔值、null、undefined、字符串是不可变。

// null、undefined
null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。
undefined是一个特殊值，表示变量未定义。

数字（Number）

JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

转换：

  • parseInt(..)    将某值转换成数字，不成功则NaN
  • parseFloat(..) 将某值转换成浮点数，不成功则NaN

特殊值：

  • NaN，非数字。可使用 isNaN(num) 来判断。
  • Infinity，无穷大。可使用 isFinite(num) 来判断。

字符串（String）

字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。

常见功能：

obj.length                           长度

obj.trim()                           移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根据索引获取子序列
obj.slice(start, end)                切片
obj.toLowerCase()                    大写
obj.toUpperCase()                    小写
obj.split(delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
                                     $数字：匹配的第n个组内容；
                                     $&：当前匹配的内容；
                                     $`：位于匹配子串左侧的文本；
                                     $‘：位于匹配子串右侧的文本
                                     $$：直接量$符号

小例子跑马灯：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1" style="display: inline-block;background-color: #b71538;color: white">奥运健儿加油!&nbsp</div>
    <script>
        //定时器,1000毫秒

        setInterval("f1()",1000);
        function f1(){
                //js获取某一个标签 id=il
            var tag = document.getElementById(‘i1‘);
            //获取标签的内容
            var text = tag.innerText;

            var a = text.charAt(0);
            var sub = text.substring(1,text.length);
            //拼接
            var new_str = sub + a;
            //重新赋值new_str
            tag.innerText = new_str;
        }

    </script>
</body>
</html>

布尔类型（Boolean）

布尔类型仅包含真假，与Python不同的是其首字母小写。

  • ==      比较值相等
  • !=       不等于
  • ===   比较值和类型相等
  • !===  不等于
  • ||        或
  • &&      且

注意：慎用＝＝只是比较值，跟类型没关系。

a = "123"
"123"
b = 123
123
a == b
true

数组

JavaScript中的数组类似于Python中的列表

常见功能：

obj.length          数组的大小

obj.push(ele)       尾部追加元素
obj.pop()           尾部获取一个元素
obj.unshift(ele)    头部插入元素
obj.shift()         头部移除元素
obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
                    obj.splice(n,0,val) 指定位置插入元素
                    obj.splice(n,1,val) 指定位置替换元素
                    obj.splice(n,1)     指定位置删除元素
obj.slice( )        切片
obj.reverse( )      反转
obj.join(sep)       将数组元素连接起来以构建一个字符串
obj.concat(val,..)  连接数组
obj.sort( )         对数组元素进行排序

其他

1、序列化

  • JSON.stringify(obj)   序列化
  • JSON.parse(str)        反序列化

2、转义

  • decodeURI( )                   URl中未转义的字符
  • decodeURIComponent( )   URI组件中的未转义字符
  • encodeURI( )                   URI中的转义字符
  • encodeURIComponent( )   转义URI组件中的字符
  • escape( )                         对字符串转义
  • unescape( )                     给转义字符串解码
  • URIError                         由URl的编码和解码方法抛出
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        var url = "http://www.etiantian.org?n=王宝强";
        var ret = encodeURI(url);
        //alert(ret);
        console.log(ret);
        var u = decodeURI(ret);
        //alert(u);
        console.log(u);

        var r2 = encodeURIComponent(url);
//在console上显示
        console.log(r2);

    </script>
</body>
</html>

3、eval

JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。

  • eval()
  • EvalError   执行字符串中的JavaScript代码

4、正则表达式

JavaScript中支持正则表达式，其主要提供了两个功能：

  • test(string)     用于检测正则是否匹配
  • exec(string)    用于获取正则匹配的内容

注：定义正则表达式时，“g”、“i”、“m”分别表示全局匹配，忽略大小写、多行匹配。

5、时间处理

JavaScript中提供了时间相关的操作，时间操作中分为两种时间：

  • 时间统一时间
  • 本地时间（东8区）

更多操作参见：http://www.shouce.ren/api/javascript/main.html

语句和异常

1、条件语句

JavaScript中支持两个中条件语句，分别是：if 和 switch

if(条件){

    }else if(条件){

    }else{

    }

if语句

switch(name){
        case ‘1‘:
            age = 123;
            break;
        case ‘2‘:
            age = 456;
            break;
        default :
            age = 777;
    }

switch语句

2、循环语句

JavaScript中支持三种循环语句，分别是

时间： 2024-10-11 07:22:59

python web day15的相关文章

python/web框架

web框架 Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 #!/usr/bin/env python #coding:utf-8    import socket    def handle_request(client):     buf = client.recv(1024)     clien

python web服务常见的部署方式

引自 - 全面解读python web 程序的9种部署方式 python有很多web 开发框架,代码写完了,部署上线是个大事,通常来说,web应用一般是三层结构 web server ---->application -----> DB server 主流的web server 一个巴掌就能数出来,apache,lighttpd,nginx,iis application,中文名叫做应用服务,就是你基于某个web framework写的应用代码 DB server 泛指存储服务,web开发中用

《Python入门》第一个Python Web程序——简单的Web服务器

上一篇讲了<Python入门>Windows 7下Python Web开发环境搭建笔记,接下来讲一下Python语言Web服务的具体实现:第一个Python Web程序--简单的Web服务器. 与其它Web后端语言不同,Python语言需要自己编写Web服务器. 如果你使用一些现有的框架的话,可以省略这一步: 如果你使用Python CGI编程的话,也可以省略这一步: 用Python建立最简单的web服务器 利用Python自带的包可以建立简单的web服务器.在DOS里cd到准备做服务器根目录

Win7下Python WEB环境搭建

环境介绍: Win7 64位 SP1 Python:2.7.6 网关接口:flup Nginx安装:http://blog.csdn.net/jacson_bai/article/details/46388775 Djang安装:http://blog.csdn.net/jacson_bai/article/details/41823945 1.flup安装 参考链接: http://www.saddi.com/software/flup/dist/ http://wiki.nginx.org/

Python web 框架 Sanci如何使用？

本文和大家分享的主要是python web 框架 Sanci 相关内容,一起来看看吧,希望对大家学习python有所帮助. Sanic 是一个和类Flask 的基于Python3.5+的web框架,它编写的代码速度特别快. 除了像Flask 以外,Sanic 还支持以异步请求的方式处理请求.这意味着你可以使用新的 async/await 语法,编写非阻塞的快速的代码. 既然它说速度特别快,我们先看下官方提供的 基准测试结果. Sanic基准测试 这个测试的程序运行在 AWS 实例上,系统是Ubu

Redis的Python实践，以及四中常用应用场景详解——学习董伟明老师的《Python Web开发实践》

首先,简单介绍:Redis是一个基于内存的键值对存储系统,常用作数据库.缓存和消息代理. 支持:字符串,字典,列表,集合,有序集合,位图(bitmaps),地理位置,HyperLogLog等多种数据结构. 支持事务.分片.主从复之.支持RDB(内存数据保存的文件)和AOF(类似于MySQL的binlog)两种持久化方式.3.0加入订阅分发.Lua脚本.集群等特性. 命令参考:http://doc.redisfans.com 中文官网:http://www.redis.net.cn 安装(都大同小

Python web实时消息服务器后台推送技术方案---GoEasy

Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送速度快,代码简单易懂上手快浏览器兼容性:GoEasy推送支持websocket 和polling两种连接方式,从而可以支持IE6及其以上的所有版本,同时还支持其它浏览器诸如Firefox, Chrome, Safari 等等.支 持不同的开发语言:   GoEasy推送提供了Restful API接口,无论你的后台程序用的是哪种语言都可以通过RestfulAPI来实现后台实时推送.

Python Web实时消息后台服务器推送技术---GoEasy

越来越多的项目需要用到实时消息的推送与接收,怎样用Python现最方便呢?我这里推荐大家使用GoEasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送! 浏览器兼容性:GoEasy推送 支持websocket 和polling两种连接方式,从而可以支持IE6及其以上的所有版本,同时还支持其它浏览器诸如Firefox, Chrome, Safari 等等. 支持不同的开发语言:    GoEasy推送 提供了Restful API接口,无论你的后台程序用的是哪种语言都可以通过R

python web框架分析和学习篇_彭友

分析篇: 刚好到网上搜到了一篇<浅谈Python web框架>,里面系统的分析了五种主流的Python框架,现在python的主流框架有Django.Pylons&TurboGears&repose.bfg.Tornado&web.py&Bottle&Flask和Quixote.它从宏观角度分析了这五种框架的优劣,看完之后我们决定选择Django,因为: Django: 概述:可谓是python框架里面最大的一家,它是里面文档最完善.市场占有率最高.招聘