day--42 前端基础小结

                                前端基础总结

一：前端实现的原理：
    小实例：

　　01：第一步：创建一个socket服务端：

        import socket

        server=socket.socket()

        ip_port=("127.0.0.1",8009)

        server.bind(ip_port)

        server.listen(4)

        while 1:

            conn, addr = server.accept()

            from_client_msg=conn.recv(1024)

            conn.send(b"http/1.1 200 ok\r\n\r\n")

            conn.send(b"<h1>hello world,my friends!</h1>")

            conn.close()

    02：第二步。在电脑浏览器中输入  127.0.0.1：8009  即可显示： hello world,my friends!

总结：通信过程：

    浏览器发送请求---〉http协议--〉服务端接受请求--〉服务端返回响应--〉服务端把html文件内容发给浏览器--〉浏览器渲染页面

    03：浏览器兼容性：

        浏览器内核：

        浏览器    --    内核

        IE           --    trident

        chrome  ---   blink

        火狐       ---   gecko

        Safari     ---   webkit

    PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

        渲染引擎是兼容性问题出现的根本原因。

二：html说明：
    html语言是一种超文本标记语言，是一种创建网页的标记语言。它不是一种编程语言
    01:html文档结构：
            基本文档格式实例：

　　　　<!doctype html>

            <html lang="en">

            <head>

                这个是头部

                  <!-- #申明编码是utf-8 根据浏览器的要求不同，有些是 <meta charset="gbk"> ，

                  现在大多数的浏览器是utf-8模式 -->

                <meta charset="UTF-8">

                <meta http-equiv="X-UA-Compatible" content="ie=edge">

                <title>这个是标题</title>

            </head>

            <body>

            </body>

            </html>

001：<!doctyep html> 申明其为html文档

        002：<html lang="en"> 申明语言是英语，如果需要时中文，则需要将 "en" 改为 “zh-CN”

        003：<html> </html>  开头和结尾标记，这个是一个双标签。在他们之间的事<body> </body> 和<head></head>,<title> </title>等等

        004：<titile></title> 定义了在浏览器顶端显示的内容

        005：<body></body>  之间的文本是显示在可见的 网页主题内容。

三：注释和特别说明

html注释  ctrl+/  键在pycharm 里面可以直接注释 html语句

    <!doctype> 申明必须是html文档中的第一行，，位于<html>标签之前

四：body内的常用标签（单标签，双标签）
    01：基本标签

　　　　<b>加粗</>

        <i>斜体</>

        <u>下划线</>

        <s>删除</s>  #在文字中间显示一行删除线

        <p>段落标签</p>  #独占一个段落，一行

        #h标签随着数字增大，在浏览器中显示的文字越来越小，一共有1到6个等级

        <h1></h1>

        <h2></h2>

        <h3></h3>

        <h4></h4>

        <h5></h5>

        <h6></h6>

        <br> 换行  #单标签

        <hr>  #就是单独的在一行显示一个水平线

        <img src="图片地址" alt="图片未加载时的显示" title="鼠标放在上面的显示内容" height="高度" width="宽度">

            height和width只写一个会自动等比例缩放

    02：div标签和span标签

　　　　 001:<div>写的内容</div> ,div标签主要用来定义块级元素，没有实际意义，主要通过css样式为其赋予不同的表现

        002:<span> 标签用来定义内联元素，无实际意义，主要通过css样式为为其赋予不同的表现

    03：a标签（a标签是双标签）

　　　　  01:a标签：超链接标签

            <a href="www.baidu.com">链接 </a> #点击”链接“ 则自动跳转到 百度的网址

        02:a标签：跳转到指定页面或则位置（锚点，像博客中点击一个目录，直接就跳转到相关目录下）

        例子：

            <a href="#p1">哈哈</a>  #点击”哈哈“ 则自动跳转到  ”锚点跳转“

            <p id="p1">锚点跳转</p>

五：列表
    01：无序列表

　　　　<!--<ul type="disc">-->

        #<!--<ul type="circle">-->

        #<!--<ul type="square">-->

        #<ul type="none">

            <li>第一项</li>

            <li>第二项</li>

            <li>第三项</li>

        </ul>

        type：disc（实心圆），circle（空心圆），square（实心方块）

    02：有序列表

　　　　<ol type="A" >

            <li>无序列表ol</li>

            <li>无序列表ol</li>

            <li>无序列表ol</li>

            <li>无序列表ol</li>

        </ol>

        i,I  罗马数字增加

        type:A（A，B，C....）,a(a,b,c,...),I,i ，1，默认是从1开始，往后面开始排序（1，2，3）

六：标题

　　<dl>标题

        <dt>标题dt一</dt>

        <dd>内容dd</dd>

        <dt>标题dt二</dt>

        <dd>内容dd二</dd>

    </dl>

七：表格

　　表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干个单元格组成，单元格可以包含文字，列表，图案

    单表等等

    <!--cellspacing  内边距  边框和内容之间的距离

    cellpadding  外边距  内外边框之间的距离

    -->

    <table border="" cellpading="" cellspacing="">

        <thead align="right">   <!--   左/右对齐 -->

        <tr>

            <th>序号</th>  <!--  #一行 <th></th> 单元格(一个标签表示一个单元格)  -->

            <th>姓名</th>

            <th>爱好</th>

        </tr>

        </dt>

        </thead>

        <!-- 内容部分 -->

        <tbody>

        <!--内容第一个空格-->

        <tr>  <!-- 第二行第一个单元格  -->

            <td> 111</td>

            <td> 111</td>

        <!--  <td rowspan=""> 一个单元格竖跨多少行，<td colspan=""> 一个单元格横跨多少列 -->

            <td> 111</td>

        </tr>

        <!-- 第二行第一个单元格  -->

            <td> 222</td>

            <td> 222</td>

            <td> 222</td>

        </tr>

        </tbody>

    </table>

属性:

    border: 表格边框.

    cellpadding: 内边距 （内边框和内容的距离）

    cellspacing: 外边距.（内外边框的距离）

    width: 像素 百分比.（最好通过css来设置长宽）

    rowspan: 单元格竖跨多少行

    colspan: 单元格横跨多少列（即合并单元格）

巴特西

day--42 前端基础小结

最新文章

热门文章