前端前夕

  1. 前端三剑客
  2.     HTML         网页的骨架
  3.     CSS          网页的样式
  4.     JavaScript   网页的动态
  5. 1.编写服务端
  6. 2.浏览器充当客户端访问服务端
  7. 3.浏览器无法正常展示服务端内容(因为服务端得数据没用遵循标准)
  8. 4.HTTP协议>>>:最主要的内容就说规定了浏览器与服务端之间数据交互的格式

HTTP协议

  1. 1.四大特性
  2.    1.基于请求响应
  3.       客户端发送请求  服务端回应响应
  4.    2.基于TCP、IP作用于应用层之上的协议
  5.       该协议属于应用层
  6.    3.无状态
  7.        服务端不会保存客户端的状态(记不住人)
  8.    4.无\短连接
  9.        客户端与服务端不会长久保持连接
  11. 2.数据格式
  12.   1.请求格式
  13.     请求首行(请求方式(有很多种)协议版本)
  14.     请求头(一大堆K:V键值对)
  15.    换行
  16.     请求体(存放敏感信息 并不是所有的请求方式都有请求体)
  17.    2.响应格式
  18.      响应首行(状态码  协议版本)
  19.      响应头 (一大堆K:V键值对)
  20.     换行
  21.      响应体(存放给浏览器展示的数据)
  22. 3.响应状态码
  23.    用数字来表达一些文字意义(类似于暗号)
  24.     1xx:服务端已经接收到了你的请求正在处理 客户端可以继续发送或者等待
  25.     2xx:200  OK请求成功 服务端发送了对应的响应
  26.     3xx:302(临时) 304(永久) 重定向(想访问网页A但是自动跳到了网页B)
  27.     4xx:403访问权限不够  404请求资源不存在
  28.     5xx: 服务端内部错误
  29.      在公司中我们还会自定义更多的响应状态码 通常以10000起步
  30.           聚合数据网站

HTML简介

  1. 1.直接发送手写的数据
  2. 2.转为发送文件里面的数据
  3. 3.编写HTML出现特殊的现象
  5. 超文本标记语言:所见即所得(没有任何逻辑 是什么就是什么)

HTML概览

  1. 1.HTML注释语法
  2.    <!--注释内容-->
  3. 2.HTML文档结构
  4.    <html>   固定格式 html包裹
  5.      <head>主要放给浏览器交互的配置</head>
  6.      <body>主要放给用户查看的花里胡哨的内容</body>
  7.     </html>
  8. 3.HTML标签分类
  9.      单标签(自闭和标签)
  10.          <img/>
  11.      双标签
  12.          <h1></h1>

预备知识

  1. 1.网页信息数据一般也会存放于文件中
  2.      .html
  3. 2.pycharm支持前端所有类型的文件编写
  4.    内置有自动补全的功能 我们只需要专注于标签名的编写即可
  5. 3.html 文件的打开
  6.    内置有自动调用浏览器的功能

head内常见标签

  1. 1.title 网页小标题
  2. 2.meta定义网页源信息(很多配置)
  3.   <meta name="keywords" content="查询关键字">
  4.   <meta name="description" content="网页简介">
  5. 3.style内部支持编写css代码
  6.   <style>
  7.      h1{color :greenyellow;}
  8.   </style>
  9. 4.link引入外部css文件
  10.    <link rel="stylesheet" href="mycss.css">
  11. 5.script支持内部编写js代码也可以引入外部js文件
  12.   <script>
  13.          prompt('好好活着','不要浪费生命')
  14.   </script>
  15.   <script src="myjs.js"></script>
  16. ps:了解每个标签大致的作用即可

body内基本标签

  1. 1.标题标签
  2.   h1~h6
  3. 2.段落标签
  4.    p
  5. 3.其他标签
  6.    u 下划线
  7.    i  斜体
  8.    s  删除线
  9.    b  加粗
  10. ps:相同效果可能是有不同的标签实现的 不是独一无二的
  11. 4.换行分割线
  12.     br  换行
  13.     hr  分割线
  14. """
  15. 标签的分类二
  16.     行内标签     u i s b
  17.          内部文本多大就占多大
  18.     块儿级标签    h系列 p
  19.          独占一行
  20. """

