1、什么是前端
- 前端
任何与用户直接打交道的操作界面都可以称为前端
例如：手机界面、电脑界面 - 应用bs架构 ：
浏览器——服务端
当我们使用浏览器访问网址时，会有如下事情发生
1）浏览器朝服务端发送请求
2）服务端接收请求
3）服务端返回相应的响应
4）浏览器接收响应，根据特定的规则渲染页面给用户看
2、HTTP协议
浏览器可以充当很多服务端的客户端，由于服务端不同，那么怎样做到使浏览器跟不同服务端数据交互呢？
解决方法：
1）创建一个可以识别所有服务端并能进行数据交互的浏览器
2）制定一个统一的标准，想用浏览器的做客户端与服务端进行数据交互，那就遵循该标准
显然方案1实现起来并不现实，所以诞生了HTTP协议（HyperText Transfer Protocol）超文本传输协议。用来规定服务端与浏览器之间的数据交互的格式。
- HTTP四大特性
- 基于请求响应
服务端与浏览器的交互方式：客户端请求，服务端响应 - 基于TCP/IP协议的应用层的协议
浏览器与服务端基于socket（套接字）进行网络通信 - 无状态
不保存用户信息 - 无链接/短链接
请求来一次服务端响应一次，之后服务端与浏览器就没有关系了
3、数据交互格式
-
请求方式
GET - 从指定的资源请求数据。向服务端要数据 eg：输入网址获取对应的内容POST - 向指定的资源提交要被处理的数据
向服务端提交数据 eg：用户登录，输入用户名与密码提交到服务端 -
请求报文
-
请求数据格式（request）
请求首行（标识HTTP协议版本，当前请求方式） -
请求头（hander）
一大堆k,v键值对请求头与请求体之间存在 \r\n，不能缺少
-
请求体(body)
get没有请求体，直接跟在 ？ 后面，用 &隔开，只有post有请求体
- 响应报文
-
响应数据格式（response）
响应首行（标识HTTP协议版本，响应状态码） -
请求头（hander）
一大堆k,v键值对请求头与请求体之间存在 \r\n，不能缺少
-
请求体(body)
返回给浏览器展示给用户看的数据
-
响应状态码
用一串简单的数字来标识一些复杂的状态或者描述性信息
1XX：服务端已成功接收到数据正在处理，可以继续提交额外的数据
2XX：服务端成功响应
3XX：重定向（在访问一个需要登录之后才能看的页面，会自动跳转到登录页面）
4XX：请求错误403：当前请求不合法或不符合访问资源的条件 404：请求资源不存在5XX：服务器内部错误（500）
-
url
同一资源定位符（网址）
4、HTML简介
如果想让浏览器能够渲染出我们自己写的页面，那么就必须要遵循HTML语法
我们在浏览器看到的页面，内部其实都是HTML代码
- 简单的html语句
<html>
<h1> hello big baby </h1>
<a href = "http://www.baidu.com/">click me !</a>
<img
src = "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2159057472,1466656787&fm=26&gp=0.jpg">
-
执行结果
hello big baby
click me !
HTML就是书写网页的一套标准
注释：
<!--单行注释-->
<!--
多行注释1
多行注释2
-->
由于HTML代码非常的杂乱并且很多，我们习惯用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码行
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->
5、HTML文档结构
<html>：告知浏览器自身是一个HTML文档
<head></head>:head内的标签不是给用户看的，而是定义了一些配置，主要给浏览器看
<boby></boby>:boby内的标签，我们写什么浏览器就渲染什么，用户就能看到什么
</html>
- 注意
HTML代码是没有格式的，可以全部写在一行，为了结构清晰，使用TAB来进行缩进显示
6、标签
-
标签的分类
双标签：<h1><h1> <a href = "https://www.baidu.com/"></a>单标签：
<img/> -
head内常用的标签
<html> <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,编程'> #网页描述性信息 <meta name = "description" content = 'python是一门编程语言'> <> -
body内常用的标签
基本标签 <h1>我是h1</h1> #标题标签1~6级 <b>加粗</b> <i>斜体</i> <u>下滑线</u> <p>段落</p> <br> 换行 <hr> 水平分割线 -
标签的分类2
-
块级标签：独占一行（h1~h6 p div）
- 块级标签可以修改长宽，行内标签不可以，修改了也不会变化
- 块级标签内部可以嵌套任意的块级标签与行内标签。
注意：p标签虽然也是块级标签，但它只能嵌套行内标签，不能嵌套块级标签。如果嵌套了块级标签，浏览器会自动帮忙解开。
-
行内标签：自身文本多大就占多大(i u s b span)
行内标签不能嵌套块级标签，可以嵌套行内标签
- 特殊符号
空格
> 大于号
< 小于号
& &
¥ ¥
© ©
® 商标®
- 常用标签
div #块级标签
span #行内标签
上述两标签是在构造页面初期最常使用的页面布局，一般先用div和span占位
之后再去调整样式。
- img标签
<img src = "" alt="">
src
1、放图片的路径，可以是本地的也可以是网上的
2、放url 可以自动向该url发送get请求获取数据
alt
添加图片的描述信息，当图片加载不出来的时候，显示图片的描述信息
title
添加提示信息，当鼠标悬停在图片上后，自动展示提示信息
height
修改图片的高度
width
修改图片的宽度
高度和宽度当只修改一个的时候，另外一个参数会等比例缩放。如果修改了两个参数，并且没有考虑比例问题的时候，图片会失真
- a标签
# 链接标签
<a href=""></a>
href
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target
默认a标签是在当前页面完成跳转 _self
你也可以修改为新建页面跳转 _blank
# a标签的锚点功能
"""eg:点击一个文本标题 页面自动跳转到标题对应的内容区域"""
<a href="" id="d1">顶部</a> #设置id
<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> 1 A I a ... 了解即可- 标题列表(了解)
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2</dd> <dt>标题3</dt> <dd>内容3</dd> </dl>
8540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
