• Python9-前端基础知识-day47


    web开发本质:
    1、浏览器输入网址回车都发生了什么?
    1、浏览器给服务端发送一个消息
    2、服务端拿到消息
    3、服务端返回消息
    4、浏览器展示页面
    C/S架构----B/S架构
    客户端和服务端 消息的格式是约定好的
    HTTP协议:浏览器和服务器之间约定好的消息格式
    import  socket
    sk = socket.socket()
    sk.bind(('127.0.0.1',8000))
    sk.listen(5)
    while 1:
        conn,addr = sk.accept()
        conn.recv(1024)
        conn.send(b'HTTP/1.1 200 OK
    
    ')
        with open('data.txt','rb') as f:
            msg = f.read()
        conn.send(msg)
        # conn.send(b'<h1>hello s9)</h1>')
        conn.close()
    HTML文件结构:
    <!--注释内容-->
    <!DOCTYPE html>声明为HTML5文档。
    <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。
    <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
    <title>、</title>定义了网页标题,在浏览器标题栏显示。
    <body>、</body>之间的文本是可见的网页主体内容。
    <title></title> 定义网页标题
    <style></style> 定义内部样式表
    <script></script> 定义JS代码或引入外部JS文件
    <link/> 引入外部样式表文件
    <meta/> 定义网页原信息
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <!--2秒后跳转到对应的网址,注意引号-->
        <!--<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">-->
        <!--指定文档的编码类型-->
        <meta charset="UTF-8">
        <meta http-equiv="content-Type" charset=UTF8">
        <!--告诉IE以最高级模式渲染文档-->
        <!--<meta http-equiv="x-ua-compatible" content="IE=edge">-->
        <!--<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">-->
        <!--<meta name="description" content="老男孩教育Python学院">-->
        <title>我的第一个html页面</title>
        <style>
            a {
                color:red;
            }
        </style>
        <!--<script>-->
                <!--alert('hello s9!')-->
        <!--</script>-->
    </head>
    <body>
        <h1>hello s99999)</h1>
        <h2>hello s99999)</h2>
        <h3>hello s99999)</h3>
        <h4>hello s99999)</h4>
        <h5>hello s99999)</h5>
        <img src="https://ss0.bdstdddatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1552141263&di=bf0c6be6939bf48c5ad8279ec240be4c&src=http://img.haote.com/udpload/news/image/20180316/20180316170729_222286383.jpg" alt="找不到了">
        <img src='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1552141263&di=bf0c6be6939bf48c5ad8279ec240be4c&src=http://img.haote.com/upload/news/image/20180316/20180316170729_86383.jpg'>
        <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1552141263&di=bf0c6be6939bf48c5ad8279ec240be4c&src=http://img.haote.com/upload/news/image/20180316/20180316170729_86383.jpg" alt="新垣结衣" title="老婆">
        <a href='http://www.sogo.com'>搜狗</a>
        <a href='http://www.luffycity.com' target="_blank">路费学车</a>
    </body>
    </html>
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除</s>
    
    <p>段落标签</p>
    
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    
    <!--换行-->
    <br>
    
    <!--水平线--><hr>
    空格    &nbsp;
    >    &gt;
    <    &lt;
    &    &amp;
    ¥    &yen;
    版权    &copy;
    注册    &reg;
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <b>python9999</b>
    <i>python9999</i>
    <u>python9999</u>
    <s>python9999</s>
    <h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1>
    <p>苍茫的大海上,狂<br>风卷积<br>着乌云</p>
    <p>苍茫的大海上,狂<br>风卷<br>积着乌云</p>
    <p>苍茫的大海上,狂风卷积着乌云</p>
    <hr>
    <p>苍茫的大海上,狂风卷<br><br>着乌云</p>
    <p>苍茫的大海上,狂风卷积着乌云</p>
    <p>苍茫的大海上,狂风卷积着乌云</p>
    &copy;
     &reg;
    </body>
    </html>

     div标签和span标签

    div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。默认占浏览器宽度,能设置长和宽
    span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。根据内容决定长度
    块级元素与行内元素的区别:
    所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
    这两个元素是专门为定义CSS样式而生的。
    注意:
    关于标签嵌套:通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
    p标签不能包含块级标签,p标签也不能包含p标签。
    <div>我是div标签</div>
    <div>我是div标签</div>
    <div>我是div标签</div>
    <span>我是span标签</span>
    <span>我是span标签</span>
    <span>我是span标签</span>

    列表

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    
    </ul>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    
    
    </ol>
    </body>
    </html>

    type属性:

    • disc(实心圆点,默认值)
    • circle(空心圆圈)
    • square(实心方块)
    • none(无样式)

    有序列表

    <ol type="1" start="2">
      <li>第一项</li>
      <li>第二项</li>
    </ol>

    type属性:

    • 1 数字列表,默认值
    • A 大写字母
    • a 小写字母
    • Ⅰ大写罗马
    • ⅰ小写罗马
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul type="square">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    
    </ul>
    <ol type="I" start="4">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    
    
    </ol>
    </body>
    </html>

    标题列表

     
    <dl>
        <dt>标题</dt>
        <dd>内容</dd>
        <dt>标题</dt>
        <dd>内容</dd>
    
    
    </dl>
    
    </ol>

    属性:

    • border: 表格边框.
    • cellpadding: 内边距
    • cellspacing: 外边距.
    • 像素 百分比.(最好通过css来设置长宽)
    • rowspan: 单元格竖跨多少行
    • colspan: 单元格横跨多少列(即合并单元格)
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
    </head>
    <body>
    <table border="1" cellpadding="10" CELLSPACING="10" >
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>爱好</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td colspan="2">
                小强
            </td>
            <td rowspan="2">戴帽子</td>
        </tr>
        <tr>
            <td>
                tim
            </td>
            <td>322</td>
        </tr>
        </tbody>
    </table>
    </body>
    </html>
    <!--h1*4>a{a标签$}-->
    <h1><a href="">a标签1</a></h1>
    <h1><a href="">a标签2</a></h1>
    <h1><a href="">a标签3</a></h1>
    <h1><a href="">a标签4</a></h1>
    <!--h1*4>a.c1{a标签$}-->
    <h1><a href="" class="c1">a标签1</a></h1>
    <h1><a href="" class="c1">a标签2</a></h1>
    <h1><a href="" class="c1">a标签3</a></h1>
    <h1><a href="" class="c1">a标签4</a></h1>
    <!--h1*4>a.c1[id=a$]{a标签$}-->
    <h1><a href="" class="c1" id="a1">a标签1</a></h1>
    <h1><a href="" class="c1" id="a2">a标签2</a></h1>
    <h1><a href="" class="c1" id="a3">a标签3</a></h1>
    <h1><a href="" class="c1" id="a4">a标签4</a></h1>

     标签的嵌套规则:

     1.行内标签不能嵌套块级标签

     2.p标签不能嵌套块级标签

     

  • 相关阅读:
    ContentDisposition的使用方法
    winform上传文件解决方案
    C#中的委托和事件
    Sql Update语句使用表别名的方法(多种方法,经典)
    查找在菜单里提交的报表所在职责
    查找在标准请求组里提交的报表所在的职责
    根据报表文件名称关键字查找报表的执行文件名称等信息
    根据窗口名称查找关键字弹性域用到的表,列等信息
    EBS中取profile值的用法
    查找运行请求时间,参数等(可以是某用户的,某个报表)
  • 原文地址:https://www.cnblogs.com/zhangtengccie/p/10503442.html
Copyright © 2020-2023  润新知