Python攻城师的成长————前端学习

最新推荐文章于 2024-09-29 09:53:09 发布
最新推荐文章于 2024-09-29 09:53:09 发布
阅读量538 收藏
点赞数
分类专栏： 前端HTML+css+js 文章标签： 学习 开发语言 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fonnt/article/details/124352911
版权
本文介绍了前端开发的基础知识，包括前端的定义，前端核心技术HTML、CSS和JavaScript的职责。深入讲解了HTTP协议，阐述了其无状态、基于请求响应的特点，以及常用的数据格式和状态码。此外，还详细解读了HTML的基本结构和常用标签，如标题、段落、链接、图片和表格等。
摘要由CSDN通过智能技术生成

今日学习目标

  • 学习前端基础知识，初步掌握前端代码架构

文章目录

学习内容

  • 前端简介
  • HTTP协议
  • HTML简介

一、前端简介

什么是前端

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

前端开发最核心的3个技术

  • HTML
    HTML，全称超文本标记语言，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
  • CSS
    CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
  • JavaScript
    JavaScript是一门脚本语言。
  • HTML、CSS和JavaScript的区别
    HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。
    我们把前端开发的过程比喻成“建房子”，做一个网页就像盖一栋房子，先把房子结构建好（HTML）。建好房子之后给房子装修（CSS），例如往窗户安上窗帘、往地板铺上漂亮的瓷砖。最后呢，装修完了之后，当夜幕降临的时候，我们要开灯（JavaScript），这样才能看得见里面。

二、HTTP协议

什么是HTTP?

超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。

四大特性

  1. 基于请求、响应
    服务端永远不会主动给客户端发消息 必须是客户端先请求服务端被动响应
  2. 基于TCP/IP作用于应用层之上的协议
    应用层协议:HTTP HTTPS FTP …
  3. 无状态
    服务端不保存客户端状态(纵使见她千百遍 我都当她如初见)
  4. 短连接
    不保持客户端与服务端之间的链接导通

数据格式

  • 请求格式:客户端给服务端发送消息应该遵循的数据格式
    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:都是服务端错误 与客户端无关(代码bug、机房炸了…)

在工作中还会自定义状态码(因为默认的不够)，自定义状态码一般都是从10000开始

三、HTML简介

什么是HTML？

HTML 指的是超文本标记语言

  • HTML 不是一种编程语言，而是一种标记语言
    标记语言是一套标记标签，HTML 使用标记标签来描述网页

HTML标签的分类

1.双标签:有头有尾		
	eg：<h1>内容</h1>	<html>内容</html>
2.自闭合标签:单标签
	<img/>				一般有特殊功能

HTML注释语法

(1)
< !-- 单行注释-->

(2)
< !--
多行注释
-->

HTML基本结构

一个HTML文件是有自己固定的结构，如下所示：

<html>

<head>...< /head>

<body>...</body>

</html>

代码讲解：

  1. < html>< /html>称为根标签，所有的网页标签都在< html>< /html>中。

  2. < head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有< title>、< script>、 < style>、< link>、 < meta>等标签，头部标签在之后会详细介绍。

  3. 在< body>和< /body>标签之间的内容是网页的主要内容，如< h1>、< p>、< a>、< img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

head内常见标签

  • title标签
    控制网页小标题
  • style标签
    内部支持编写css代码
  • link标签
    引入外部css文件
  • script标签
    内部支持编写js代码 也可以通过src属性引入外部js文件
  • meta标签
    功能非常多

在head中设置网页标题和字符集编码

<head>

<title>这里是标题</title>

<meta charset="utf-8"/>

</head>

body内标签

  • HTML 段落标签
    如果想在网页上显示文章，这时就需要< p>标签了，把文章的段落放到< p>标签中。

    <p>段落 </p>
<p>标签的默认样式，段前段后都会有空白。

  • HTML 换行标签
    如果希望在不产生一个新段落的情况下进行换行（新行），请使用 < br /> 标签：

    <p>This is< br/>a para< br/>graph with line breaks</p>

  • HTML标题
    标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。< h1>是最高的等级。
    < hx>标题文本< /hx> (x为1-6)

    题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。一个标题标签要独占一整行。

  • HTML 水平线
    < hr /> 标签在 HTML 页面中创建水平线,可用于分隔内容。

    <p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

  • HTML < span>标签
    < span>它的作用就是为了结合CSS设置单独的样式用的，本身没有任何效果。

  • HTML 列表标签
    1）无序列表

    在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

    语法：

    <ul>
	<li>...</li>
	<li>... </li>
    ......
