前端入门

前端入门：JavaScript基础介绍

一、JavaScript介绍Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协

虞锦雯·2024-09-15 00:28

前端入门题目

第1题if(false){vara=1;letb=2;}console.log(a);console.log(b);解析：//输出undefinedReferenceError:bisnotdefinedvar不会产生块级作用域,let会产生块级作用域。第2题vara;if(false){a=1;letb=2;}console.log(a);console.log(b);解析：//输出Refere

kidding723·2024-09-06 01:51

【前端入门】HTML5全攻略

HTML概述HTML指的是超文本标记语言，它是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签。Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是由国际最著名的标准化组织。Web标准的构成（重点）主要包括结构（structure）、表现（presebtation）、行为（Behavior）三个方面。结构：结构用于对网页元

isun1·2024-08-24 17:42

web前端入门到实战：7道简单的 JavaScript 面试题，三个月没招到一个前端开发工程师

你能做什么?遵循这个建议：“熟能生巧”。通过投入足够的时间，更好地定期深入了解JavaScript，将改善你的编码，并顺便提高你的面试技巧。在这篇文章中，你会发现7个乍一看很简单，但实际上很棘手的JavaScript面试题。虽然一开始这些问题看起来是随机的，但是它们试图与JavaScript的重要概念挂钩。所以你最好在下次面试前练习一下!1.意外的全局变量问题在以下代码中，typeofa和type

大前端世界·2024-02-20 14:51

跟着pink老师前端入门教程-day25

4、阿里百秀首页案例4.1技术选型方案：我们采取响应式页面开发方案技术：bootstrap框架设计图：本设计图采用1280px设计尺寸4.2屏幕划分分析①屏幕缩放发现中屏幕和大屏幕布局是一致的。因此我们列定义为col-md-就可以了，md是大于等于970以上的②屏幕缩放发现小屏幕布局发生变化，因此我们需要为小屏幕根据需求改变布局③屏幕缩放发现超小屏幕布局又发生变化，因此我们需要为超小屏幕根据需求改

axiu呀·2024-02-15 05:08

跟着pink老师前端入门教程-day24

四、移动端WEB开发之响应式布局1、响应式开发1.1响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。1.2响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。平时响应式尺寸划分，也可以根据

axiu呀·2024-02-15 05:37

web前端入门到实战：CSS开发中的十大错误用法

自从接触前端软件开发以来，我发现开发猿一直在努力征服着CSS。理由也很充分，开发人员是用逻辑思考的生物。添加一个DIV元素导致所有代码都不得不往下移一行，而另一个DIV“浮”到左侧，感觉没有任何意义。你也一定听到过开发人员的抱怨：“我们只需要向左边移动五个像素，但是…天哪!为什么整个都向下移动了一行。到底是哪里错了?!?!?!”所以，这篇文章就和大家来聊一聊CSS中的十大错误的做法。1.不要滥用类

大前端世界·2024-02-13 04:53

跟着pink老师前端入门教程-day23

苏宁网首页案例制作设置视口标签以及引入初始化样式设置视口标签以及引入初始化样式设置公共common.less文件1.新建common.less设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要2.关心的尺寸有320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px3.划分的份数我们定为

axiu呀·2024-02-11 07:55

前端入门：（五）JavaScript 续

10.浏览器存储10.1Cookie的概念和使用Cookie是一种存储在用户计算机上的小型文本文件，用于跟踪和识别用户。Cookie通常用于存储用户的偏好设置、会话信息等，可以通过JavaScript进行读取和设置。//示例：设置和读取Cookiedocument.cookie="username=JohnDoe;expires=Thu,18Dec202412:00:00UTC;path=/";v

星光闪闪k·2024-02-09 18:32

跟着pink老师前端入门教程-day21+22

5.4常见flex布局思路5.5背景线性渐变语法：background:linear-gradient(起始方向,颜色1,颜色2,...);background:-webkit-linear-gradient(left,red,blue);background:-webkit-linear-gradient(lefttop,red,blue);背景渐变必须添加浏览器私有前缀起始方向可以是：方位名词

axiu呀·2024-02-08 20:37

跟着pink老师前端入门教程-day20

