前端基础之HTML

前端简介
- 什么是前端？什么是后端？
  - 前端
  - 后端
2.前端的学习路径
- 知识脉络:
HTML介绍
- 哪些可以充当客户端?
- 问题
- 推导
四大特性
数据格式
- 请求格式:客户端给服务端发送消息应该遵循的数据格式
- 响应格式:服务端给客户端发送消息应该遵循的数据格式
响应状态码
Web服务本质
HTML是什么？
HTML文档结构
HTML标签分类
HTML注释

HTML常用标签

head内常用标签
body内常用标签
- 基本标签
- 特殊字符
- div标签和span标签
- img标签
- a标签
- 列表
- 表格

form表单

属性action
input标签
select标签
textarea标签
label标签

网络请求方式

get请求
post请求

前端简介

什么是前端？什么是后端？

前端

任何与用户直接交互的界面都可以称之为前端
例如:各大网站页面，APP用户展示页面等

后端

不直接与用户交互，真正业务逻辑代码的处理界面
例如:python代码、java代码和c++代码

2.前端的学习路径

知识脉络:

HTML
网页的骨架
CSS
网页的样式
JavaScript
网页的动态效果
jQuery(框架)
Bootstrap(框架)

HTML介绍

哪些可以充当客户端?

1.程序员写的python代码(TCP客户端)
2.商业公司发布的浏览器（chrome，sifari，uc）

问题

python代码编写的TCP服务端与浏览器之间建立了通信，但浏览器不识别服务端数据

推导

不同的服务端数据的组织策略千差万别，浏览器却需要统一处理
最佳的解决措施是统一规定一个通用的标准>>>:HTTP协议

HTTP协议

规定了服务端与浏览器之间的数据交互格式及其他事项

四大特性

基于请求、响应
服务端永远不会主动给客户端发消息,必须是客户端先请求服务端被动响应
基于TCP/IP作用于应用层之上的协议
应用层协议:HTTP HTTPS FTP ...
无状态
服务端不保存客户端状态
短连接
不保持客户端与服务端之间的链接导通

数据格式

请求格式:客户端给服务端发送消息应该遵循的数据格式

1.请求首行(请求方法协议版本)
2.请求头(一大堆k:v键值对)
3.(换行不能省略)
4.请求体(携带敏感数据:密码身份照号...) 不是一直都有

响应格式:服务端给客户端发送消息应该遵循的数据格式

1.响应首行(响应状态码协议版本)
2.响应头(一大堆k:v键值对)
3.(换行不能省略)
4.响应体(给浏览器展示给用户看的页面内容)

响应状态码

用数字来表示一串中文意思
1XX:服务端成功接收到了客户端的数据正在处理，可以等待或者继续发送
2XX:200 OK 表示请求成功服务端给出了响应
3XX:301\302 表示重定向(想访问A页面但是自动跳转到了B页面，例如登陆界面)
4XX:403请求不合法(权限不够) 404请求资源不存在
5XX:都是服务端错误,与客户端无关
响应状态码还支持自定义,因为默认的不够,自定义状态码一般都是从10000开始

Web服务本质

Web应用程序是一种可以通过Web访问的应用程序，程序的最大好处是用户很容易访问应用程序，用户只需要有浏览器即可，不需要再安装其他软件。

HTML是什么？

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

HTML文档结构

Title

表示文档是HTML格式
、
文档的开始标记和结束的标记
、
HTML文档的开头部分
、
网页标题部分
中间的文本是用户可见的网页主体内容

HTML标签分类

1.双标签:有头有尾，内容写在中间

2.单标签：自闭合标签，一般有特殊功能

head内常用标签

head标签内编写的标签一般都是给浏览器看的
title标签控制网页小标题
style标签内部支持编写css代码
link标签引入外部css文件
script标签内部支持编写js代码也可以通过src属性引入外部js文件
meta标签功能非常多

body内常用标签

1.标题系列
h1~h6(1到6级标题)




    
    Title


标题一
标题二
标题三
标题四
标题五
标题六

2.字体系列

斜体
加粗
下划线
~~删除线~~




    
    Title


    斜体
    加粗
    下划线
    删除线

3.文本段落




    
    Title


        国家统计局近日发布的数据显示，今年一季度中国经济同比增长4.8%。尽管局部地区新冠肺炎疫情反复和乌克兰局势复杂演变影响了增长幅度，但中国经济仍保持在合理的增长区间，实现了“开门稳”

        一季度，投资增长强劲。数据显示，一季度全国固定资产投资（不含农户）104872亿元，同比增长9.3%。分领域看，基础设施投资同比增长8.5%，制造业投资增长15.6%。鉴于基础设施投资和制造业投资的亮眼表现，有人认为，“开门稳”是强力刺激投资的结果。但仔细分析便会发现，这是一种带有陈旧偏见的错误认识。毋庸置疑，投资能够有力地拉动经济增长，但并不是所有的经济增长都需要靠高强度的投资来刺激。

4.其他
hr 水平分割线
br 换行符




    
    Title


    水平分割线
    
    换行符
    

    哈哈哈

基本标签

块级标签:h1~h6 p div
默认独占浏览器一行内
行内标签:s i u b span
内部文本有多长就占多长

特殊字符

空格
> 大于号
< 小于号
& &符号
￥羊角符
? 版权
? 注册




    
    Title

    ©版权所有，盗版必究
    

    ®欢迎注册

div标签和span标签

img标签

    src			图片路径
    title		鼠标悬浮自动展示提示信息
    alt	  	        当图片无法正常展示自动提示的信息
    height 	        自定义图片高度
    width               自定义图片宽度




    
    图片

a标签

    href	  点击跳转到位置
    		可以写网址
      		
      		也可以写标签id值
          	
    target	控制是否当前页跳转
    		默认_self当前页
      		设置_blank新建页




    
    Title


百度一下
图片 
到底部

到中部

到顶部

列表

表格




    
    表格



    
        
            name
            age
            nationality

        
    
    
    
        jayce
        20
        USA
    
    
    
    
        jackson
        22
        UK
    
    
    
    
    
        sakura
        18
        JP

name	age	nationality
jayce	20	USA
jackson	22	UK
sakura	18	JP

form表单

属性action

在form标签内部编写获取用户数据标签

input标签

属性	作用
text	正常展示的普通文本
password	密文展示
date	日历展示
radio	单选
checkbox	多选
email	邮箱格式数据
file	文件数据
submit	触发form表单提交数据的动作
reset	重置页面填写的数据
button	普通按钮默认没有任何的功能

select标签

省市:
        
    
    爱好:

textarea标签

    个人介绍:

label标签


    用户名
    


    密码
    


    验证码

网络请求方式

get请求

朝服务端索要数据
在url后面通过?组织数据

post请求

朝服务端提交数据
在请求体中组织数据

前端

前端基础之HTML

前端简介

什么是前端？什么是后端？

前端

后端

2.前端的学习路径

知识脉络:

HTML介绍

哪些可以充当客户端?

问题

推导

HTTP协议

四大特性

数据格式

请求格式:客户端给服务端发送消息应该遵循的数据格式

响应格式:服务端给客户端发送消息应该遵循的数据格式

响应状态码

Web服务本质

HTML是什么？

HTML文档结构

HTML标签分类

head内常用标签

body内常用标签

标题一

标题二

标题三

标题四

标题五

标题六

基本标签

特殊字符

div标签和span标签

img标签

a标签

列表

表格

form表单

属性action

input标签

select标签

textarea标签

label标签

网络请求方式

get请求

post请求

相关