zoukankan      html  css  js  c++  java
  • 前端html

    对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端。
    import socket
     
    def handle_request(client):
        buf = client.recv(1024)
        client.send("HTTP/1.1 200 OK
    
    ".encode())
        client.send("<h1>Hello,shuaigaogao</h1>".encode())
     
    def main():
        sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
        sock.bind(('localhost',8000))
        sock.listen(5)
     
        while True:
            connection, address = sock.accept()
            handle_request(connection)
            connection.close()
    if __name__ == '__main__':
        main()

      

    上述通过socket来实现了其本质,而对于真实开发中的python web程序来说,一般会分为两部分:服务器程序和应用程序。服务器程序负责对socket服务器进行封装,并在请求到来时,对请求的各种数据进行整理。应用程序则负责具体的逻辑处理。为了方便应用程序的开发,就出现了众多的Web框架,例如:Django、Flask、web.py 等。不同的框架有不同的开发方式,但是无论如何,开发出的应用程序都要和服务器程序配合,才能为用户提供服务。这样,服务器程序就需要为不同的框架提供不同的支持。这样混乱的局面无论对于服务器还是框架,都是不好的。对服务器来说,需要支持各种不同框架,对框架来说,只有支持它的服务器才能被开发出的应用使用。这时候,标准化就变得尤为重要。我们可以设立一个标准,只要服务器程序支持这个标准,框架也支持这个标准,那么他们就可以配合使用。一旦标准确定,双方各自实现。这样,服务器可以支持更多支持标准的框架,框架也可以使用更多支持标准的服务器。

    html本质

    一套规则、浏览器认识的规则

    2、开发者:

      1. 学习html的规则
      2. 开发后台程序:
        • 写html文件(充当模板的作用) *****
        • 数据库获取数据,然后替换到html文件的指定位置(WEB框架
      3. 本地测试
        • 找到文件路径,直接浏览器打开
        • pycharm打开测试
        • 如果pycharm打开显示不出你想要的效果,试试第一种方式打开
      4. 编写html文件
        • doctype 对应关系
        • html标签,标签内部可以写属性
        • 注释 <!-- -->

    说明html

    1   标签都是成对出现,一对称为一个标签 ,(也有自闭和标签)。

      说明:有开头也有结尾,是主动闭合的,称为主动闭合标签,我们用到的大部分都是主动闭合标签

      说明:只有开头没有结尾的,是自动闭合的,所以称为自闭合标签,自闭合标签就那么几个,记住就好

    2   注释用  <!--    内容   --> 

    head 内标签

    1,mata标签(metada information)

      提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键字

    2,页面编码(告诉浏览器是什么编码)

      提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键字

      <meta charset="UTF-8">  #pycharm的写法,一般默认这个就可以了

      <meta http-equiv="content-type" content="text/html;charset=utf-8"> #第二种写法

    3,关键字

       说明:在百度网上搜到什么关键字,做搜素引擎的,关键字搜索

      <meta name="keywords" content="帅哥,美女,图片" >

    4,描述

      说明:描述你的网站是干嘛的

      <meta name="description" content="此网站主要是****。" />

    5,刷新和跳转

      <meta http-equiv="Refresh" Content="3">  #网站每3秒刷新一次

      <meta http-equiv="Refresh" Content="3; Url=http://www.oldboyedu.com" /> #网站过三秒跳转到另外一个网页

    6,title 网页的头不信息

      <title>今日头条</title>

    7,link 自闭合标签

      说明:加载css样式文件

      <link rel="stylesheet" type="text/css" href="css/common.css"> #加载css样式文件

    8,icon  这个可以做每个网页的小图标

      <link rel="shortcut icon" href="image/favicon.ico">  #在标题前加图标,rel的内容不能乱改变,就是叫这个名字

    link 样式的引入

      样式分为三种写法,

        第一种适合新手用,行内添加样式,

        第二种是简单测试联系,内部

        第三种是开发用的也是我们经常用的,外部样式。

      开发规范是,内容, 样式,行为,原则。

    body内的标签

      这里写的只是常用的

    p 标签

      作用:p标签表示段落,默认段落之之间是有间隔的

    br 标签

      作用:换行,这边br标签是自闭合标签,可以直接写<br>,也可以写成<br />,但是最好写成后面一种形式,这样就知道这是自闭合标签,不然搞混淆了

    h 标签

      作用:标题标签,h1~h6,字体大小和粗细从大到小

    span 标签

      作用:白板标签,自身什么特性都不带

    问:为什么会出现这么一个白板标签呢?

      答:因为我们以后学css的时候,就可以把这个白板转换自己想要的,因为白板自己想画什么就是什么,学了css之后,可以把白板标签变成任何一个标准。

    标签的分类

    到目前为止,我们把所有标签分为两类:

    1. 块级标签:H系列标签(默认加大加粗)、p标签(段落与段落之间有间距)
    2. 行内标签(内联标签):span(白板)

    问:块级标签和行内标签区别是什么?

    答:块级标签:只要我写上这么一个标签,即使它的内容特别少,它也把整行都给占了

      行内标签:你自己有多少内容,就占多少地方

    div标签

    它是我们以后经常用的块标签,很多人会问会不会 DIV + CSS 布局。

    div标签是块级标签,也是属于一个白板标签(块元属默认独占一行)

    input输入

    input标签是一个自闭和标签,所以在标签最后面最好加上 /,写法也就是<input />

    数据的提交需要和from标签表单提交结合提交的数据到哪里。

    <body>
        <form action="http:www.baidu.com" method="GET">
            <input type="text" name="username"/><br />   #input标签需要加上name这个属性
            <input type="password" name="pwd"/><br />
            <input type="button" value="登录1"/>
            <input type="submit" value="登录2"/> #提交表单,只能type="submit"类型的input标签
        </form>
    </body>

    form表单中属性的功能:

    1. action:指定你需要发送的后台的url
    2. method:你提交的表单需要用到什么方法,这边有POST和GET,如果不写method方法,默认请求是get请求

    注意:

      对于一个input标签,如果想向后台提交数据的时候,input标签一定要加上name这个属性,当你点击submit哪个登录按钮的时候,在html里面就会把你输入的数据做一个打包,把包打成一个类似于字典类型的数据类型,{"user_name":"zhang","pwd":"0808"},然后再提交到后台,我就能拿到这个数据,然后做出相应响应。

    问:post和get方法有什么区别?

    答:

      1. 了解历史

        get和post是HTTP与服务器交互的方式, 
        说到方式,其实总共有四种:put,delete,post,get。 
        他们的作用分别是对服务器资源的增,删,改,查。 
        所以,get是获取数据,post是修改数据。

        但是,现在大家都不这么干了! 
        只用一个方式就可以做增删查减的操作。 
        。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

      2. 区别分析

        get把请求的数据放在url上,即HTTP协议头上,其格式为: 
        以?分割URL和传输数据,参数之间以&相连。 
        数据如果是英文字母/数字,原样发送, 
        如果是空格,转换为+, 
        如果是中文/其他字符,则直接把字符串用BASE64加密,及“%”加上“字符串的16进制ASCII码”。 
        post把数据放在HTTP的包体内(requrest body)。

        get提交的数据最大是2k(原则上url长度无限制,那么get提交的数据也没有限制咯?限制实际上取决于浏览器,(大多数)浏览器通常都会限制url长度在2K个字节,即使(大多数)服务器最多处理64K大小的url。也没有卵用。)。 
        post理论上没有限制。实际上IIS4中最大量为80KB,IIS5中为100KB。

        GET产生一个TCP数据包,浏览器会把http header和data一并发送出去,服务器响应200(返回数据); 
        POST产生两个TCP数据包,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。

        GET在浏览器回退时是无害的,POST会再次提交请求。

        GET产生的URL地址可以被Bookmark,而POST不可以。

        GET请求会被浏览器主动cache,而POST不会,除非手动设置。

        GET请求只能进行url编码,而POST支持多种编码方式。

        GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。

        GET只接受ASCII字符的参数的数据类型,而POST没有限制

        那么,post那么好为什么还用get?get效率高!。

    input系列:

    1. input   type='text'      - name属性 , value='shuaigaogao'
    2. input   type='password'      - name属性 , value='shuaigaogao'
    3. input   type='submit'      - value='提交'   提交表单按钮
    4. input   type='button'      - value='登录'   普通按钮
    5. input   type='radio'      - 单选框   value,check="checked",name属性(name相同则相互互斥)
    6. input   type='checkbox'      - 复选框   value,check="checked",name属性(批量获取数据)
    7. input   type='file'      - 依赖form表单的一个属性,enctype="multipart/form-data"
    8. input   type='reset'   -重置

    下拉框select标签

    <body>
        <form>
            <div>
                <select name="city" size="3" multiple="multiple">  #mutiple属性设置多选
                    <option value="1">上海</option>
                    <option value="2" selected="selected">南京</option>
                    <option value="3">北京</option>
                </select>
            </div>
            <input type="submit"/>
        </form>
    </body>

    a 标签

    作用:a标签可以作跳转的作用

    <a href="http://www.baidu.com" target="_blank">百度一下</a>  #添加target="_blank",在新的tag的页面跳转

    锚链接

    作用:就是在一个页面中,通过点一个标题,直接跳转到你的所想要看到的页面

    <body>
        <a href="#i1">第一章</a>
        <a href="#i2">第二章</a>
        <a href="#i3">第三章</a>
        <div id="i1" style="height: 600px;">第一章的内容</div>
        <div id="i2" style="height: 600px;">第二章的内容</div>
        <div id="i3" style="height: 600px;">第三章的内容</div>
    </body>

      想实现锚的效果,就是在a标签里面 href = "#某个标签的id" ,这样就让这个a标签跟某一个章节关联了。

      在html里面,id属性是不能重复的,name属性是可以重复的,但是一般不重复。

    类表标签

    ul 标签

         ul   li   无序

      ou  li    有序

      dl  dt(标题) dd

    table表格

    table标签是设计表格的,跟tr(行列)和td(列)两个标签结合使用的,加上border属性,显示边框

    <body>
        <table border="1">   #border属性显示边框
            <tr>   #一行
                <td>主机名</td>  #表示一列
                <td>端口</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1.1.1.1</td>
                <td>8080</td>
                <td><a href="h1.html">查看详情</a></td>   #超链接可以是具体的某个页面
            </tr>
        </table>
    </body>
    
    
    这种遇到复杂了可与先画下来,(跨行跨列都不知道)

    <td rowspan="2">1.1.1.1</td>  #rowspan='2'表示td上下横跨两个行
    <td colspan="2">8080</td>  #colspan='2'表示这个td占2个列



    到这里html 里面的常用标签我们已经学完了

  • 相关阅读:
    vs 2015 "加载该页时出错。" 解决方案
    Web API使用HttpResponseMessage与HttpResponseException的差异 HttpResponseMessage 返回类型
    a标签使用href=”javascript:void(0); 在火狐浏览器跟chrome 不兼容
    SQL语句 转
    Fiddler抓包 截包伪造提交包
    图片懒加载
    dropzone 上传插件
    MVC5+EF6 完整教程 转
    用Aspose.Cell控件导入Excel非强类型的数据
    利用Aspose.Word控件实现Word文档的操作
  • 原文地址:https://www.cnblogs.com/littlesky1124/p/9077742.html
Copyright © 2011-2022 走看看