第3章 字体标记

3.1设置字体大小
    字体语法:
    <font>要放的文字</font>
    字体大小语法:
    <font size="1">HTML+CSS完全自学手册</font>
     其中,size用来表示大小,等号(=)后面的参数是有规定的,即从1到7的任意一个数
     实例:
     <html>
     <head>
          <title>标题字体大小</title>
     </head>
     <body>
      <!--注解:以下是不同文本字体的大小-->
   <!--下一行表示文本字体为1-->
   <font size="1">HTML+CSS完全自学手册</font>
   <br>
   <!--下一行表示文本字体为2-->
   <font size="2">HTML+CSS完全自学手册</font>
   <br>
   <font size="3">HTML+CSS完全自学手册</font>
   <br>
   <font size="4">HTML+CSS完全自学手册</font>
   <br>
   <font size="5">HTML+CSS完全自学手册</font>
   <br>
   <font size="6">HTML+CSS完全自学手册</font>
   <br>
   <font size="7">HTML+CSS完全自学手册</font>
   <br>
     </body>
</html>

3.2设置字体颜色
    字体颜色语法:
    <font color=""></font>
    其中,参数color后面可以接RGB颜色值,如#000000。也可以用颜色的单词表示,如red.
    实例:
    <html>
     <head>
          <title>标题字体颜色</title>
     </head>
     <body>
    
   <!--下一行表示文本字体颜色为红色-->
   <font color="red">HTML+CSS完全自学手册</font>
   <br>
   <!--下一行表示文本字体颜色为#cccccc-->
    <font color="#cccccc">HTML+CSS完全自学手册</font>
     </body>
</html>
3.3设置标题字体栏式
  3.3.1标题的字体
  <h1>设置标题h1</h1>
  <h2>设置标题h2</h2>
  <h3>设置标题h3</h3>
  <h4>设置标题h4</h4>
  <h5>设置标题h5</h5>
  <h6>设置标题h6</h6>
  实例:
 
<html>
     <head>
          <title>标题字体设置</title>
     </head>
     <body>
   <!--下面的行表示标题用法-->
   <font color="red"></font>
   <h1>HTML+CSS完全自学手册--h1</h1>
         <h2>HTML+CSS完全自学手册--h2</h2>
         <h3>HTML+CSS完全自学手册--h3</h3>
         <h4>HTML+CSS完全自学手册--h4</h4>
         <h5>HTML+CSS完全自学手册--h5</h5>
         <h6>HTML+CSS完全自学手册--h6</h6>
    <font color="#cccccc">HTML+CSS完全自学手册</font>
     </body>
</html>
3.3.2设置字体的大小和颜色
<html>
     <head>
          <title>标题字体设置</title>
     </head>
     <body>
   <!--下面的行表示在标题中,设置文本字体样式-->
   <!--下一行表示一对h1标题设置红色字体-->
   <h1><font color="red">HTML+CSS完全自学手册--h1</font></h1>
   <!--下一行表示一对h2标题设置删除线-->
         <h2><s>HTML+CSS完全自学手册--h2</s></h2>
    <!--下一行表示一对h3标题设置粗体-->
         <h3><b>HTML+CSS完全自学手册--h3</b></h3>
   <!--下一行表示一对h4标题设置斜线-->
         <h4><i>HTML+CSS完全自学手册--h4</i></h4>
   <!--下一行表示一对h4标题设置下画线-->
         <h5><u>HTML+CSS完全自学手册--h5</u></h5>
   <!--下一行表示一对h4标题设置字体大小和字体颜色-->
         <h6><font size="3" color="blue">HTML+CSS完全自学手册--h6</font></h6>
     </body>
</html>
3.4物理字体
   字体分为物理字体和逻辑字体。物理字体列表,中间的省略符代表放置的文本内容,通过标
   记进行修改,
   <b>...</b>将字符设置成粗体
   <i>...</i>将字符设置成斜体
   <u>...</u>给字符增加下划线
   <s>...</s>给字符增加删除线
   <tt>...</tt>将字符设置成打字机字体
   <sup>...</sup>将字体设置成上标字体
   <sub>...</sub>将字体设置成下标字体
   实例:
  
<html>
     <head>
          <title>物理字体</title>
     </head>
     <body>
   <!--下面表示物理字体用法-->
   <!--设置删除线-->
         <s>HTML+CSS完全自学手册</s>
   <br>
     <!--设置删除线-->
  <strike>HTML+CSS完全自学手册</strike>
  <br>
    <!--设置粗体-->
         <b>HTML+CSS完全自学手册</b>
   <br>
   <!--设置斜线-->
         <i>HTML+CSS完全自学手册</i>
   <br>
   <!--设置下画线-->
         <u>HTML+CSS完全自学手册</u>
   <br>
    <!--设置下标-->
    <sub> HTML+CSS完全自学手册</sub>
    <br>
    <!--设置上标-->
    <sup> HTML+CSS完全自学手册</sup>
   <br>
  <!--将字体设置成上标字体-->
  <tt>HTML+CSS完全自学手册</tt>
     </body>
</html>

3.5逻辑字体
 逻辑字体很少见到,但作用很大。如在网页上表现代码形式的字符
 来说明其功能
 <em>...</em>     //强调文字
 <strong>...</strong>   //字体加重
 <code>...</code>        //显示编程代码
 <samp>...</samp>        //显示示例文字
 <kbd>...</kbd>         //显示键盘按键设文字
 <small>...</small>     //缩小文字
 <big>...</big>         //放大文字
 实例:
 
<html>
     <head>
          <title>逻辑字体</title>
     </head>
     <body>
   <!--下面表示逻辑字体用法-->
         <em>文字---斜了</em>
   <br>
   <strong>文字---加重</strong>
   <br>
         <small>文字---小的</small>
   <br>
         <big>文字---大的</big>
   <br>
     </body>
</html>
 
 
   

你可能感兴趣的:(html,职场,休闲)