前端学习笔记
文章平均质量分 77
我是一个粉刷匠1
这个作者很懒,什么都没留下…
展开
-
前端工程师养成计划html+css篇02-盒子模型
盒子模型是css中的重点,这篇文章就来详细的解析这个难点,本片文章将分成两大部分,盒子模型和怪异盒模型前备知识1.元素html网页中每一个标签都是一个元素2.块级元素和行内元素的区别块级元素特点: 1.从新行开始(一个块级元素独占一行) 2.高度,行高,外边距以及内边距都可以控制 3.宽度默认是父容器100% 4.可以容纳行内元素和其他块元素行内元素特点: 1.和相邻行内元素在一行上 2.高,宽无效,但水平方向的padding和margin可以设置,垂直方向的无效 3.默认宽.原创 2021-08-20 20:59:20 · 298 阅读 · 7 评论 -
前端工程师养成计划DOM篇04-节点操作
插入节点insertBeforeinsertBefore(B,A)有两个参数,B代表要被插入的节点,A表示被插入的结点,简而言之就是想把一个节点插入到哪个节点之前,就把这个节点写在哪个节点之前。这里要注意这个方法是由父节点调用的。拷贝节点cloneNode()这个方法可以传一个布尔类型的参数1.true传入true就会拷贝当前节点以及这个节点的所有后代节点2.false或者不传参就会只拷贝当前节点 <div id="wrap"> <p class="des">原创 2021-08-18 23:43:54 · 728 阅读 · 3 评论 -
前端工程师养成计划DOM篇03-获取标签样式和标签属性
上一节我们讲了如何获取DOM节点对象,还有一些简单的操作标签属性和标签样式的区别 <p id="cont">sfasdgsa</p> <script> var oP = document.querySelector("#cont"); oP.setAttribute("padding","10px");//这行代码能给标签添加上padding:10px的样式吗?</script>如上述代码,这是不能给标签加上样式的,attribute系.原创 2021-08-17 22:12:49 · 1022 阅读 · 2 评论 -
前端工程师养成计划js篇01-隐式转换规则
在js中存在着一些类型转换的规则,就是js中的隐式转换,这节我们就来归纳一下隐式转换的规则递增递减运算符(前置、后置)1.如果包含的是有效数字字符串或者是有效浮点数字符串,则会将字符串转换(Number())为数值,再进行加减操作,返回值的类型是:number类型2.如果不包含有效数字字符串,则会将字符串的值转换为NaN,返回值的类型是:number类型3.如果是boolean类型,则先会把true或者false转换为1或者0,再进行加减操作,返回值的类型是:number类型4.如果是null.原创 2021-08-17 18:01:55 · 1234 阅读 · 1 评论 -
前端工程师养成计划DOM篇01-初识DOM
JavaScript由ECMAScript、DOM、BOM三大部分组成其中ECMAScript是JavaScript的核心,它定义了JavaScript的语法规范,ECMAScript是一套标准。BOM(浏览器对象模型)则是一套操作浏览器功能的API,通过BOM可以操作浏览器窗口,如弹出框、控制浏览器跳转、获取分辨率等操作。DOM(文档对象模型)则是一套操作页面元素的API,DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的结点进行操作初识DOM开发当一个网页被加载的时候,浏览器原创 2021-08-12 23:09:28 · 2242 阅读 · 4 评论 -
前端工程师养成计划html+css篇01-选择器
有时候,一个html上有着许许多多的相同标签,但是却又不在同样的位置,这个时候我们该如何去定位到我们想要的那一个目标元素呢,在这个时候css选择器就派上了用场。精准制导-css选择器css选择器分成基础选择器和高级选择器,简而言之就是简单和复杂的选择器。一、css基础选择器1.标签选择器(元素选择器)标签选择器是使用标签名作为选择器,给页面中某一类标签指定统一的CSS样式,语法格式如下:仍然是键值对的格式 属性: 属性值标签名{属性1:属性值1; 属性2:属性值2;}2.类选择器.原创 2021-08-10 21:58:26 · 2029 阅读 · 2 评论 -
前端工程师养成-笔记02(span标签,标题标签,图像标签)
上文谈到了html的基础标签和一些常用的标签,接下来就继续谈谈常用的标签一、<span>标签<span></span>是双标签,它的作用是可以更改某一段文本的样式,可以精准的对一个部分进行美化但是要注意span标签本身是不具有格式表现的,只有对它应用样式时才能产生变化具体使用:<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8">原创 2021-04-20 21:28:25 · 7586 阅读 · 1 评论 -
前端工程师养成-笔记01(html,head,body,div,p,a标签)
html和css一、html基础描述html是超文本标记语言,其中html最基本的标签为:注:<!-- -->是html语言的注释,类似/**/<!doctype html><!--这个头表示本页面使用的是H5标准--><html><!--html标签是页面标签,表示一个页面--><head><!--网页头标签,一些网页的设置或者是css的内联样式就写在这里--></head><bod原创 2021-04-14 18:55:19 · 1351 阅读 · 4 评论