简单聊聊前端三件套

已于 2023-10-30 08:09:47 修改
阅读量1.1k 收藏 6
点赞数 6
分类专栏： Web 文章标签： 前端 html css js javascript
于 2023-09-11 21:20:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_74804205/article/details/132790708
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

Web

前言

这篇文章是博主学习前端的第一篇文章，具体介绍了Web是什么意思，还包括了前端三件套的内容，大家可以按需求直接跳转到对应的部分。

一、Web是什么？

概念：“Web” 是 “World Wide Web” 的缩写，意为 “全球信息网” 或 “万维网”。它是互联网的一个子集，是一个通过超链接将各种文档、图像、视频和其他多媒体资源连接在一起的信息系统。Web允许用户在不同的计算机上浏览、检索和交互式浏览这些资源。

Web网站的工作流程：
在这里插入图片描述
1、发起请求：

  • 用户在Web浏览器中输入URL1或点击链接，或者通过其他方式触发对Web网站的请求。
  • 浏览器解析URL并构建一个HTTP请求，其中包括请求方法（通常是GET）、目标URL、请求头和可选的请求体（如果是POST请求等）。

2、前端服务器响应请求

  • 前端服务器会将相应的代码返回给浏览器，浏览器自带的程序会自动解析前端提供的代码，来展示网页的基本结构。
  • 前端代码中会包括一个URL路径，浏览器通过这个路径会访问后端服务器。

3、后端服务器接受请求

  • 前端服务器响应请求提供的网页基本结构需要后端服务器数据库里面的数据，这时就会通过为浏览器提供路径的方式向后端服务器发起请求。

4、后端服务器

  • 后端服务器接收请求后会访问数据库，来获取数据库里面的数据，然后将这些数据返回给浏览器，浏览器将这些数据整合最后就形成了我们常见的网站。

二、精美的Web页面是怎么实现的呢？

  • 网页由什么组成？

    • 文字、图片、音频、超链接等

  • 网页背后的本质是什么？

    • 前端程序员写的代码，这些代码通过浏览器解析最终形成了我们看见的网页

  • 程序员写的代码如何转换成我们看见的网页呢？

    • 通过浏览器来转换
    • 浏览器通过他的内核来把代码转换成网页

  • 网页标准（Web标准）

    • Web标准是由W3C2（World Wide Web Consortium） 制定的一组制定和维护Web技术的规范和准则，旨在确保Web上的内容和应用程序能够在不同的浏览器和设备上一致、可访问和可维护。Web标准的主要目标是促进Web内容的互操作性、可用性和可访问性。

三、前端三件套

HTML（Hypertext Markup Language）

一、简介

  • HTML是网页的骨架，用于定义文档的结构和内容。它由一系列标签组成，每个标签用于描 述文档中的不同元素，如标题、段落、列表、链接等。
  • HTML标签可以用来创建文本内容、图像、表单、多媒体元素等。
  • HTML提供了文档的结构化表示，它告诉浏览器如何呈现页面的内容。
    基本结构：
<!DOCTYPE html> <!-- 文档类型声明 -->
<html> <!-- HTML根元素开始 -->

<head> <!-- 头部元素开始 -->
  <meta charset="UTF-8"> <!-- 文档字符集声明 -->
  <title>网页标题</title> <!-- 网页标题 -->
  <!-- 其他头部元素，如样式表和脚本引用 -->
</head> <!-- 头部元素结束 -->

<body> <!-- 主体元素开始 -->
  <h1>这是一个标题</h1> <!-- 标题元素 -->
  <p>这是一个段落。</p> <!-- 段落元素 -->
  <!-- 其他HTML元素和内容，如链接、图像、表格等 -->
</body> <!-- 主体元素结束 -->

</html> <!-- HTML根元素结束 -->


<!--
这个示例包括了HTML文档的基本结构：

<!DOCTYPE html>：文档类型声明，指定文档采用HTML5标准。

<html>：HTML根元素，包裹整个HTML文档。

<head>：头部元素，包含文档的元信息和设置，如字符集声明、标题、样式表和脚本引用等。

<meta charset="UTF-8">：字符集声明，指定文档使用UTF-8字符编码。

<title>：标题元素，定义页面的标题，显示在浏览器的标题栏或标签页上。