二、移动WEB开发之flex布局1、flex布局体验1.1传统布局与flex布局传统布局：兼容性好、布局繁琐、局限性、不能再移动端很好的布局flex弹性布局：操作方便，布局极为简单，移动端应用很广泛；PC端浏览器支持情况较差；IE11或更低版本，不支持或仅部分支持建议：1.如果是PC端页面布局，我们还是传统布局。2.如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局1.

axiu呀·2024-02-07 02:49

跟着pink老师前端入门教程-day19

一、移动WEB开发之流式布局1、移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。1.2常见移动屏幕尺寸注：以上

axiu呀·2024-02-07 02:13

给想学前端的小白整理了一下学习路线

第一阶段：前端入门1.Html52.Css3第二阶段：JavaScript①JavaScript基础语法②JavaScript高级（WebAPI/DomBom）③JavaScript框架（jQuery）

前端你鹏哥·2024-02-07 02:34

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景（Day 2）

来源：黑马程序员pink老师前端入门教程目录I.Emmet语法①快速生成HTML结构语法②快速生成CSS样式语法③快速格式化代码II.复合选择器①后代选择器※②子选择器※③并集选择器※④伪类选择器❀链接

进击的文文文·2024-02-06 08:39

【CSS】复合选择器、元素显示模式、背景、CSS的三大特性以及一些小工具

该系列文章是博主学习前端入门课程的笔记，同时也为了方便查阅，有任何问题都欢迎在评论区提出。

君和-·2024-02-06 08:08

web前端入门开发，CSS复合选择器，知乎上转疯了！

前端的兴起前端真正兴起和开始频繁出现在大家的视线里，大概是在十年前。彼时的Web开发基本是由后端主导，前端能做的只是校验一下数据、操作一下DOM。（其中数据检验是JS产生的根本原因：当时网络太慢，在服务端检验数据并反馈给用户，让用户知晓输入错误，这个流程太长、反应太慢，因此通过脚本在用户端完成第一步校验，既方便了用户，又减轻了带宽的压力。）即使06年jQuery发布并风靡全球，以及XMLHttpR

高级Java面试题大全·2024-02-06 08:06

跟着pink老师前端入门教程-day18

3、CSS33D转换生活中的环境是3D的，照片就是3D物体在2D平面呈现的例子特点：近大远小，物体后面遮挡不可见3.1三维坐标系三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的x轴：水平向右注意：x右边是正值，左边是负值y轴：垂直向下注意：y下面是正值，上面是负值z轴：垂直屏幕注意：往外面是正值，往里面是负值3.23D移动translate3d3D移动在2D移动的基础上多加了一个可以移动

axiu呀·2024-02-05 15:48

跟着pink老师前端入门教程-day16

二十七、CSS3进阶1、CSS32D转换转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果转换（transform）可以简单理解为变形移动：translate；旋转：rotate；缩放：scale1.1二维坐标系2D转换是改变标签在二维平面上的位置和形状的一种技术1.22D转换之移动translate2D移动是2D转换里面的一种功能，可以改变元素在页面

axiu呀·2024-02-05 15:47

跟着pink老师前端入门教程-day14+15

