HTTP协议 前端 HTML

2022/4/23 23:15:28

编程Tag： 前端 标签 浏览器 页面 html 客户端 http

本文主要是介绍HTTP协议 前端 HTML，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

day 38

 

 

 

 

 

前端简介

什么是前端？

  前端，也称为“客户端开发”，简单来说，你可以在应用程序或网站的屏幕上看到的所有内容都属于前端。

 

什么是后端？

  后端，也称为“服务器端开发”，也就是在系统“后面”所发生的事情。同样，在后端服务器和浏览器或应用程序之间存储网站、应用数据和中间媒介的服务器都属于后端。简单来说，在应用程序或网站的屏幕上看不到的所有东西都是前端的后端。

 

学前端我们学什么？

  前端三剑客>>>: HTML  CSS  JavaScript（简称JS）

一句话概括：HTML 是骨骼， CSS是皮肤， JS只是夹在中间的神经组织！

细说的话：

  HTML是由多种骨头（标签）组成的骨架

  CSS是皮肤，让骨架变得好看

  JS是用来控制单个动作（抬手、张嘴、转头，踢腿）

 

HTTP协议

http协议也被称之为超文本传输协议，所有的www都必须遵守这个协议。设计http的初衷是为了提供一种发布和接收html页面的方法，http协议在网络OSI模型中属于应用层协议，它是基于TCP协议的应用层传输协议。

http协议是用于从服务器传输超文本到本地浏览器的传输协议。它可以使浏览器更加高效，网络传输更少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等。

http协议是一种无状态协议，本身不会对发过的请求、相应的通信状态持久化处理。这样做是为了保持http协议的简单性，从而能够处理大量的请求，提供效率。

 

 可以充当客户端的有哪些?

1.自己写的python代码(TCP客户端)
  2.别人写的浏览器
  '''cs架构与bs架构:bs本质也是cs'''

 

四大特性

1.基于请求、响应
  	服务端永远不会主动给客户端发消息 必须是客户端先请求服务端被动响应
    
  2.基于TCP/IP作用于应用层之上的协议
  	应用层协议:HTTP HTTPS FTP ...
    
  3.无状态
  	服务端不保存客户端状态
    
  4.短连接
  	不保持客户端与服务端之间的链接导通
    	补充:websocket(长连接) 主要用于加好友聊天等业务

 

数据格式

  请求格式:客户端给服务端发送消息应该遵循的数据格式

1.请求首行(请求方法 协议版本)
2.请求头(一大堆k:v键值对)
3.(换行不能省略)
4.请求体(携带敏感数据:密码 身份照号...) 不是一直都有

  响应格式:服务端给客户端发送消息应该遵循的数据格式

1.响应首行(响应状态码 协议版本)
2.响应头(一大堆k:v键值对)
3.(换行不能省略)
4.响应体(给浏览器展示给用户看的页面内容)

 

响应状态码 

  用数字来表示一串中文意思(简化理解)

1XX:服务端成功接收到了你的数据正在处理 你可以等待或者继续发送
    2XX:200 OK  表示请求成功 服务端给出了响应
    3XX:301\302 表示重定向(想访问A页面但是自动跳转到了B页面)
    4XX:403请求不合法(权限不够)	404请求资源不存在
    5XX:都是服务端错误  与客户端无关(代码bug、机房炸了...)
  在工作中还会自定义状态码(因为默认的不够)
  	自定义状态码一般都是从10000开始
    # 以后我们进公司写后端也需要给前端提供一个手册
      	eg:聚合数据

一次完整的http请求的过程

1.对http://www.baidu.com这个网址进行DNS域名解析，得到对应的IP地址
2.根据这个IP，找到对应的服务器，发起TCP的三次握手
3.建立TCP连接后发起HTTP请求
4.服务器响应HTTP请求，浏览器得到html代码
5.浏览器解析html代码，并请求html代码中的资源（如js、css图片等）（先得到html代码，才能去找这些资源）
6.浏览器对页面进行渲染呈现给用户

 

什么是HTML？

  HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。

 

HTML是什么样的？

  简单地来说，HTML的语法就是给文本加上表明文本含义的标签(Tag)，让用户（人或程序）能对文本得到更好的理解。

下面是一个最简单的HTML文档：

 

HTML操作指南

1.存放HTML代码的文件后缀名一般都是.html
	
2.HTML:超文本标记语言
	它没有任何的逻辑 固定搭配 """所见即所得"""

3.HTML文档结构
	<html>
  	<head>给浏览器看的数据</head>
  	<body>给用户看的数据</body>
  </html>

4.HTML标签的分类
	1.双标签:有头有尾		内容写在中间
    	<h1></h1>	<html></html>
  2.自闭合标签:单标签
  		<img/>				一般有特殊功能
  
5.HTML注释语法
	<!--单行注释-->
  <!--
  多行注释
  -->
  '''html由于标签非常的多 所以可以通过注释区分页面区域'''
    
6.如何打开html标签
	1.查找并右键选择打开方式
    
7.pycharm快捷方式(重要)
  	html文件内容区右上方浏览器图标
 