<body>：主体元素，包含实际的页面内容，如标题、段落、链接、图像和其他HTML元素。

<h1>：标题元素，定义一个一级标题，通常表示页面的主要标题。

<p>：段落元素，用于定义文本段落。
-->

二、标签
1、插入图像：img 指定图像的源文件和替代文本,有三个常见属性：

  • src：指定图像的来源URL。这是唯一必需的属性，它告诉浏览器要加载的图像文件的位置。
  • alt：指定图像的替代文本，用于在图像无法显示或用户使用屏幕阅读器时提供说明。
  • width 和 height：分别用于指定图像的宽度和高度，以像素为单位。这些属性可以用来调整图像的大小，但应该谨慎使用，以避免图像变形。
<img src="image.jpg" alt="图像" width="200" height="150">

2、标题标签 h 系列

<h1>11111<h1>
<h2>22222<h2>
<h3>33333<h3>
<h4>44444<h4>
<h5>55555<h5>
<h6>66666<h6>
分别表示一到六级标题，字体会越来越小

3、表格标签

<table>：定义一个HTML表格的容器，包含整个表格。
<tr>：定义表格中的行（表格行）。每个<tr>标签包含表格中的一个行。
<th>：定义表头单元格，通常用于列标题。内容通常会居中且加粗显示。
<td>：定义表格中的标准数据单元格。每个<td>标签包含表格中的一个数据单元格。
<caption>：定义表格的标题，通常位于表格上方。
<thead>：定义表格的表头部分，通常包含列标题。
<tbody>：定义表格的主体部分，包含实际的数据行。
<tfoot>：定义表格的页脚部分，通常包含汇总信息或其他相关信息。
colspan 和 rowspan：这些属性可用于合并单元格，跨列或跨行。

<!DOCTYPE html>
<html>
<head>
  <title>学生成绩表</title>
</head>
<body>
  <h1>学生成绩表</h1>
  <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>20</td>
        <td>85</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>22</td>
        <td>92</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>21</td>
        <td>78</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">总计：</td>
        <td>255</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>
 <!-- 
在这个示例中：
使用<table>标签创建一个表格，并使用border属性指定表格边框。
在<thead>中定义表头，包含列标题。
在<tbody>中定义表格的主体部分，包含学生的姓名、年龄和成绩。
在<tfoot>中定义表格的页脚，显示总成绩。<td colspan="2">用于合并前两列。
使用<th>标签表示列标题，以加粗和居中显示。
使用<td>标签表示数据单元格。
 -->

4、表单标签

  • 表单属性
action：指定表单数据提交的目标URL，通常是服务器端脚本的地址。
method：指定表单数据提交的HTTP方法，可以是 "get" 或 "post"。get：表单数据是拼接在url后面的， 如： xxxxxxxxxxx? post：表单数据是在请求体（消息体）中携带的，大小没有限制。
  • 表单项标签：
<input>：用于创建多种类型的输入控件，如文本框、密码框、单选按钮、复选框等。type属性指定输入控件的类型。
<textarea>：用于创建多行文本输入框，允许用户输入多行文本。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>HTML-表单</title>
</head>
<body>
	<!--
	form表单属性:
		action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当
前页面
		method: 表单的提交方式 .
			get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 ,
url长度有限制 . 默认值
			post: 在消息体(请求体)中传递的, 参数大小无限制的.
-->
	<form action="" method="get">
 		用户名: <input type="text" name="username">
 		 年龄: <input type="text" name="age">
		<input type="submit" value="提交">
	</form>
 
</body>
</html>

CSS（Cascading Style Sheets）

一、简介

  • CSS用于控制网页的外观和样式。它定义了页面元素的布局、颜色、字体、边距、间距等外观属性。

  • CSS样式可以内嵌在HTML文档中，也可以作为外部样式表链接到HTML文档中。

  • CSS的主要作用是将HTML文档的内容与其外观分离，使开发人员能够轻松更改网页的样式，而无需修改HTML。
    二、如何将CSS引入HTML文件

  • 内部样式表（Internal Style Sheet）：

    • 使用内部样式表，您可以在HTML文件的<head>标签内使用<style>标签定义CSS样式。这些样式仅适用于当前HTML文件。
      <!DOCTYPE html>
