html語言 文字佈局

文字佈局標記

---------------------------------------------------

行的控制

段(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 is yesterday.

Tomorrow

Tomorrow is today.

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

Today Today will be yesterday.
Next Tomorrow will be today.

Today

Today is yesterday.

Tomorrow

Tomorrow is today.

定製列表元素

定製表中的標記 <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>

5. ONE-ONE
6. ONE-TWO
   10. TWO-ONE
   11. 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>

閃爍！閃爍！

[返回]

©著做權歸做者全部：來自51CTO博客做者20102182255277的原創做品，如需轉載，請註明出處，不然將追究法律責任

職場 休閒 html 文字佈局

0

分享

微博 QQ 微信

收藏

上一篇：html語言的字體設置 下一篇：html 圖像佈局

20102182255277

23篇文章，4W+人氣，0粉絲

Ctrl+Enter 發佈

發佈

取消

1條評論

按時間倒序 按時間正序

推薦專欄更多

JavaScript全棧工程師養成記

20年軟件開發心法

共17章 | 邊城__

￥51.00 356人訂閱

訂   閱

Web網站安全評估分析及防護

企業級網安運維

共30章 | simeon2005

￥51.00 470人訂閱

訂   閱

猜你喜歡

個人友情連接 什麼是802.11G協議 Hystrix 分佈式系統限流、降級、熔斷框架 docker安裝WordPress-web mysql分佈式安裝 分佈式消息隊列RocketMQ部署與監控 ABBYY FineReader 14 中文最新版含中文補丁【OCR文字識別軟件】 HTML解析利器HtmlAgilityPack Android開發學習筆記：5大布局方式詳解 Qt學習之路(5)：組件佈局 kubernetes集羣中使用ingress發佈服務 WebSocket+HTML5實如今線聊天室 利用Cobbler批量佈署CentOS 從設計到開發，實現一我的人均可以簡單使用及管理的工做流系統 你的SpringBoot能夠再快一點 vue中路由的使用 大話業務場景與解決方案-作任務 自建在線會議系統 ---- BigblueButton 詳細安裝步驟 輕鬆搭建基於 SpringBoot + Vue 的 Web 商城應用 一個Slash引起的ClassNotFound血案 Spring Framework 組件註冊 之 @Import

好課推薦更多

• Python 3.x基礎教程

  13855人學習

  免費試看

• Excel 2016徹底自學教程

  3096人學習

  免費試看

• MATLAB從入門到精通

  4384人學習

  免費試看

• 極簡Excel：一分鐘學會Excel的藝術

  3708人學習

  免費試看

掃一掃,領取大禮包

0

1

分享

20102182255277