</ul>

    2）有序列表

    如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用< ol>标签来制作有序列表来展示。

    语法：

    <ol>
		<li>信息</li>
		<li>信息</li>
		......
</ol>

  • HTML超链接
    使用< a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

    语法：

    <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

    例如：

    <a  href="http://www.baidu.com"  title="点击进入百度">click here!</a>

    上面例子作用是单击click here!文字，网页链接到http://www.baidu.com这个网页。

    title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）

    < a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。

    如下代码：

      <a href="目标网址" target="_blank">click here!</a>

  • HTML 图片
    在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用标签来插入图片。

    语法：

      <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

    举例：

      <img src = "myimage.gif" alt = "My Image" title = "My Image" />

    讲解：

    1、src：标识图像的位置；

    2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

    3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

    4、图像可以是GIF，PNG，JPEG格式的图像文件。

  • HTML表格
    有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：
    想在网页上展示上述表格效果可以使用以下代码：
    创建表格的四个元素：
    table、tr、th、td
    1、< table>…< /table>：整个表格以< table>标记开始、< /table>标记结束。

    2、< tr>…< /tr>：表格的一行，所以有几对tr 表格就有几行。

    3、< td>…< /td>：表格的一个单元格，一行中包含几对< td>…< /td>，说明一行中就有几列。

    4、< th>…< /th>：表格的头部的一个单元格，表格表头。

    5、表格中列的个数，取决于一行中数据单元格的个数。

    表格标题

    < caption> 指定表格标题，它显示在表格上方。

    语法：

    <table>

  	<caption>标题文本</caption>

  	<tr>

  		<td>…</td>

  		<td>…</td>

 		 …

  	</tr>

  	…

</table>

  • HTML特殊标签
    字体系列

    <i>斜体</i>
<b>加粗</b>
<u>下划线</u>
<s>删除线</s>

    特殊符号

    &nbsp;	    空格
&gt;	    大于号
&lt;		小于号
&amp;		&符号
&yen;		羊角符
&copy;		版权	
&reg;		商标

标签的两大重要参数

  1. id
    类似于身份证号 同一个html页面上标签的id值不允许重复
    用于精确查找某个标签(因为一个html页面上相同标签名的标签太多)
  2. class
    类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)

总结补充

  • 标签的类别
    1.块儿级标签:h1~h6 p div
    默认独占浏览器一行内
    2.行内标签:s i u b span
    自身内部文本多大就占多大

  • 标签之间支持嵌套(最好是布局类相关标签参与)
    1.块儿级标签可以嵌套任意标签
    2.不属于布局标签的块儿级标签不建议嵌套块儿级标签
    3.行内标签只能嵌套行内标签

  • html标签其实没有缩进的概念
    之所以缩进是因为我们习惯了 更加美观