<html>
<head>
	<title>网页标题</title>
 	<style>
	 /* 在这里定义CSS样式 */
	 	body {
	 		background-color: #f0f0f0;
			font-family: Arial, sans-serif;
		}
		h1 {
			color: #333;
		}
	</style>
</head>
<body>
	<h1>这是一个标题</h1>
	<p>这是一个段落。</p>
</body>
</html>

  • 外部样式表（External Style Sheet）：

    • 使用外部样式表，您可以将CSS样式定义在一个独立的.css文件中，并在HTML文件中使用<link>标签引用该文件。这使得样式可以在多个HTML文件中共享。
    • 首先，创建一个名为styles.css的外部CSS文件，其中包含您的样式定义：
      /* styles.css */
body {
	background-color: #f0f0f0;
	font-family: Arial, sans-serif;
}
h1 {
	color: #333;
}
    • 然后，在HTML文件的<head>标签内使用<link>标签引用外部CSS文件：
      <!DOCTYPE html>
<html>
	<title>网页标题</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
 	<h1>这是一个标题</h1>
	<p>这是一个段落。</p>
</body>
</html>

  • 内联样式（Inline Style）：

    • 使用内联样式，您可以直接在HTML元素内部使用style属性来定义单个元素的样式。这种方法通常用于对特定元素应用单独的样式。
      <!DOCTYPE html>
<html>
<head>
	<title>网页标题</title>
</head>
<body>
	<h1 style="color: #333;">这是一个标题</h1>
	<p style="font-family: Arial, sans-serif;">这是一个段落。</p>
</body>
</html>

三、CSS选择器
CSS选择器是用于选择HTML文档中要应用样式的元素的模式或规则。CSS选择器允许您根据元素的类型、属性、关系和位置等条件来选择元素，并为其应用样式。
选择器通用语法：

选择器名 {
	css样式名：css样式值;
	css样式名：css样式值;
}

这里我给大家介绍最简单的三种选择器：

  • 元素选择器（Element Selector）：
    • 元素选择器选择指定HTML元素的所有实例。例如，选择所有段落元素：
      元素名称 {
	css样式名:css样式值；
}
选择器的名字必须是标签的名字
作用：选择器的样式会作用于所有的同名标签
例如：
div{
	color: red;
}
所有的段落都会具有 red 这一特性
  • 类选择器（Class Selector）：
    • 类选择器通过元素的class属性来选择元素。以.开头，后跟类名。
      选择器的名字前面需要加上 .
作用：选择器中的样式会作用于所有class的属性值和		该名字一样的标签上，可以是多个
例如，选择所有具有class="highlight"的元素：
highlight {
	/* CSS样式规则 */
}

	/* 类选择器：为具有类名 "highlight" 的段落应用不同的背景颜色 */
.highlight {
	background-color: yellow;
}
  • ID选择器（ID Selector）：
    • ID选择器通过元素的id属性来选择唯一的元素。以#开头，后跟ID名称。例如，选择具有id="special"的元素：
      选择器的名字前面需要加上#
作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）
#special {
  /* CSS样式规则 */
}
/* ID选择器：为具有ID "special" 的段落应用不同的边框样式 */
#special {
  border: 2px solid red;
}
具有 ID = special  的会应用不同的边框样式，添加了2像素宽的红色边框。

四、盒模型
CSS盒模型是一种用于布局和定位HTML元素的概念。它将每个HTML元素视为一个矩形的盒子，这个盒子由内容区域、内边距、边框和外边距组成。了解盒模型非常重要，因为它影响了元素在页面上的大小和定位。
CSS盒模型的主要组成部分包括以下四个部分：

  • 内容区域（Content Area）：这是元素实际包含内容的部分，如文本、图像或其他子元素。内容区域的大小由元素的width和height属性定义。
  • 内边距（Padding）：内边距是内容区域与边框之间的空白区域。你可以使用padding属性来设置内边距的大小。
  • 边框（Border）：边框是包围内容区域和内边距的线或边界。你可以使用border属性来定义边框的宽度、样式和颜色。
  • 外边距（Margin）：外边距是元素与相邻元素之间的空白区域。它们用于控制元素之间的间距。你可以使用margin属性来设置外边距的大小。
