Web 前端开发基础核心知识点梳理

1.4 HTML 标签基础

1.4.1 标签分类

1.4.2 标签关系

1.5 HTML 常用标签

1.5.1 排版标签（核心）

1.5.2 文本格式化标签

1.5.3 图像标签（img，重点）

<img src="图像 URL" 
     alt="图片加载失败提示" 
     title="鼠标悬浮提示"
     width="宽度" 
     height="高度" />

• src：必选，图片路径（相对/绝对）。
• alt：必选，图片无法加载时的替代文本。
• title：可选，鼠标悬浮时显示的文本。
• width/height：可选，仅设宽/高会等比缩放。

1.5.4 链接标签（a，重点）

<a href="跳转目标" target="_self/_blank">文本/图片</a>
<!-- 示例 -->
<a href="http://www.baidu.com" target="_blank">百度</a> <!-- 外部链接 -->
<a href="index.html">首页</a> <!-- 内部链接 -->
<a href="#">空链接</a> <!-- 临时空链接 -->

1.5.5 锚点定位（难点）

<!-- 步骤 1：定义锚点（给目标元素加 id） -->
<p id="target">目标位置</p>
<!-- 步骤 2：创建锚点链接 -->
<a href="#target">跳转到目标位置</a>

1.5.6 特殊字符（常用）

1.5.7 注释标签

<!-- 注释内容 -->
<!-- 快捷键：Ctrl+/ -->

注释仅在源代码中可见，浏览器不渲染，用于标注代码含义。

1.5.8 路径（重点 + 难点）

1.6 列表与表单

1.6.1 列表

1.6.2 表格

<table border="1" cellpadding="2" cellspacing="2" align="center" width="100%">
    <caption>表格标题</caption> <!-- 表格标题 -->
    <tr> <!-- 行 -->
        <th>表头单元格</th> <!-- 表头（加粗居中） -->
        <td>普通单元格</td> <!-- 普通单元格 -->
    </tr>
    <!-- 合并单元格：rowspan（跨行）/colspan（跨列） -->
    <tr>
        <td rowspan="2">跨行合并</td> <!-- 跨 2 行 -->
        <td colspan="2">跨列合并</td> <!-- 跨 2 列 -->
    </tr>
</table>

1.6.3 表单（核心）

（1）input 控件（单标签）

（2）label 标签（关联控件）

<label for="username">账号：</label>
<input type="text" id="username">
<!-- for 与 id 一致，点击 label 聚焦输入框 -->

（3）textarea 文本域

<textarea rows="5" cols="30" maxlength="100">默认文本</textarea>

（4）select 下拉框

<select>
    <option value="1">选项 1</option>
    <option value="2" selected>默认选中</option> <!-- selected 默认选中 -->
</select>

（5）form 表单容器

<form action="提交地址" method="get/post">
    <!-- 表单控件放在 form 内 -->
    <input type="text" name="username"> <!-- name 为提交参数名 -->
    <input type="submit" value="提交">
</form>

1.7 HTML5 新特性

1.7.1 新增 input 类型（重点）

1.7.2 新增属性

1.7.3 多媒体标签

（1）音频（audio）

<audio src="music.mp3" controls loop muted>
    您的浏览器不支持音频播放
</audio>

（2）视频（video）

<video src="video.mp4" controls loop muted>
    您的浏览器不支持视频播放
</video>

二、CSS 基础

2.1 CSS 概述

CSS（层叠样式表）用于控制网页元素的外观样式，核心是'选择器 + 样式声明'。

2.2 CSS 使用方式（3 种）

外部样式补充：CSS 文件中可引入公共样式

@import url("global.css"); /* 引入公共样式文件 */

2.3 CSS 字体样式属性

2.3.1 基础属性

2.3.2 复合属性（font）

/* 语法：font-style font-weight font-size font-family（顺序不可换） */
div {
    font: italic bold 16px "微软雅黑";
}
/* 必须保留 font-size 和 font-family，其他可选 */
div {
    font: 16px "微软雅黑";
}

2.4 CSS 注释

/* CSS 注释内容 */
/* 快捷键：Ctrl+/ */

三、CSS 选择器

3.1 基本选择器（重点）

优先级规则：行内样式 > ID 选择器 > 类选择器 > 标签选择器 > 通配符选择器；同级选择器遵循'就近原则'。

3.2 复合选择器（重点）

3.3 伪类选择器（重点）

（1）链接伪类

/* 顺序：link → visited → hover → active（LVHA） */
a:link { color: gray; } /* 未访问的链接 */
a:visited { color: blue; } /* 已访问的链接 */
a:hover { color: red; } /* 鼠标悬浮（核心） */
a:active { color: green; } /* 鼠标按下 */

