pre textarea code标签区别

这篇文章里面放的大都是我自己写程序的时候遇到的一些小问题，其实都是自己没有掌握的点，别人看起来应该很简单啦，但写下来能提醒自己，也能鼓励一下自己，这条路也不好走哇。

<pre> <textarea> <code>三个标签区别：之所以要说这个，是因为我在写代码的时候遇到这样的问题：需要把html源代码在网页中显示出来，直接写<>这样的标签显然会被浏览器解析，因此我查了一下，可以用<代替< ，>代替>，但是直接这样写会失去代码中的换行等具体格式，非常难读，因此就使用了专门的标签实现。

　　<pre>：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。

　　将代码放在<pre>中的源码：

<pre>
&lt;div id="div1"&gt;
&lt;p id="p1"&gt;这是一个段落&lt;/p&gt;
&lt;p id="p2"&gt;这是另一个段落&lt;/p&gt;
&lt;/div&gt;&lt;script&gt;
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);var element=document.getElementById("div1");
element.appendChild(para);
&lt;/script&gt;
</pre>

　　注意此时仍需要用<代替< ，>代替>。

　　效果：

　　<textarea>:标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

　　源代码与上述相同，效果图为：

　　<code>标签用于表示计算机源代码或者其他机器可以阅读的文本内容。软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code> 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来，对于大多数程序员和 W3School 的用户来说，这应该是十分熟悉的。只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 <code> 标签。虽然 <code> 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如，程序员的浏览器可能会寻找 <code> 片段，并执行某些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。

　　<code>的效果图：

转载于:https://www.cnblogs.com/mengqi-S/p/6906086.html

pre textarea code标签区别相关推荐

零基础学习HTML(8)——pre标签、code标签
文章目录官方资料学习正文注:学习笔记基于小甲鱼学习视频,官方论坛: https://fishc.com.cn/forum.php 官方资料鱼C课程案例库:https://ilovefishc. ...
html之code标签和pre标签
文章目录一.两个标签区别 (1)含义 (2)显示区别,上面是pre,下面是code 二.使用white-space 进行样式控制一.两个标签区别字符如下: const str ="[{ ...
[html] pre与xmp标签有什么区别？
[html] pre与xmp标签有什么区别? xmp的标签,会复把抱在内部的html片段当作字符串输出(此标签已废弃) <pre></pre> 标签,可以在保留原来文本格式的基 ...
No.17 pre标签与 code标签
pre标签.特性 pre 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体.<pre> 标签的一个常见应用就是用来表示计算机的源代码 ...
php 修改select标签,JS修改input,textarea,select标签的可读可写属性
通过JS修改input,textarea,select标签的可读可写属性首先,控制input,与textarea只读属性是 readonly 在js中可以这样去改变,这里要注意js中O要大写 re ...
html:(11):address和code标签
<address>标签,为网页加入地址信息一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>标签.也可以定义一个地 ...
html怎么给code标签添加语言,html code标签怎么用？html code标签的作用解释
本篇文章主要的讲述了关于HTML code标签的用法解释,和HTML code标签的用法实例,最后还有code标签的总结.接下来让我们一起来看这篇文章吧首先我们先看看html code标签的用法解释 ...
flash文本呈现html啥意思,显示flash内容时用的OBJECT和EMBED标签区别介绍
显示flash内容时用的OBJECT和EMBED标签区别介绍发布时间:2014-05-13 18:03:29 作者:佚名我要评论要在网页中正常显示flash内容,那么页面中必须要有指定f ...
white-space:nowrap normal pre pre-wrap pre-line的区别以及pre和pre-wrap的“首行缩进“问题
white-space:nowrap normal pre pre-wrap pre-line的区别以及pre和pre-wrap的"首行缩进"问题 white-space相关属性以 ...

pre textarea code标签区别

pre textarea code标签区别相关推荐

最新文章

热门文章