+-----------------------------------+
|          Margin (外边距)         |
|                                   |
|  +----------------------------+   |
|  |        Border (边框)        |   |
|  |                            |   |
|  |  +----------------------+  |   |
|  |  |    Padding (内边距)   |  |   |
|  |  |                      |  |   |
|  |  |  Content (内容区域)  |  |   |
|  |  |                      |  |   |
|  |  +----------------------+  |   |
|  |                            |   |
|  +----------------------------+   |
|                                   |
|                                   |
+-----------------------------------+

默认情况下，CSS的宽度和高度属性（例如width和height）定义的是内容区域的大小，而不包括内边距、边框和外边距。但你可以通过使用box-sizing属性来改变盒模型的行为。

box-sizing: content-box; /* 默认值，宽度和高度只包括内容区域 */
box-sizing: padding-box; /* 宽度和高度包括内容区域和内边距 */
box-sizing: border-box;  /* 宽度和高度包括内容区域、内边距和边框 */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒模型示例</title>
    <style>
        /* 定义一个带有边框和内边距的元素 */
        .box {
            width: 200px;
            height: 100px;
            padding: 20px; /* 内边距 */
            border: 2px solid red; /* 边框 */
            margin: 30px; /* 外边距 */
        }
    </style>
</head>
<body>
    <div class="box">
        这是一个带有内边距和边框的矩形框。
    </div>
</body>
</html>

width 和 height：定义了内容区域的宽度和高度。
padding：设置了内边距的大小，这里是20px。
border：定义了边框的宽度（2px）、样式（实线）和颜色（红色）。
margin：设置了外边距的大小，这里是30px。

然后，在HTML中，我们创建了一个<div>元素并为其添加了.box类，使其应用了我们在CSS中定义的样式。结果是一个带有红色边框和内边距的矩形框。

你可以复制以上代码到一个HTML文件中，然后在浏览器中打开以查看效果。这个示例演示了如何使用CSS盒模型来控制元素的大小、内边距、边框和外边距。

JS（JavaScript）

一、简介

  • JavaScript是一种脚本语言，用于实现网页的交互性和动态功能。
  • JavaScript可以与HTML文档交互，响应用户的操作，例如表单提交、按钮点击、鼠标悬停等。
  • 它还可以用于与服务器通信、操作DOM（文档对象模型）元素、执行动画、验证表单数据等。

二、引入方式

  • 内联JavaScript：
使用<script>标签将JavaScript代码直接嵌入到HTML文件中。这种方法适用于较小的脚本。
注意点：
1、内联JavaScript会在页面加载时立即执行，这可能会导致页面加载速度较慢或阻塞其他资源的加载。因此，确保你的内联代码不会过于复杂，而且不会影响用户体验。
2、尽量将内联JavaScript放在<body>标签的底部，以便在HTML内容加载之后再加载JavaScript，从而提高页面加载性能。
  • 外部JavaScript文件：
JS代码定义在外部 JS文件中，然后引入到 HTML页面中
外部JS文件中，只包含JS代码，不包含&ltscript>标签
引入外部js的<script>标签，必须是双标签

内联：
<!DOCTYPE html>
<html>
<head>
    <title>示例</title>
</head>
<body>
    <script>
        // 这里编写你的JavaScript代码
        alert("Hello, World!");
    </script>
</body>
</html>


外联：
<!DOCTYPE html>
<html>
<head>
    <title>示例</title>
</head>
<body>
    <!-- 引入外部JavaScript文件 -->
    <script src="your-script.js"></script>
</body>
</html>

三、基础语法
1、变量声明：使用 var、let 或 const 关键字来声明变量。

var age = 30; // 使用var声明变量（ES5，不推荐）
let name = "John"; // 使用let声明变量（ES6，推荐）
const pi = 3.14; // 使用const声明常量

2、数据类型：JavaScript有多种数据类型，包括数字、字符串、布尔、数组、对象等。

var num = 42; // 数字
var str = "Hello, World!"; // 字符串
var isTrue = true; // 布尔
var fruits = ["apple", "banana", "orange"]; // 数组
var person = { name: "John", age: 30 }; // 对象
可以通过 typeof 来获取数据的数据类型

