前端

❤️‍🔥HTML 常见标签

  • 前端与后端的概念
  • 服务端搭建及客户端访问
  • 超文本链接传输链接（HTTP）
  • 超文本标记语言（HTML）

第二章

第三篇
第四章js
第五章js
第六章

❤️‍🔥前后端的概念

🐳什么是前端？

前端也就称为“客户端开发”，简单来说，就是可以理解为在应用程序或网站屏幕上看到的所有内容都属于前端。

🐳什么是后端？

后端，也称为“服务器端的开发”，也就是在系统“后面发生的事。同样，在后端服务器和浏览器或应用程序之间存储网站，应用数据和中间媒介的服务器都是属于后端。简单来说，在应用程序或网站的屏幕上看不到的所有东西都是前端的后端。

🐳前端需要学习的有：

HTML CSS javaScript

HTML 超文本链接语言：负责网页的架构

css 层叠样式表：一组样式设置的规则，用于控制页面的外观样式

javaScript(JS) 超文本语言 :负责网页行为

❤️‍🔥HTTP协议

🐳定义：HTTP（超文本传输协议 ）是最早就是计算机与计算机之间沟通的一种标准协议，这种协议限制了通讯内容的格式以及各项内容的含义。

随着时代的发展，技术的变迁，这种协议现已现在广泛的应用在各种领域，也不仅仅局限于计算机与计算之间，手机，电视等智能设备很多时候都在使用这种协议通信，所以一般现在称为HTTP为端与端之间的通讯协议

🐬Web 属于 B/S 架构的应用软件，在 B/S 架构中，浏览器与服务器沟通的协议就是 HTTP 协议，作为一个合格的Web 开发者，了解 HTTP 协议中约定的内容是一门必修课。

在这里插入图片描述

❤️‍🔥HTTP协议的四种特性

1.🐳基于请求的响应

1.基于请求响应
	客户端发送请求，服务端回应响应
2.基于TCP、IP作用于应用层之上的协议
	该协议属于应用层
3.无状态
	服务端不会保存客户端的状态（记不住人）
4.无连接/短链接
	客户端与服务端不会长久的保持链接，如果想要长时间保持链接，可以使用其他的协议

2.🐳数据格式

image

1.请求格式
	请求首行（请求方式（有很多的版本）协议版本）
    请求头（由一些 K:V 键值对 组成）
    请求体：
    	请求体（存放敏感信息，并不是所有的请求方式都有请求体）
        
2.响应格式
    	响应首行(状态码 协议版本)
    	响应头(一大堆K:V键值对)
       换行
    	这次请求服务端想要返回给客户端的数据正文，一般返回的都是 HTML，也可以返回 JavaScript 或者 CSS（需要修改响应头中的响应类型）。

image

image

请求头：

image

🐳3.响应状态码

🐬状态码是由一些数字组成的，这些数字用来表达一些文字意义（类似暗号）

  • 1xx:指示信息—表示请求以接受，继续处理
  • 2xx：成功 —— 表示请求已被成功接收、理解、接受
  • 3xx：302(临时) 304(永久) 重定向(想访问网页A但是自动调到了网页B)
  • 4xx：客户端错误 —— 请求有语法错误或请求无法实现。
  • 5xx：服务器端错误 —— 服务器未能实现合法的请求。

常见的状态码及描述：

image

PS：在公司中我们还会定义更多的响应状态码，通常以10000起步。

在我么写前端的时候，要是没有思路，或者想要看看别人的思路可以使用聚合数据，它还提供测试，来进行代码的调试。

❤️‍🔥HTML

❤️‍🔥简介：

🐬HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

总结：一句简单的话来总结，HTML它和其他的编程语言不同，它是所见即所得，没什么任何逻辑，是什么就是什么。

❤️‍🔥HTML概览

1.html 注释语法
 	<!-- 注释语法-->
    
2.HTML 文档格式

<html lang="en"> # HTML的格式
	<head> 主要存放跟浏览器交互的配置</head>
    <body>存放给用户查看的，就是网页的内容</body>
</html>

3.HTML标签分为两大类
	单标签（自闭和标签）
    	eg:	<img/>
    双标签 (有头有尾)
    eg：<h1></h1>

HTML基本结构

❤️‍🔥HTML的小知识

1.当保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好。
2.网页的信息数据一般也会存放在文件中的
3.pycharm 支持前端所有的类型文件编写
	内置有自动补全的功能，书写是只需要专注于标签名的编写即可
4.打开HTML文件，内置会有自动调用浏览器的功能

❤️‍🔥HTML的常用标签

❤️‍🔥head 内常用标签

image

🐳1.title 网页小标题

title 元素能够：

  • 定义浏览器工具栏中的标题
  • 提供页面被添加到收藏夹时显示的标题
  • 显示在搜索引擎结果中的页面标题

🐳2.mate 定义网页原消息 （很多的配置）

<meta name ="keywords" content=" 可以添加查询的关键字">
<meta name ="description" content=" 对网站的简介">

🐳3.style 内部支持编写CSS代码

<style>
    h1{color:red;}
</style>

🐳4.link 引入外部CSS文件

<link rel = "stylesheet" href='引入的文件/地址'>

🐳5.script 支持内部编写JS代码也可以引入外部JS文件

 <script>
        prompt('好好学习，天天向上！')
    </script>
<script src = "引用JS 文件"></script>

ps：了解每个标签的大致作用即可

