day50——前端简介、标签分类、常用标签

初始前端

什么是前端

我们看到的用来跟用户打交道的界面或者说窗口都可以称之为前端，例如：手机界面，pid界面，电脑的窗口，qq聊天窗口等等。

什么是后端

后端简单来说就是对前端功能提供支持的一堆堆复制的逻辑代码，后端才是真的“幕后黑手”，它的特点就是不跟用户打交道，和用户打交道的操作都交给前端来做。

我们为何要学前端

我们的初衷是成为一个全栈开发工程师（Full Stack developer），自然前后端都要懂，但前端我们不会深入的去学习，我们的重点在后端，我们只需要能够达到看的懂基本的前端代码并可以搭建起简答的页面即可。

前端三剑客

  • HTML

    网页的骨架，没有任何的样式

  • CSS

    给骨架添加各种样式，进行渲染，让其变得好看点，让用户操作变得更加友好。

  • JS(javasript)

    控制网页的动态效果

前端框架：BOOTSCRAP、JQuery、Vue等

浏览器输入网址回车发生的几件事

  • 浏览器向服务端发送请求
  • 服务端接到请求（eg：请求百度首页）
  • 服务端返回请求想应的回应（eg：返回百度首页）
  • 浏览器接受到回应进行渲染页面然后展现给用户

浏览器

浏览器可以充当很多服务端的客服端，如腾讯视频、百度、淘宝等，浏览器在跟不同的服务端进行数据交互的时候，格式可能各不相同，那么怎么才能让浏览器跟不同的服务端交互数据的时候不出错呢？

  • 方法一：

    写一个全能的浏览器，浏览器能够自动的识别不同的服务端进行不同处理，就好比让一个人学会所有的语言，这明显不切实际。

  • 法方二：

    用一贯的套路，进行统一标注，规定如果你服务端想要跟浏览器进行数据交互的时候，必须遵循一些规则，这些的规则也就是我们下面要讲到的HTTP协议。

HTTP协议

HTTP协议又称为超文本传输协议，上面提到它是用来规定服务端与浏览器之间数据交互的格式。

HTTP协议四大特性

  • 基于请求响应（eg：请求百度首页；响应百度首页）

  • 基于TCP/IP作用与应用层之上的协议

  • 无状态（不是单杀faker的那位……）

    不保存用户的信息

    eg：请女神吃了一百顿饭，她还仅仅只是你心中的女神。

    由于HTTP的无状态性，后续出现了一些专门用来记录状态的技术如：cookie、session、token等

  • 短/无连接

    请求一次就只响应一次，服务端和浏览器之间没有建立任何的链接和关系。

    eg：one night...

    ps：长链接，双方建立链接后默认不断开，如：websocket

请求数据的格式

  • 请求首行：标识HTTP协议的版本,和请求方式
  • 请求头：一大堆k:v键值对
  • ​ （/r/n）
  • 请求体：并不是所有的请求都有请求体，get请求没有，post请求才有，里面存放post请求提交的敏感数据

响应数据的格式

  • 响应首行：标识HTTP协议的版本，响应状态码
  • 响应头：和请求头一样，也是一堆的k:v键值对
  • ​ （/r/n）
  • 响应体：返回给浏览器展示给用户看的数据

那请求方式和响应状态码这两个陌生的名称具体是什么，下面简单的进行阐述

请求方式

  • GET请求

    简单来说就是向服务端要数据

    eg：输入网址获得相应的内容

  • POST请求

    朝服务端提交数据

    eg：登陆的时候，输入用户名和密码，提交到服务端进行身份校验

    ps：url 统一资源定位符(网址)

响应状态码

