HTML&CSS基础-文本标签

　　　　　　　　　　　　　　　　HTML&CSS基础-文本标签
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰
一.HTML源代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文本标签</title>
        
    </head>
    <body>
        
        <!--
            <em></em>和<strong></strong>:
                em标签:
                    用于表示一段内容中的着重点(强调语气)
                strong标签:
                    用于表示一个内容中的重要性(强调内容，比em更强烈)
            这两个标签可以单独使用，也可以一起使用;通常em显示未斜体，而strong显示为粗体
        --> 
        <p>
            <strong>警告:任何情况下不要接近僵尸</strong>
            他们只是<em>看起来</em>很友好，实际上他们是为了吃你的胳膊！
        </p>
        
        <p>
            今天天气<em>真好啊！</em>
        </p>
        
        <strong>
            注意:你如果不好好吃饭，你就没有力气减肥啦！
        </strong>
        
        
        <!--
            <i></i>和<b></b>:
                i标签:
                    会使文字变成斜体。
                b标签:
                    回事文字变成粗体。
                这两个标签与em和strong类似，但是这两个标签没有语义。所以根据HTML5标准，当我们只想设置文本特殊显示，而不需要强调内容就可以使用i和b标签。
        -->
        <p>
            <i>我是i标签的内容</i>
            <b>我是i标签的内容</b>
        </p>
        
        
        <!--
            small标签:
                表示细则一类的旁注，通常包括:合同中小子，免责声明 、注意事项、网站版权信息等。
                览器在显示 small标签时会显示一个比父元素小的字号。
        -->
        <p>
            我是p标签中的内容<small>我是small标签中的内容</small>
            <small>&copy;2017原创作品，谢绝转载！否则将追究法律责任。</small>
        </p>
        
        
        <!--
            cite标签:
                可以指明对某内容的引用或参考。例如，戏剧、文章或图书的标题歌曲,电影，照片或雕塑的名称等;
        -->
        <p>
            <cite><<火影忍者>></cite>讲的是围绕木叶忍者村的故事。
        </p>
        
        
        <!--
             <blockquote></blockquote>和 <q></q>
                 blockquote标签:
                     表示一个长引用(块级引用).
                 q标签:
                     引用的内容浏览器默认会加上引号(行内引用).
        -->
       <div>
           孟子 曾经说过 ：
            <blockquote>天将降大任于是人也,必先苦其心志，劳其筋骨，饿其体肤......</blockquote>
        他说的真对啊！
       </div>
       
       <p> 
        孔子曾经说过:<q>学而时习之不亦说乎,有朋自远方来不亦乐乎</q>
       </p>
       
       
       <!--
               <sup></sup>和<sub></sub>
               sup标签:
                   使用sup标签设置一个上标。
               sub标签:
                   使用sub标签设置一个下标。
       -->
       <p>2<sup>1024</sup></p>

       <p>邓紫棋<sup><a href="#">[1]</a></sup></p>

       <p>H<sub>2</sub>O</p>
       
       
       <!-- 
           <ins></ins>和 <del></del>
               ins标签:
                   表示插入的内容，显示时通常会自动加上下划线。
               del标签:
                   表示删除的内容，显示时通常会自动加上删除线
       -->
       <del>16800.00RMB</del><br />
      11000.00RMB<br />
      
      <p>
          我们的<ins>老师真好</ins>啊!
      </p>
      
      
      <!--
          <code></code>和<pre></pre>
              code标签:
                  如果你的内容包含代码示例或文件名称，就可以使用code元素,但不会保留原有格式。
              pre标签:
                  表示的时预格式化文本，会将代码中的格式保存，不会忽略多个空格。
              
              我们一般结合使用pre和code来表示一段代码。
      -->      
      <pre>
window.onload = function(){
    alert("Hello World!");
}
      </pre>
      
      <code>
window.onload = function(){
    alert("Hello World!");
}
      </code>

        <!--
            通常我们会这样使用
        -->
      <pre>
          <code>
window.onload = function(){
    alert("Hello World!");
}
          </code>
      </pre>

    </body>
</html>
二.浏览器打开以上代码渲染结果
posted @ 2017-02-09 16:28 尹正杰阅读(1155) 评论(0) 编辑收藏举报
刷新页面返回顶部
尹正杰

HTML&CSS基础-文本标签

公告
