菜鸟教程-HTML小白之实例练习-0729

原创已于 2022-07-29 15:31:29 修改 · 490 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html

于 2022-07-29 15:21:10 首次发布

前端专栏收录该内容

5 篇文章

订阅专栏

这个实例展示了HTML中用于文本格式化的各种标签，包括``、``、``、`<code>`、`<kbd>`、`<samp>`、`<var>`、`<abbr>`、`<address>`、`<bdo>`、`<blockquote>`、`<q>`、`<ins>`、`<del>`等。通过这些标签，可以实现文本的加粗、斜体、代码高亮、缩写解释、文字方向改变、引用和删除/插入效果等功能。

1. 实例练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>

<body>

HTML文本格式化
 
 
演示-计算机输出标签： 
常用于显示计算机/编程代码 
 
<code>计算机输出</code> 
<kbd>键盘输入</kbd> 
<tt>打字机文本</tt> 
<samp>计算机代码样本</samp> 
<var>计算机变量</var> 
<hr />

演示-地址： 
HTML文本中写地址 
 
<address>
Written by <a href="mailto:webmaster@example.com">Jon.Doe</a> 
Visit us at： 
Example.com 
Box 564,Disneyland 
USA
</address>
<hr />

演示-缩写和首字母缩写 
 
<abbr title="etcetera">etc.</abbr> 
<acronym title="World Wide Web">WWW</acronym> 

<pre>
Note: 在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本
仅对于IE5中的acronym元素有效
对于Netscape6.2中的abbr和acronym元素都有效
</pre>

<hr />

演示-改变文字方向： 
 
<bdo dir="rtl"> 使其文字从右到左显示。</bdo>
<hr />

演示-块引用： 
实现长短不一的引用语 
 
WWF's goal is to:<q>Build a future where people live in harmony with future.</q>
We hope they succeed.
<hr />

演示-删除字效果和插入效果： 
标记删除文本和插入文本 
 
My favorite color is <del>red</del><ins>green</ins> !

</body>
</html>

2. 实例涉及知识点

HTML 文本格式化标签
标签	描述	该实例应用了？
<b>	定义粗体文本
<em>	定义着重文字	√
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气	√
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字	√
<del>	定义删除字	√
HTML "计算机输出" 标签
标签	描述	该实例应用了？
<code>	定义计算机代码	√
<kbd>	定义键盘码	√
<samp>	定义计算机代码样本	√
<var>	定义变量	√
<pre>	定义预格式文本	√
HTML 引文, 引用, 及标签定义
标签	描述	该实例应用了？
<abbr>	定义缩写	√
<address>	定义地址	√
<bdo>	定义文字方向	√
<blockquote>	定义长的引用
<q>	定义短的引用语	√
<cite>	定义引用、引证
<dfn>	定义一个定义项目