在页面中设计个高宽都为100px的黄色块，当鼠标悬停在上面的时候，块内出现文本“学号+姓名!”当鼠标离开的时候，块内的文本消失。

要在网页上实现这样的效果，你可以使用HTML、CSS以及JavaScript来配合完成。首先，创建一个基本的HTML元素，然后通过CSS设置初始样式，并利用JavaScript添加交互功能。以下是详细的步骤：

1. HTML:

<div id="hover-block" style="width: 100px; height: 100px; background-color: yellow;"></div>

这里我们创建了一个`<div>`元素，设置了宽度和高度为100px，背景颜色为黄色。

2. CSS:

#hover-block {
  position: relative;
  display: inline-block;
  transition: color 0.3s;
}

#hover-block:hover {
  cursor: pointer;
}

`position: relative`用于定位内部动态内容，`transition`属性使得颜色改变有平滑过渡效果。`:hover`伪类使得鼠标悬停时改变块的样式。

3. JavaScript (假设你有一个包含学生信息的对象数组，如`students[]`):

let hoverBlock = document.getElementById('hover-block');
let textToDisplay = '';

students.forEach(student => {
  textToDisplay += '学号: ' + student.id + ' 姓名: ' + student.name + '!';
});

hoverBlock.addEventListener('mouseover', function() {
  this.textContent = textToDisplay;
});

hoverBlock.addEventListener('mouseout', function() {
  this.textContent = '';
});

这段JavaScript代码监听了鼠标悬停(`mouseover`)和离开(`mouseout`)事件。当鼠标悬停时，显示学生的学号和姓名；当鼠标离开时，清空块内的文本。