首页 > 其他分享> > 前端-HTTP

前端-HTTP

2020-05-11 18:51:18 作者：互联网

前端

HTTP：搭建网页骨架

CSS：给骨架美化骨架

JS：控制网页的动态效果

HTML是什么？

超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm

HTTP的四大特征：

请求响应
TCP/IP作用于应用层之上的协议

　　3.无状态

　　　　HTTP是一种不保存状态,即无状态(stateless)协议。HTTP协议自身不对请求和响应之间的通信状态进行保存。

　　4.无/短链接

　　　　无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

　　　　长链接：双方建立链接之后不断开。

请求数据式与响应数据式

　　请求数据式：

- 请求首行(标识HTTP协议版本，当前请求方式)
  - 请求方式：
    - get请求：向服务端要数据
    - post请求：向服务端提交数据
- 请求头(一大堆k,v键值对)
- 请求体(并不是所有的请求方式都有get没有post有存放的是post请求提交的敏感数据)

　　响应数据式：

- 响应首行(标识HTTP协议版本，响应状态码)
- 响应头(一大堆k,v键值对)
- 　　
- 响应体(返回给浏览器展示给用户看的数据)

　　响应状态码：

200，OK 请求成功

403，请求不合法

404，请求资源不存在

500，服务器内部错误

HTML就是书写网页的一套标准

# 注释:注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->

HTML文档结构

<html>
    <head></head>:head内是定义一些配置主要是给浏览器看的
  <body></body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>

两种打开HTML文件的方式

找到文件所在的位置右键选择浏览器打开
在pycharm内部，集成了自动调用浏览器的功能，直接点击即可

标签的分类

<h1></h1>    双标签

<img/>    单标签(自闭和标签)

head内常用标签

<title>Title</title>  网页标题
<style>
        h1 {
            color: greenyellow;
        }
</style>  内部用来书写css代码

<script>
        alert(123)
</script>  内部用来书写js代码
<script src="myjs.js"></script>  还可以引入外部js文件

<link rel="stylesheet" href="mycss.css">  引入外部css文件

<meta> 跳转页面

body内常用标签

<h1>我是h1</h1>  标题标签 1～6级标题
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落</p>
<br>  换行
<hr>  水平分割线

常用标签

1.块儿级标签（div）:独占一行
    1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
    2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
        但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
   
2. 行内标签（span）:自身文本多大就占多大
      行内标签不能嵌套块儿级标签 可以嵌套行内标签

页面布局用占位div，span，之后再修改在，调整样式，div用来提前规定所有区域之后再往区域填写内容。

特殊符号

&nbsp;      空格
&gt;       大于号
&lt;       小于号
&amp;      &
&yen;      ¥
&copy;    ©
&reg;  ®

img标签

# 图片标签
<img src="" alt="">

src：    
    1.图片的路径    可以是本地的也可以是网上的
     2.url（自动朝该url发送get请求获取数据）

alt="派大星的好朋友"
    当图片加载不出来的时候 给图片的描述性信息

title="海绵宝宝"
    当鼠标悬浮到图片上之后 自动展示的提示信息

height="800px"     
width=""
    高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
         如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真

<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1750143968,1315119488&fm=26&gp=0.jpg" alt="派大星的好朋友" title="海绵宝宝" >

a标签

# 链接标签
<a href=""></a>
"""
当a标签指定的网址被点击过则会改变颜色
"""

href：
    1.放url，用户点击就会跳转到该url页面
    2.放其他标签的id值 点击即可跳转到对应的标签位置

target：
    默认a标签是在当前页面完成跳转  _self
        修改为新建页面跳转               _blank

# a标签的锚点功能
"""eg:点击一个文本标题 页面自动跳转到标题对应的内容区域"""
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>

标签具有的两个重要书写

1.id值
    类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
    该值有点类似于面向对象里面的继承 一个标签可以继承多个class值

列表标签

无序列表

<ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第二项</li>
        <li>第二项</li>
</ul>

有序列表

<ol >
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

标题列表

<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>
    <dt>标题3</dt>
    <dd>内容3</dd>
</dl>

标签：浏览器,请求,标签,前端,跳转,块儿,HTTP
来源： https://www.cnblogs.com/zhenghuiwen/p/12871081.html