小程序学习道路-CSDN博客

本文链接：https://blog.csdn.net/2301_76945207/article/details/135562407

本文介绍了前端开发的基础内容，包括HTML结构、CSS样式设计、JavaScript行为，以及Vue框架的应用。还涵盖了微信小程序开发，强调了JavaScript作为基础的重要性，同时提及了DOM/BOM、APIs、CSS模块如wxss、交互功能如下拉刷新和节流，以及页面导航和组件生命周期管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

收集到的信息

建议你可以这个路线学习
html，css，js，es6（包含promise，异步编程，async，await 等等等），ajax，jquery（了解），nodejs（了解，知道npm），Vue全家桶，Vue2/Vue3，vue全部学完并且做了几个项目，最后再看这个微信小程序，uniapp。
这几个是基础。html，css是页面的基础；js是语言基础，是其中很重要的一部分。html，css，js这三个学会了其实就会写小程序了。但vue是因为它对js做了封装，用来开发能极大程度提升效率，所以要学，因为你不可能用js去写吧效率太低了。主要还是js基础，没准以后会出比vue更好的框架，但是你js基础好，什么框架底层都能很快懂，上手也快

HTML

软件	作用
HTML	结构
CSS	外表
JavaScript	行为

align-items:center;
justify-content:center;

一、基础内容

1、认识

<html>
  <head>
     <title>   </title>
  </head>
  <body>
  </body>
</html>

<h1></h1>.....<h6></h6> 标题
<p> 段落
<br> 换行
<hr> 水平线标签

标签	说明
b（strong）	加粗
u（ins）	下划线
i（em）	斜线
s（del）	删除线

快捷键：英文的 ! +回车

<img src="./当前相对路径 " alt=" " title="" width="" height=""> #图片
<audio src=" " controls></audio> 音频
<video src=" " controls></video> 视频

src	路径
controls	显示播放的控制键
autoplay	自动播放
loop	循环播放

<a href=" ">链接名称</a> #链接
# 当不知道跳转地址时 用空链接：# 代替

target="_self"默认覆盖原网页，要保留原来的网页要改为target="_blank"

2、基础

列表

无序列表
<ul>
   <li>   </li>
   <li>   </li>
   <li>   </li>
   <li>   </li>
</ul>

有序列表
<ol>
   <li>   </li>
   <li>   </li>
   <li>   </li>
   <li>   </li>
</ol>

自定义列表
<dl>
   <dt>标题</dt>
   <dd>内容1</dd>
   <dd>内容2</dd>
</dl>

表格

<table border="表格边框宽度"  width="表格宽度"  height="表格高度" >
   <caption> 表格大标题 </caption>
   <tr> 行
      <th></th> 表头单元格
      <td></td> 单元格
      <td></td>
      <td rowspan="2（个数）"></td> 垂直合并单元格
      <td colspan="2（个数）"></td> 水平合并单元格
   </tr>
   # 表格标签
   <thead></thead> 表格头部
   <tbody></tbady> 表格主体
   <tfoot></tfoot> 表格底部
</table>

表单

(1).input

type

type类型	说明
text	文本框
password	密码框
radio	单选（多选一）
checkbox	多选框（多选多）
file	文件选择（上传文件）
submit	提交按钮
reset	重置按钮
button	普通按钮，和js共同使用

placeholder 占位符（提示）
name 分组（用于单项选择，一组里只能有一个被选）
checked 默认
multiple 上传多个文件
<form action=""> </form>表单预标签（用于整体基于按钮）

(2).button

<button></button>
type= submit/reset/button

(3).select 下拉菜单

<select> 
   <option>   </option>
   <option selected>   </option> 默认选中
</select>

(4).textarea 文本域

<textarea></textare>

(5). label 标签

<label></label>

语义化标签

div：一行只显示一个
span：一行可以有多个。但中间有空

标签名|语义

<header></header>网页头部
<nav></nav>网页导航
<footer></footer>网页底部
<aside></aside>侧边栏
<section></section>网页区块
<article></article>网页文章

字符实体

 空格

二、CSS

写在<style> </style>里面

1、引入方式

内嵌式：

<style>
p{color:red;
}
</style>

外联式：

关联
<link rel="stylesheet" herf="./my.css">

行内式：（配合js使用）

div style="color:green; ...... "

2、选择器

类选择器：

# 用于定义
<style>
.red{color:red;
}
</style>
#用于使用
<p class="red">
</p>

ID选择器（只能有一个）

# 用于定义
<style>
#red{color:red;
}
</style>
#用于使用
<p id="red">
</p>

通配符选择器

# 用于定义
<style>
*{color:red;
}
</style>

3、文字和文本样式

