zoukankan      html  css  js  c++  java
  • HTML中的文本元素(标题和段落和引用)

    在HTML中有很多对纯文本进行排版的元素统称为文本元素,下面我们来学习一下。

    第一个要学习的是<h1><h6>这六个元素,在HTML中这些元素用来设定文章的标题,

    <h1>代表一级标题,<h2>代表二级标题,等等,请你先不要看答案,自己用html语言在浏览器里显示如下内容

    答案如下:

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <h1>Heading 1</h1>
     6 <h2>Heading 2</h2>
     7 <h3>Heading 3</h3>
     8 <h4>Heading 4</h4>
     9 <h5>Heading 5</h5>
    10 <h6>Heading 6</h6>
    11 
    12 </body>
    13 
    14 
    15 </html>
    View Code

    大家注意到没有,每个标题虽然很短都会自己独占一整行,并自动在它的上面和下面各空出一行,

    这是因为<h1>到<h6>都是HTML中所谓的块元素。块元素的特点是:在横向上,它的内容要占据整个网页的宽度,不够用空白填充。

    在纵向上,它在上下要各留出一行空白。用盒子模型表示如下。

     在html中设定了文章标题后,那段落用什么元素呢?在英语里段落被称为paragraph,大家一定可以猜出段落元素是<p>了吧

     

     请大家编程实现上面的效果。

    答案如下:

    1 <!DOCTYPE html>
    2 <html>
    3 <body>
    4 <p>This is a paragraph.</p>
    5 <p>This is a paragraph.</p>
    6 <p>This is a paragraph.</p>
    7 </body>
    8 </html>
    View Code

     从上面的例子看,显然,<p>元素也是块元素,块横跨整个网页,上下各空出一行,用盒子模型表示如下:

    在HTML中引用元素有两种,分别是<q>和<blockquote> 元素。

    <q>元素一般用在单句的引用上,看出<q>元素里面的内容要加上双引号。

     请看下面的一个例子,可以看出,两个<q>元素之间并没有换行,而是在同一行里呈现。

    和块元素<p>不同,<q>是一个内联元素并不独占网页的宽度,它上下也不留空行。

     

     <blockquote>元素一般用在整段话的引用上,<blockquote>元素里面的内容不加双引号。

    <blockquote>元素是块元素,即要独占网页宽度,且上下空一行,另外,<blockquote>元素的内容默认居中。

     

     

     

    民大赵老师
  • 相关阅读:
    网页添加提示音
    poj 2593和poj 2479
    HDU 1558 Segment set
    Ubuntu中conky的安装配置
    Codeforce C. Buns
    HDU 3952 Fruit Ninja
    IE8,IE9,IE10,FireFox 的CSS HACK
    HDU 1086 You can Solve a Geometry Problem too
    Ubuntu中Cairo Dock安装和设置
    Ubuntu 12.04 中安装和配置 Java JDK(转)
  • 原文地址:https://www.cnblogs.com/gezhaoatdlnu/p/13432998.html
Copyright © 2011-2022 走看看