8.html标签其实没有缩进的概念
	之所以缩进是因为我们习惯了 更加美观

9.在pycharm中的html文件内
	编写标签只需要写表名名称即可 按tab键自动补全
 
10.在pycharm中的html文件内
	注释的快捷键也是ctrl+?

 

头部内容  head内常见标签

<head></head>：这2个标记符分别表示头部信息的开始和结尾。
头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。
头部中最常用的标记符是标题标记符和meta标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用做书签和收藏清单。

以下表格列出了 HTML head 元素：

标签 描述  
<head> 定义了文档的信息  
<title> 定义了文档的标题 控制网页小标题
<base> 定义了页面链接标签的默认链接地址  
<link> 定义了一个文档和外部资源之间的关系 引入外部css文件
<meta> 定义了HTML文档中的元数据 其中keywords：搜索引擎查询关键词 description：用于展示页面搜索结果的文本描述
<script> 定义了客户端的脚本文件 内部支持编写js代码 也可以src属性引入外部js文件
<style> 定义了HTML文档的样式文件 内部支持编写css代码

正常的业务逻辑：

  HTML  CSS  JS 都会分不同的文件储存  用于解耦合

 

主体内容  body内特殊符号

  <body><body/>；，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

 

基本标签：

1.标题：总共有6个等级，定义方法如下
<h1><h1/>定义一级标题
<h2><h2/>定义二级标题
<h3><h3/>定义三级标题
<h4><h4/>定义四级标题
<h5><h5/>定义五级标题
<h6><h6/>定义六级标题

2.文本
<p><p/>定义文本

3.换行符
<br/>换行符

4.水平分割线
<hr>水平分割线

 

 body内特殊符号：

显示结果 描述 实体名称 实体编号
  空格 &nbsp;  
< 小于号 &lt; <
> 大于号 &gt; >
& 和号 &amp; &
" 引号 &quot; "
' 撇号 &apos; (IE不支持) '
￠ 分 &cent; ¢
￡ 镑 &pound; £
￥ 日元 &yen; ¥
€ 欧元 &euro; €
§ 小节 &sect; §
© 版权 &copy; ©
® 注册商标 &reg; ®
™ 商标 &trade; ™
× 乘号 &times; ×
÷ 除号 &divide; ÷

 

body内常见标签

"""
标签的类别
	块儿级标签:h1~h6  p	div
		默认独占浏览器一行内 
        
	行内标签:s i u b span
		自身内部文本多大就占多大
	
标签之间支持嵌套(最好是布局类相关标签参与)
	块儿级标签可以嵌套任意标签
		不属于布局标签的块儿级标签不建议嵌套块儿级标签
        
	行内标签只能嵌套行内标签
"""
1.布局标签
	div
  span
  # 页面的编写首先就是先用布局标签占位 之后填充内容即可
  

2.图片标签
	img
  	src			图片路径
    title		鼠标悬浮自动展示提示信息
    alt	  	    当图片无法正常展示自动提示的信息
    height 	    自定义图片高度
    width       自定义图片宽度
    # height和width调整一个另外一个自适应调节 单位是px(像素)
    
3.链接标签
	a
  	href	  点击跳转到位置
    					可以写网址
      					<a href='网址'></a>
            
      				    也可以写标签id值
          			    <a href='页面上某个标签id值'></a>
                    
    target	控制是否当前页跳转
    				    默认_self当前页
      				    设置_blank新建页

 

标签的两大重要参数

1.id
	类似于身份证号 同一个html页面上标签的id值不允许重复
  用于精确查找某个标签(因为一个html页面上相同标签名的标签太多)
2.class
	类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)

 

无序列表（列表标签中使用最多的一种，非常重要）：unordered list 

#1、作用：
制作导航条、商品列表、新闻列表等
#2、组合使用ul>li*n（n为需要的数量）
    <ul>
        <li>秒杀</li>
        <li>优惠券</li>
        <li>PLUS会员</li>
        <li>闪购</li>
        <li>拍卖</li>
        <li>京东服饰</li>
        <li>京东超市</li>
        <li>生鲜</li>
        <li>全球购</li>
        <li>京东金融</li>
    </ul>
 
#3、ul标签的属性type（这属于列表的样式，所以了解即可）
type：列表标识的类型
        disc：实心圆(默认值)
        circle：空心圆
        square：实心矩形
        none：不显示标识
可以通过css直接去掉小圆点
<style type="text/css">
            ul {
                list-style: none;
            }
</style>
 
#4、注意
ul与li是组合标签应该一起出现，并且ul的子标签只应该是li，而li的子标签则可以是任意其他标签

 

table 表格标签 

  语义：标记一段数据为表格

#1、作用
表格标签是一种数据的展现形式，当数据量非常大的时候，使用表格的形式来展示被认为是最清晰的
 
#2、格式
<table>
    <tr>
        <td></td>
    </tr>
</table>
 
tr代表表格的一行数据
td表一行中的一个普通单元格th表示表头单元格
 
#3、注意点：
表格标签有一个边框属性，这个属性决定了边框的宽度。默认情况下这个属性的值为0，所以看不到边框

 



这篇关于HTTP协议 前端 HTML的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程