前端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 写表的信息

posted @ 2019-11-12 22:26  KONNE  阅读(171)  评论(0)  编辑  收藏  举报