内容	使用
字体大小(默认16px）	font-size:…px;
字体粗细（400默认700加粗）	font-weight: …;
字体倾斜(normal / italic)	font-style: …;
字体（默认微软雅黑）	font-family: …;
复合性（顺序不能乱）	font: …; （style weight size/line-hfight family)
文本首行缩进	text-indent：…em; (1em=当前font-size的大小）
文本行间距	line-height: …;
文本对齐	text-align: …; (left,center,right)
文本修饰	text-decoration: …; (underline 下划线,line-through 删除线,overline 上划线,none 没有修饰)
标签水平居中	margin:0 ayto;

4、选择器

(1)、后代选择器

后代都可以
父代选择器子代选择器{}

(2)、子代选择器

只有子代可以
```父代选择器>子代选择器{}``

(3)、并集选择器

p,div,span,h1{}

(4)、交集选择器

选择器1.选择器2{}

(5)、hover伪类选择器

（鼠标悬停在元素上的状态）
选择器:hover{}

5、背景(前提：在标签（div）中有高和宽）

背景复合属性	background:color image repeat position
背景图片	background-image:url(路径);
背景平铺	background-repeat (repeat,no-repeat,repeat-x,repeat-y)
背景位置	background-position:

6、显示模式

(1)、块级元素

(2)、行内元素

(3)、行内块元素

input、textarea、img

(4)、元素显示模式转换

转换为块、行内块、行内：display : block / inline-block / inline

三、盒子模型

盒子内容：content

边框线：border

broder:1px（像素） solid（线型） #000（颜色）
如果只想要一边：
border-方向名称（left/right）

solid 实线
dashed 虚线
dotted 点线

内边距：padding

（复合属性）可以跟四个值：上右下左

border和padding都会撑大盒子，如果懒得手动减，可以加上box-sizing:border-box;(内减模式）

外边距：margin

左右居中：
margin:0 auto;

一般来说会默认有外边距（有的有内边距）
因此会加上：

*{
margin:0;
padding:0;
}

垂直布局的块级元素上下margin会合并，取两者最大值
父子关系之间边距的塌陷问题：

四、浮动

1、设置浮动

float:right/left;

脱离标准流，不再保留原来的位置（约等于飞起来，变成了不同的图层）

当第一个孩子浮动时，第二个（不浮动）会跑到上面第一个的位置，变成第一个覆盖第二个
而当第一个不浮动还是标准流时，第二个即使浮动也不会跑到上面去
（类似排队）

2、清除浮动

(1)、额外标签法

在最后一个浮动的盒子后面加上<div class="clear"></div>（必须是块级元素）
前面style里面加上

.clear{
     clear:both;
}

(2)、给父亲额外加 overflow:hidden/auto/scroll

(3)、父亲级after伪元素

.clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }

(4)、父亲级双伪元素

 .clearfix::before,.clearfix::after{
        content: "";
        display: table;
    }
    .clearfix::after{
        clear: both;
    }
    .clearfix{
        *zoom:1;
    }

五、定位

定位=定位模式+边偏移

定位模式（position）

静态定位（static）

相对定位（relative）

{position:relative}

以自己原来的位置为参照点
原来的位置还是占有的

绝对定位（absolute）

{position:absolute}

移动位置是相对祖先元素来说的
如果没有父元素或者父元素没有定位，就以游览器为参照点
如果父亲有定位，就以（最近的）父辈为参照点
不占有原来的单位
一般来说，子绝父相

固定定位（fixed）

以游览器的可视窗口为参照点

如果是固定定位盒子那就正常步骤
如果要版心定位的盒子，那就

.xxx{
position:fixed;
//先走游览器的一半
left:50%;
//再利用margin走版心盒子宽度一半的距离。
margin-left:400px;
}

粘性定位（sticky）

以可视窗口为参照点
占有原来的位置
必须添加上下左右其中一个

总结

在这里插入图片描述

叠放次序（z-index）

选择器{z-index:1;}

数值可以是正整数、负数或者0，默认为auto，数值越大，盒子越靠上(1>auto)
如果属性相同，后来居上
没有单位
只有定位才有z-index属性

想要定位居中

水平居中:left走50%、然后margin-left自己盒子的一半（负的）
垂直居中:top50%、然后margin-top自己盒子高度的一半（负的）

特点

定位会压住下面的图片和文字，而浮动只会压住图片，不会压住文字

六、显示与隐藏

、练习

在这里插入图片描述

导航栏一般以<li>里面加<a>的形式来做

JavaScript

网站：MDN

js的书写位置

1、内部JavaScript

用<script></script>包住，写在</body>上面

2、外部JavaScript引入

<script src="./my.js"></script>

一、基础语法

此部分大部分和c或c++相似，可以跳过

        //1、文档输出内容
        document.write('我是div标签')
        document.write('<h1>我是一级标签</h1>')
        //2、弹出警告框
        alert('警告框')
        //3、控制台输出语法 给程序员看
        console.log('控制台打印')
        //4、用户输入语句（弹出警示框的对话框）提示
        prompt("请输入你的年龄:")
        //5、声明变量
        let age