zoukankan      html  css  js  c++  java
  • 菜鸟教程(runoob.com)

    HTML文本格式化

    通用格式

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

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </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>
    

    呈现效果:


    菜鸟教程(runoob.com) 这个文本是加粗的
    这个文本是加粗的
    这个文本字体放大
    这个文本是斜体的
    这个文本是斜体的
    这个文本是缩小的
    这个文本包含 下标
    这个文本包含 上标 ____

    单词缩写格式

    <!DOCTYPE html> 
    <html>
    <head> 
    <meta charset="utf-8"> 
    </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>
    

    呈现:

    etc.
    WWW

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

    仅对于 IE 5 中的 acronym 元素有效。

    对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。

    ____

    增加下划线和删除线

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    </head>
    <body>
    
    <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
    
    </body>
    </html>
    

    呈现效果:

    菜鸟教程(runoob.com)

    My favorite color is blue red!


    文字顺序

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    </head> 
    <body>
    <p>该段落文字从左到右显示。</p>  
    <p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>  
    </body>
    </html>
    

    效果:

    该段落文字从左到右显示。

    该段落文字从右到左显示。

    ____

    预格式文本

    此例演示如何使用 pre 标签对空行和空格进行控制。

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    </head>
    <body>
    <pre>
    此例演示如何使用 pre 标签
    对空行和    空格
    进行控制
    </pre>
    </body>
    </html>
    

    呈现效果:

    此例演示如何使用 pre 标签
    对空行和    空格
    进行控制
    
    ____

    总结

    <br /> 换行
    <strong></strong> 加粗
    <b></b> 加粗
    <em></em> 斜体
    <i></i> 斜体
    <small></small> 字体缩小
    <big></big> 字体放大
    <sub></sub> 下标
    <sup></sup> 上标

    <abbr></abbr> 缩写
    <acronym></acronym> 缩写

    <del></del> 删除线
    <ins></ins> 下划线

    <bdo></bdo> 文字顺序

    <pre></pre> 预格式文本

    ;big></big> 字体放大
    <sub></sub> 下标
    <sup></sup> 上标

    <abbr></abbr> 缩写
    <acronym></acronym> 缩写

    <del></del> 删除线
    <ins></ins> 下划线

    <bdo></bdo> 文字顺序

    <pre></pre> 预格式文本

  • 相关阅读:
    固定表格宽度被TABLE的95%给弄没效果了
    界面只有一个文本框时,回车就会产生页面提交事件
    控件开发读书笔记
    调整window.open窗口大小并且不闪烁
    对showModalDialog窗口的大小调整
    borderwidth的没效果的原因
    “解决方案资源管理器”中不能自动选择正在编辑的文档
    HTML编辑器中不要跳来跳去
    华硕本本Fn+F2不能打开无线
    VS2008打上SP1后,修正javascript智能提示的两个问题
  • 原文地址:https://www.cnblogs.com/coding365/p/12872271.html
Copyright © 2011-2022 走看看