前端---HTML简介

顺晟科技

2022-09-15 21:05:39

219

什么是前端？

任何与用户直接打交道的操作界面都可以称之为是一个前端

软件开发架构

--CS --BS (bs 本质就是cs)

web服务的本质

浏览器窗口输入一个网址敲回车发生那些事

1. 朝着指定的服务端发送请求

2.服务端接收相应的请求

3.服务端返回相应的响应

4.浏览器接收响应按照特定的规则渲染页面展示给用户看

HTTP协议

超文本传输协议

规定了浏览器与服务端之间数据传输的格式

1，四大特性
- 1 ，基于请求响应
  
  一次请求对应一次响应
- 2，基于TCP/IP作用于应用层之上的协议
- 3，无状态
  
  不保留客户端的状态，无论你来多少次，我都待你如初恋
- 4，无连接
  
  长连接 websocket（类似于http协议的大补丁）聊天室相关
2，数据格式

请求格式

- 请求首行（请求方式协议版本）

- 请求头（一大堆 k，v 键值对）

- （空一行通知服务器一下不再有请求头）

- 请求体（携带的数据并不是一直都有有时候可能是空的取决于你的请求方式）

响应状态码

用数字来表示一大堆提示信息

1XX : 服务端已经成功接收到客户端的数据正在处理你可以继续提交

2XX : 200请求成功服务端已经返回了你想要的数据

3XX : 重定向(原本想访问A但是内部自动给你转到了B上面)

4XX : 404请求资源不存在,403你当前不具备请求该资源的条件

5XX : 500服务端内部错误机房卓火了宕机爆炸了

公司内部可以自己定制自己的响应状态码

请求方式：

get请求：
- 超服务端要资源（获取数据）
  
  类似于浏览器窗口输入网址获取页面
post请求
- 朝服务端提交请求
  
  类似于登陆注册功能

HTML

超文本标记语言

如果你想让你的页面能够被浏览器识别并且展示出好看的样子你就必须是写HTML代码

浏览器能够识别的语言非常少

HTML/XML CSS JS

XML也可以书写前端页面主要用于odoo框架中书写企业内部管理软件（erp）

HTML注释：

注释是代码之母

单行注释：<!- - 单行 - ->
多行注释：<!- - 
		多行注释1
		多行注释2
		- ->

补充：由于HTML页面结构比较复杂，那日同比较多，不便于后期的维护修改通常在写页面的时候习惯用下面的方式来人为的划分代码区域

<!--顶部导航条样式开始-->
		
<!--顶部导航条样式结束-->
<!--左侧菜单栏样式开始-->
		
<!--左侧菜单栏样式结束-->

HTML文档结构

<html>
	<head></head>:head内存放的内容不是给用户看的，是给浏览器去识别做响应操作的
	<body></body>:body内部存放的内容就是浏览器展示给用户看到的花里胡哨的页面
</html>

HTML文档打开方式

1.自动调用浏览器打开
2.手动查找路径后选择浏览器打开

标签分类：

双标签
自闭和标签

head内常用标签

title：定义网页标题

style：内部支持直接写css代码

link：引入外部的css文件

script：

	1.内部可以直接编写js代码

	2.可以通过src属性引用外部js代码

meta：

	name属性

		keywords

		description

什么是URL？

URL：统一资源定位符

body内常用标签

基本标签：

h1~h6：标题标签
s:删除线
b:加粗
u:下划线
i：斜体
p：独占一行
br：换行
hr：分割线

特殊符号：

&nbsp;		空格
<p>a大于b		a &gt; b</p>
<p>a小于b		a &lt; b</p>
<p>a&b		a &amp; b</p>
<p>人民币		&yen;10000000</p>
<p>版权标识		&copy;</p>
<p>注册商标		&reg;</p>

常用标签：

div		块级标签
span	行内标签
两个标签没什么特殊意义，主要用来做前期的页面布局

img 图片标签

src
	1.可以写一个网站图片地址
	2.还可以写一个本地图片地址
	3.url（自动朝该url发送get请求要数据）
alt
	当图片加载不出来时，默认展示的提示信息
title
	当鼠标悬浮在图片上时默认展示的提示信息
width, height
	修改一个另外一个会自动等比例缩放
	也可以两个都自定义修改

上一篇：产品需求文档的编写(一)–编写前的准下一篇：web前端——html介绍和head

网站建设

Html

前端---HTML简介

HTTP协议

- （空一行通知服务器一下不再有请求头）

请求方式：

HTML文档结构

head内常用标签

body内常用标签

基本标签：

特殊符号：

常用标签：

img 图片标签

Html

前端---HTML简介

HTTP协议

- （ 空 一 行 通知服务器一下不再有请求头）

请求方式：

HTML文档结构

head内常用标签

body内常用标签

基本标签：

特殊符号：

常用标签：

img 图片标签

- （空一行通知服务器一下不再有请求头）