HTML + CSS + JS 入门核心知识点

下面是豆包给出的建议，是特别常用的入门知识，可以在这些上面适当扩展一些，作为知识储备。

建议使用的开发工具： VS code

参考视频：https://www.bilibili.com/video/BV1BT4y1W7Aw/

时间分配，html和css建议花较少时间，js可以多花一些时间；

js里面有一些高级的语法，以后用到时再学习。

HTML + CSS + JS 入门核心知识点

网页三层：

HTML：结构 → 搭建网页内容骨架（什么文字、图片、按钮）
CSS：样式 → 美化（颜色、大小、布局、位置）
JS：行为 → 交互逻辑（点击、输入、动画、数据处理）

一、HTML 入门

超文本标记语言，由标签构成，标签大多成对 <xxx></xxx>

1. 基础文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>网页标题</title>
</head>
<body>
  <!-- 页面所有可见内容写在这里 -->
</body>
</html>

<!DOCTYPE html>：声明是 HTML5 文档
<head>：网页配置，不会显示在页面上
<body>：页面可见内容区域

2. 常用标签

文本类

<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>下拉框

3. 标签属性

写在开始标签内，属性名="值" 例：<a href="https://xxx" target="_blank"> target="_blank" 新窗口打开链接

4. 两类元素

块级元素：div、p、h1‑h6、ul，独占一行，可以设置宽高
行内元素：span、a、img，并排显示，宽高默认由内容决定

二、CSS 入门

层叠样式表，负责美化页面，三种引入方式：

1. CSS 三种引入方式

行内样式：写在标签 style 属性

<div style="color:red; font-size:20px;">文字</div>

内部样式表：写在 <head> 的 <style> 标签里

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

外部样式表（最常用）：单独 .css 文件，link 引入

<link rel="stylesheet" href="style.css">

2. 选择器（选中元素设置样式）

/*标签选择器*/
div {}
/*类选择器 . ，class="box"*/
.box {}
/*id选择器 #，id="one"，id唯一不重复*/
#one {}
/*后代选择器 .box p {} box里面的p标签*/

3. 常用样式属性

color: #ff0000;      /*文字颜色*/
font-size: 16px;     /*字体大小*/
background: #eee;    /*背景*/
width: 200px;        /*宽度*/
height:100px;        /*高度*/

/*盒模型：所有元素都有*/
padding:10px; /*内边距：内容到边框距离*/
border:1px solid #000; /*边框*/
margin:20px;  /*外边距：盒子和其他盒子距离*/

盒模型重点：元素实际宽度 = width + padding + border

4. 显示模式 display

display:block;    /*块级，独占一行*/
display:inline;   /*行内，并排，不能设置宽高*/
display:inline-block; /*行内块，并排，可以设置宽高*/
display:none;     /*隐藏元素，不占位置*/

5. 布局基础

浮动 float：早期布局，float:left，需要清除浮动
Flex 弹性布局（重点！现代最常用）

.container{
  display:flex; /*开启弹性盒子*/
  justify-content:center; /*水平居中*/
  align-items:center;     /*垂直居中*/
}

定位 position

position:relative 相对定位，自身原来位置偏移
position:absolute 绝对定位，相对于父级定位元素
position:fixed 固定定位，相对于浏览器窗口

6. 伪类

a:hover{ color:blue; } /*鼠标悬浮的时候*/

三、JavaScript JS 入门

实现交互，修改页面、处理点击、计算数据

1. 三种引入方式

行内：onclick="alert('hi')"
内部：<script>代码写这里</script>，一般放在 body 末尾
外部：<script src="main.js"></script>

2. 基础语法

变量

let a = 10; //可变变量
const PI = 3.14; //常量，不能修改
var old = 1; //旧写法，尽量不用

数据类型：

数字 number、字符串 string、布尔 true/false
null空值、undefined未定义、对象 object

输出

console.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);

3. DOM 操作【JS 核心：操作网页元素】

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("被点击了");
})

4. 数组

let arr = [1,2,3];
arr.push(4); //末尾添加元素
arr.length; //数组长度

5. 对象

let user = {
  name:"张三",
  age:18
}
console.log(user.name);

四、学习顺序建议

HTML：熟记常用标签，写简单静态页面
CSS：盒模型 → display → flex 布局，做页面美化
JS 基础：变量、判断循环、函数
JS DOM：操作页面、事件，做交互效果
小练习：表单、点击切换、轮播简易版、待办清单

入门小示例（完整可直接复制运行）

<!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>

posted @ 2026-09-08 21:16 emanlee 阅读(3) 评论(0) 收藏举报

刷新页面返回顶部