3、运算符

  • 算术运算符
    • +：加法
    • -：减法
    • *：乘法
    • /：除法
    • %：取余数
  • 比较运算符：
    • ==：等于（值相等）
    • !=：不等于（值不相等）
    • ===：严格等于（值和类型都相等）
    • !==：严格不等于（值或类型不相等）
    • >：大于
    • <：小于
    • >=：大于等于
    • <=：小于等于
  • 逻辑运算符：
    • &&：逻辑与
    • ||：逻辑或
    • !：逻辑非
  • 赋值运算符：
    • =：赋值
    • +=：加法赋值
    • -=：减法赋值
    • *=：乘法赋值
    • /=：除法赋值
  • 三元运算符
    • condition ? expression1 : expression2：根据条件的真假返回不同的表达式。
  • 其他运算符：
    • typeof：用于获取值的类型。
    • instanceof：用于检查对象是否是特定类的实例。

四、函数的定义
1、函数声明：
使用 function 关键字来声明一个函数，然后指定函数的名称和参数列表。函数声明会被提升到当前作用域的顶部，因此可以在声明之前调用函数。

function greet(name) {
    console.log("Hello, " + name + "!");
}

greet("John"); // 调用函数

2、具名函数表达式：
这是一种函数表达式，但函数本身有名称，这使得递归函数和调试更容易。

var factorial = function factorial(n) {
    if (n <= 1) {
        return 1;
    } else {
        return n * factorial(n - 1);
    }
};

var result = factorial(5);
console.log(result); // 120

五、JavaScript 对象
这里大家可以进入总结为大家提供的网站进行查询，进入网站之后点击左侧的 JavaScript 然后点击右侧的参考书即可看到所有的 JavaScript 对象。
这里我为大家提供两个对象：

  • DOM（文档对象模型）：

    1、什么是DOM？
    DOM是文档对象模型的缩写，它是一种用于表示和操作HTML和XML文档的编程接口。它将网页文档表示为一个树状结构，其中每个元素都是文档中的一个节点，可以通过JavaScript来访问、修改和操作这些节点。

    2、DOM的用途：

    • 访问和修改网页内容：使用DOM，你可以轻松地访问和修改网页中的文本、元素、属性和样式。
    • 创建新的HTML元素：你可以使用DOM创建新的HTML元素，然后将其添加到文档中。
    • 响应用户交互：通过DOM事件处理，你可以捕获和响应用户的交互，例如点击、鼠标移动等。
    • 动态更新页面：使用DOM，你可以在不重新加载整个页面的情况下动态更新页面内容，实现单页面应用（SPA）等功能。

    3、DOM的基本操作：

    • 选择元素：使用document.querySelector或document.getElementById等方法选择要操作的元素。
    • 修改内容：通过innerHTML或textContent属性来修改元素的内容。
    • 修改样式：通过style属性来修改元素的样式。
    • 创建和删除元素：使用document.createElement创建新元素，使用parentNode.removeChild删除元素。
    • 添加事件监听器：使用addEventListener方法为元素添加事件处理程序。

  • BOM（浏览器对象模型）：
    1、什么是BOM？
    BOM是浏览器对象模型的缩写，它是用于访问和控制浏览器窗口和浏览器属性的编程接口。BOM并不是W3C标准的一部分，因此它的功能在不同的浏览器中可能有所不同。

    2、BOM的用途：

    • 访问浏览器窗口：BOM允许你访问和控制浏览器窗口的大小、位置、前进和后退等。
    • 操作浏览器历史记录：你可以使用BOM控制用户的浏览历史记录，导航到不同的URL。
      弹出对话框和警告框：使用alert、confirm和prompt等方法显示对话框和警告框。
      设置定时器：BOM允许你使用setTimeout和setInterval等方法执行定时操作。

    3、BOM的基本操作

    • 窗口对象：通过window对象访问浏览器窗口的各种属性和方法。
    • 历史记录：使用window.history对象可以访问浏览器的历史记录，并进行导航操作。
    • 对话框和警告框：使用alert、confirm和prompt等方法显示对话框和警告框。
    • 定时器：使用setTimeout和setInterval等方法执行定时操作。

