HTML4.0 Standard Syntax - Text Layout

xiaoxiao2021-03-06  82

Line control

Paragraph (can be seen as a space)

How are you?

is very good.

How are you?

well.

Wrap

How are you?
is very good.

How are you? well.

Do not change line

Change your browser window to make it smaller than the width of this line to see the role of this tag!

Please change your width of your browser window, make it smaller than the width of this line to see the role of this tag!

◇ ◇ 文 文 (alignment)

...

... # = left, center, right

Hello

Hello

Hello

Hello

...

Hello

Hello

◇ Text partition (DiVision)

...

Can you feel?
Please show me your smile.

Can You Feel Happiness WITHOUT UNPLEASANT? Please show me your smile.

...

Can You Feel Happiness WITHOUT UNPLEASANT? Please show me your smile.

...

Can You Feel Happiness WITHOUT UNPLEASANT? Please show me your smile.

◇ list

Unordered list

  • ...

    • Today
    • Tommorow

      Today Tommorow

      Order list

      1. ...

      2. Today
      3. Tommorow

        Today Tommorow

        Definition list

        ...
        ...

        Today
        Today IS Yesterday.
        Tomorrow
        Tomorrow Is Today.

        Today

        Today will be yesterday.

        Tomorrow

        Tomorrow Will Be Today.

        Definition Lists Compact

        ...
        ...

        Today

        Today will be yesterday.

        NEXT

        Tomorrow Will Be Today.

        Today
        Today Is Yesterday.
        Tomorrow
        Tomorrow Is Today. ◇ Customized list elements

        Customize the mark

      4. # = disk, circle, square

        • one
        • Two
        • Three

          One Two Three

          Customized sequence number

        • # = a, a, i, i, 1

        • one-one
        • one-two

          One-One One-Two

        • one-one
        • one-two

          One-One One-Two

        • One-one
        • one-two

          One-One One-Two

        • One-one
        • one-two

          One-One One-Two

        • One-one
        • one-two

          One-One One-Two

          Customize the starting value of the serial number in the order of order table

            # = NUMBER

          1. one-one

          2. one-two

          3. Two-one

          4. Two-two

            One-One One-Two

            Two-One Two-Two

            ◇ Preformatted Text

             ... 

             please your card.visa masser  here is an order form.  
            • fax
            • air mail

              Please use your card

              Visa Master

              Here is an order form.

              Fax Air Mail

              ...

              please use your card.visa master here is an order form.
              • fax
              • air mail

                Please use your card.

                Visa Master

                Here is Order Form.

                Fax Air Mail

                ... </ xmp></p> <p><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.</p> <p>Visa Master</p> <p><b> here is order form. </ b></p> <p><ul> <li> fax</p> <p><Li> Air Mail </ UL></p> <p>◇ Blank (Spacer)</p> <p><spacer type = "horizontal" size = #> # = horizontal blank width <spacer type = "vertical" size = #> # = vertical blank height</p> <p>Yesterday <spcer type = "horizontal" size = 50> Today <spcer type = "vertical" size = 50> Tomorrow</p> <p>Yesterday</p> <p>Today</p> <p>Tomorrow</p> <p><spacer type = "block" width = # height = # align = ##> # = blank size ## = Top, Middle, Bottom, Left, Right</p> <p><spacer type = "block" width = 150 height = 50 align = left> Yesterday <br> Today <br> Tomorrow</p> <p>Yesterday</p> <p>Today</p> <p>Tomorrow</p> <p>◇ Many column text</p> <p><Multicol cols = #> ... </ multicol> # = number of columns</p> <p><Multicol cols = 2> Text text text ... </ multicol></p> <p>example</p> <p><Multicol Gutter = #> ... </ multicol> # = Blank</p> <p><multicol cols = 2 gutter = 100> text text text ... </ multicol></p> <p>example</p> <p><Multicol Width = #> ... </ multicol> # = the width of the column</p> <p><multicol cols = 2 width = 400> Text text text ... </ multicol></p> <p>example</p> <p>◇</p> <p>Block quote <block quote> ... </ block quote></p> <p>Her Song: <block quote> When I Was Young, I listened to the Radio Waiting for My Favorite Songs .... </ block quote></p> <p>Her Song:</p> <p>When I Was Young, I listened to the Radio Waiting for My Favorite Songs ....</p> <p>Flash <blink> ... </ blink></p> <p><Blink> flashes! Flash! </ Blink></p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-98563.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="98563" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.047</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'wAvn3ar4ReBwR2ckYlVUvUGW3gReRIlUeMHhiEGR2RBy0iYYdYw7_2FOGd9KIM7_2Bs7cypm3CTuf_2FkSkszKj_2BJNEQ_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>