任何直接与用户打交道的交互界面都可以称之为前端、前端界面、页面
不直接与用户打交道,主要负责内部真正的业务逻辑的执行,称之为后端
(1)简单了解前端的业务
(2)能编写简易的页面
(3)在前端方向更加深入学习
主要用来实现静态页面,目前我们看到的文字、图片、动画、声音、表格、超链接等网页元素都是通过HTML实现的。
HTML是由各种标签组成的,所以学习HTML就是在了解HTML主体框架的结构基础上学习各种标签的使用方法。
CSS是层叠样式表,主要用来控制调整网页的样式,它与网页的结构和内容没有关系,仅仅是通过不同语义的标签来调整网页内容的不同表现样式。
在网页上实现CSS样式调整一般有两种方式:
-
内嵌式
将CSS代码集中写到HTML文档的头部标签中,并用style标记定义,一般位于head标记中的title标记之后,简而言之就是直接在THML文件中直接添加CSS样式的方式;
-
嵌入式
是将所有的样式放在一个或多个以CSS为拓展名的外部样式表文件中,通过标记将外部样式表文件链接到HTML文件中,简而言之就是HTML文件域CSS文件单独存在,再通过link的方式将CSS所写的样式添加到HTML中。
Javascript是一种完整的网页脚本语言,有自己独立的语法,可以完成复杂的程序逻辑,而HTML和CSS仅仅是标记语言,不具备编程语言的程序逻辑。
-
Javascript的作用
Javascript主要负责网页的各式各样的动态功能,因此可以为用户提供更流畅美观的页面浏览效果,以及添加页面交互行为,给用户更好的视觉和使用体验。
-
Javascript的工作原理
Javascript的工作原理是通过在HTML网页中直接嵌入JS脚本,可以实现相应浏览器时间,读写HTML元素内容,更改HTML元素样式等功能。
在软件开发架构中,Web前端开发在软件开发架构中属于C/S中的C客户端,大部分的网络通信协议底层都是基于sokect套接字实现的,使用的大部分是TCP协议,Web前端开发中使用的HTTP协议也是如此,因此缔造了特殊的C/S架构,B/S架构。
HTTP协议位于应用层而TCP位于传输层,当消息传递到传输层时使用了socket这样一个中介,然后再基于TCP协议发送请求与获得响应。
socket是应用层 与 传输层 中间的软件抽象层,是一组接口。在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socket接口后面。
当在python中写一个服务端,打开浏览器输入服务端的地址,连接的时显示无响应,因为想要没有支持HTTP协议。
HTTP就是Hyper Text Transfer Protocol(超文本传输协议)是用于从(WWW:World Wide Web,简万维网 )服务器传输超文本到本地浏览器的传送协议。
Text 代表了固定的内容
html 代表文件
(2)符合HTTP协议的服务端
服务端回应:响应
基于http协议,服务端不会主动发消息,客户端发送什么请求,服务端才会返回什么响应
HTTP协议属于应用层
服务端不会保存客户端的状态
客户端与服务端之间不会保持连接
响应状态码由3位数字组成,第一个数字定义了响应的类别,
类别 状态 描述 1XX 信息 表示服务端已经接受到请求,客户端(请求者)可以继续发送或者等待 2XX 成功 服务端发送了对应的响应(这个响应可能是客户端想要的或者不想要的,但是响应了) 3XX 重定向 需要进一步的操作以完成请求 4XX 客户端错误 请求包含语法错误或无法完成请求 5XX 服务端错误 服务器在处理请求的过程中发生了错误,服务端内部错误
- 1XX :表示服务端已经接受到了你的请求,客户端可以继续发送或者等待
- 2XX:200 OK 表示请求成功,服务端发送了对应的响应(这个响应可能是客户端想要的或者不想要的,但是响应了)
- 3XX:302 临时重定向 ,304 永久重定向
重定向:想访问网页A,但是自动跳到了网页B
- 4XX:403访问权限不够 ,404请求资源不存在
- 5XX:服务端内部错误
在公司中,一般会自定义更多的响应状态码,通常以10000起步
聚合数据网站可以看到html的一些比较标准格式的html文件
- HTML传输的数据类别
(1)直接发送的固定的数据
(2)转为发送文件里面的数据
(3)编写HTML出现特殊的现象HTML超文本标记语言的特点:所见即所得(没有任何逻辑,写什么就是什么)
- 服务端
- a.txt
- 例子
1)单标签(自闭和 标签)
2)双标签
(1)网页信息数据一般也会存放在文件中,以结尾
(2)pycharm支持前端所有类型的文件编写,内置有自动补全的功能,只需要专注于补全标签名的编写
(3)pycharm内有通过浏览器打开文件的功能
- 例:改变颜色
可以支持本地css文件,也可以连接外部css文件
- html文件内
- mycss.css
prompt
制作动态弹窗
标签 作用 包裹段落内容 标签 内容 下划线 斜体 删除线 加粗
u i s b
一个文本占一行,没有内容不占行,有内容则独占一行
h系列、 p
Non-breaking Space-nbsp
标签之间可以相互嵌套,并且理论上可以无限嵌套 nested
块级标签内部可以嵌套块级标签和行内标签
行内标签内部只能嵌套行内标签
p标签虽然是块级标签,但是它的内部也不能嵌套块级标签
标签括号内填写的 是标签的属性
- 属性的类型
(1)默认属性:标签自带
(2)自定义属性:用户自定义,编写不会有提示甚至会飘颜色
ul 套 li
页面上所有的规则排列的横向或者竖向的
ol 套 li
d1 套 dt-大标题 套 dd-小标题
可以获取用户的数据,并发送给服务端
这样,在接受数据的时候,属性相当于字典的键,标签获得到用户数据相当于字典的值。
这样点击发送就会组织成字典的形式发送给服务端,这样的数据在传递给后端的时候才有明确的意义,便于对数据的进一步处理
(1)用于获取用户数据的标签应含有name属性,name属性相当于字典的键
如果标签中没有name属性,form表单会直接忽略,不会发送
(3)input标签理论上应该搭配label标签使用,但是也可以不写
- input标签放在 label标签内使用
- input标签紧贴着label标签使用
(4)标签的属性如果和值相等,可以不写值
等价于
(5)针对选择类型的标签可以提前设置默认选项
- 中
例:默认性别为女
- 中
例:默认多选中选择上广州
(6)一些选择性的标签可以用multiple属性从单选改为复选
- 下拉框复选
- 文件上传可以复选