前端学习（1）

最新推荐文章于 2023-03-30 21:09:09 发布
最新推荐文章于 2023-03-30 21:09:09 发布
阅读量120 收藏 1
点赞数
分类专栏： 入门 文章标签： 前端开发工程师

要学哪些东西，才能做web前端开发：

1）软件：只需要花5%的时间

浏览器（谷歌、IE浏览器、火狐浏览器、苹果浏览器）

浏览器插件F12（谷歌）

用来写代码的编辑器：记事本、DW、Sublime...

PhotoShop

2）语言：至少花95%的精力

Html:"超"文本标记“语言”

        语言是和浏览器打交道的（沟通）

标记、标签：<html >

标签对：<html></html>   <body></body>

单标签:<meta     内容      />    <img     内容      />

<html>

        <head>
                <title>标题-title</title>

        </head>
        <body>
                内容-content
        </body>
</html>

保存：1.这是我的第一个页面.html

<!doctype html>
<html>

        <head>
                <meta  charset='UTF-8'/> 
                <title>标题-title</title>

        </head>
        <body>
                内容-content
        </body>
</html>

        保存的时候也要改成utf-8 

        这才是完整的页面结构

CSS:层叠样式表

        width:200px;

        height:200px;

        border:8px solid  red;

        background:url(图片网址);

<!doctype html>
<html>

        <head>
                <meta  charset='UTF-8'/> 
                <title>标题-title</title>

        </head>
        <body>
                内容-content
                <div style = "width : 200px; height : 200px; background:red;url(); "></div>//边框border:8px solid red;
        </body>
</html>

javaScript:脚本语言（行为）

<!doctype html>
<html>

        <head>
                <meta  charset='UTF-8'/> 
                <title>标题-title</title>

        </head>
        <body>
                内容-content
                <div onclick = "this.style.width = '800px'; this.style.height = '400px';"  style = "width : 200px; height : 200px; transition:1s;background:red;url(); "></div>//边框border:8px solid red;
        </body>
</html>

硬指标 

行间样式表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

<!--行间样式表-注释是给活人看的！-->
	<div style="width:100px; height:100px;background: yellow; font-size: 30px;">aaa</div>

	<div style="width:100px; height:100px;background: yellow ;font-size: 30px;">bbb</div>

	<div style="width:100px; height:100px;background:yellow; font-size: 30px;">ccc</div>
</body>
</html>

内部样式表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
<!--内部样式表-->
#div1 {
	width:100px;
	height:100px;
	background:red;
}
#div2{
	width:300px;
	height:100px;
	background:yellow;
}
</style>
</head>
<body>
	<div id = "div1">aaa</div>
	<div id = "div2">bbb</div>
</body>
</html>

外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<!--外部样式表-->
<link rel="stylesheet" href="123.css" />
</head>
<body>
	<div id = "div1">aaa</div>
</body>
</html>

外部css

#div1{
	width:100px;
	height:100px;
	background:red;
	font-size:120px;

}

 