常见符号

  1. 1.&nbsp;   空格
  2. 2.&gt;     大于
  3. 3.&lt;     小于
  4. 4.&amp;    &符
  5. 5.&yen;    ¥
  6. 6.&copy;
  7. 7.&reg;

body内布局标签

  1. div
  2.    块儿级标签
  3. span
  4.     行内标签
  5. """
  6. 标签之间可以相互嵌套 并且理论上可以无限套娃
  7.     块儿级标签内部可以嵌套块儿级标签和行内标签
  8.     p标签虽然是块儿级标签 但是它的内部也不能嵌套块儿级标签
  9. """

body内常用标签

  1. """
  2. 标签括号内填写的 什么=什么 称之为的标签的属性
  3.   1.默认属性
  4.      标签自带的  编写的时候有自动提示
  5.   2.自定义属性
  6.      用户自定义  编写不会有提示甚至会飘颜色
  7. """
  8. a标签     链接标签
  9.   href
  10.     1.填写网址     具备跳转功能
  11.        href='url'
  12.     2.填写其他标签的id值  具备锚点功能
  13.         href='#id'
  14.   target
  15.      默认_self原网页跳转
  16.      _blank新建网页跳转
  18. img标签   图片标签
  19.     src
  20.         1.填写图片地址
  21.         2.还有更多特性
  22.     title
  23.        鼠标悬浮在图片上自动展示的文本
  24.     alt
  25.        图片加载失败提示的信息
  26.     width\height
  27.        图片的尺寸 两者调整一个即可 等比例缩放

列表标签

  1. 无序列
  2.    <ul>
  3.         <li>手机</li>
  4.         <li>衣物</li>
  5.         <li>电子</li>
  6.    </ul>
  7. ps:页面上所有规则排列的横向或者竖向的数据 一般使用的都是无需列表
  8. 有序列表
  9.    <ol type="I">
  10.         <li>111</li>
  11.         <li>222</li>
  12.         <li>333</li>
  13.    </ol>
  14. ps:还可以通过type竖向切换数字
  15. 标题列表
  16.    <dl>
  17.         <dt>大标题</dt>
  18.             <dd>小标题1</dd>
  19.             <dd>小标题2</dd>
  20.         <dt>大标题</dt>
  21.             <dd>小标题1</dd>
  22.             <dd>小标题2</dd>
  23.             <dd>小标题3</dd>
  24.     </dl>

表格标签

  1. 1.先写基本骨架
  2.     <table>
  3.         <thead></thead>
  4.         <tbody></tbody>
  5.     </table>
  6. 加边框 可以在table后面加border="数字"
  7. 2.再写表头及表单数据
  8.     <tr>  一个tr标签就表示一行
  9.         <th>编号</th>  th主要用于表头字段中 用来加粗显示
  10.         <th>姓名</th>
  11.         <th>年龄</th>
  12.     </tr>
  14.     <tr>
  15.         <td>1</td>  td主要用于表达数据中
  16.         <td>jason</td>
  17.         <td>18</td>
  18.     </tr>
  20. <table>
  21.       <thead>
  22.             <tr>
  23.                 <th>编号</th>
  24.                 <th>姓名</th>
  25.                 <th>年龄</th>
  26.             </tr>
  27.        </thead>
  28.         <tbody>
  29.             <tr>
  30.                 <td>1</td>
  31.                 <td>jason</td>
  32.                 <td>18</td>
  33.             </tr>
  34.         </tbody>
  35.  </table>

表单标签

  1. 可以获取到用户的数据并发送给服务端
  3. form 标签
  4.    action  控制数据的提交地址
  5.    method  控制数据的提交方法
  6. input标签(类似于前端的变形金刚)
  7.    type属性
  8.        text        普通文本
  9.        password    密文展示
  10.        date        日期选项
  11.        email       邮箱格式
  12.        radio       单选
  13.        checkbox    多选
  14.        file        文件
  15.        submit      触发提交动作
  16.        reset       重置表单内容
  17.        button      暂无任何功能
  19. select标签      下拉框
  20.     option标签    一个个选项
  22. textarea标签     获取大段文本
  24. input标签应该有name属性
  25.    name属性相当于字典的键  input标签获取到的用户数据相当于字典的值
  26.    点击发送就会组织成字典的形式发送给服务端这样才具有明确意义

