HTML⽂本格式化标签(⽤来调整⽂本的格式和排版)HTML ⽂本格式化标签:
以上表格列举的是常见的⼀些⽂本格式化标签,接下来,我们⽤具体的代码做⼀下演⽰和补充:
<title>⽂本格式化标签</title>
</head>
<body>
<b>这个⽂本是加粗的</b>
<br />
<strong>这个⽂本是加粗的</strong>
<br />
<big>这个⽂本字体放⼤</big>
<br />
<em>这个⽂本是斜体的</em>
<br />
<i>这个⽂本是斜体的</i>
<br />
<small>这个⽂本是缩⼩的</small>
<br />
这个⽂本包含
<sub>下标</sub>
<br />
这个⽂本包含
<sup>上标</sup>
</body>
</html>
以上代码运⾏出来的效果是这样:
(-----------------------------------分割线------------------------------------)
<title>⽂本格式化标签</title>
</head>
<body>
<pre>
此例演⽰如何使⽤ pre 标签
对空⾏和空格
进⾏控制
</pre>
</body>
</html>
以上代码运⾏出来的效果是这样:
这⾥,我们着重讲解⼀下<pre>标签,<pre>标签可定义预格式化的⽂本,被包围在<pre>标签中的⽂本元素通常会保留空格和换⾏符,⽂本也会呈现等宽字体。
(-----------------------------------分割线------------------------------------)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算机输出标签</title>
</head>
<body>
<code>计算机输出</code>
<br />
<kbd>键盘输⼊</kbd>
<br />
<tt>打字机⽂本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />
<p>
<b>注释:</b>这些标签常⽤于显⽰计算机/编程代码。
</p>
</body>
href标签怎么用
</html>
接下来,我们讲解⼀下以上代码中的⼏个标签:
<code>标签⽤于表⽰计算机源代码或者其他机器可以阅读的⽂本内容,包含在该标签内的⽂本将⽤等宽、类似电传打字机样式的字体(Courier)显⽰出来。虽然 <code> 标签通常只是把⽂本变成等宽字体,但它暗⽰着这段⽂本是源程序代码。将来的浏览器有可能会加⼊其他显⽰效果。例如,程序员的浏览器可能会寻 <code> ⽚段,并执⾏某些额外的⽂本格式化处理。
<kbd>标签定义键盘⽂本。它⽤来表⽰⽂本是从键盘上键⼊的。浏览器通常⽤等宽字体来显⽰该标签中包含的⽂本。<kbd> 标签经常⽤在和计算机相关的⽂档和⼿册中。
<tt>定义打字机代码。<tt>标签呈现类似打字机或者等宽的⽂本效果,<tt> 标签和必需的 </tt> 结束标签
告诉浏览器,要把其中包含的⽂本显⽰为等宽字体。对于那些已经使⽤了等宽字体的浏览器来说,这个标签在⽂本的显⽰上就没有什么特殊效果了。
<samp>定义样本⽂本。<samp> 标签表⽰⼀段⽤户应该对其没有什么其他解释的⽂本字符。要从正常的上下⽂抽取这些字符时,通常要⽤到这个标签。<samp> 标签并不经常使⽤。只有在要从正常的上下⽂中将某些短字符序列提取出来,对它们加以强调的极少情况下,才使⽤这个标签。
<var>定义变量。<var> 标签表⽰变量的名称,或者由⽤户提供的值。这个标签经常与 <code> 和 <pre> 标签⼀起使⽤,⽤来显⽰计算机编程代码范例及类似⽅⾯的特定元素。
⽤ <var> 标签标记的⽂本通常显⽰为斜体。就像其他与计算机编程和⽂档相关的标签⼀样,<var> 标签不只是让⽤户更容易理解和浏览你的⽂档,⽽且将来某些⾃动系统还可以利⽤这些恰当的标签,从你的⽂档中提取信息以及⽂档中提到的有⽤参数。
上⾯还有⼀个标签:<p>⽂本</p>
表⽰将包含的⽂本加粗加⿊。
(-----------------------------------分割线------------------------------------)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>如何写地址</title>
</head>
<body>
<address>
程序员查资料平台⼊⼝<a href="www.csdn/?spm=1011.2124.3001.5359">CSDN论坛</a>.<br>
Visit us at:<br>
Welcome to My CSDN blog<br>
⼊⼝链接为<a href="blog.csdn/qq_51735681?spm=1000.2115.3001.5343">尤⾥卡的CSDN</a>.<br>
</address>
</body>
</html>
在以上的代码中,我们引⼊了⼀个<address>标签,<address>标签定义⽂档或⽂章的作者/拥有者的联系信息。如果<address>元素位于
<body>元素内,则它表⽰⽂档联系信息。如果<address>元素位于 <article>元素内,则它表⽰⽂章的联系信息。<address>元素中的⽂本通常呈现为斜体。
(-----------------------------------分割线------------------------------------)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>如何实现缩写或⾸字母缩写</title>
</head>
<body>
<abbr title="The People's Republic of China">PRC</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中,当您把⿏标移⾄缩略词语上时,title 可⽤于展⽰表达的完整版本。</p>
<p>acronym是⾸字母缩写标签的⼀种</p>
<p>abbr是⾸字母缩写标签的⼀种</p>
</body>
</html>
以上代码运⾏出来的效果是这样:
以上代码中,出现了<acronym>标签和<abbr>标签,接下来,我们逐⼀进⾏讲解:
对于 <acronym> 标签,⼏乎所有主流的浏览器均⽀持 <acronym> 标签(除了IE 5.5 或更早版本的 IE 浏览器不⽀持 <acronym> 标签)。还要注意⼀点:HTML5中不⽀持<acronym>标签,请使⽤<abbr>标签代替。
对于<abbr>标签,⼏乎所有浏览器都⽀持 <abbr> 标签(除了IE 6 或更早版本的 IE 浏览器不⽀持 <abbr> 标签)。<abbr> 标签指⽰简称或缩写,通过对缩写进⾏标记,您能够为浏览器、拼写检查和搜索引擎提供有⽤的信息。
注意:可以在 <abbr> 标签中使⽤全局的 title 属性,这样就能够在⿏标指针移动到 <abbr> 元素上时显⽰出简称/缩写的完整版本(⽐如上⾯代码的效果)。
(-----------------------------------分割线------------------------------------)

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。