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

25篇文章，4W+人气，0粉丝

Ctrl+Enter 发布

发布

取消

1条评论

按时间倒序 按时间正序

推荐专栏更多

Web网站安全评估分析及防御

企业级网安运维

共30章 | simeon2005

￥51.00 407人订阅

订   阅

JavaScript全栈工程师养成记

20年软件开发心法

共17章 | 边城__

￥51.00 333人订阅

订   阅

猜你喜欢

我的友情链接 什么是802.11G协议 Java线程：线程的调度-休眠 我们不得不面对的中年职场危机 职场终极密籍--记我的职业生涯 用光影魔术手制作一寸照片（8张一寸） 我的IT职场生涯: 毕业4年，月薪过万 Linux关闭休眠和屏保模式 年薪从0到10万-我的IT职场经验总结 Windows7删除休眠文件hiberfil.sys节省大量C盘空间 致IT同仁 — IT人士常犯的17个职场错误 “跳槽加薪”现象，无奈的职场规则 Redis实战之限制操作频率 Django+Vue实现WebSocket连接 Restful接口开发测试指南 前端程序员面试套路 Google Authenticator TOTP原理详解(以Python为例) Django解决扩展用户表时,后台Admin显示密码为明文的问题 jHipster开发中对配置文件.yo-ce.json分析 AJAX入门学习-2：基于JS的AJAX实现(以Django为例)

扫一扫,领取大礼包

0

1

分享

20102182255277

转载于:https://blog.51cto.com/airuan/303969