2.6main主体模块制作HTML：品优购快报更多[特惠】备战开学季全民半价购数码[公告】品优稳占家电网购六成份额[特惠】百元中秋全品类礼券限里领[公告】上品优生鲜享阳澄湖大闸蟹[特惠】每日享折扣品优品质游花费减飞机花费花费花费花费花费花费花费花费花费花费CSS/*声明字体图标*/@font-face{font-family:'icomoon';src:url('../fonts/icomoon.

axiu呀·2024-02-05 15:17

跟着pink老师前端入门教程-day17

2、CSS3动画动画（animation）是CSS3中就要有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果2.1动画的基本使用制作动画分为两步1.先定义动画2.再使用（调用）动画1.1用keyframes定义动画（类似定义类选择器）@keyframes动画名称{0%{width:100px;}10

axiu呀·2024-02-05 15:13

前端入门第三天

目录一、CSS定义二、CSS引入方式三、基础选择器1.标签选择器2.类选择器3.id选择器4.通配符选择器5.画盒子四、文字控制属性1.字体大小2.字体粗细3.字体倾斜4.行高1.行高-垂直居中5.字体族6.font复合属性7.文本缩进8.文本对齐方式1.水平对齐方式-图片9.修饰线10.颜色五、调试工具六、综合案例一、CSS定义1.基础选择器找标签2.文字控制属性文字大小、颜色键值对：color

qingxi_ran·2024-02-05 13:16

若川视野·2024-02-04 16:33

前端入门第二天

目录一、列表、表格、表单二、列表（布局内容排列整齐的区域）1.无序列表（不规定顺序）2.有序列表（规定顺序）3.定义列表（一个标题多个分类）三、表格1.表格结构标签2.合并单元四、表单1.input标签基本使用（type）2.input标签占位文本（placeholder）3.radio单选框（namechecked）4.file多文件上传（multiple）5.下拉菜单（selectoption

qingxi_ran·2024-02-01 13:42

前端入门第一天

目录HTML超文本标记语言——HyperTextMarkupLanguage标签语法：双标签：单标签——只有开始标签，没有结束标签基本骨架：标签的关系:注释：标题标签：（新闻标题、文章标题、网页区域名称、产品名称）特点：强调：段落标签：文本格式化标签：编辑图像标签：路径：相对路径：绝对路径：超链接标签：强调：音频标签：视频标签：综合案例：HTML超文本标记语言——HyperTextMarkupLa

qingxi_ran·2024-02-01 13:11

web前端入门到实战：仅3行核心css代码的rate评分组件，秀到头皮发麻

用css实现一个rate评分❗核心代码也就三行效果图原理梳理如下：去找个好看的iconfont，[Iconfont-阿里巴巴矢量图标库]、；借用5个radio单选框，把默认样式都去掉，显示默认的星星；用checked伪类监听用户选中✅，由默认的星星变成高亮的星星；然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮；把5个radio单选框反向排列❗；代码这是我事先生成好的iconfont一个很简

大前端世界·2024-02-01 13:31

Web前端入门 - HTML JavaScript Vue

ps：刚开始学习web前端开发，有什么不正确、不标准的内容，欢迎大家指出~Web简介90年代初期，Web1.0，静态页面，不和服务器交互，网页三剑客指Dreamweaver、Fireworks、Flash2000年代中期，Web2.0，动态页面，HTML是网页的结构，CSS是网页的外观，JavaScript是网页的行为。Ajax、jQuery等技术。2010年代，移动互联网，响应式设计、单页面应用

小小爱1990·2024-02-01 12:02

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端

橘子味红烧肉·2024-02-01 10:16

黑马pink老师Web前端入门笔记（二）

Web前端入门二、HTML标签（一）学习目标（二）HTML语法规范（三）HTML基本结构标签（四）开发工具（五）HTML常用标签1、语义标签：2、标题标签(重要)：3、段落和换行标签(重要)：4、文本格式标签

耿天霸·2024-02-01 10:13

web前端入门到实战：js函数与作用域,了解函数基本概念

通过js基础语法了解到js的值包含数字,字符串和布尔值;js运算符分为算数,赋值,比较和逻辑运算符;js的流程控制包含条件判断if，switch选择;循环forwhile；下面js的函数及作用域,学习掌握知识点:1.函数是什么?形参和实参2.函数里面的arguments3.作用域和预解析4.闭包和立即执行实例解析。什么是函数？简单来说是为了提高代码的复用性，写一遍可以多次使用，把特定的功能语句打包

大前端世界·2024-02-01 10:32

Web前端入门学习笔记 HTML、CSS、Javascript、Jquery

Web学习笔记文章目录一.前言参考资料二.HTML基础HTML概述img标签Div标签表单Web语义化三.CSS样式CSS概述CSS添加方法选择器CSS文本样式CSS背景样式CSS超链接列表，表格样式四.CSS布局与定位概述盒子模型CSS定位概述文档流定位浮动定位层定位弹性盒子布局网格布局精灵图五、CSS3盒子圆角边框阴影文字与文本2D转换过渡效果3D变换六、JavaScript加入JS代码的方法

love is sour·2024-01-31 21:28

0基础学习php、前端还是python?

先来看看这三种语言，php主要用于编写网页，前端对于网站来说，通常是指网站的前台部分，前端入门也很简单，不过近两年的被炒的很热，供求严重失衡。现在来说说Python，Python

老男孩Python·2024-01-30 15:26

跟着pink老师前端入门教程-day11

3、CSS三角网页中常见一些三角形，使用CSS直接画出来即可，不必做成图片或字体图标4、CSS用户界面样式4.1什么是界面样式界面样式：更改一些用户操作样式，以便提高更好的用户体验（更改用户的鼠标样式、表单轮廓、防止表单域拖拽）4.2鼠标样式cursor语法：li{cursor:pointer;}，设置或检索在对象上移动的鼠标指针采用合众系统预定义的光标形状4.3轮廓线outline给表单添加ou

axiu呀·2024-01-30 09:25

跟着pink老师前端入门教程-day09

二十二、定位22.1为什么需要定位1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子2.当我们滚动窗口时，盒子是固定屏幕某个位置的解决方法：1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子2.定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且介意压住其他盒子。22.2定位组成定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

axiu呀·2024-01-30 09:24

跟着pink老师前端入门教程-day10

22.10定位叠放次序z-index在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序（z轴）语法：选择器{z-index:1;}注意：1.数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上2.如果属性值相同，则按照书写顺序，后来居上3.数字后面不能加单位4.只有定位的盒子才有z-index属性22.11定位拓展11.1绝对定位的盒子居中加

axiu呀·2024-01-30 09:24

跟着pink老师前端入门教程-day13

品优购案例一、品优购项目规划1.品优购项目整体介绍项目名称：品优购项目描述：品优购是一个电商网站，我们要完成PC端首页、列表页、注册页面的制作2.品优购项目学习目的1.电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术。2.品优购项目能复习、总结、提高基础班所学布局技术。3.写完品优购项目，能对实际开发中制作PC端页面流程有一个整体的感知。4.为后期学习移动端项目做铺垫

axiu呀·2024-01-30 09:47

web前端入门到实战：26个CSS小技巧，开发各种炫酷网页效果必备！

本文总结日常开发中26个CSS实现方法，如有遗漏或补充，还请指正！解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移.wrap{display:inline-block;overflow:hiddenvertical-align:bottom}超出部分显示省略号//单行文本.wrap{overflow:hidden;/*超出部分隐藏*/text-over

大前端世界·2024-01-30 03:53

跟着pink老师前端入门教程-day12

二十六、HTML5+CSS3的提高1、HTML5的新特性HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。声明：1.新特性增加了很多，但是我们专注于开发常用的新特性。2.基础班我们讲解部分新特性，到了就业班还会继续讲解其他新特性。1.1HTML5新增的

axiu呀·2024-01-29 06:51

web前端入门：Html、CSS完成九宫格

用html、css制作一个简单的九宫格，显示完整的拼图效果。1.建一个三行三列的表格；2.设置一个图片背景；3.使用background-position属性来移动背景图片位置。关于设置背景属性，可以参考以下文档！http://css.doyoe.com/properties/background/background-position.htm代码如下：九宫格table{width:400px;h

莫得信服·2024-01-28 12:30

web前端入门到实战：总结让元素水平垂直居中的方法

前端开发中，我们经常需要对元素进行水平垂直居中。为此，特地总结了让元素居中的方法。水平居中text-align：center;这个是没有浮动的情况下，我们可以先将要居中的块级元素设为inline/inline-block，然后在其父元素上加上属性text-align:center;即可。如果要居中的块级元素直接是内联元素（span、img、a等），直接在其父级元素上加上属性text-align:c

大前端世界·2024-01-26 06:51

web前端入门到实战：网页开发中字体，字号与尺寸对应表

了解字体的一样常识，不管做一份文档编辑还是网页开发，都是很有必要的。整齐划一，井然有序才终是大家之道。1.字体在文档编辑中，我们常用的是宋体，小四号字，新罗马字体，字母和数字用的是Arial字体,段落首行缩进2个字体，采用多倍行距中的1.25倍行距。在网页开发中，普遍偏爱微软雅黑与宋体，14/16px，非衬线体。2.字号印刷文字有大、小的不同变化，排版及图象处理软件中汉字字体大小的计量，前主要采用

大前端世界·2024-01-25 00:41

从自学的茫然，到现在豁然开朗，说说我的前端学习经历

都说前端入门简单，我却用了三个月摸索的时间来学习，虽然能写点简单的，但是想要真正做一个项目，实际操作起来却并不是那么回事。

悠悠qie·2024-01-24 07:24

跟着pink老师前端入门教程-day08

二十一、案例前期铺垫21.1CSS属性书写顺序（重点）建议遵循以下顺序：1.布局定位属性：display/position/float/clear/visibility/overflow（建议display第一个写，毕竟关系到模式）2.自身属性：width/height/margin/padding/border/background3.文本属性：color/font/text-decoratio

axiu呀·2024-01-22 03:47

跟着pink老师前端入门教程-day07

去掉li前面的项目符号（小圆点）语法：list-style:none;十五、圆角边框在CSS3中，新增了圆角边框样式，这样盒子就可以变成圆角border-radius属性用于设置元素的外边框圆角语法：border-radius:length;参数值可以为数值或百分比的形式如果是正方形，想要设置一个圆，把数值修改为高度或者宽度的一半即可，或者直接写成50%该属性是一个简写属性，可以跟四个值，分别代表

axiu呀·2024-01-22 03:16

web前端入门到实战：CSS :placeholder-shown伪类实现输入框浮动文字效果

在这篇文章中，我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果，使用纯CSS实现。浮动的文字标签当我们处理输入框时，会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的：label标签是关联表单元素，提供说明信息最适合的元素。输入框的placeholder属性允许您指定没有输入内容时出现在元素内的文本。它用于显示示例文字，而不是解释或提示。这两个标签属性可以

大前端世界·2024-01-21 12:12

web前端入门到实战：js的局部变量和全局变量的区别

js是一个弱类型语言，同一个变量一会儿可以储存数据，一会儿可以存储字符串。全局变量:直接定义的变量是全局变量，可以被所有的脚本所访问到。局部变量：在函数定义里申明的变量。重点：局部变量只在函数内有效，同一个变量名如果在同时出现，则局部变量覆盖全局变量。代码说明：一、局部变量和全局变量重名会覆盖全局变量vara=1;functiontest1(){vara=2;alert(a);}test1();/

大前端世界·2024-01-21 02:34

web前端入门到实战：行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型

行内元素水平居中如何设置？如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。12345行内水平居中设置67div.box1,h5{8border:1pxsolidred;/*为了显示居中效果明显为div设置了边框*/9text-align:center;10}11121314行内元素水平居中如何设置？如果被设置元素为文本、图片等行内元素时

大前端世界·2024-01-20 22:19

web前端入门到实战：HTML5基础-新增标签+新增属性+布局案例

html5中常用的结构标签article文章header头部nav导航section区域aside侧边栏hgroup区块的相关信息figure定义一组内容及标题figcaption定义figure元素的标题footer底部dialog对话框使用习惯：header/section/footer>aside/article/figure/hgroup/nav>divembed可插入flash文件，但f

大前端世界·2024-01-20 21:50

跟着pink老师前端入门教程-day05

七、CSS的引入方式根据CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类1.行内样式表（行内式）内部样式表（内嵌样式表）是写到HTML页面内部，将所有的CSS代码抽取出来，单独放到一个标签中/*style标签理论上可以放在HTML文档的任何地方，但一般放在文档的标签中*/div{color:antiquewhite;}2.内部样式表（嵌入式）行内样式表（内联样式表）是在元素标签内

axiu呀·2024-01-19 20:33

跟着pink老师前端入门教程-day04

三、CSS简介3.1HTML的局限性HTML只关注内容的语义，不做任何外观样式3.2CSS-网页的美容师CSS是层叠样式表的简称，又称CSS样式表或级联样式表CSS是标记语言，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式CSS可以美化HTML,让HTML更漂亮，让页面布局更简单总结1.HTML主要做结构，显示元素内

axiu呀·2024-01-19 20:03

跟着pink老师前端入门教程-day03

6.表格标签6.1表格的主要作用主要用于显示、展示数据，可以让数据显示的规整，可读性非常好，特别是后台展示数据时，能够熟练运用表格就显得很重要。6.2基本语法是用于定义表格的标签。2.标签用于定义表格中的行，必须嵌套在标签中。3.用于定义表格中的单元格，必须嵌套在标签中。4.字母td指表格数据（tabledata），即数据单元格的内容。-->姓名性别年龄6.3表头单元格标签一般表头单元格位于表格的

axiu呀·2024-01-19 20:02

推荐频道