前端基础之HTM引入_IT分享知识网

HTML：网页的骨架，没有任何样式。
- 开发者要遵循结构标准，就需要使用HTML来开发网页的内容与结构，需要遵循HTML语法。
CSS：给网页骨架添加样式
- 开发者要遵循外观标准，就需要使用CSS来设计或修改网页的外观效果，需要遵循CSS语法。
javascript：简称js，html、css都是不能动的，静态的，js就是控制页面的动态效果。
- 开发者要遵循行为标准，就需要使用javascript来编写网页的动态特效以及数据交互能力，需要遵循javascript ECMA语法。

6、前端框架（库）

BOOTSTRAP/JQuery/Vue/React/Angular.js

提前封装好了很多操作，只需要按照固定的语法调用即可

前端基础

二、浏览器访问页面发生了哪些事

1. 客户端输入网址向服务端发起请求

2. 服务端收到客户端的请求，处理请求

3. 服务端要给客户端做出响应

4. 把服务端返回的内容渲染(显示)到浏览器页面中

浏览器就是一个万能的客户端，超级客户端。言外之意，它可以作为很多服务端的客户端。

三、HTTP协议

1、什么是HTTP协议

超文本传输协议
- 用来规定服务器和浏览器之间数据交互的格式
该协议可以不遵循，但是自己写的服务端不能被浏览器正常识别，只能单机使用

2、HTTP的四大特性

（1）基于请求响应(有请求，有响应)

（2）基于TCP/IP之上，作用域应用层之上的协议

（3）无状态

不保存用户的信息
由于HTTP协议是无状态的，所以后来出现了一些专门用来记录用户状态的技术
- cookie/session/token

（4）无/短链接

请求来一次，就响应一次，之后我们两个就没有任何联系了
长链接
- 双方建立连接之后默认不会断开链接
  - websocket

3、HTTP协议的格式

（1）请求数据格式

请求首行(请求方式、协议和版本号)
请求头(多组K:V键值对)
换行符（\r\n）
请求体(并不是所有的请求都有，get没有post有，存放的是post请求提交的敏感数据)

（2）响应数据格式

响应首行(响应状态码)
响应头(多组K:V键值对)
换行符（\r\n）
响应体(返回给浏览器，展示给用户看的数据)

（3）请求方式

get请求
- 朝服务端要数据
  - 输入网址获取对应的内容
post请求
- 朝服务端提交数据
  - 用户登录，输入用户名密码之后提交到服务端后端做身份校验

（4）响应状态码

使用一个特殊的数字代表一串复杂的描述性信息
- 1xx：代表的是请求数据成功，但是这个时候还可以继续往服务端提交数据
- 2xx：代表的是请求成功（200 OK）
- 3xx：代表的是重定向（301 302）
- 4xx：代表的是资源找不到（404 Not Found）
- 5xx：服务器内部错误(出现网页打不开的情况)（500 502）

面试题：

get和post的区别?

请说出常见的响应状态码(1xx 2xx 3xx 301 201)

(URL)

统一资源定位符(网址)

四、HTM简介

超文本标记语言
如果想要让浏览器能够渲染出写的页面，都必须遵从HTML语法
我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)

简单的页面

<h1>hellow Python</h1> <a href="https://meizitu.com">click me!</a> <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.XJ-2yBSMNIAvjkHkW8-r9gHaHa?w=190&h=190&c=7&r=0&o=5&pid=1.7" alt="my wifi">

HTML就是书写页面的一套标准

五、HTML中的注释语法

由于HTML代码非常杂乱无章且非常多，所以我们习惯性的用注释来划分区域方便后续的查找

单行注释

<!-- 单行注释 -->

多行注释

<!-- 多行注释1 多行注释2 多行注释3 -->

六、HTML的文档结构

<html>
    <head></head>：head内的标签不是给用户看的，而是定义一些配置，主要是给浏览器看的
    <body></body>：body内的标签，写什么浏览器就渲染什么，用户就能看到什么
</html>

注意：HTML代码是没有格式的，可以全部写在一行，只不过我们习惯了缩进来表示代码

HTML的文档结构通常遵循以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

首先，<!DOCTYPE html> 声明定义了当前文件是一个 HTML 文件。
- 接下来是 <html> 标签，它是整个 HTML 文档的根元素。
- 在 <html> 标签之内，有两个主要的部分： <head> 和 <body>。
<head> 用于定义文档的头部信息，其中可以包含一些重要的元素
- 例如 <title> 设置页面标题，<meta> 设置字符编码、关键词等。
- 这些元素通常不会展示在浏览器中，而是提供一些关于页面的描述和配置。
<body> 则包含了整个页面的可见内容
- 例如段落、标题、图像、链接等。
- 这些元素将直接影响和呈现到用户所看到的页面上。
需要注意的是，HTML 的标签是有层级关系的，内部的标签必须位于外部标签的范围之内，无法单独存在。

七、head常用标签

【1】title

<title>Title</title>

标题标签

【2】style

<style></style>

内部用来书写CSS代码

【3】script

<script></script>

内部用来书写JS代码(可以引入外部JS文件)

【4】link

<link rel="stylesheet" href="">

引入外部CSS文件

八、body中常用的标签

基本标签

<!–水平线–>

<hr>

【小结】

在HTML中，标签是用来定义页面的主体内容的。它是HTML文档的必需标签之一，包围了展示在浏览器窗口中的实际内容。

特殊符号

【小结】

特殊符号是指在文本中使用的一些非常规字符，这些字符通常不直接出现在键盘上，需要通过特定的键盘组合或者字符实体来输入。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/130081.html

前端基础之HTM引入

一、前端介绍