火力光波的博客

火一般的热情光一样的速度

日志

关于我

火力光波

文章分类

排版代码、标签及属性

2009-07-04 16:28:52| 分类： html代码 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

排版代码、标签及属性

排版标签：

换行： <br> 空出一行

不换行： <nobr></nobr>

分段： <p 属性="属性值">分段内容</p> 空出两行

align ="对齐"：left 左 center 中 right 右

置中： <center>文字、图片、表格等</center>

右缩：<blockquote>文字</blockquote> 加一组标签往右缩排一单位

预设：＜pre＞预设内容＜/pre＞

折行：<WBR>

区隔： <div 属性="属性值">区域内容</div> align ="对齐"：left 左 center 中 right 右

<span>与<div> Tag的作用只是用来修是文字图片等，区别在于<div>在被修饰文字的前后自动加了一个<BR>。

如在网页上加一行叙述：

（指定网页的语言格式），那么，netscape可正确显示中文，但英文无反应。

若没加该行，那么英文会正确显示，但中文却仍是宋体。

使用方法：

【换行、分段】

解说：我们在写文章时，有时候在特定的地方会强迫换行（<br>），或是在写完某一段的时候便会分段（<p>），写网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。

原始码

呈现结果

这是一个换行的范例<br>看出来了吗？

这是一个换行的范例
看出来了吗？

这是一个分段的范例<p>基本上他会比断行还多空出一行

这是一个分段的范例

基本上分段会比断行还多空出一行

【对齐左、中、右】

使用方法：老实说，刚刚我们学过的分段标签<p>再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：

标签解说：嗯！秘诀就在于“align=对齐位置”而已啦！align是分段标签<P>的属性之一，这个属性将来会常常在不同标签中看到，它的功能是专门在设定“水平对齐位置”，其常见的设定值有三个，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。

原始码	呈现结果
<p align="left">文字靠左</p>	文字靠左
<p align="center">文字置中</p>	文字置中
<p align="right">文字靠右</p>	文字靠右

【置中标签】

使用方法： <CENTER>这是置中</CENTER>

标签解说：这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的东西都可以置中喔！

原始码	呈现结果
<center>这是最中间</center>	这是最中间

【向右缩排标签】

使用方法：<BLOCKQUOTE>要缩排的文字</BLOCKQUOTE>
标签解说：利用<BLOCKQUOTE></BLOCKQUOTE>这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，

往右缩排一单位，加两组标签，往右缩排两单位，依此类推。

原始码	呈现结果
<blockquote>缩排1单位</blockquote>	缩排1单位
<blockquote><blockquote>缩排2单位</blockquote></blockquote>	缩排2单位

【保存原始格式】

使用方法：<PRE>文字内容</PRE>
标签解说：利用<PRE></PRE>这个标签可以将其包起来的文字排版、格式，原封不动的呈现出来。算是相当好用的标签之一。

原始码	呈现结果
<pre> 文　字　格　式 </pre>	文　字　格　式

来源：排版标签

评论这张

转发至微博

阅读(1014)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_082071081080081071080086095095092086086071081094095066',
              blogTitle:'排版代码、标签及属性',
              blogAbstract:'<P align=\"center\" \><FONT face=\"楷体_GB2312\" color=\"#ff6600\" size=\"4\" \>排版代码、标签及属性</FONT\></P\><FONT color=\"#999999\" \>  <P align=\"left\" \><FONT face=\"黑体\" color=\"#ff00ff\" size=\"3\" \></FONT\> </P\>  <P align=\"left\" \><FONT face=\"宋体\" color=\"#ff00ff\" size=\"2\" \>排版标签：</FONT\></P\>  <P align=\"left\" \><FONT size=\"2\" \><FONT color=\"#999999\" \></FONT\> </FONT\></P\>  <P align=\"left\" \><FONT size=\"2\" \></FONT\></P\>  <P align=\"left\" \><FONT color=\"#999999\" size=\"2\" \></FONT\></P\></FONT\><FONT color=\"#999999\" size=\"2\" \>换行：  <br>  空出一行    </FONT\>  <P align=\"left\" \><FONT color=\"#999999\" size=\"2\" \>不换行： <nobr></nobr></FONT\></P\>  <P align=\"left\" \><FONT color=\"#999999\" size=\"2\" \>分段： <p 属性=\"属性值\">分段内容</p>  空出两行 </FONT\></P\>  <P align=\"left\" \><FONT color=\"#999999\" size=\"2\" \>      align =\"对齐\"：left 左  center 中  right 右</FONT\></P\>',
              blogTag:'',
              blogUrl:'blog/static/8074589120096442852339',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1317408717797,
              publishTime:1246696132339,
              permalink:'blog/static/8074589120096442852339',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/8074589120096442852339">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

火力光波的博客

导航

日志

排版代码、标签及属性

历史上的今天

最近读者

热度

评论

页脚