四、CSS 外观属性

4.1 文本颜色（color）

/* 三种写法 */
div {
    color: red; /* 预定义颜色名 */
    color: #ff0000; /* 16 进制（推荐） */
    color: rgba(255, 0, 0, 0.5); /* RGB+透明度（0-1） */
}

4.2 行间距（line-height）

div { line-height: 24px; } /* 行高，可用于单行文本垂直居中 */

4.3 水平对齐（text-align）

div { text-align: center; } /* left/center/right，控制文本/行内元素水平对齐 */

4.4 首行缩进（text-indent）

p { text-indent: 2em; } /* 首行缩进 2 个字符（1em=1 个字符） */

4.5 文本修饰（text-decoration）

a { text-decoration: none; } /* 去除链接下划线（核心） */
div { text-decoration: underline; } /* 下划线 */
div { text-decoration: line-through; } /* 删除线 */

4.6 字符间距（letter-spacing）

div { letter-spacing: 2px; } /* 字符之间的间距 */

4.7 文字阴影（text-shadow）

/* 语法：水平偏移 垂直偏移 模糊距离 颜色 */
div { text-shadow: 2px 2px 3px #666; } /* 多重阴影 */
div { text-shadow: -5px 0 cyan, 5px 0 red; }

五、标签显示模式与背景样式

5.1 标签显示模式（核心）

模式转换（display）

div { display: inline; } /* 块级转行内 */
a { display: block; } /* 行内转块级 */
span { display: inline-block; } /* 行内转行内块 */

5.2 背景样式（重点）

5.2.1 基础属性

5.2.2 复合属性（background）

/* 语法：color image repeat attachment position */
div {
    background: #fff url("bg.jpg") no-repeat fixed center;
    background-size: cover; /* CSS3 属性，需单独写 */
}

5.2.3 精灵图（Sprite）

核心原理：将多张小图合并为一张大图，通过 background-position 定位显示指定区域，减少 HTTP 请求。

.icon {
    width: 50px;
    height: 50px;
    background: url("sprite.png") no-repeat;
    background-position: -20px -30px; /* 向左向上偏移，显示目标小图 */
    background-size: 200px 150px; /* 缩放精灵图适配容器 */
}

六、盒子模型（CSS 核心）

盒子模型是 CSS 布局的基础，每个元素都可视为一个'盒子'，由四部分组成：内容（content）+ 内边距（padding）+ 边框（border）+ 外边距（margin）

6.1 边框（border）

/* 复合写法：宽度 样式 颜色（顺序不限） */
div { border: 1px solid #ccc; } /* 单方向边框 */
div { border-top: 2px red; } /* 仅上边框 */
/* 边框样式（border-style） */
div { border-style: solid; } /* 实线（常用）/ dashed（虚线）/ dotted（点线）/ double（双实线） */
/* 圆角边框（CSS3） */
div { border-radius: 5px; } /* 圆角半径 */
div { border-radius: 50%; } /* 圆形（正方形容器） */

6.2 内边距（padding）

/* 单方向 */
div { padding-left: 10px; } /* 左内边距 */
/* 复合写法 */
div { padding: 10px; /* 上下左右均 10px */ padding: 10px 20px; /* 上下 10px，左右 20px */ padding: 10px 20px 30px; /* 上 10px，左右 20px，下 30px */ padding: 10px 20px 30px 40px; /* 上 右 下 左（顺时针） */ }

6.3 外边距（margin）

/* 语法同 padding，用于控制元素之间的间距 */
div { margin: 0 auto; } /* 块级元素水平居中（需设置宽度） */
/* 外边距合并问题 */
/* 1. 上下相邻块元素：外边距取最大值 */
/* 2. 父子嵌套元素：父元素上外边距与子元素上外边距合并 */
/* 解决方案：给父元素加 1px 边框/内边距，或触发 BFC */

6.4 溢出处理（overflow）

div {
    width: 100px;
    height: 100px;
    overflow: hidden; /* 隐藏溢出内容 */
    /* overflow: auto; 溢出时显示滚动条；scroll：始终显示滚动条 */
}

七、浮动（float）

7.1 浮动作用

解决块级元素默认独占一行的问题，实现多列布局（如导航、图文混排）。

7.2 语法

div { float: left; } /* 左浮动 */
div { float: right; } /* 右浮动 */
div { float: none; } /* 取消浮动（默认） */

7.3 浮动特性

1. 浮动元素脱离标准流，不占位置；
2. 浮动元素会向左 / 右移动，直到碰到父元素或其他浮动元素；
3. 浮动元素会影响后续标准流元素（需清除浮动）。

7.4 清除浮动

/* 方法 1：给父元素加 overflow: hidden */
.parent { overflow: hidden; }
/* 方法 2：伪元素清除法（推荐） */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix { *zoom: 1; } /* 兼容 IE6/7 */

八、定位（position）

8.1 定位模式

8.2 边偏移（配合定位使用）

div {
    position: absolute;
    top: 10px; /* 距离顶部 10px */
    left: 20px; /* 距离左侧 20px */
    /* bottom/right：距离底部/右侧 */
}

8.3 叠放次序（z-index）

div {
    position: relative;
    z-index: 999; /* 数值越大，越在上层（默认 0，可设负数） */
}

九、JavaScript 基础

9.1 JavaScript 使用方式

9.1.1 外部 JS 文件（推荐）

<!-- 放在 body 末尾，避免阻塞渲染 -->
<script src="script.js"></script>

9.1.2 内嵌 JS 代码

<script>
    // JS 代码写在这里
    console.log("Hello JavaScript"); // 控制台输出
</script>

9.2 核心操作：获取 / 修改元素

9.2.1 获取元素

// 根据 class 获取（返回伪数组）
var nav = document.getElementsByClassName("nav")[0];
// 根据标签名获取（返回伪数组）
var divs = document.getElementsByTagName("div")[0];
// 根据 id 获取（返回单个元素）
var box = document.getElementById("box");

9.2.2 修改元素内容

// innerText：仅识别文本（不解析标签）
nav.innerText = "<i>文本内容</i>"; // 输出：<i>文本内容</i>
// innerHTML：解析 HTML 标签（常用）
nav.innerHTML = "<i>文本内容</i>"; // 输出：斜体的文本内容

9.2.3 修改元素样式

// 语法：元素.style.样式名 = 样式值（驼峰命名）
nav.style.width = "200px";
nav.style.backgroundColor = "blue"; // background-color → backgroundColor
nav.style.fontSize = "16px";

9.2.4 修改元素属性

// 获取属性
var src = img.getAttribute("src");
// 设置属性
img.setAttribute("src", "new.jpg");

9.3 JavaScript 事件（核心）

9.3.1 鼠标事件

var box = document.getElementsByClassName("box")[0];
// 鼠标移入
box.onmouseover = function() {
    box.style.backgroundColor = "yellow";
};
// 鼠标移出
box.onmouseout = function() {
    box.style.backgroundColor = "green";
};
// 鼠标按下
box.onmousedown = function() {
    box.style.width = "150px";
};
// 鼠标抬起
box.onmouseup = function() {
    box.style.width = "100px";
};
// 鼠标移动（获取坐标）
box.onmousemove = function(e) {
    console.log("X：" + e.clientX, "Y：" + e.clientY); // 鼠标相对于窗口的坐标
};

9.3.2 键盘事件

// 键盘按下
document.onkeydown = function(e) {
    console.log(e.keyCode); // 按键编码（37=左，38=上，39=右，40=下）
    // 上下左右键控制元素移动
    var oLeft = parseInt(box.style.left) || 0;
    var oTop = parseInt(box.style.top) || 0;
    if (e.keyCode === 37) { // 左
        box.style.left = oLeft - 2 + "px";
    } else if (e.keyCode === 39) { // 右
        box.style.left = oLeft + 2 + "px";
    }
};

9.4 定时器（setInterval）

// 语法：setInterval(函数，时间间隔 ms)
var oLeft = 0;
var timer = setInterval(function() {
    oLeft += 10;
    box.style.left = oLeft + "px"; // 元素向右移动
    // 停止定时器：clearInterval(timer)
}, 100); // 每 100ms 执行一次

9.5 旗帜法则（状态切换）

var flag = true; // 状态标记
box.onclick = function() {
    if (flag) { // 状态 1
        box.style.width = "200px";
        flag = false;
    } else { // 状态 2
        box.style.width = "100px";
        flag = true;
    }
};

总结

HTML 核心要点

1. HTML 是网页的结构基础，核心是标签的语义化和正确嵌套；
2. 表单、列表、链接是交互类页面的核心组件，需掌握其语法和属性；
3. HTML5 新增的 input 类型、多媒体标签提升了页面原生能力。

CSS 核心要点

1. 盒子模型是布局的基础，需理解 margin/padding/border 的作用和计算方式；
2. 浮动和定位是实现复杂布局的核心，需掌握清除浮动和'子绝父相'的应用；
3. 选择器优先级和显示模式转换是样式控制的关键。

JavaScript 核心要点

1. JS 主要用于页面交互，核心是'获取元素→修改元素/绑定事件'；
2. 事件（鼠标/键盘）和定时器是实现动态效果的基础；
3. innerHTML/innerText 的区别、样式修改的驼峰命名是高频易错点。