![](https://img-blog.csdnimg.cn/c3345b65c51e4512a645555f7cacf727.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端开发第一阶段
文章平均质量分 70
以实战为线索,逐步深入前端开发各个环节,掌握前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力。
BadVictory
这个作者很懒,什么都没留下…
展开
-
前端第一阶段-19(HTML及css总结)
html总结原创 2022-08-15 15:03:49 · 106 阅读 · 0 评论 -
前端第一阶段-18(HTML和css面试题)
DOCTYPEhtml>声明文档的解析类型,用标准模式,浏览器使用W3C的标准解析渲染页面,避免浏览器的怪异模式表示网页采用html5,如果不加上,浏览器会以自己的方式解析渲染页面,导致用不同浏览器打开出现的效果不同,有些样式不生效。html5新增的标签有header、footer、section、nav、mian、article、figcaption、aside、address、video、audio。常见块级标签:div、p、table、form、hr、ul、ol、dl、li、h1-h6。.......原创 2022-08-15 15:01:22 · 147 阅读 · 0 评论 -
刚开始web前端需要的软件、插件及其他
刚开始web前端需要的软件、插件及其他安装edge浏览器插件。安装vscode插件。原创 2022-07-25 17:56:26 · 191 阅读 · 0 评论 -
前端第一阶段-01(HTML简单介绍、开发架构、软件开发流程、开发从事的岗位及思维导图)
第一阶段主要是html和css超文本标记语言是一种用于创建网页的标准标记语言。您可以使用HTML来建立自己的WEB站点,HTML运行在浏览器上,由浏览器来解析。通过使用CSS我们可以大大提升网页开发的工作效率!在我们的CSS教程中,您会学到如何使用CSS同时控制多重网页的样式和布局。C/S客户机/服务器,B/S浏览器/服务器软件开发流程,软件开发流程涉及到岗位,思维导图......原创 2022-07-26 18:11:42 · 268 阅读 · 0 评论 -
前端第一阶段-02(Photoshop简单使用)
Photoshop简单使用原创 2022-07-28 20:26:54 · 470 阅读 · 0 评论 -
前端第一阶段-03(用墨刀工具画原型)
草图、产品布局和产品功能交互画原型的常用工具:axure、墨刀AxureShop原型素材网地址:原型素材网 AxureShop产品原型网 – Axure原创素材交易平台 唯一官网:axureshop.com作用:让UI、开发人员知道有哪些页面、哪些功能和交互逻辑等仿支付宝的思维导图仿支付宝原型图效果如下......原创 2022-07-28 20:55:20 · 431 阅读 · 0 评论 -
前端第一阶段-04(HTML编辑器Visual Studio Code工具和HTML标签及特殊字符)
HTML编辑器Visual Studio Code工具和HTML标签html html页面的根元素head 头部meta 配置信息title 网页标题body 主体,可见的页面内容div 划分区域,盒子(块级元素)(block-level)span 用来组合文档中的行内元素(行内元素)(inline)ul>li 无序列表,type属性的属性值有: desc实心圆(默认)、circle空心圆、square方块ol>li 有序列表dl>dt>dd 定义列表h1-h6 标题(h1最大)p原创 2022-07-28 20:56:36 · 1406 阅读 · 0 评论 -
前端第一阶段-05(HTML的标签之表格)
HTML标签之表格及表格的行列合并colspan跨列合并,rowspan跨列合并rowspan="2"是单元格跨两行合并,colspan="2"是单元格跨两列合并原创 2022-07-29 11:23:49 · 311 阅读 · 0 评论 -
前端第一阶段-06(HTML的标签之iframe标签和a标签跳转)
iframe标签iframe标签用来在当前 HTML 文档中嵌入另一个HTML的文档iframe标签链接的地址可以是内部链接和外部链接注意这里的百度就拒绝连接,因为一般大公司都会屏蔽iframe标签,非常的不安全。iframe标签用来在当前HTML文档中嵌入另一个HTML的文档。iframe标签链接的地址可以是内部链接和外部链接。..................原创 2022-07-29 12:13:19 · 685 阅读 · 0 评论 -
前端第一阶段-07(HTML的标签之form表单及标签分类:行内标签和块级标签)
表单请求方式get和postfrom表单用于收集用户的输入信息的一个区域,此区域包含交互控件,将用户收集到的信息发送到后台。表单默认创建的type类型时text普通的文本输入框。块级标签和行内标签属性值 说明text 文本(默认)password 密码date 日期datetime 日期时间email 电子邮件month 月份number 数字reset 重置或取消submit 提交time 时间week 周url 地址tel 电话号码....................原创 2022-07-29 14:42:46 · 382 阅读 · 0 评论 -
前端第一阶段-08(CSS简单介绍、CSS引入及选择器)
CSS同时控制多重网页的样式和布局。内联方式内嵌方式外联方式选择器分类通用选择器,格式:*标签选择器,格式:标签名类选择器,格式:.类名id选择器,格式:#id名并列选择器,格式:选择器1,选择器2子代选择器,格式:选择器1>选择器2后代选择器,格式:选择器1 选择器2选择器优先级id选择器>类选择器>标签选择器>通用选择器(范围越小优先级越高)...........................原创 2022-08-01 11:52:29 · 134 阅读 · 0 评论 -
前端第一阶段-09(字体、文本样式、背景样式、列表样式)
字体粗细属性值:normal正常、bold加粗、bolder更粗、lighter细、100-900值越大越粗字形属性值:normal 正常(默认)italic 斜体oblique 倾斜字体颜色属性值:单词 redrgba rgba(0,0,0,1) 0透明,1不透明16进制 #ffffff。text-align 文本水平对齐方式(默认:left)属性值:left左、right右、center居中text-indent 段落首行缩进(2em)text-shadow 文本阴影...............原创 2022-08-02 21:46:00 · 121 阅读 · 0 评论 -
前端第一阶段-10(标准盒子和怪异盒子、边距及行内、行内块、块级标签之间的转换)
盒子模型:标准盒子和怪异盒子(IE盒子)内边距与外边距区别padding所有元素都可以设置,包括块级元素、行内元素及行内块;margin 行内元素上下不会生效(如果想要其生效:方法1.标签转换为块级标签;方法2. 布局为flex)块级标签上下排列,margin会重叠,取最大的(可以通过float或者flex);一个父元素嵌套一个子元素,子元素的margin-top,会作用到父元素(可以触发bfc,给父亲加padding)行内、行内块、块级标签之间的转换............原创 2022-08-03 13:13:07 · 173 阅读 · 0 评论 -
前端第一阶段-11(HTML之flex弹性)
flex-start向左排列、flex-end向右排列、center居中、space-between两边排列,左右两边没有间隔、space-around均匀排列,左右两边有间隔。row(默认)横向从左到右 | row-reverse横向从右到左 | column纵向从上到下 | column-reverse纵向从下到上。flex-start从上到下排列、flex-end从下到上排列、center居中。内部元素是如何在 flex 容器中布局。水平对齐弹性容器的方式。垂直对齐弹性容器的方式。..........原创 2022-08-03 14:46:29 · 241 阅读 · 0 评论 -
前端第一阶段-12(HTML之float浮动)
float布局:通过left/right值来让元素布局。float布局用导致父元素高度塌陷方法一:触发bfc方法二:直接给父元素设置高度 (不推荐)方法三:清除浮动,给子元素添加清除浮动float布局带来的问题:需要清除浮动可能需要标签转换需要设置宽高和margin导致问题很难定位.........原创 2022-08-03 23:22:25 · 225 阅读 · 0 评论 -
前端第一阶段-13(伪类、伪元素)
伪类用来添加一些选择器的特殊效果⚠️a:hover 必须放在 a:link 和 a:visited之后⚠️a:active 必须在 a:hover 之后。伪类 说明:hover 鼠标移入:active 鼠标按下到抬起a:link 链接访问前a:visited 链接访问后伪元素 说明::before 在... 前面加::after 在... 后面加..................原创 2022-08-05 11:44:27 · 222 阅读 · 0 评论 -
前端第一阶段-14(z-index调整层级)
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。原创 2022-08-05 21:37:20 · 292 阅读 · 0 评论 -
前端第一阶段-15(position定位、元素的隐藏overflow 、display、visibility、opacity 区别)
position定位position定位是指定一个元素在文档中的定位方式position: relative; 相对定位相对于自身位置,不会脱离文档流position: absolute; 绝对定位相对于最近一级添加了position定位的父元素,会脱离文档流position: fixed; 固定定位相对于浏览器窗口,不会随着页面滚动,会脱离文档流...............原创 2022-08-06 18:50:45 · 153 阅读 · 0 评论 -
前端第一阶段-16(box-shadow框架阴影、transform变换、transition过渡、animation动画)
transform属性向元素应用 2D 或 3D 转换。translate(x方向,y方向) 平移。只能转换由盒模型定位的元素。,则由盒模型定位元素。translate(x,y) 平移translate(x方向,y方向) 平移scale(x,y) 放大缩小rotate(角度) 旋转skew(x轴的角度,y轴的角度) 拉伸...........................原创 2022-08-06 20:18:54 · 470 阅读 · 0 评论 -
前端第一阶段-17(字体图标)
iconfont-阿里巴巴矢量图标库原创 2022-08-06 22:28:39 · 137 阅读 · 0 评论