HTML 在文本域中显示换行符

在本文中，我们将介绍如何在HTML文本域中正确显示换行符。

阅读更多：HTML 教程

HTML 文本域

HTML文本域是一种用于在网页上获取多行文本输入的表单元素。它经常用于用户提供评论、消息或其他大段文本输入的场景。

使用<textarea>元素可以创建一个文本域，然后通过设置行数和列数来控制其大小。

<textarea rows="4" cols="50">
This is a textarea element.
</textarea>

上面的示例将创建一个默认大小为4行、50列的文本域，并在文本域中预填充了一段文本。

显示换行符

在文本域中输入换行符通常是一种常见的需求。但是，HTML默认会忽略文本中的换行符。为了在文本域中正确显示换行符，我们需要使用特殊的HTML实体字符。

<br>：换行符实体字符

：换行符的ASCII码表示
：回车符的ASCII码表示

<textarea rows="4" cols="50">
First line
Second line
Third line
</textarea>

上面的示例将在文本域中显示三行文本，并在每行之间正确展示了换行符。

转义字符

除了上述实体字符，我们还可以使用HTML的转义字符来显示特殊字符。

<：小于号（<）
>：大于号（>）
&：与号（&）

<textarea rows="4" cols="50">
<b>This is a bold text.</b>
</textarea>

上面的示例将在文本域中显示一个被转义的HTML标签，而不会被解析为实际的HTML标记。

CSS样式

我们还可以通过CSS样式来调整文本域的外观。可以设置文本域的字体、背景色、边框等。

<textarea rows="4" cols="50" style="font-family: Arial; background-color: #f2f2f2; border: 1px solid #ccc;">
This is a styled textarea.
</textarea>

上面的示例将创建一个具有指定字体、背景色和边框的文本域。

JavaScript操作

我们还可以使用JavaScript来对HTML文本域进行操作。

<textarea id="myTextarea" rows="4" cols="50">
This is a textarea.
</textarea>

<script>
    // 获取文本域的值
    var textareaValue = document.getElementById("myTextarea").value;

    // 设置文本域的值
    document.getElementById("myTextarea").value = "New textarea value";
</script>

上面的示例演示了如何使用JavaScript获取和设置文本域的值。