前端--HTML简介

清疚 2023-08-17 16:34 64阅读 0赞

软件开发架构：

c/s架构

客户端

服务端

b/s架构

浏览器

服务端

本质：b/s架构也是c/s架构

HTTP协议

超文本传输协议：规定了客户端与服务端之间消息传输的格式

四个特性：

1、基于TCP/IP协议作用于应用层的协议

2、基于请求响应

3、无状态（服务端无法保存用户的状态，一个人来千万次我都记不住）

4、无连接（请求来一次响应一次之后就立刻断开连接，两者之间就没有任何关系了）

websocket是HTTP最大的一个补丁，它支持长连接

get请求：

朝服务端要资源

post请求：

朝服务端提交数据

数据格式之请求：

请求首行（标识HTTP协议的版本， 当前请求的方式 ）

请求头(一堆k,v键值对)

\\r\\n

请求体（post请求携带的数据）

请求数据之响应：

响应首行

响应头(一堆k,v键值对)

\\r\\n

响应体（post请求携带的数据）

响应状态码：

1xx:服务器已经成功接受到你的数据正在处理，你可以继续提交其他数据

2xx：请求成功 服务器已经成功将你请求的数据发给你了

3xx：重定向

4xx：请求资源不存在

5xx：服务器错误

Web服务的本质：

1、浏览器朝服务端发送请求

2、服务端接收到请求

3、服务端返回相应的内容

4、浏览器接受响应，根据特定的规则渲染页面展示给用户看

请求方式：

get请求

朝服务端要资源（比如浏览器窗口输入的www.baidu.com）

post请求

朝服务端提交数据（比如用户登陆的时候要提交的用户名和密码）

URL：统一资源定位

HTML：

超文本标记语言

浏览器只认识html、css、js

HTML中的注释：

<!--

多行注释

-->

HTML文档结构：

<html>  
<head></head>:head内的标签 不是用来展示给用户看的 而是定义一些配置 主要是给浏览器看的  
<body></body>:body内的标签 就是浏览器展示给用户看的内容  
</html>

头尾一定要对齐。方便理解

head中常用的标签：

title --> 定义网页的标题

style --> 定义内部样式表

script --> 定义JS代码或引入外部JS文件

link --> 引入外部样式表文件或网站图标

meta --> 定义网页原信息

打开HTML页面的两种方式：

1、找到文件路径 选择浏览器打开

2、pycharm快速打开

HTML中的常用标签：

基本标签：

p标签：段落标签

h标签：标题标签

常用标签：

div

span

img

src存放的是图片的路径（这个路径可以是网上的）

1、可以是url（会自动请求该url获取相应的数据）

2、也可以直接放图片的二进制数据 会自动转成图片

alt是当图片加载不出来的时候 显示的是图片的信息

title是当鼠标悬浮在图片上 提示的信息

height，width：当你指定一个参数的时候 另外一个会等比例的缩放

href后面存放的是url的时候点击就会跳转到该url，这个链接如果没有被点过，那么这时候默认的是蓝色的，只要是点过一次，之后就都是紫色的了

target 默认是\_self表示当前页面跳转 还有一个是\_blank表示的是新建页面跳转

锚点功能（回到顶部）：href还可以写另一个a标签的id，点击就会跳到id值所对应的a标签

每一个标签都应该有三个比较重要的属性

1、id值 该值就类似于人的身份证 再用一个html文档id值应该保证唯一不能重复

2、class值 该值就类似于面向对象里面的那个继承，可以写多个

3、style 支持在标签内直接写css代码 属于行内样式 优先级最高

ps：任何标签都支持自定义属性！！！

列表标签：

表格标签：

<table>
                    <thead></thead>
                    <tbody></tbody>
                </table>
                
                
                tr表示一行
                th和td都是文本
                    建议在thead内用th
                    tbody内用td
                
                colspan表示的水平方向
                rowspan表示的竖直方向
    　　　　　　　合并的时候要删掉，否则会挤出去
    　　　　　　　border:表格边框
    　　　　　　　cellpadding：内边距
    　　　　　　　sellspacing：外边距
    　　　　　　　width：像素百分比（最好是通过css来设置长宽）

表单标签：

能够接受用户输入（输入 选择 上传）并将其发送给后端

form表单：

action控制数据提交的目的地

1、不写的情况下 默认提交到当前页面所在的路径

2、写全路径

3、路径后缀

input标签：

type：

text：普通文本

password：密文 不展示明文

date：日期