需要注意的是，BOM的功能在不同的浏览器中可能有所不同，因此在使用时要注意浏览器兼容性。DOM和BOM一起构成了JavaScript与Web页面和浏览器进行交互的重要工具，使得开发者能够创建丰富的Web应用程序。

总结

在现代Web开发中，HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript是不可或缺的关键技术。它们各自负责不同的任务，协同工作以创建交互性、美观和高性能的网页应用程序。3

博主还会持续更新相关文章，如果有什么意见或者建议可以给博主私信，欢迎大家多多评论交流。

  1. URL（Uniform Resource Locator，统一资源定位符）是用于标识和定位互联网上资源（如网页、图像、文件等）的地址。一个典型的URL结构有以下几个部分组成：
    [协议]: //[主机名][:端口号]/[路径]?[查询字符串]#[片段标识符] ↩︎

  2. W3C是一个国际性的组织，致力于制定和推广Web标准。W3C的标准由专家和社区共同制定，以确保Web技术的互操作性和可维护性。 ↩︎

  3. 这里为大家提供一个方便的网站供大家学习 HTML、CSS 以及 JavaScript ：w3school ，这个网站有很多资料可供大家查找，就是有广告。 ↩︎

派大星的信徒
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【大牛说】聊聊前端那些事儿
10-19
2. **第二阶段**：深入讲解 JavaScript 的核心概念，包括 DOM 操作、数组处理、函数编写和对象使用等，并通过制作一个简单的相册应用加深理解。 3. **第三阶段**：引入移动 Web 开发的相关知识，教授 viewport 的...
聊聊收纳与交互设计
02-21
前言：上次与朋友在火车上闲聊，聊到最近的工作。他们正在做一个面向国外用户的App。首页简单清爽，但是从中国人的视角来看，会觉得清汤寡味，而果不其然，他告诉我，最近团队正在打算改版，重新设计首页，“嗯，会...
利用python和前端三件套来一场线上烟花秀
weixin_45564943的博客
12-30 3863
目录 python烟花秀 效果展示： 全部代码如下： 前端三件套（JS、CSS、HEML）的烟花秀 HTML部分：定义网页内容 CSS部分：描述网页布局 JS部分：控制网页行为 End ✨✨✨✨✨✨✨ 元旦节就要来了，线下没有烟花看，线上不得整点烟花酷炫一下嘛！！ 啥？过啥圣诞节？过啥洋节，咱们过元旦节好吧！ ✨✨✨✨✨✨✨ python烟花秀 效果展示： 在这里，我们设计一个对象，表示烟花事件中的每个粒子。每个粒子都会有一些重要的属性，支配了它的外观和移动状况：大
2024年【Web 三件套】超多动图带你入门 HTML_动画三件套是指什么代码，2024年最新在字节跳动我是如何当面试官的
2401_84919775的博客
05-14 1027
注释过的文本不会显示在界面上。
聊聊我学了一个学期的前端
努力是为了将来有好的生活，所以一起努力吧！
05-08 608
我是一个计算机爱好者，喜欢搞计算机这一方面的东西，也是学Web前端的学生，喜欢分享技术快乐的学生和博主
前端学习路线
weixin_43957758的博客
03-12 437
学习
前端开发三件套_作为开发人员获得最佳性能时应避免的三件事
danpu0978的博客
05-27 916
前端开发三件套 作为程序员，您高度依赖大脑来正常运行，这是您用来促进职业发展并确保财务稳定的主要工具。 生活方式的任何改变都会立即影响您的健康，进而影响您的整体认知能力。 实际上，根据一篇文章介绍了健康状况影响每日生产力的方式，您每天养成的习惯可能会使生产力降低30％至90％ 。 当您的心态与您的工作质量直接相关时，对日常工作保持细心绝对是合乎逻辑的事情，考虑到您希望保持稳定的高性能。...
java前端学习路线
weixin_44057803的博客
07-18 1381
本篇来梳理一下前端开发方向的学习路线和知识点，包括前端开发到底要学什么、有哪些重要知识、现在的主流的技术点有哪些，希望能给之前很多问过该类问题的小伙伴们一个交代。在正式开始之前，先聊两个常见的问题吧。...
怒肝最新保姆级前端学习路线，速成贴心全面！
热门推荐
努力做最接地气的编程干货分享，感谢关注
06-07 2万+
这份学习路线并不完美，也不会有最终形态，正如前端不可预见、永无止境的未来。 大家好，我是鱼皮，肝了几天终于完成了这份保姆级前端学习路线。 ???? + ???? = ???????? 先放一张图： 是不是有点儿长，感觉要被劝退了？不过不用担心，为了帮助大家更轻松地了解前端知识体系，我对这份路线撒了点 糖 ~ 建议大家观看 B 站视频讲解，会清晰很多~ 地址：https://www.bilibili.com/video/BV1nh411e7oG/ 在我的公众号【程序员鱼皮】后台回复 “前端路线” 领取路线
前端学习路线分享
hpc_kiven的博客
09-03 177
交作业了 这篇让小伙伴们久等了。 本篇来梳理一下前端开发方向的学习路线和知识点，包括前端开发到底要学什么、有哪些重要知识、现在的主流的技术点有哪些，希望能给之前很多问过该类问题的小伙伴们一个交代。 在正式开始之前，先聊两个常见的问题吧。 前端和后端到底该怎么选？ 不得不说，前端开发现在确实很火，学的人也炒鸡多，如果仅从岗位需求、工资水平等市场就业这个角度来看，其实基本上已经与后端开发不分伯仲了，而且这几年前端技术的发展也非常繁荣。所以到底选哪个方向就看大家自己的兴趣和自身的境况了，谁也没有办法说哪个就一..
谈谈干前端五年的几点感受
07-08 1033
转眼我已经工作五年，辗转三家公司，在工作的第五年，终于如愿进入了大厂，生活也发生了些许变化。 一切是从两年前那篇文章开始的谈谈干前端三年的几点感受，一句“前端很容易学到天花板”，我被推到了风口浪尖，在无数的质疑和吐槽声中，我明白了，原来这就是流量。 一年前的谈谈干前端四年的几点感受，我知道了掘金热榜这个东西。 半年前的四年前端裸面，两周拿到美团offer，一篇面经，重新燃起很多同仁的大厂梦。...
搞编程选什么方向好?前端还是后端?阿里程序员和你聊聊就业心得
weixin_45820977的博客
11-06 837
经常有朋友问我，阿晨啊，我马上就要去就业了，应该选择什么前端还是后端啊，或者是一些学生小伙伴们在校期间想学习技术，也是拿不准方向。今天就这这里和大家仔细的聊聊前端和后端的优劣。 那我们现在就先来分析一下前后端在所用的技术栈上的区别。前端所用的技术栈，其实一路以来，发展历经了几大阶段。第一大阶段其实就是所谓的“基础静态页面阶段”，用的就是html JavaScrip等三大原生技术。而第二个阶段就是所...
聊聊cleancode
02-25
cleancode，顾名思义就是整洁的代码，或者说清晰、漂亮的代码，相信大多数工程师都希望自己能写出这样的代码。也许这是个千人千面的话题，每个工程师都有自己的理解。比如我，从一个天天被骂代码写得烂的人，逐渐...
聊聊Python中的多线程
02-25
在开始今天的话题之前，简单的来看有关Python的体系结构。为了方便起见我做一张导图，让大家有个宏观的认识。今天本来准备全面的聊聊有关高性能并发这个话题来着，但是周末马上要来了啊。所以我就取了其中的一点来...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1582
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 499
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
html+css+js实现一个简单的电商商城首页
爱敲代码的卡拉米的博客
08-02 248
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!绿泡泡：XiaoMei_NN。
【面试经验】滴滴 秋招储备实习 前端面经
最新发布
litterfinger的博客
08-05 204
时间线：5.15 11点半一面，下午2点半二面。● 不知道盒子宽高情况下水平垂直居中。● scale是怎么放大盒子宽高的。● transform的属性。滴滴秋招储备实习 前端面经。● 文件断点续传+切片上传。● 自我介绍+项目介绍。
2023聊聊web前端的昨天今天和明天
09-18
昨天，Web前端是一个非常基础的领域，主要关注页面的布局和样式。在这个阶段，主要使用HTML和CSS来创建网页，JavaScript主要用于增加一些动态效果。当时，前端开发主要集中在PC端的网站上。 今天，Web前端发生了...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值