Home >Web Front-end >HTML Tutorial >Code about HTML text formatting

Code about HTML text formatting

不言Original: 2018-06-20 09:37:582808browse

The following brings you a simple example of HTML text formatting. The content is quite good, so I will share it with you now and give it as a reference.

1. Text formatting: This example demonstrates how to format text in an HTML file.

<html>
<body>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
This text contains   
<sub>subscript</sub>
<br />
This text contains   
<sup>superscript</sup>
</body>
</html>

The effect is as follows:

2. Preformatted text: This example demonstrates how to use the pre tag to edit empty lines and spaces. control.

<html>
<body>
<pre class="brush:php;toolbar:false">
这是   
预格式文本。   
它保留了      空格   
和换行。

pre 标签很适合显示计算机代码：

for i = 1 to 10   
     print i   
next i

The effect is as follows:

3. "Computer Output" label: This example demonstrates the different "Computer Output" labels display effect.

<html>
<body>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。   
</p>
</body>
</html>

The effect is as follows:

Four. Address: This example demonstrates how to write an address in an HTML file.

<!DOCTYPE html>
<html>
<body>
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA   
</address>
</body>
</html>

The effect is as follows:

5. Abbreviations and acronyms: This example demonstrates how to implement abbreviations or acronyms.

<html>

<body>

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

<p>仅对于 IE 5 中的 acronym 元素有效。</p>

<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

</body>
</html>

The effect is as follows:

Six, text direction: This example demonstrates how to change the direction of text.

<html>
<body>
<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；   
</p>
<bdo dir="rtl">
Here is some Hebrew text   
</bdo>
</body>
</html>

The effect is as follows:

Seven, block quotation: This example demonstrates how to implement quotations of different lengths.

<html>
<body>
这是长的引用：   
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。   
</blockquote>
这是短的引用：   
<q>
这是短的引用。   
</q>
<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。   
</p>
</body>
</html>

The effect is as follows:

Eight, delete sub-effects and insert sub-effects.

<html>
<body>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p>大多数浏览器会改写为删除文本和下划线文本。</p>
<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
</body>
</html>

The effect is as follows:

The above is the entire content of this article. I hope it will be helpful to everyone’s study. Please pay attention to more related content. PHP Chinese website!

Related recommendations:

How to use Html to create a simple login page

The above is the detailed content of Code about HTML text formatting. For more information, please follow other related articles on the PHP Chinese website!

php html

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to draw a vertical line between two div tags using HTMLNext article：How to draw a vertical line between two div tags using HTML

See more

Code about HTML text formatting

Related articles