下面是豆包给出的建议，是特别常用的入门知识，可以在这些上面适当扩展一些，作为知识储备。
建议使用的开发工具： VS code
参考视频：https://www.bilibili.com/video/BV1BT4y1W7Aw/
时间分配，html和css建议花较少时间，js可以多花一些时间；
js里面有一些高级的语法，以后用到时再学习。
网页三层：
超文本标记语言，由标签构成，标签大多成对
<xxx></xxx>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<!-- 页面所有可见内容写在这里 -->
</body>
</html>
<!DOCTYPE html>：声明是 HTML5 文档<head>：网页配置，不会显示在页面上<body>：页面可见内容区域文本类
<h1>~<h6>：标题，h1 最大<p>：段落<br>：换行，<hr>分割线<strong>加粗，<em>斜体链接图片
<a href="地址">超链接</a><img src="图片路径" alt="图片描述">列表
<ul><li></li></ul> 无序列表<ol><li></li></ol> 有序列表容器标签（布局）
<div>：块级大容器，独占一行<span>：行内小容器，不换行表单
<input>输入框、<button>按钮、<select>下拉框写在开始标签内，属性名="值" 例：<a href="https://xxx" target="_blank"> target="_blank" 新窗口打开链接
层叠样式表，负责美化页面，三种引入方式：
style 属性<div style="color:red; font-size:20px;">文字</div>
<head> 的 <style> 标签里<style>
div{ color: red; }
</style>
.css 文件，link 引入<link rel="stylesheet" href="style.css">
/*标签选择器*/
div {}
/*类选择器 . ，class="box"*/
.box {}
/*id选择器 #，id="one"，id唯一不重复*/
#one {}
/*后代选择器 .box p {} box里面的p标签*/
color: #ff0000; /*文字颜色*/
font-size: 16px; /*字体大小*/
background: #eee; /*背景*/
width: 200px; /*宽度*/
height:100px; /*高度*/
/*盒模型：所有元素都有*/
padding:10px; /*内边距：内容到边框距离*/
border:1px solid #000; /*边框*/
margin:20px; /*外边距：盒子和其他盒子距离*/
盒模型重点：元素实际宽度 = width + padding + border
display:block; /*块级，独占一行*/
display:inline; /*行内，并排，不能设置宽高*/
display:inline-block; /*行内块，并排，可以设置宽高*/
display:none; /*隐藏元素，不占位置*/
float:left，需要清除浮动.container{
display:flex; /*开启弹性盒子*/
justify-content:center; /*水平居中*/
align-items:center; /*垂直居中*/
}
position:relative 相对定位，自身原来位置偏移position:absolute 绝对定位，相对于父级定位元素position:fixed 固定定位，相对于浏览器窗口a:hover{ color:blue; } /*鼠标悬浮的时候*/
实现交互，修改页面、处理点击、计算数据
onclick="alert('hi')"<script>代码写这里</script>，一般放在 body 末尾<script src="main.js"></script>let a = 10; //可变变量
const PI = 3.14; //常量，不能修改
var old = 1; //旧写法，尽量不用
数据类型：
number、字符串 string、布尔 true/falsenull空值、undefined未定义、对象 objectconsole.log("控制台打印");
alert("弹窗提示");
+ - * / % //算术
> < >= <= == === //比较，===严格相等（值+类型都相等）
&& || ! //逻辑：与、或、非
//if判断
if(a>10){
}else if(a>5){
}else{
}
//for循环
for(let i=0;i<10;i++){
}
//while循环
while(条件){}
//封装可复用代码
function add(x,y){
return x+y;
}
let res = add(2,3);
DOM：文档对象模型，JS 用来修改 HTML 页面
//获取页面元素
let box = document.querySelector('.box');
//修改内容
box.innerText = "修改文字";
box.innerHTML = "<b>支持html标签</b>";
//修改样式
box.style.color = "red";
//修改类名
box.classList.add("active"); //添加类
box.classList.remove("active");//移除类
//事件：监听点击
box.addEventListener('click',function(){
alert("被点击了");
})
let arr = [1,2,3];
arr.push(4); //末尾添加元素
arr.length; //数组长度
let user = {
name:"张三",
age:18
}
console.log(user.name);
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>示例</title>
<style>
.box{
width:300px;
height:200px;
background:#42b983;
color:white;
display:flex;
justify-content:center;
align-items:center;
}
</style>
</head>
<body>
<div class="box" id="myBox">点击我</div>
<script>
let box = document.querySelector("#myBox");
box.addEventListener('click',function(){
alert("你点击了盒子");
box.style.background = "#2196F3";
})
</script>
</body>
</html>此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。