day50 前端入门

一、引子
- 1 前端学习的历程
- 2 浏览器与http协议
  - 2.1 浏览器窗口输入网址回车后发生了几件事
  - 2.2 http协议
二、html入门

一、引子

参考：https://www.cnblogs.com/Dominic-Ji/p/10864457.html

1 前端学习的历程

html
- 网页的骨架，没有任何样式
css
- 给骨架添加样式，让其具有多样性
js
- 控制网页的动态效果
前端框架：bootstrap、jquery、vue
- 提前封装好了很多复杂的操作，只需要根据固定的语法调用即可

2 浏览器与http协议

tips：浏览器与服务端的b/s架构和客户端与服务端的c/s架构本质没什么区别

2.1 浏览器窗口输入网址回车后发生了几件事

浏览器朝这个网站对应的服务端发起请求
- 网址实际上是服务器ip+端口的映射
服务端接受请求
- 比如说百度接受我想访问百度主页的请求
服务器返回相应的响应
- 给我返回一个百度首页
浏览器接受响应，通过特定的规则渲染（解析）页面给用户看

浏览器统一了与不同服务端的数据交互，因为浏览器自定义了一个标准（http协议）让所有想通过浏览器去与用户交互的服务端都遵循这个标准去写服务端代码。已一种更方便更简洁的模式出现在用户面前。

如果没有浏览器，那么我们只能用对方写好的客户端来和对方的服务端交互，不同的程序参照自己的规则，要访问很多应用就需要成千上万个客户端。这明显不合理，我们只会去下载常用的客户端，而那些可以用浏览器简化的通常都是在浏览器上访问。

2.2 http协议

http协议（超文本传输协议）：用来规定服务端和浏览器之间数据交互的格式

四大特性

基于请求响应
基于tcp/ip作用与应用层至上的协议
无状态（有好有坏）
- 不报错用户信息，每一次访问都是一次新的请求
- 后续出现了一些保存用户状态的技术（cookie、session、token...）
短/无连接
- 请求一次返回一次数据，两者之间没有任何链接关系

请求数据的格式

请求首行（标识http协议版本，当前请求方式）
请求头（k，v键值对）
/r/n（重要）
请求体（get请求没有，post请求有，因为post请求提交的是敏感数据）

响应数据格式

响应首行（标识http协议版本，响应状态码）
响应头（一大堆k，v键值对）
/r/n（重要）
响应体（返回给浏览器展示给用户看的数据）

响应状态码：用一串数字来表示一些复杂的状态或者描述信息

1xx：服务端成功接收到了你的数据正在处理，你可以继续提交额外的数据
2xx：服务端成功响应了你想要的数据（200 ok请求成功）
3xx：重定向（你的这次访问需要先通过其他页面才能得到，会自动跳转）
4xx：请求错误
- 404：资源不存在
- 405：当前请求不合法或者不符合访问资源的条件
5xx：服务器内部错误

请求方式

get请求
- 朝服务器要数据
- 输入网址得到对应的内容
post请求
- 朝服务端提交数据
- 用户登录输入用户名密码后，提交到服务端

二、html入门

引子

html是一种超文本标记语言

我们所看到的的所有页面内部都是html代码

html的注释：

1 标签的分类

双标签

<h1></h1>

单标签

<img />

2 head内常用的标签

head内的标签不是给用户看的，而是定义一些配置，主要是给浏览器看

<title>Title</title>  网页标题

<style>

        h1 {

            color: greenyellow;

        }

</style>

 内部用来书写css代码

<script>

    内部用来书写js代码

        alert(123)

</script>

<script src="myjs.js"></script>  还可以引入外部js文件

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

当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户

<meta name="keywords" content="老男孩教育,老男孩,老男孩培训,Python培训,Linux培训,网络安全培训,Go语言培训,人工智能培训,云计算培训,Linux运维培训,Python自动化运维,Python全栈开发,IT培训">

<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">

网页的描述性信息

<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">

3 body内常用的标签

<h1>我是h1</h1>  标题标签 1～6级标题

<b>加粗</b>

<i>斜体</i>

<u>下划线</u>

<s>删除线</s>

<p>段落</p>

<br>换行

<hr>水平分割线

4 标签的分类

4.1 块级标签：独占一行

	h1~h6	p div

  	1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化

    2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签

    	但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签

      	如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)

4.2 行内标签：本身文本占多大就多大

	i u s b span

  	行内标签不能嵌套块儿级标签 可以嵌套行内标签

5 特殊符号

&nbsp;  空格

&gt;   大于号

&lt;   小于号

&amp;  &

&yen;  ¥

&copy;

商标&reg;

6 img标签

图片标签

<img src = "" alt = "" title ="" height="" width="">

src

1.图片的路径   可以是本地的绝对路径，也可以是网上的（实际上也是路径）

2.url    直接朝该url发送get请求

alt = "xxx"

这是在图片加载不出来的时候  给用户的提示信息

title = "xxx"

当鼠标悬浮在图片上的时候，自动显示的信息

height = "xxxpx"

width="xxxpx"

高度和宽度是两个相辅相成的数据，如果我们只改一个，另一个会根据原图片的比例等比缩放，如果都改的话容易失真

7 a标签

链接标签

<a href=""></a>

这里的链接会自动修改颜色加下划线，如果点击过后就会在该窗口一直显示另一种颜色

这里的颜色下划线等 都是可以通过样式去修改

href

1.放url，用户的点击会跳转到url页面

2.放本页面其他标签的id值，点击跳转（锚点）

target

默认不写的时候a标签的点击事件是在当前页面跳转，默认值：_self

如果我们要新建页面跳转，修改为：_blank

实现a标签的锚点功能

点击一个文本  自动跳转到对应区域

在href后写#对应id号

<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>

8 标签的两个重要书写

1.id值

	类似于标签的身份证号 在同一个html页面上id值不能重复

2.class值

	该值有点类似于面向对象里面的继承 一个标签可以继承多个class值

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

标签内也可以用于存放数据

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

9 列表标签

列表标签

无序列表(较多)

<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>