wanshuai666
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Pr学习（1）
刘兵马俑的博客
03-21 1057
IEEE 1394：苹果公司开发的通信标准，俗称火线接口。D1：像素宽高比低场优先：基场优先，采集时要把软件的场序设成和DV的场序一样720h*675v：h（horizontal）和v（vertical）代表横向和纵向，意思就是屏幕分辨率为720×576，这不是720P，720P是1280×720的分辨率，且逐行扫描。项目文件：存储跟序列和资源有关的信息，Pr不会将视频、音频和图片存储在项目文件中...
前端学习笔记（1）
qq_42225915的博客
05-21 177
前端笔记-1 首先需要了解软件主要分两种架构C/S和B/S。 C/S：C/S 中的C指的是Client，是客户端的意思，S值Server指服务器的意思。即客户机和服务器结构。 B/S：B/S中的B指的是browsers，是浏览器的意思，S值Server指服务器的意思。即浏览器和服务器结构。 软件开发流程： 1-网页设计师根据需求设计网页 2-前端工程师将设计做成静态网页 3-后台工程师将静态网页修改为动态网页 前端了解： A：将设计师的设计转换为代码，然后交给后台工程师，在由他们去编写服务器的代码。 .
前端学习路线（简洁清晰，直击学习途径）
m0_67911008的博客
03-30 6万+
第一阶段：前端入门 1.Html5 2.Css3 第二阶段：JavaScript ①JavaScript 基础语法 ②JavaScript 高级（WebAPI/Dom Bom） ③JavaScript 框架（jQuery） ④数据可视化（echarts） 第三阶段 服务端编程 1.node js基础 2.ajax 3.promise 4.axios 5.了解学习es6语法，http协议规则 6.TypeScript 第四阶段 Vue.js
前端页面的简单学习与项目搭建（主要针对HTML和VUE的学习）
热门推荐
张彦峰的博客
04-09 169万+
备注：只是本人的自学与备注，自己本身不是做前端的，只是简单搭建一些前端的东西，自己玩的。 一、HTML简单的回顾 （一）HTML 基本结构 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&...
前端学习路线
Z164348_619的博客
08-12 3821
一、前端三大件 1.HTML:网页骨架 2.CSS:网页样式 3.JavaScript:网页交互动作 二、前端开发工具vscode 三、三大主流框架 1.Vue 2.React 3.Angular 四、前端深入 1.jQuery库 2.小程序 3.node 4.TypeScript 5.前端工程化，git以及webpack 五、项目实战 ......
windstormeye#iOS-Course#前端学习1
07-25
1，session 在服务器端，cookie 在客户端（浏览器）2，session 默认被存在在服务器的一个文件里（不是内存）3，session 的运行依赖 s
前端开发学习手册.zip
05-10
前端开发学习手册 前端开发学习手册 前端开发学习手册 前端开发学习手册 前端开发学习手册 前端开发学习手册 前端开发学习手册 前端开发学习手册 前端开发学习手册 前端开发...
前端学习视频
10-09
生鲜超市的静态网页，有导航，有列表，使用这个可以掌握HTML+css布局的方式，比较生动形象。
h5前端学习笔记
03-21
【标题】"h5前端学习笔记"所涵盖的知识点主要集中在HTML5技术及其在前端开发中的应用。HTML5是超文本标记语言的最新版本，它引入了许多新的元素、API和特性，极大地增强了网页的交互性、可访问性和可用性。 【描述...
前端学习思维导图11111
05-09
前端学习思维导图11111
使用 React 和 Redux 进行井字游戏并附带源代码.zip
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）
07-24
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明） 该设计为DK124控制的开关电源，实现12V 2A输出； 功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；
基于Springboot和Vue的生鲜超市管理的设计与实现源码 生鲜超市管理的设计与实现代码（优秀毕业设计）
07-24
生鲜超市管理的设计与实现源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
使用 ReactJs 编写的简单旅行计划器（附源代码）.zip
07-24
项目：使用 ReactJS 编写的简单旅行计划器（附源代码） ReactJs 中的简单旅行计划器是一个简单的 JavaScript 项目。该项目是 ReactJS 中待办应用程序的一个简单示例。 关于项目 Simple Trip Planner In Reactjs 是使用ReactJS开发的。这个项目很容易做一种应用程序。这个项目使用 React 库来完成任务。为了运行这个项目，你必须在系统中安装 NodeJs。当你运行这个项目时，你的应用程序从主页开始。从那里你可以导航到菜单。你只能将计划添加到你的书中。你还可以对旅行进行分类。你所要做的就是输入日期和地点，然后选择你想要的旅行计划类型。 要运行此项目，您需要 在计算机上安装ReactJS和 NodeJs，并使用现代浏览器，例如Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
俄罗斯方块的python代码
07-24
这段Python代码实现了一个简单的俄罗斯方块游戏，使用Pygame库处理图形和用户输入。游戏初始化Pygame库并设置屏幕大小为800x600像素，定义不同颜色和形状的方块。游戏由一个`Tetris`类管理，负责游戏状态和逻辑操作，每个方块由一个`Block`类表示，包含其形状、颜色、位置等信息。 在主循环中，游戏通过事件处理机制响应用户的键盘输入，箭头键用于移动和旋转方块，空格键用于快速下落。游戏会检测方块是否与已有的方块或边界发生碰撞，如发生碰撞，当前方块会固定在场地上并生成新方块。填满的行会被清除，玩家获得相应分数。 游戏通过一个二维数组维护场地状态，每个元素表示一个单元格是否被占据，通过检查和清除单元格实现行消除。整个游戏不断刷新屏幕更新显示，确保流畅运行，绘制背景、方块和边框，使界面美观易理解。 总体而言，这段代码展示了如何使用Pygame库实现经典俄罗斯方块游戏，包括图形绘制、用户输入处理和基本游戏逻辑，让玩家通过移动和旋转方块消除行并获得高分。
绿色金融：“双碳”经济时代，银行业务增长新引擎-埃森哲(
07-24
绿色金融：“双碳”经济时代，银行业务增长新引擎-埃森哲(
基于Springboot和Vue的结合疫情情况的婚恋系统源码 结合疫情情况的婚恋系统代码（高分毕设）
最新发布
07-24
结合疫情情况的婚恋系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
AdminLTE前端框架学习指南
"AdminTLE模板.pdf 是一个前端框架学习资料，主要介绍AdminTLE，一个基于Bootstrap3的响应式管理模板，适用于各种设备的后台管理界面。文档内容包括快速上手、常用页面、图表、UI元素、表单、表格、数据管理、目录...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值