絵飛的
关注
专栏目录
Python攻城师的成长————Django框架（模板层）
fonnt的博客
05-16 199
今日学习目标 熟悉模块基础知识点学习 文章目录今日学习目标学习内容一、模板语法之过滤器二、模板语法之标签(类似于流程控制)三、自定义过滤器、标签、inclusion_tag四、模板的导入五、模板的继承六、django测试环境搭建七、ORM查询关键字使用 学习内容 模板语法之过滤器 模板语法之标签(类似于流程控制) 自定义过滤器、标签、inclusion_tag 模板的导入 模板的继承 测试环境搭建 ORM查询关键字使用 一、模板语法之过滤器 优点：类似于内置函数 特点：会将|左边的当做过滤器
Python攻城师的成长————Django框架（视图层）
fonnt的博客
05-13 355
今日学习目标 学习Django框架（视图层） 文章目录今日学习目标学习内容一、虚拟环境二、django路由层版本区别三、视图函数的返回值HTML响应2.JsonResponse四、接收文件数据request其他方法五、FBV与CBV(基于函数的视图、基于类的视图)六、模板语法传值 学习内容 虚拟环境 django路由层版本区别 视图函数的返回值 接收文件数据 FBV与CBV(基于函数的视图、基于类的视图) 模板语法传值 一、虚拟环境 不同的项目应该有各自独立的解释器环境，最大化节省资源，实际
Python攻城师成长————前端JS学习
fonnt的博客
04-28 549
今日学习目标 熟悉学习JS内容。 文章目录今日学习目标学习内容一、JS--运算符1.算术运算符2.比较运算符3.逻辑运算符二、JS--流程控制if判断switch语法while循环for循环三元运算三、JS--函数函数定义:无参函数有参函数匿名函数箭头函数(drf中vue框架会再次接触)四、JS--内置对象自定义对象(相当于python里面的字典)内置对象Date对象五、JS--BOM与DOM操作BOM操作(了解)弹框系列计时器DOM操作（部分） 学习内容 JS–运算符 JS–流程控制 JS–函
Python攻城师————前端学习（jQuery框架、第三方框架bootstrap框架）
fonnt的博客
05-02 1982
今日学习目标 继续学习jQuery框架剩余的内容。 文章目录今日学习目标学习内容一、jQuery操作标签class操作样式操作位置操作文本值操作属性操作文档处理操作二、jQuery事件操作jQuery绑定悬浮事件值监听事件阻止后续事件阻止事件冒泡事件委托三、jQuery动画效果四、前端第三方框架(bootstrap框架)bootstrap框架bootstrap版本基本使用文件组成 学习内容 jQuery操作标签 jQuery事件操作 jQuery动画效果(了解) 前端第三方框架(一种基础)
Python攻城师的成长————流程开发
fonnt的博客
04-04 1260
学习目标： 熟悉项目开发的全部流程，掌握项目开发框架 学习内容： 项目开发流程 需求分析 在公司里这就是一个项目的开始，会由项目经理与架构师去与需求公司谈项目功能。这之前可能会去提前设想好流程需求，然后在和客户交流细节。 架构设计 架构师会根据具体的业务需求选择： 开发的编程语言 项目的后端框架、 项目所需的数据库(主库、从库) 项目组织结构(软件开发目录规范、自定义结构) 项目功能划分(将一个大项目拆分成多个小项目) 项目的报价 分组开发 将项目拆分之后的多个小项目交给不
Python攻城师的成长————web框架（Django）
fonnt的博客
05-10 304
今日学习目标 搞懂什么是web框架，认识Django框架 文章目录今日学习目标学习内容一、个人手写web框架（简易）什么是web框架1.搭建简易版本服务端2.遵循HTTP协议，改进服务端3.基于不同的后缀响应不同的内容基于wsgiref模块二、动静态网页jinja2模块个人总结结构web框架python主流web框架django框架简介版本问题启动问题下载django基本使用验证是否下载成功命令操作djangopycharm操作djangodjango主要文件介绍 学习内容 个人手写web框架（
Python攻城师的成长————DOM操作标签、事件绑定、jQuery框架
fonnt的博客
04-29 2190
今日学习目标 熟悉学习DOM操作标签、事件绑定、jQuery框架的内容。 文章目录今日学习目标学习内容一、DOM操作标签动态添加标签获取值操作属性操作二、事件绑定事件简介事件案例数据校验搜索框案例省市联动二、 jQuery框架简介查找标签筛选器方法 学习内容 DOM操作标签 事件绑定 jQuery框架 一、DOM操作标签 动态添加标签 方法 用法 document.createElement() 创建标签 标签对象.innerText 设置文本内容 标签对象
Python攻城师的成长————python操作MySQL、SQL语句补充
fonnt的博客
05-09 211
今日学习目标 熟悉掌握python操作MySQL 文章目录今日学习目标学习内容一、python操作MySQL安装pymysql基本使用conn.cursor():获取游标补充二、SQL注入问题二次确认三、修改表SQL语句补充1.修改表的名字 rename2.添加字段 add3.修改字段 change(名字类型都可)/modify(只能改类型不能改名字)4.删除字段 drop四、视图、触发器、存储过程视图触发器存储过程五、事务事务的概念事务的作用事务的四大特性(重点)具体使用六、流程控
Python攻城师的成长————css语法、伪元素选择器（部分）
fonnt的博客
04-26 652
今日学习目标 掌握form表单、css知识点，熟悉并掌握 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录今日学习目标前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种
Python攻城师的成长——ORM（choices字段）、AJAX
fonnt的博客
05-19 419
今日学习目标 学习Ajax具体操作 文章目录今日学习目标学习内容一、choices字段二、AjaXcontentType前后端传输数据编码格式ajax传json格式数据ajax传文件 学习内容 choices字段 ajax简介 一、choices字段 主要运用在用一些特殊字符或数字代表繁琐的字符串，一来为了节省数据空间，二来为了数据的可读性。可以用于输入用户性别，用户学历，工作状态等。 eg:创建一个用户信息表，其中的性别字段，就可以用到choices字段，用数字来代替对应的性别字符。 fr
零基础自学python爬虫笔记Day1——爬虫的基本原理
Seyhang的博客
08-05 334
前言 一个真正的爬虫攻城狮应具备：计算机网络、编程基础、前端开发、后端开发、App开发与逆向、 网络安全、运维、数据库、数据分析、机器学习等知识； 若想快速入门，则推荐 python基础+前端基础+计算机网络基础 python基础不用说了，推荐B战尚硅谷python基础教学，点此传送 前端基础，能够理解HTML+CSS+JavaScript 如果把网页比作一个人的话，HTML 相当于骨架，JavaScript 相当于肌肉，CSS 相当于皮肤，三者结合起来才能形成一个完整的网页。 计算机网络基础，
Spring Boot 学习和使用
cesske的博客
09-24 1202
Spring Boot是一款开源的Java Web应用框架，旨在简化Spring应用的初始搭建以及开发过程。Spring Boot通过整合Spring技术栈中的诸多关键组件，为开发者提供了一种快速、简便的Spring应用开发方式。它遵循“约定优于配置”的原则，通过自动配置、起步依赖和内置的Servlet容器，极大地简化了传统Spring应用的配置和部署过程。Spring Boot通过其自动化配置、起步依赖、内嵌服务器等特性，极大地简化了Spring应用的开发和部署过程。
大模型输入参数学习
AI智能，无处不在
09-25 551
top_p和top_k：用于控制生成文本的多样性和连贯性。较小的值会使生成的文本更连贯但缺乏多样性，较大的值会使生成的文本更随机和多样。：用于控制生成文本的随机性。较高的值增加随机性，较低的值增加确定性。：用于控制生成文本的长度。
Nexus学习
howwickhappy的博客
09-24 1003
Nexus 是一个开源的仓库管理器，用于管理和分发软件构建的组件。
Linux入门学习：进程概念
Lvision2的博客
09-24 1092
在课本的概念中，进程程序的一个执行实例，正在执行的程序。其内核观点：担当分配系统资源（CPU时间，内存）的实体。但这些概念太笼统，并不能让我们更加清晰的知道进程是什么，实际上，进程是内核数据结构(pcb) + 程序的代码与数据。pcb(process control block)进程控制块，进程信息被放在一个叫pcb的数据结构中，可以理解为进程属性的集合。在Linux入门学习：深刻理解计算机硬件与OS体系中，我们已经了解到。
H.264学习笔记
zfenggo的博客
09-26 779
H.264凭借其出色的压缩效率、灵活的编码方式以及高质量的视频表现，成为了现代视频技术的核心标准之一。它不仅减少了存储需求，还提高了流媒体和实时视频传输的可行性。对于从高清到超高清视频，H.264的编码能力仍然广泛适用。H.264的帧结构设计（I帧、P帧和B帧）极大地提高了视频编码的压缩效率。I帧保存完整的图像信息，P帧通过参考之前的帧减少冗余数据，而B帧则通过双向参考提供进一步的压缩优势。这种帧间的协同工作大幅降低了带宽需求和存储成本，同时保持了视频的高质量。NALU头。
2024-2025华为ICT大赛报名｜赛前辅导｜学习资料
qq2859066538的博客
09-25 303
华为ICT大赛是华为公司打造的面向全球高校的年度ICT赛事，大赛以“联接、荣耀、未来”为主题，协同政府、高等教育机构、培训机构和行业企业，促进高校ICT人才培养、成长和就业，助力ICT人才生态繁荣。华为ICT大赛2023-2024实践赛涵盖网络、云、计算（第九届华为ICT大赛更名为基础软件）和昇腾AI四个赛道。为有效帮助参赛者把握命题思路、突破重点内容、检验学习效果、提高实战经验，更充分地备战大赛，华为首次推出华为ICT大赛2023-2024实践赛真题实战系列课程，为您铺就通往大赛的成功之路。
从0学习React（3）
最新发布
qq_54432917的博客
09-29 424
在第一篇文章中，我们对index.tsx文件的每一行代码都做了简单的分析。通过第一篇文章的总结，我也大致知道了index.tsx里的很多语法。而第二篇文章，我对index.tsx文件的框架做了一个大致的分析，通过第二篇文章，我对index.tsx有了进一步的认识。按理来讲，第三篇文章我还是解析index.tsx文件，但是我发现，对于前两篇文章，其实我对语法的细节有很多不明白的点。因此这篇文章，我就把React的一些最基础的知识给梳理一下，帮助我更好的理解index.tsx的代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值