欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Lesson01_04 格式标签与文本标签

程序员文章站 2024-02-28 17:06:04
  段落标签:

代码:

右对齐的一段

效果: 右对齐的一段代...
 

段落标签:<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> 还是红色