当前位置： 移动技术网 > IT编程>网页制作>CSS > Lesson01_04 格式标签与文本标签

Lesson01_04 格式标签与文本标签

2017年12月12日  | 移动技术网IT编程  | 我要评论

一诺风华百里,红鼠网,李岳苍有多少钱

 

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

      您可能感兴趣的文章:

      如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

      相关文章:

      验证码：
      最近更新的文章
      大家感兴趣的文章
      移动技术网