前端基础
关注
分享
扫一扫
前端基础
渣猫略懂
这个作者很懒，什么都没留下…
展开
-
JS基础：4种创建对象方式
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> .原创 2022-05-01 21:18:54 · 183 阅读 · 1 评论 -
JS基础：匿名函数&回调函数
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> .原创 2021-10-27 09:04:16 · 737 阅读 · 0 评论 -
JS基础：变量作用域&变量函数提升
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> .原创 2021-10-27 09:03:27 · 98 阅读 · 0 评论 -
JS基础：方法
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> .原创 2021-10-27 09:02:23 · 98 阅读 · 0 评论 -
JS基础：数组
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> .原创 2021-10-22 09:10:40 · 82 阅读 · 0 评论 -
JS基础：流程控制
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> .原创 2021-10-18 15:51:16 · 69 阅读 · 0 评论 -
JS基础：逻辑运算符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> /*自增自减： a = a +1; 可以写为： a++; 或 .原创 2021-10-18 15:50:27 · 269 阅读 · 0 评论 -
JS基础：数据类型转换
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> .原创 2021-10-18 15:49:18 · 81 阅读 · 0 评论 -
JS基础：JS引入方式&变量类型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id=""></div> <!-- js引入方式： 行内方式： .原创 2021-10-18 15:48:04 · 175 阅读 · 0 评论 -
CSS常见问题：图文混排基线对齐
未设置父标签或vertical-align的样式：设置vertical-align的样式：设置父元素高度的样式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 未设置父元素高度时父元素由内容撑开，设置内边距为0px 父元素应于内容高度一致，实际原创 2021-10-14 15:02:08 · 523 阅读 · 0 评论 -
CSS基础：text属性文本样式
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 500px; height: 150px; background-color: rgb(255,0,0); } #div1{ /* text-decor.原创 2021-10-13 10:50:15 · 506 阅读 · 0 评论 -
CSS基础：overflow属性
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* overflow针对当前元素内容超出元素 hidden超出部分隐藏，另一个作用块级格式上下文 scroll内容超出可滚动，不超出不能滚动，但有滚动条 auto内容超出时显示滚动条可滚动，不超.原创 2021-10-11 17:44:19 · 316 阅读 · 0 评论 -
CSS常见问题：浮动卡住问题
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul{ height: 200px; list-style: none; background-color: #000000; padding: 0px; margin: 0px;.原创 2021-10-11 17:26:11 · 424 阅读 · 0 评论 -
CSS基础：float浮动属性的使用&浮动的影响
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul,li,div{ margin: 0; padding: 0; } ul>li{ width: 100px; height: 100px; /* float属.原创 2021-10-11 15:51:37 · 391 阅读 · 0 评论 -
CSS基础：清除浮动带来的影响
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul,li{ margin: 0; padding: 0; } #ul1{ border: 1px solid #000000; /* 子元素都浮动父级没有高度：给父级.原创 2021-10-11 15:52:34 · 201 阅读 · 0 评论 -
CSS基础：谷歌盒子转换IE盒子
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 谷歌盒子模型:盒子最终的宽高=盒子的自身高度+padding+border IE盒子模型：盒子设置的宽高即为最终的宽高，padding和border由系统自动减去 */ /* .原创 2021-10-11 14:59:52 · 331 阅读 · 0 评论 -
CSS基础：margin在行内元素及行级块元素失效&两个元素之间margin重叠
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> span{ /* 行内元素margin上下被忽略 */ margin-top: 50px; margin-bottom: 100px; /* 行内元素margin左右不能使用auto,可以.原创 2021-10-07 16:32:04 · 414 阅读 · 0 评论 -
CSS常见问题：经典bug——margin塌陷
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{ width: 500px; height: 500px; background-color: #0000FF; /* 解决方案1：给父级设置上边框,transparent表示.原创 2021-10-07 15:15:32 · 143 阅读 · 0 评论 -
CSS基础：margin使用&margin居中&margin边框合并
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ height: 200px; width: 200px; border: 3px dotted #0000FF; } #div4{ height: 100px; .原创 2021-10-07 14:17:22 · 443 阅读 · 0 评论 -
CSS基础：盒子模型&padding撑大盒子
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 盒子模型分为三个部分：从内至外分别是：盒子内容、盒子内边距padding、盒子边框border、盒子外边距margin 每个属性都有四个方向：上top、右right、下bottom、左left*/ .原创 2021-10-07 09:16:54 · 1173 阅读 · 0 评论 -
CSS基础：background&font&字体样式
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ height: 2000px; } #div1{ width: 800px; height: 1200px; /* 背景颜色 */ background-c.原创 2021-10-05 18:21:40 · 215 阅读 · 0 评论 -
CSS基础：css三大特性（层叠性、优先性、继承性）&css选择器权值
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{ color: #0000FF; } .class1{ background-color: #006400; } #div2{ color: #006400;.原创 2021-10-05 15:29:08 · 111 阅读 · 0 评论 -
CSS基础：元素类型转换&元素嵌套
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 块级元素转行级元素 */ #div1{ width: 300px; height: 300px; display: inline; background-color: aqua.原创 2021-09-29 10:55:20 · 161 阅读 · 0 评论 -
CSS基础：伪类选择器
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 伪类选择器：link,visite仅a便签可以使用hover,active所有元素都可以使用 */ /* 伪类选择器前有冒号 */ /* 普通连接状态 */ a{ background-c.原创 2021-09-27 15:17:57 · 85 阅读 · 0 评论 -
CSS基础：常用的各种选择器
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 通配符选择器:选择所有标签 */ *{ font-size: 60px; } /* 标签选择:选择所有标签 */ td{ background-color: aqua; .原创 2021-09-26 18:24:51 · 125 阅读 · 0 评论 -
CSS基础：CSS引入方式&不同引入方式优先级
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 页面引入方式：css代码卸载stytle标签中--> <style type="text/css"> /* css代码 */ </style> <!-- 引入外部css文件:css代码卸载外部文件中 -->.原创 2021-09-26 18:23:49 · 129 阅读 · 0 评论 -
Html基础：表单&单/多选框&文本框&文件框&按钮
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- form表单，用于提交数据，对用户不显示 acation表示提交数据的地址，method表示提交方式，常用的有get和post 定义name的标签数据可以提交，未定义则不提交 --> <.原创 2021-09-26 16:42:40 · 984 阅读 · 0 评论 -
Html基础：表格
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 表格 --> <!-- border:边框的宽度 cellspacing:单元格之间的距离 cellpadding:单元格内容到单元格边框的距离 --> <!-- width：表格.原创 2021-09-26 16:40:46 · 55 阅读 · 0 评论 -
Html基础：a标签常用功能&常用列表
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- a标签：又称超链接，跳转路径分为相对路径和绝对路径 --> <!-- 绝对路径为完整的地址，打开外部网页连接时，一级网址（www.）可以不写，传输协议（http://）必须写 --> &.原创 2021-09-26 16:39:27 · 537 阅读 · 0 评论 -
Html基础：基本结构&常用标签&特殊字符
<!-- 声明这是一个html文件（html5） --><!DOCTYPE html><!-- lang：为文档设置语言（中英文）规范，搜索引擎SEO技术根据lang属性确认网页是中文版还是国际版，是SEO优化的一部分--><html lang="zh-cmn-Hans"> <head> <!-- 编码格式 --> <meta charset="utf-8"> <!-- 关键词，SEO根据相关关键.原创 2021-09-26 16:37:49 · 136 阅读 · 0 评论