用一串简单的数字来表示一些复杂的状态或者描述性信息 404:请求资源不存在

  • 1XX:服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据

  • 2XX:服务端成功响应了你想要的数据(200 OK请求成功)

  • 3XX:重定向(当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登页面

  • 4XX:请求错误

    404:请求资源不存在

    403:当前请求不合法或者不符合访问资源的条件

  • 5XX:服务器内部错误(500)

HTML简介

超文本标记语言

如果想要让浏览器能够渲染出你写的页面。那么你就必须的遵循HTML语法，我们浏览器看到的所有的页面，内部都是HTML代码

HTML是书写网页的一套标注

HTML语法的注释

<!--注释-->  
# 括号里内容为单行，为单行注释；内容为多行自动匹配为多行注释

# 单行：
<!--单行注释-->

# 多行：
<!--
多行注释1
多行注释2
多行注释3
...
-->

在HTTP代码中，由于代码非常的杂乱无章，所以我们习惯的用注释来划定区域，目的是为了方便后续的查找

<!--导航页开始-->
导航条所有的HTML代码
<!--导航条结束-->

<!--左侧菜单栏开始-->
左侧菜单栏HTML代码
<!--左侧菜单栏结束-->

HTML文档结构

<html>
    <head> </head>  # head内存放的标签不是给用户看的，而是定义的一些配置给浏览器看的
    <body></body>  # body内的标签，有什么浏览器就渲染什么，用户就能看到什么
</html>

ps：文件的后缀名是展示给用户看的， 只不过不同的文件后缀名有不同的软件来处理并加上很多的功能

打开HTML文件的两种方式

  • 找到文件的位置，右键选择浏览器打开即可
  • pycharm内部，集成了自动调用浏览器的功能，直接点击也能打开（前提是你电脑上下载安装了该浏览器,浏览器这里推荐使用谷歌chrome浏览器)

标签的分类一

# 1 双标签
# 2 单标签（自闭合标签）

<h1></h1>  # 双标签
<a href="https://baidu.com"></a>  # 双标签
<img/>  # 单标签

head内常用标签

ps：在书写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="老男孩教育,老男孩,老男孩培训,Python培训,Linux培训,网络安全培训,Go语言培训,人工智能培训,云计算培训,Linux运维培训,Python自动化运维,Python全栈开发,IT培训">  当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">  网页的描述性信息

body内常用 标签

<h1>我是</h1> 标题标签，1~6级标题 
<b>加粗</b>  # Bold
<i>斜体</i>  # Italic
<u>下滑线</u>  # Underline
<s>删除线</s>  # Strikethrough
<p>段落</p>  # paragraph
<br>换行</br>  # Line break
<hr>水平线</hr> # Horizontal line

标签的分类二

# 1 块儿级标签：独占一行

如： h1~h6 p div
1 块儿级可以修改长度，行内标签不可以修改长度，修改了也不会有什么变化
2 块儿级可以嵌套任何块儿级标签和行内标签，但是p标签是特例，p标签虽热是块级标签，但是他只能嵌套行内标签，不能嵌套块儿级标签，假如嵌套了块儿级标签，也没什么问题，因为浏览器会自动的帮你解开（浏览器直接面向的是用户，一般不会轻易的报错，哪怕有报错用户也基本感觉不出来）

总结：
   块儿级标签能嵌套任意块儿级标签和任意行内标签，但是p标签只能嵌套行内标签（HTML书写规范）
   
# 2 行内标签：自身文本有多大占多大
如：i  u b s span
行内标签不能嵌套块儿级标签，可以嵌套行内标签

特殊符号

&nbsp;  # 空格
&gt;  # 大于号
&lt;  # 小于号
&amp;  # &
&yen;  # ¥
&copy;  # 版权©
&reg;  # 商标®

常用标签

div  块儿级标签
span  行内标签


上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁

div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可

而普通的文本先用span标签

img标签

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

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

alt="风景图"
	当图片加载不出来的时候 给图片的描述性信息

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>
</ul>
虽然ul标签很丑，但是在页面布局的时候，只要是排版原子的几行数据基本上用的都是ul标签
  • 有序列表
<ol>
    type="1" start="5"
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>
  • 标题列表
<di>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>
</di>

前端参考博客:https://www.cnblogs.com/Dominic-Ji/p/10864457.html

posted @ 2020-05-11 23:42  风起千寻  阅读(273)  评论(0)  编辑  收藏  举报