当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > Lesson01_04 格式标签与文本标签

CSS样式表
CSS网页设计 IE8和IE7共存
CSS2 打印属性让打印HTML文档不出问题
制作网页中设计段落缩进的方法
CSS border 属性使用说明
CSS border-style 属性使用方法
CSS border-color 属性使用方法
CSS border-width 属性使用教程
CSS padding属性定义边内补白
CSS margin 属性定义边外补白
网页布局教程 掌握CSS网页布局属性
css 背景样式属性说明
span margin 设置生效
html 滚动条在IE6和IE7中兼容性问题
IE6 两个div有间隙的问题(IE 3px bug)
CSS 数字和字母将容器撑大问题解决
换个角度看页面重构中的语义化
DIY属于个人开发使用的CSS Reset
CSS 空格引起网页布局间距问题
CSS 网页制作时遇到问题的快速参考技巧
css li 去掉点的样式写法

CSS样式表 中的 Lesson01_04 格式标签与文本标签


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 97 ::
收藏到网摘: n/a

段落标签:<p></p>

代码:<P ALIGN=RIGHT>右对齐的一段</P>
效果:

右对齐的一段

代码:<P ALIGN=LEFT>左对齐的一段</P>
效果:

左对齐的一段

代码: <P ALIGN=CENTER>居中对齐的一段</P>
效果:

居中对齐的一段

换行标签:<BR>


例:代码:这是第一行<BR>这是第二行
效果:这是第一行
这是第二行

强制不换行:<NOBR>不想让换行的内容</NOBR>

注:加在其中的内容不会因为浏览器的变化而换行

缩进显示:<BLOCKQUOTE></BLOCKQUOTE>

代码:<BLOCKQUOTE>想要缩进的内容</BLOCKQUOTE>
效果:
想要缩进的内容
代码:<BLOCKQUOTE><BLOCKQUOTE>想要缩进的内容</BLOCKQUOTE></BLOCKQUOTE>
效果:
想要缩进的内容

居中显示:<CENTER></CENTER>

代码:<CENTER>www.loncer.cn</CENTER>
效果:
www.loncer.cn

移动显示:<MARQUEE></MARQUEE>


两个属性:
1、BEHAVIOR(设置移动的方式)
代码 效果
<MARQUEE BEHAVIOR="SLIDE">www.loncer.cn</MARAUEE> www.loncer.cn
<MARQUEE BEHAVIOR="SCROLL">www.loncer.cn</MARAUEE> www.loncer.cn
<MARQUEE BEHAVIOR="AlterNATE">www.loncer.cn</MARAUEE> www.loncer.cn

2、DIRECTION(设置移动的方向)
代码 效果
<MARQUEE DIRECTION="LEFT">www.loncer.cn</MARAUEE> www.loncer.cn
<MARQUEE DIRECTION="RIGHT">www.loncer.cn</MARAUEE> www.loncer.cn
<MARQUEE DIRECTION="DOWN">www.loncer.cn</MARAUEE> www.loncer.cn
<MARQUEE DIRECTION="UP">www.loncer.cn</MARAUEE> www.loncer.cn

列表:<DL></DL> <DT></DT>< DD></DD>
<UL></UL> <OL></OL> <LI> </<LI>

代码 效果
<DL>
<DT>中国城市</DT>
<DD>武汉</DD>
<DD>上海</DD>
<DD>太原</DD>
<DT>美国城市</DT>
<DD>华盛顿</DD>
<DD>芝加哥</DD>
<DD>纽约</DD>
</DL>
中国城市
武汉
上海
太原
美国城市
华盛顿
芝加哥
纽约
<OL>
<LI>武汉>/LI>
<LI>上海>/LI>
<LI>太原>/LI>>
</OL>
  1. 武汉
  2. 上海
  3. 太原
    <UL>
    <LI>武汉>/LI>
    <LI>上海>/LI>
    <LI>太原>/LI>>
    </UL>
    • 武汉
    • 上海
    • 太原

      预格式化:<PRE></PRE>


      写字版中的显示效果 没有用<PRE></PRE>标签的效果 用了<PRE></PRE>标签效果
      这是一段文字: this is my ibm thinkpad!
      this is my ibm thinkpad! 代码:
      <PRE>这是一段文字: this is my ibm thinkpad!<PRE>
      效果:
      这是一段文字: this is my ibm thinkpad!

      文本标签

      标题标签:
      从大到小:<H1></H1> <H2></H2> ……<H6></H6>

      代码 效果
      <H1>这就是标题文字</H1>

      这就是标题文字

      <H2>这就是标题文字</H2>

      这就是标题文字

      <H3>这就是标题文字</H3>

      这就是标题文字

      <H4>这就是标题文字</H4>

      这就是标题文字

      <H5>这就是标题文字</H5>
      这就是标题文字
      <H6>这就是标题文字</H6>
      这就是标题文字

      粗体标签:<B></B>

      代码:<B>哈哈哈哈哈……</B>
      效果:哈哈哈哈哈……

      打印机方式显示标签:<TT></TT>

      代码:<TT>哈哈哈哈哈……</TT>
      效果:哈哈哈哈哈……

      引用方式来显示标签:<CITE></CITE>

      代码:<CITE>哈哈哈哈哈……</CITE>
      效果:哈哈哈哈哈……

      斜体标签:<I></I>

      代码:<I>哈哈哈哈哈……</I>
      效果:哈哈哈哈哈……

      下划线标签:<U></U>

      代码:<U>哈哈哈哈哈……</U>
      效果:哈哈哈哈哈……

      强调的文本显示标签(斜体加粗体):<EM></EM>

      代码:<EM>哈哈哈哈哈……</EM>
      效果:哈哈哈哈哈……

      加重的文本显示标签(黑体加粗体):<STRONG></STRONG>

      代码:<STRONG>哈哈哈哈哈……</STRONG>
      效果:哈哈哈哈哈……

      下标标签:<SUB></SUB>

      代码:我是<SUB>哈哈哈哈哈……</SUB>
      效果:我是哈哈哈哈哈……

      上标标签:<SUP></SUP>

      代码:我是<SUP>哈哈哈哈哈……</SUP>
      效果:我是哈哈哈哈哈……

      FONT标签(斜体加粗体):<FONT></FONT>

      三个重要的属性:
      1、FACE(字体)
      2、SIZE(大小从-7到+7:显示从小到大)
      代码 效果
      <FONT SIZE=-7>-7</FONT> -7
      <FONT SIZE=+7>+7</FONT> +7
      3、COLOR(颜色)
      代码 效果
      <FONT COLOR=#FF0000>红色</FONT> 红色
      <FONT COLOR=RED>还是红色</FONT> 还是红色