HTML text formatting-HTML Tutorial-php.cn

HTML text formatting

不言

Release： 2018-05-03 14:25:38

Original

1385 people have browsed it

This article mainly introduces HTML text formatting, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

HTML text formatting

<!DOCTYPE HTML>
<html>
	<meta charset="utf-8" />
	<head>
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body>
		<b>加粗文本</b><br><br>
		<i>斜体文本</i><br><br>
		<code>电脑自动输出</code><br><br>
		这是<sub>下标</sub> 和 <sup>上标</sup>
	</body>
</html>

Copy after login

Example

##Text formatting

<!DOCTYPE HTML>
<html>
	<meta charset="utf-8" />
	<head>
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body>
		<b>这个文本是加粗的</b>
		<br>
		<strong>这个文本是加粗的</strong>
		<br />
		<big>这个文本字体放大</big>
		<br />
		<em>这个文本是斜体的</em>
		<br />
		<i>斜体文本</i>
		<br />
		<small>这个文本是缩小的</small>
		<br />
		这个文本包含<sub>下标</sub> 和 <sup>上标</sup>
	</body>
</html>

Copy after login

Preformatted text

<!DOCTYPE HTML>
<html>
	<meta charset="utf-8" />
	<head>
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body>
		<pre class="brush:php;toolbar:false">
			此例演示如何使用 pre 标签
			对空行和  空格
			进行控制

Copy after login

Computer output tag

<!DOCTYPE HTML>
<html>
	<meta charset="utf-8" />
	<head>
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body>
		<code>计算机输出</code>
		<br />
		<kbd>键盘输入</kbd>
		<br />
		<tt>打字机文本</tt>
		<br />
		<samp>计算机代码样本</samp>
		<br />
		<var>计算机变量</var>
		<br />
		<p>
			<b>注释：</b>这些标签常用于显示计算机/编程代码
		</p>
	</body>
</html>

Copy after login

Address

<!DOCTYPE HTML>
<html>
	<meta charset="utf-8" />
	<head>
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body>
		<address>
			Written by <a href="milto:webmaster@example.com">Jon Doe</a><br />
			Visit us at: <br />
			Example.com <br />
			Box 564, Disneyland <br />
			USA
		</address>
	</body>
</html>

Copy after login

Abbreviations and acronyms

<!DOCTYPE HTML>
<html>
	<meta charset="utf-8" />
	<head>
		<title>自选教程(如约智惠.com)</title>
	</head>
	<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>

Copy after login

Text direction

<!DOCTYPE HTML>
<html>
	<meta charset="utf-8" />
	<head>
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body>
		<p>该段落文字从左到右显示。</p>
		<p>
			<bdo dir="rtl">该段落文字从右到左显示。</bdo>
		</p>
	</body>
</html>

Copy after login

Block quote

<!DOCTYPE HTML>
<html>
	<meta charset="utf-8" />
	<head>
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body>
		<p> 
			WWF&#39;s goal is to:
			<q>Build a future where people live in harmony with nature.</q>
			We hope they succeed.
		</p>
	</body>
</html>

Copy after login

Delete word effect and insert word effect

<!DOCTYPE HTML>
<html>
	<meta charset="utf-8" />
	<head>
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body>
		<p> 
			My favorite color is
			<del>bule</del>
			<ins>red</ins>
			!
		</p>
	</body>
</html>

Copy after login

##HTML text format tag

##Define bold textDefinition of emphasized textDefinition of italicized textDefinition of small characters####Define superscriptDefinition of insert wordDefinition of delete word

Tag Description

Definition of emphasis

Define subscript

HTML "Computer output" tag

##TagDescription##

HTML citations, quotations, and tag definitions


Definition of computer code
Define keyboard code
Define computer code sample
Define variables
Define preformatted text

#Definition of abbreviation

Definition AddressDefine text direction

Define length QuotesDefine short quotesDefinition reference, citationDefine a definition item.


related suggestion:

Knowledge summary of HTML text format
Detailed examples of HTML text formatting

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

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

HTML text formatting