在HTML中如何实现在文本框内开头处显示每行的行数

在HTML中，如果你想要在文本框（通常是一个`<textarea>`元素）内自动显示每行的行号，可以利用CSS和JavaScript结合的方式来实现。这通常需要创建一个额外的行号列，并动态插入到`<textarea>`的内容前面。这里有一个简单的示例：

首先，在HTML部分：

<textarea id="myTextarea" rows="5" cols="40"></textarea>
<div id="rowNumbers"></div>

然后，添加一些CSS来美化行号样式（例如，你可以选择在文本框旁边显示）：

#rowNumbers {
  position: relative;
  width: 1%;
  border: none;
}
#rowNumbers span {
  position: absolute;
  left: -1%;
  background-color: #ccc;
  padding: 0 5px;
  font-weight: bold;
}

接下来，用JavaScript来计算并插入行号：

window.onload = function() {
  var textarea = document.getElementById('myTextarea');
  var rowNumbersDiv = document.getElementById('rowNumbers');

  function updateRowNumbers() {
    rowNumbersDiv.innerHTML = '';
    for (var i = 0; i < textarea.value.split('\n').length; i++) {
      var span = document.createElement('span');
      span.textContent = (i + 1) + ': ';
      rowNumbersDiv.appendChild(span);
    }
  }

  textarea.addEventListener('input', updateRowNumbers);
  updateRowNumbers(); // 初始加载时也更新一次
};

这个例子会在用户输入文本框内容时实时更新行号。每次用户键入新行或删除现有行时，都会触发`updateRowNumbers`函数来更新行号显示。