python之路39 前端开始 各种标签的更多相关文章

  1. 【python之路39】Python 正则表达式

    Python 正则表达式 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. r ...

  2. 自学Python之路-Python并发编程+数据库+前端

    自学Python之路-Python并发编程+数据库+前端 自学Python之路[第一回]:1.11.2 1.3

  3. Python之路,Day17 - 分分钟做个BBS论坛

    Python之路,Day17 - 分分钟做个BBS论坛   本节内容: 项目:开发一个简单的BBS论坛 需求: 整体参考"抽屉新热榜" + "虎嗅网" 实现不同 ...

  4. Python之路【第十九篇】：爬虫

    Python之路[第十九篇]:爬虫   网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用 ...

  5. python之路 目录

    目录 python python_基础总结1 python由来 字符编码 注释 pyc文件 python变量 导入模块 获取用户输入 流程控制if while python 基础2 编码转换 pych ...

  6. Python之路【第十八篇】：Web框架们

    Python之路[第十八篇]:Web框架们   Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Pytho ...

  7. Python之路【第十七篇】：Django【进阶篇 】

    Python之路[第十七篇]:Django[进阶篇 ]   Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接 ...

  8. Python之路【第十六篇】：Django【基础篇】

    Python之路[第十六篇]:Django[基础篇]   Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了O ...

  9. Python之路【第十五篇】：Web框架

    Python之路[第十五篇]:Web框架   Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 ...

  10. Python之路【第九篇】：Python操作 RabbitMQ、Redis、Memcache、SQLAlchemy

    Python之路[第九篇]:Python操作 RabbitMQ.Redis.Memcache.SQLAlchemy   Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用 ...

随机推荐

  1. Spring使用注解开发及使用java类进行配置bean

    Spring使用注解开发 说明 在spring4之后,想要使用注解形式,必须得要引入aop的包 在配置文件当中,还得要引入一个context约束 <?xml version="1.0& ...

  2. Silky微服务框架之服务引擎

    构建服务引擎 在注册Silky微服务应用一节中,我们了解到在ConfigureServices阶段,通过IServiceCollection的扩展方法AddSilkyServices<T> ...

  3. 知识图谱-生物信息学-医学顶刊论文(Bioinformatics-2021)-MSTE: 基于多向语义关系的有效KGE用于多药副作用预测

    MSTE: 基于多向语义关系的有效KGE用于多药副作用预测 论文标题: Effective knowledge graph embeddings based on multidirectional s ...

  4. Java多线程（4）：ThreadLocal

    您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来- 为了提高CPU的利用率,工程师们创造了多线程.但是线程们说:要有光!(为了减少线程创建(T1启动)和销毁(T3切换)的时间),于是工程师们又接着 ...

  5. JS中对DOM元素的操作

    https://www.runoob.com/jquery/jquery-ref-html.html 1.each  遍历 //遍历所有class为checksingle的DOM元素 $(" ...

  6. Linux--多线程（一）

    线程 线程的概念 线程: 线程是OS能够进行运算调度的基本单位.线程是一个进程中的一个单一执行流,通俗地说,一个程序里的一个执行路线就叫做线程. 可以知道的是,一个进程至少有一个执行线程,这个线程就是 ...

  7. HAProxy反向代理实例

    1.环境准备: 设备 IP地址 作用 系统版本 web1 10.0.0.18 Nginx-Web服务器 Rocky8.6 web2 10.0.0.28 Nginx-Web服务器 Rocky8.6 Ha ...

  8. HTML5+CSS3常见布局方式

    1.等高布局 1.1 代码 等高布局是指子元素在父元素中高度相等的布局方式 <div class="father"> <div class="f1&qu ...

  9. 定位java程序中占用cpu最高的线程堆栈信息

    找出占用cpu最高的线程堆栈信息 在java编码中,有时会因为粗心导致cpu占用较高的情况,为了避免影响程序的正常运行,需要找到问题并解决.这里模拟一个cpu占用较高的场景,并尝试定位到代码行. 示例 ...

  10. <四>理解空间配置器allocator, 优化STL 中的Vector

    .在上一节我们实现的 MyVector存在哪些问题? 问题1 现在有Student类 class Student{ public: Student(){cout<<"构造Stud ...