您的位置: 首页  >  IT文章  >  前端1

前端1

分类: IT文章 • 2022-02-11 11:48:05

前端1

一、什么是前端？

  1. 定义：任何与用户直接打交道的操作界面

  2. HTML, CSS, JavaScript

    HTML     内容    网页的骨架
CSS         外观    网页的样式
JavaScript  动作    网页的动态效果

  3. 流程

    HTML（标签）——CSS（选择器——属性）——JavaScript（基础语法——BOM&DOM）

二、手动实现web服务端

  1. web服务的本质

    1. 浏览器

    2. 服务器

    3. 文件（后缀名是.html结尾的文件）

  2. 浏览器中敲入网址回车发生了几件事

    1. 浏览器朝服务端发送请求
    2. 服务端接收请求
    3. 服务端返回相应的响应
    4. 浏览器接收响应，根据特定的规则渲染页面展示给用户看

  3. web服务端代码

    import socket 

server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)

while True:
    conn, addr = server.accept()
    data = conn.recv(1024)
    print(data)
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
    conn.send(b'hello')
    conn.close()

三、HTTP协议（超文本传输协议）

  1. 作用：规定了浏览器与服务端之间消息传输的数据格式。
  2. 四大特性
    1. 基于请求响应
    2. 基于TCP/IP至上的作用于应用层的协议
    3. 无状态（服务端无法保存用户的状态，一个人来多少次都是新人）
    4. 无链接（请求来一次响应一次，之后立马断开连接）
  3. websocket：相当于是HTTP协议的一个大的补丁它支持长链接。
  4. 两种消息传输的数据格式
    • 请求数据格式
      1. 请求首行（标识HTTP协议版本，当前的请求方式（get，pose））
      2. 请求头（一大堆k, v键值对）
      3. （\r\n）
      4. 请求体（携带的是一些敏感的信息，如密码，身份证号等）
    • 响应数据格式
      1. 响应首行（标识HTTP协议版本，响应状态码）
      2. 请求头（一大堆k, v键值对）
      3. （\r\n）
      4. 请求体（返回给浏览器页面的数据，通常响应体都是HTML页面）
  5. 两种请求方式
    1. get请求
      朝服务端要资源（比如浏览器窗口输入www.baidu.com）
    2. pose请求
      朝服务端提交数据（比如用户登录，提交用户名和密码）
  6. 响应状态码
    • 定义：用一串简单的数字表示一些复杂的状态或提示信息
    • 五种响应状态码
      1. 1xx：服务端已经成功接收了你的数据，正在处理，你可以继续提交额外的数据
      2. 2xx：服务端成功响应你想要的数据（请求成功200）
      3. 3xx：重定向（访问一个需要登录之后才能访问的页面时，窗口会自动调到登录页面。301，302）
      4. 4xx：请求错误（请求资源不存在404，请求不合法、不符合内部规定或权限不够403）
      5. 5xx：服务器内部错误（500）
  7. url：统一资源定位符（网址）

四、HTML（超文本标记语言）

  1. 作用：要想让页面能够被浏览器正常显示出来，页面必须遵循HTML标记，也就意味着所有能被浏览器显示出来的页面，内部都是HTML代码。

  2. HTML注释

    • 单行注释和多行注释
    <!--单行注释-->
    <!--
多行注释
多行注释
-->
    • 书写方式
    <!--导航条样式开始-->

<!--导航条样式结束--》

  3. HTML文档结构

    <html>
<head></head>    # head内的标签，不是用来展示给用户看的，而是定义一些配置，主要是给浏览器看的。
<body></body>    # body内的标签，就是浏览器展示给用户看的内容
</html>

  4. 打开html页面的两种方式

    • 找到文件路径，选择浏览器打开
    • pycharm快捷方式直接打开

  5. 标签的分类

    1. 单标签和双标签

      • 单标签（自闭和标签）
      <img >
      • 双标签
      <h1></h1>
<a></a>

    2. 块级标签和行内标签

      • 块级标签（独占浏览器一行）
      • 行内标签（自身文本多大就占多大）

五、head内常用标签

  • head内常用标签

    标签 意义
    定义网页标题
    定义内部样式表
    定义JS代码或引入外部JS文件
    引入外部样式表文件或网站图标
    定义网页原信息

  • meta

    • 特点

      1. 提供有关页面的元信息，针对搜索引擎更新频度的描述和关键词
      2. 位于稳当头部，不包含任何内容
      3. 提供的信息用户不可见

    • meta标签的两种属性

      1. http-equiv属性：相当于http文件头作用，可以向浏览器传回一些有用的信息，以帮助正确的显示网页内容。与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

        <!--指定文档的编码类型>
<meta http-equiv='content-Type' charset='utf8'> 
<!--2秒后跳转到对应的网址-->
<meta http-equiv='refresh' content='2;URL=https://www.xxx.com'
<!--告诉IE以*模式渲染文档-->
<meta http-equiv='x-ua=compatible' content='IE=edge'>

      2. name属性：主要用于描述网页，与之对应的属性值为content， content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的

        <meta name='keywords' content='meta总结，html meta,meta属性，meta跳转'>
<meta name='description' content='xxx'

六、body内常用标签

  1. 基本标签

    <h1>一级标题标签<h1>
<p>段落标签</p>

<b>加粗</b>
<i>斜体<i>
<u>下划线</u>
<s>删除</s>

<!--换行-->
<br>
<!--水平线-->
<hr>

  2. 特殊符号

    内容 对应代码
    空格  
    > >
    < <
    & &
    ¥ ¥
    版权 ©
    注册 ®

​

相关推荐