前端学习笔记-07一些总结(代码片段)

前端的概念

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。

前端的学习思路

HTML、CSS、JavaScript
这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。

HTML

HTML:网页的骨架 没有任何的样式
指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。

CSS

CSS:给骨架添加各种样式 变得好看
级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

JavaScript

JS:控制网页的动态效果
是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。

还有不少封装好的框架比如：BOOTSTRAP、JQuery、Vue 只需按固定的语法调用即可

软件开发架构

cs 客户端-服务端
bs 浏览器-服务端

从本质上讲，bs也是cs
自然地，浏览器可以充当很多服务端的客户端比如 爱奇艺视频 搜狐视频…

浏览器访问网址的流程

浏览器朝服务端发送请求→服务端接受请求→ 服务端返回相应的响应(eg:返回网页)→浏览器接收响应 →根据特定的规则渲染页面展示给用户看

HTTP协议

原理：通过制定统一标准使得浏览器能够与我们构建地服务端交互，达到使用浏览器作为客户端的目的，从而扩大了我们客户端的潜在使用人数，因为每台电脑基本都有浏览器

超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式…
超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII形式给出；而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣，因为它使开发和部署非常地直截了当。

四大特性

1.基于请求响应

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

3.无状态
不保存用户的信息
由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术cookie、session、token…

4.无/短链接
请求来一次我响应一次 之后我们两个就没有任何链接和关系了
长链接:双方建立连接之后默认不断开 websocket(后面讲项目的时候会讲)

请求数据格式

请求首行(标识HTTP协议版本，当前请求方式)

请求头(一大堆k,v键值对)-head

请求体(并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据)

响应数据格式

响应首行(标识HTTP协议版本，响应状态码)

响应头(一大堆k,v键值对)

响应体(返回给浏览器展示给用户看的数据)

响应状态码

200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误

请求方式

GET：

GET通常用于获取服务端数据。

常见发起GET请求的方式有：URL 、src/href、表单（form）。

GET方式提交数据的格式:

格式:index.php?userName=jack&password=123 （注意：index.php？key=value&key=value。 userName=jack&password=123 叫做查询字符串）

参数名与参数值之间没有空格

参数值不需要使用单双引号包括

GET方式提交数据特点：

1、get方式在url后面拼接参数，只能以文本的形式传递参数。

2、传递的数据量小，4kb左右（不同浏览器会有差异）。

3、安全性低，会将信息显示在地址栏。

4、速度快，通常用于对安全性要求不高的请求。

POST请求：

POST就是发送、提交。可以向指定的资源提交要被处理的数据。

如果使用表单方式进行提交，表单的method必须设置为POST。

post方式提交的特点：

1、post提交数据相对于get的安全性高一些。（注意：抓包软件也会抓到post的内容，安全性要求高可以进行加密）

2、传递数据量大，请求对数据长度没有要求。

3、请求不会被缓存，也不会保留在浏览器的历史记录中。

4、用于密码等安全性要求高的场合，提交数据量较大的场合，如上传文件，发布文章等。

5、POST方式提交数据上限默认为8M（可以在PHP的配置文件post_max_size选项中修改）

url:统一资源定位符(即网址)

在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位器），它是WWW的统一资源定位标志，就是指网络地址。

标签的分类1

<h1></h1>
<a href="https://www.AAAAAAAAAAAAAAAAAAAAAAAAAA.com/"></a>
<img/>

1  双标签
2  单标签(自闭和标签)

head内常用标签

在书写HTML代码的时候 你只需要写标签名 然后tab就能自动补全

<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 name="keywords" content="用于关键字检索">  当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户

<meta name="description" content="用于网页描述">  网页的描述性信息

body内常用标签

你肉眼能够在浏览器上面看到的花里胡哨的页面。内部都是HTML代码

基本标签

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

标签的分类2

# 1 块儿级标签:独占一行
		h1~h6	p div
  	1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
    2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
    	但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
      	如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)
       
    总结:
      	只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
        但是p标签只能嵌套行内标签（HTML书写规范）
# 2 行内标签:自身文本多大就占多大
		i u s b span
  	行内标签不能嵌套块儿级标签 可以嵌套行内标签
    

特殊符号

   空格
>   大于号
<   小于号
&  &
¥  ¥
©		©
商标®  ®

常用标签

div  块儿级标签
span  行内标签
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签 

img标签

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

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

alt="这是我的BOSS"
	当图片加载不出来的时候 给图片的描述性信息

title="资本家"
	当鼠标悬浮到图片上之后 自动展示的提示信息

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

a标签

# 链接标签
<a href=""></a>
"""
当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值

标签既可以有默认的书写也可以有自定义的书写

<p id="d1" class="c1" username="jason" password="123"></p>

列表标签

• 无序列表(较多)

  <ul>
          <li>第一项</li>
          <li>第二项</li>
          <li>第二项</li>
          <li>第二项</li>
  </ul>
  虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签
  

• 有序列表(了解)

  <ol type="1" start="5">
      <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>