zoukankan      html  css  js  c++  java
  • 文字布局(TEXT STYLE)标记(TAGS)

    + 行的控制

    段(Paragraph) (可以看作是空行) <p>

    你好吗?<p>很好。

    你好吗?

    很好。

    
    

    换行 <br>

    你好吗?<br>很好。

    你好吗?
    很好。

    
    

    不换行<nobr>

    <nobr>
    请改变您浏览器窗口的宽度, 使之小于这一行的宽度, 看看这个标记的作用!
    </nobr>

    请改变您浏览器窗口的宽度,使之小于这一行的宽度,看看这个标记的作用!

    
    

    + 文字的对齐(Alignment)

    <hn align=#>...</hn>
    <p align=#>...</p> #=left, center, right

    <h3 align=center>Hello<\h3>
    <h3 align=right>Hello<\h3>

    Hello

    Hello

    <center>...</center>

    <center>Hello</center>

    Hello

    
    

    + 文字的分区(Division)显示

    <div align=left> ... </div>

    <div align=left>
    Can you feel happiness without unpleasant? <br>
    Please show me your smile.
    </div>

    Can you feel happiness without unpleasant?
    Please show me your smile.

    <div align=center> ... </div>

    Can you feel happiness without unpleasant?
    Please show me your smile.

    <div align=right> ... </div>

    Can you feel happiness without unpleasant?
    Please show me your smile.

    
    

    + 列表

    无序列表 <ul><li>...</ul>

    <ul>
    <li>Today
    <li>Tommorow
    </ul>
    • Today
    • Tommorow

    有序列表 <ol><li>...</ol>

    <ol>
    <li>Today
    <li>Tommorow
    </ol>
    1. Today
    2. Tommorow

    定义列表(Definition lists) <dl><dt>...<dd>...</dl>

    <dl>
    <dt>Today
    <dd>Today is yesterday.
    <dt>Tomorrow
    <dd>Tomorrow is today.
    </dl>
    Today
    Today will be yesterday.
    Tomorrow
    Tomorrow will be today.

    Definition lists Compact <dl compact><dt>...<dd>...</dl>

    Today
    Today will be yesterday.
    Next
    Tomorrow will be today.
    <dl compact>
    <dt>Today
    <dd>Today is yesterday.
    <dt>Tomorrow
    <dd>Tomorrow is today.
    </dl>

    
    

    + 定制列表元素

    定制表中的标记 <li type=#> #=disk, circle, square

    <ul>
    <li type=disc>ONE
    <li type=circle>TWO
    <li type=square>THREE
    </ul>
    • ONE
    • TWO
    • THREE

    定制有序列表表中的序号 <li type=#> #=A, a, I, i, 1

    <ol><li type=A>ONE-ONE
    <li>ONE-TWO</ol>
    1. ONE-ONE
    2. ONE-TWO
    <ol><li type=a>ONE-ONE
    <li>ONE-TWO</ol>
    1. ONE-ONE
    2. ONE-TWO
    <ol><li type=I>ONE-ONE
    <li>ONE-TWO</ol>
    1. ONE-ONE
    2. ONE-TWO
    <ol><li type=i>ONE-ONE
    <li>ONE-TWO</ol>
    1. ONE-ONE
    2. ONE-TWO
    <ol><li type=1>ONE-ONE
    <li>ONE-TWO</ol>
    1. ONE-ONE
    2. ONE-TWO

    定制有序列表表中的序号的起始值 <ol start=#> #=number

    <ol start=5>
    <li type=A>ONE-ONE
    <li>ONE-TWO
    <ol start=10>
    <li>TWO-ONE
    <li type=i>TWO-TWO
    </ol></ol>
    


    1. ONE-ONE
    2. ONE-TWO
      1. TWO-ONE
      2. TWO-TWO
    
    

    + 预格式化文本(Preformatted Text)

    <pre>...</pre>

    <pre>
    Please use your card.
    VISA Master
    <b>Here is an order form.</b>
    <ul><li>Fax
    <li>Air Mail</ul>
    </pre>
    Please use your card
    VISA    Master
    Here is an order form.
    
    • Fax
    • Air Mail

    <listing>...</listing>

    <listing>
    Please use your card.
    VISA Master
    <b>Here is an order form.</b>
    <ul><li>Fax
    <li>Air Mail</ul>
    </listing>
    Please use your card.
    VISA    Master
    Here is order form.
    
    • Fax
    • Air Mail

    <xmp>...</xmp>

    <xmp>
    Please use your card.
    VISA Master
    <b>Here is an order form.</b>
    <ul><li>Fax
    <li>Air Mail</ul>
    </xmp>
    Please use your card.
    VISA    Master
    <b>Here is order form.</b>
    <ul><li>Fax
    <li>Air Mail</ul>
    
    
    

    + 空白(Spacer)

    <spacer type="horizontal" size=#> #=水平空白宽度
    <spacer type="vertical" size=#> #=竖直空白高度

    YESTERDAY <spacer type="horizontal" size=50> TODAY
    <spacer type="vertical" size=50> TOMORROW

    YESTERDAY TODAY TOMORROW

    <spacer type="block" width=# height=# align=##>
    #=空白的尺寸
    ##=top, middle, bottom, left, right

    <spacer type="block" width=150 height=50 align=left>
    YESTERDAY<br> TODAY<br> TOMORROW

    YESTERDAY
    TODAY
    TOMORROW

    
    

    + 多列文本

    <multicol cols=#> ... </multicol> #=列的数目

    <multicol cols=2> text text text... </multicol>
    例子

    <multicol gutter=#> ... </multicol> #=列间的空白

    <multicol cols=2 gutter=100> text text text... </multicol>
    例子

    <multicol width=#> ... </multicol> #=列的宽度

    <multicol cols=2 width=400> text text text... </multicol>
    例子
    
    

    + 其它

    块引用(Blockquote) <blockquote>...</blockquote>

    Her Song:
    <blockquote>
    When I was young, I listened to the radio
    waiting for my favorite songs....
    </blockquote>

    Her Song:

    When I was young, I listened to the radio waiting for my favorite songs....

    闪烁 <blink>...</blink>

    <BLINK> 闪烁!闪烁! </BLINK>

    闪烁!闪烁!

  • 相关阅读:
    情感成本
    已知二叉树前序和中序,求后序
    贫穷的本质
    Centos安装docker及常见docker容器创建脚本
    SpringBoot与SpringCloud对应版本及官方查询方法
    工作流
    Host 'xxx' is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts'
    list_layout.ini说明
    layout.ini说明
    config.ini说明
  • 原文地址:https://www.cnblogs.com/ntearn/p/1355712.html
Copyright © 2011-2022 走看看