❤️‍🔥body内标签

❤️‍🔥基本标签

🐳1.标题标签

🐬h1~h6:h1 定义最大的标题。h6 定义最小的标题。

<h1>标题1</h1> ~<h6>标题6</h6>

image

🐳2.段落标签

<p>这是一个段落标签</p>

🐳3.文本标签

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

🐳4.换行与分割线

<br/>	换行
	<hr/>	分割线
❤️‍🔥常见符号

image

❤️‍🔥布局标签

🐳1.块级标签

🐬块元素特点：

  • （1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
  • （2）块元素内部可以容纳其他块元素或行元素；
<div>
   用来进行页面的布局使用(块级标签)
</div>

🐳2.行内标签

🐬行内元素特点：

  • （1）可以与其他行内元素位于同一行；
  • （2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
<span> 行内标签 </span>

🐳标签和标签之间是能互相嵌套，并且理论上可以无限嵌套，块级标签内部可以嵌套块级标签和行内标签，但是行内标签只能嵌套行内标签。

PS：p标签虽然是块级标签，但是它的内部也不能嵌套块级标签。

❤️‍🔥body内常用标签

写标签的时候括号中填写的 ... = ...称之为标签的属性

标签的两种属性：

🐬1.默认属性
	标签自带的，编写的时候会有自动提示
🐬2.自定义属性
	用户自定义的属性，编写的时候不会有提示甚至会飘颜色

🐬1.a 标签 链接标签

<a href="链接地址" target="目标窗口的打开方式">

image

🐬a 标签里面的属性值：
href  
	1.填写网址   还具备跳转功能 （从一个页面跳转到另外一个页面）
     	href = '添加的网址'
    2.填写其他标签的id值 具备锚点功能
    	href ='#id'
 target
	默认_self原网页跳转 在当前页面打开目标页面（默认值
    _blank 新建网页跳转 在新的页面打开目标页面

🐬2.img 标签 图片标签

🐬img 是空标签，意思是说，它只包含属性，并且没有闭合标签。

<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">

img标签的属性
src
	1.填写图片地址
title
	鼠标悬浮在图片上就会出现文字的提示
 alt 
    属性用来为图像定义一串加载失败后提示的信息。替换文本属性的值是用户定义的
 width、height
	调整图片的尺寸，两者调整一个即可，另一个会等比例的缩放
❤️‍🔥列表标签

image

🐳1.有序列表

<ol type = '序号类型'>  
# 可以从1开始，也可以从3.4.5开始都行
    <li>有序列表项</li>
</ol>

image

🐳2.无序列表

<ul  type="列表项符号">

    <li>无序列表项</li>
</ul>

image

🐳3.定义列表

🐬在该语法中，dl标记和/dl标记分别定义了定义列表的开始和结束，dt后面添加要解释的名词，而在dd`后面则添加该名词的具体解释。

<dl>
    <dt>定义名词</dt>
    	<dd>定义描述</dd>
    <dt>大标题</dt>
    	<dd>小标题</dd>
</dl>
❤️‍🔥表格标签

image

image

基本结构

thead、tbody和tfoot这三个标签分别表示表头、表身、表脚。th表示表头单元格，th表示表身单元格。每一对“tr /tr”表示一行。

tr：一个tr标签据表示一行

th：用于表字头字段中，用来加粗显示

tb：用于表达数据

点击查看代码 
<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>表头单元格1</th>  
    	    <th>表头单元格2</th>
        </tr>
    </thead>

    <!--表身-->
    <tbody>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
        
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tbody>
    
    <!--表脚-->
    <tfoot>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tfoot>
</table>
❤️‍🔥表单标签

HTML中表单用于搜集不同类型的用户输入，，获取到数据并发送给服务端

在使用表单标签是还要使用一个标签：from 标签

`form action="数据的提交地址" method="数据提交的方法"  /form>`
提交数据的两种方法：	
	get: 在提交数据的时候，页面地址栏中是可见的
	post：在数据提交的时候，在页面地址栏不可见

form 属性列表：

image

表单标签共有4个：input、textarea、select和option。其中select和option是配合使用的。

🐳1.input标签

**input 标签元素可以根据type的属性，变化而变化多种形态 **

input标签应该有name属性,这个属性相当于字典的键 input标签获取到的用户数据相当于字典的值，点击发送就会组织成字典的形式发送给服务端，这样才具有明确意义。

type 属性
	text		普通文本
    password	 密文展示
    date		日期选项
    email		邮箱格式
    radio		单选（可以用于性别选择、、、）
    checkbox	多选（可以用于选择兴趣爱好...）
    file		文件 （也可以选多个文件 加CheckBox）
    submit		触发提交动作 （提交按钮）
    reset		重置表单中的内容（重置按钮）
    button		没有任何功能（就是一个普通的按钮）
   PS：button没有任何功能，但是以后能在个它添加一些功能，实用性比较强。

🐳2.select 标签 下拉框

🐳3.opotion 标签 ：就是一个个选项
multiple 可以进行下拉滚动

<select>
    <option value="">北京</option> 
    <option value="">上海</option>
    <option value="">浙江</option>
</select>

🐳4.textarea 标签 获取大段文本

可以用来获取评论，个人简介之类的

<textarea> 输入评论</textarea>

image

posted @ 2022-11-30 20:24  亓官扶苏  阅读(98)  评论(0)    收藏  举报