推广 热搜:   公司  企业  中国  快速    行业  上海  设备  未来 

Web前端开发:前端简介与HTML协议

   日期:2025-01-03     移动:http://fabua.ksxb.net/mobile/quote/5532.html


任何直接与用户打交道的交互界面都可以称之为前端、前端界面、页面

不直接与用户打交道主要负责内部真正的业务逻辑的执行称之为后端

(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属性从单选改为复选

  • 下拉框复选


  • 文件上传可以复选
本文地址:http://fabua.ksxb.net/quote/5532.html    海之东岸资讯 http://fabua.ksxb.net/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


相关最新动态
推荐最新动态
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  粤ICP备2023022329号