• 前端01初步了解前端


    软件开发架构

    目前的软件开发架构有两种

    b/s和c/s,我们现在用的架构已经慢慢在向b/s去靠拢了,就比如说微信小程序,支付宝小程序,出现小程序的原因,就是为了统一接口,让你只使用一个软件,就能在这个软件上使用多个软件,也增加了用户量

    web服务器的本质

    其本质就是请求和响应

    当我在浏览器输入一个网址时,首先会朝着指定的服务器发送一个请求,然后服务器接收请求,并进行处理,处理完成后会返回响应,最后浏览器会接收响应并渲染成页面给用户浏览

    请求方式:

    1. get请求

      朝服务器要资源,比如访问一个网址

    2. post请求

      朝服务器提交资源,比如登录功能

    HTTP协议

    是什么

    全称是超文本传输协议,协议通俗的说就是一个规范,HTTP协议就是浏览器和服务器的沟通的一种规范

    HTTP协议的作用

    规定了服务端和浏览器的传输格式

    为什么要有HTTP协议

    首先我们知道TCP协议是基于三次握手建立连接的,具有一定的可靠性,和安全性,但是因为它需要建立连接,所以当同时有十万个客户端同时连接服务端时,一直建立连接服务端是难以承载这么多的用户量的,所以这就衍生除了HTTP协议,HTTP协议在发送请求之后会立即关闭将连接,释放服务器的资源,极大的节省了服务器的压力,同时它又时基于TCP协议之上的,所以又保留了TCP协议的可靠性安全性。

    HTTP协议的四个特性

    1. 基于TCP/IP作用于应用层之上的协议

    2.基于请求响应

    一次请求对应一次响应,就比如我们在访问百度的时候,只有点击连接服务端才会给我们响应,不点击连接就服务端就不会有响应

    4.无连接

    HTTP协议在请求之后会立即断开服务器连接

    3. 无状态

    正是由于HTTP协议在请求之后会立即与服务器断开连接,所以它不会保存用户状态,无论这个客户端来了多少次,服务端都会把它当作一个全新的客户端。也就是说服务端并不知道客户端干了啥,这些大多都是基于性能去考虑的。

    所以后来就出现了cookies和sessions用来保存用户状态

    HTML

    什么时HTML

    HTML也是一种语言,全程是超文本标记语言

    使用HTML

    注释

    首先,使用一种语言就要先了解一下它的注释该怎么写

    其语法是

    <!--单行注释-->
    <!--
    多行注释
    ......
    ......
    -->
    

    我们在搭建页面的时候也可以用注释来划分区域

    HTML的文档结构

    <html>
    	<head></head>  <!--不是给人看的 给浏览器看的-->
    	<body></body>  <!--body内的代码才是给人看的-->
    </html>
    
    

    标签的分类

    1. 双标签
    2. 自闭合标签

    head内的常用标签

    title 定义网页标题

    style 内部可以写css代码

    link 可以引入外部的css文件

    script 可以写js的代码,也可以引入js的代码

    meta 定义网页原信息,其参数于name 和 content

    body内常用标签

    <h1>~<h6> 标题标签

    <p> 段落标签 一个p就是一行内容

    <s> 删除线

    <b> 加粗

    <u> 下划线

    <i> 斜体

    <br> 换行

    <hr> 一条分割线

    <b><s><u>hello<i>hello world</i></u></s></b>
    

    body 内的特殊号

    body内特殊符号

    &nbsp; 空格

    &amp; &

    &yen; ¥

    &gt; >

    lt; <

    &copy; ©

    &reg; ®

    标签分类

    1. 块儿级标签 h1~h6 p br hr div
      1. 独占一行
      2. 块儿级标签内可以嵌套其他块儿级和行内标签
      3. p标签虽然是快儿级标签 但是他的内部不能嵌套任何快儿级标签 只能嵌套行内标签
    2. 行内标签 s i u b span
      1. 内部文本多大 就占多大
      2. 行内不能嵌套块儿级

    标签通常应该有两个属性

    1. id 就类似于是身份证号 每一个标签 都应该有id值 并且在同一个html文档中

      标签的id不能重复

    2. class 类属性 有点类似于面向对象的继承 class = 'c1 c2 c3' 你这个标签就

      会拥有c1 c2 c3的所有样式

    body内重要的标签

    div

    一块区域 你可以往这块儿区域内填写任何内容

    span

    div和span是前期构建网页的基本骨架

    a 链接标签

    链接标签有两个共能

    1. 跳转功能 href参数控制跳转的地址

      这个地址如果在你的机器上如果没有被点击过那么默认是蓝色

      只要点过一次之后 之后颜色 都是紫色

      <a href="https://music.163.com/song?id=408814900&userid=344466378">这是一个链接</a>
      

    ​ a标签默认是在当前窗口跳转使用target = "_blank",可以新建窗口打开

    1. 锚点功能

      给a标签设置id值然后在href中书写对应的a标签id值 点击即可跳转到对应的位置

      <a href="" id="a1">开头</a>
      ......
      ......
      <a href="#a1">回到顶部</a>
      

    img 图片标签

    <img src="这里是链接" alt=没有图片,将就着看 title="点击图片显示的文字" width="大小"> 
    

    src

    1. 图片地址 网上的地址也可以是你的本地图片地址

    2. url(网址) 自动朝该网址发送get请求 获取图片资源

      alt
      当图片加载不出来的时候 展示的提示信息

    ​ title

    ​ 鼠标悬浮上去之后展示的提示信息

    ​ width和height

    ​ 这两个参数 你只需要设置一个 就可以 默认是等比例缩放

    ​ 两个都调整的话 图片就会失真

    列表标签

    无序列表

    <ul>      
                <li type="square"> 
                    《借我》&nbsp;&nbsp;谢春花                
                </li>
                <li>
                    《雾》&nbsp;&nbsp;年年/张小九
                </li>
            </ul>
    

    ​ type参数

    ​ disc(实心圆点,默认值)

    ​ circle(空心圆圈)

    ​ square(实心方块)

    ​ none(无样式)

    有序列表

     <ol>
                <li type="1">
                    《短叹》&nbsp;&nbsp;房东的猫
                </li>
                <li>
                    《盼兮》&nbsp;&nbsp;翁大涵
                </li>
            </ol>
    

    type参数

    1 数字列表,默认值

    A 大写字母

    a 小写字母

    Ⅰ大写罗马

    ⅰ小写罗马

    标题列表

    <dl>
                <dt>
                    《越过山丘》
                </dt>
                <dd>
                    李宗伟
                </dd>
            </dl>
    

    dt 小标题

    dd 小章节

    表格标签

    <table border="10">
                <thead>
                    <tr>
                        <th>name</th>
                        <th>hobby</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>lk</td>
                        <td>study</td>
                    </tr>
                </tbody>
            </table>
    

    border 控制表格的边界

    tr 控制行,一个tr 控制一行

    thead 写表的字段

    tbody 写表的信息

  • 相关阅读:
    UEBA——通过用户画像识别安全威胁
    《国富论》西方经济学的“圣经”——自利的人性是资本主义市场经济的基本假设,财富的源泉是劳动,钱变成可再生的钱“资产”而不是负债
    python berkeley 操作——尤其提示 需版本匹配
    druid.io 海量实时OLAP数据仓库 (翻译+总结) (1)——分析框架如hive或者redshift(MPPDB)、ES等
    万亿级日志与行为数据存储查询技术剖析(续)——Tindex是改造的lucene和druid
    编译原理Tiny语言的定义
    ubuntu 安装python,easy_install和pip
    ubuntu 安装eclipse
    ubuntu rpm 包安装使用
    linux chmod权限
  • 原文地址:https://www.cnblogs.com/lyyblog0715/p/11845833.html
Copyright © 2020-2023  润新知