HTML - 文本及其格式化

ゞ浴缸里的玫瑰 2022-06-02 01:25 218阅读 0赞

http://[blog.csdn.net/pipisorry/article/details/78928496][blog.csdn.net_pipisorry_article_details_78928496]

# HTML 文本格式化    #

## HTML 文本格式化标签 ##

<table> 
 <tbody> 
  <tr> 
   <th align="left">标签</th> 
   <th align="left">描述</th> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-b.html" rel="nofollow">&lt;b&gt;</a></td> 
   <td>定义粗体文本</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-em.html" rel="nofollow">&lt;em&gt;</a></td> 
   <td>定义着重文字</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-i.html" rel="nofollow">&lt;i&gt;</a></td> 
   <td>定义斜体字</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-small.html" rel="nofollow">&lt;small&gt;</a></td> 
   <td>定义小号字</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-strong.html" rel="nofollow">&lt;strong&gt;</a></td> 
   <td>定义加重语气</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-sub.html" rel="nofollow">&lt;sub&gt;</a></td> 
   <td>定义下标字</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/m/tags/tag-sup.html" rel="nofollow">&lt;sup&gt;</a></td> 
   <td>定义上标字</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-ins.html" rel="nofollow">&lt;ins&gt;</a></td> 
   <td>定义插入字</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-del.html" rel="nofollow">&lt;del&gt;</a></td> 
   <td>定义删除字</td> 
  </tr> 
 </tbody> 
</table>

Note:

1. 通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。然而，这些标签的含义是不同的：<b> 与<i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。

2. ins/del 标记删除文本和插入文本

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

My favorite color is blue red!

## HTML "计算机输出" 标签 ##

\{不同的"计算机输出"标签的显示效果,这些标签常用于显示计算机/编程代码\}

<table> 
 <tbody> 
  <tr> 
   <th align="left">标签</th> 
   <th align="left">描述</th> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-code.html" rel="nofollow">&lt;code&gt;</a></td> 
   <td>定义计算机代码</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-kbd.html" rel="nofollow">&lt;kbd&gt;</a></td> 
   <td>定义键盘码</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-samp.html" rel="nofollow">&lt;samp&gt;</a></td> 
   <td>定义计算机代码样本</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-var.html" rel="nofollow">&lt;var&gt;</a></td> 
   <td>定义变量</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-pre.html" rel="nofollow">&lt;pre&gt;</a></td> 
   <td>定义预格式文本</td> 
  </tr> 
 </tbody> 
</table>

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。这样就需要使用预格式文本Pre标签。

<!DOCTYPE html>
    <html>
    <body>
    
    <pre>
        春眠不觉晓，
          处处闻啼鸟。
            夜来风雨声，
              花落知多少。
    </pre>
    
    </body>
    </html>
    
    输出：
        春眠不觉晓，
          处处闻啼鸟。
            夜来风雨声，
              花落知多少。

## HTML 引文, 引用, 及标签定义 ##

<table> 
 <tbody> 
  <tr> 
   <th align="left">标签</th> 
   <th align="left">描述</th> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-abbr.html" rel="nofollow">&lt;abbr&gt;</a></td> 
   <td>定义缩写</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-address.html" rel="nofollow">&lt;address&gt;</a></td> 
   <td>定义地址</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-bdo.html" rel="nofollow">&lt;bdo&gt;</a></td> 
   <td>定义文字方向</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-blockquote.html" rel="nofollow">&lt;blockquote&gt;</a></td> 
   <td>定义长的引用</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-q.html" rel="nofollow">&lt;q&gt;</a></td> 
   <td>定义短的引用语</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-cite.html" rel="nofollow">&lt;cite&gt;</a></td> 
   <td>定义引用、引证</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3cschool.cc/tags/tag-dfn.html" rel="nofollow">&lt;dfn&gt;</a></td> 
   <td>定义一个定义项目。</td> 
  </tr> 
 </tbody> 
</table>

Note:

1. abbr：在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。pop-up显示。

实现缩写或首字母缩写

2. address:在 HTML 文件中写地址。应该相当于将文本格式化成英文地址的格式化写法。

3. bd0:改变文字的方向:<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>

This paragraph will go right-to-left.  
4. blockquote/q 实现长短不一的引用语:

<p>WWF's goal is to:  
<q>Build a future where people live in harmony with nature.</q>  
We hope they succeed.</p>

WWF's goal is to:Build a future where people live in harmony with nature.We hope they succeed.

## 字体家族font-family ##

linux的字体都在/usr/share/font/目录下。

### 使用外部字体 ###

参考\[[HTML样式- CSS ][HTML_- CSS]\-内联样式\]

### 安全字体 ###

<head>

<style>

p \{ font-family: Arial, Helvetica, sans-serif; \}

</style>

</head>

在上面这个 font-family 的定义中，我们选择 Arial 作为首选字体（注：Arial 字体是最常用的 sans serif 字体，也是 Windows 的默认字体，当字体很小是不容易阅读），但是，苹果系统中没有这个字体，所以我们选择 Helvetica（和 Arial 很相似）作为第二备选字体，最后我们选择 sans-serif 作为第三备选字体，如果在一个既没有 Arial 也没有 Helvetica 的系统里，那么浏览器会使用默认的 sans-serif 字体来渲染文字。这样，我们很大程度上保证了使用不同操作系统的访问者都能看到相同（至少是类似）的页面文字。

\[[使用 Google Fonts 为网页添加美观字][Google Fonts]体\]

[某小皮][Link 1]

# 使用CSS进行文本格式化 #

参考\[[HTML样式- CSS ][HTML_- CSS]\-内联样式\]

from: [http://blog.csdn.net/pipisorry/article/details/78928496][blog.csdn.net_pipisorry_article_details_78928496]

ref:

[blog.csdn.net_pipisorry_article_details_78928496]: http://blog.csdn.net/pipisorry/article/details/78928496
[HTML_- CSS]: http://blog.csdn.net/pipisorry/article/details/78929649
[Google Fonts]: https://www.ibm.com/developerworks/cn/web/1505_zhangyan_googlefont/
[Link 1]: http://my.csdn.net/