loading ...
loading...

2007-07-28 | HTML超文标记语言概述构成网页的基本元素

分享
标签: 理论知识 
2.1题目(TITLE)

  Title元素是文件头中唯一一个必须出现的元素,它也只能出现在文件头中。title元素的格式为:
  

  title标明该html文件的题目,是对文件内容的概括。一个好的题目应该能使读者从中判断出该文件的大概内容。文件的题目一般不会显示在文本窗口中,而以窗口的名称显示出来。
除了标识窗口外,当将某一 homepage 存入书签或文件时,title还用作书签名或缺省的文件名。

  title的长度没有限制,但过长的题目会导致折行,一般情况下它的长度不应超过64个字符。由于title的作用是标明文件内容,所以太短的title也是不可取的,比如:introduction 这个题目,读者不可能根据它判断出本文介绍的是什么。一个好的例子是:



  在头元素中还可以出现其他元素,如


可以搜索该索引。请键入要搜索的关键字:
, 等等。这些元素都不是必须的,而且也不常用。 这些元素的用法和它们的含义可以参考有关文献。

  下面是一个最简单的html 文件



This is my first html file.


  §2.2 标题(hn)

  标题元素有6种,分别为h1, h2,…h6,用于表示文章中的各种题目。标题号越小,字体越大。一般情况下,浏览器对标题作如下解释:

  h1 黑体,特大字体,居中,上下各有两行空行。
  h2 黑体,大字体,上下各有一到两行空行
  h3 黑体(斜体),大字体,左端微缩进,上下空行
  h4 黑体,普通字体,比h3更多缩进,上边一空行
  h5 黑体(斜体),与h4相同缩进,上边一空行
  h6 黑体,与正文有相同缩进,上边一空行
  Netscape 2.0为hn的解释为,一律黑体,字体越来越小。
 
  hn可以有对齐属性,align=#,#表示
  left 标题居左
  center 标题居中
  right 标题居右

例:

Chapter 2



  下面给出hn的例子及其输出:

Today is fine!</h1> Today is fine!

Today is fine!</h2> Today is fine!

Today is fine!</h3> Today is fine!

Today is fine!</h4> Today is fine!

Today is fine!</h5> Today is fine!
Today is fine!</h6> Today is fine!
  
  §2.3 分段

  html的浏览器是基于窗口的,用户可以随时改变显示区的大小,所以html将多个空格以及回车等效为一个空格,这是和绝大多数字处理器不同的。html的分段完全依赖于分段元素

。比如下面两段源文件有相同的输出。

This is a level Two Heading


paragraphy one

paragraph two


… … … … … … … … … …

This Is a Level Two Heading


paragraph one


paragraph Two



也可以有多种属性,比较常用的属性是:aligh=# #可以是left,center,right,其含义同上
文。

  例

This is a centered paragraph </p>当 html文件中有图形,图形可能占据了窗口的一端,图形的周围可能还有较大的空白区。这时,不带clear属性的

可能会使文章的内容显示在该空白区内。为确保下一段内容显示在图形的下方,可使用clear属性。clear属性的含义为:

clear=left 下一段显示在左边界处空白的区域
clear=right 下一段显示在右边界处空白的区域
clear=all 下一段的左右两边都不许有别的内容

  §2.4 清单List

  清单用于列举事实,常用的清单有3种格式,即无序清单(unordered List),有序清单(ordered list)和定义清单(definition list)

  2.4.1 无序清单(ul)

  无序清单用(ul)开始,每一个清单条目用

  • 引导,最后是
      ,注意清单条目不需要结尾链接签。输出时每一清单条目缩进,并且以黑点标示。

      例 :

      源文件

      • Today
      • Tommorow


      输出为

      ●Today
      ●Tommorow
       
        2.4.2 有序清单
    •   有序清单与无序清单相比,只是在输出时清单条目用数字标示,下面是一个例子及其输出:


      1. Today
      2. Tommorow


      输出为:

      1.Today
      2.Tommorow

        2.4.3 定义清单

        定义清单用于对清单条目进行简短说明的场合,用

      开始,清单条目用
      引导,它的说明用
      引导。


      Item 1
      The definition of item 1
      Item 2
      Definition or explaination of item 2


      输出为:
      Item 1
      The definition of item 1
      Item 2
      Definiton or explaination of item 2

        2.4.4 改变条目标记

        1.改变无序清单条目标记

        无序清单输出时,每一条目前都有一个黑色圆点,用户可以用type序性修改条目的标记。type可以是disc 实心圆点 cirde圆圈 square实心方点


      • ONE
      • TWO
      • THREE


      输出为:
      ●ONE
      ○TWO
      ■THREE

        2.改变有序清单条目标记

        有序清单条目标记的缺省值是阿拉伯数字,可以用type属性修改。方法为
      #=A, 大写字母

      a, 小写字母
      I, 大写罗马数字
      i, 小写罗马数字
      l, 缺省,阿拉伯数字

      1. ONE-ONE
      2. ONE-TWO

      A.ONE-ONE
      B.ONE-TWO

      1. ONE-ONE
      2. ONE-TWO

      a.ONE-ONE
      b.ONE-TWO

      1. ONE-ONE
      2. ONE=TWO</ol>
        Ⅰ.ONE-ONE
        Ⅱ.ONE-TWO

        1. ONE-ONE
        2. ONE-TWO</ol>
          i.ONE-ONE
          ii.ONE-TWO
          1. ONE-ONE
          2. ONE-TWO

          1.ONE-ONE
          2.ONE-TWO

            3.改变有序清单条目的超始数字

        有序清单的条目数字在缺省情况下是从1开始的,用start属性可修改这一值。方法为

        #是条目起始号


        1. ONE-ONE
        2. ONE-TWO

          1. TWO-ONE
          2. TWO-ONE


        E.ONE-ONE
        F.ONE-TWO
        10.TWO-ONE
        xi.TWO-TWO

          2.4.5 清单的嵌套

        各种清单可以相互嵌套,每一个清单条目都可以是一个单独的清单。每嵌套一层,清单条目的输出就会有更大的缩进。请参照上面的例子。

         §2.5 预排版文本

       

        html的输出是基于窗口的,因而html文件在输出时都是要重新排版的,若确实不需要重新排版的内容,可以用

      …</pre>通知浏览器。浏览器在输出时,对这部分内容几乎不做修改地输出,输出的字体电传打字机字体。早期的html规范规定在预排版区内不能出现格式化 
      输出的元素。如hn等,Netscapr2.0在遇到预排版元素时,允许其中有其他元素。

       
      please use your card.
      VISA Master
      Here is an order form.
      • Fax
      • Air Mail



      please use your card
      VISA Master
      Here is an order form.
      ●Fax
      ●Air Mail

        §2.6 块引用

        块引用表示其中的内容是引用。浏览器内对块引用的解释一般为左右缩进,上下各有一空行,有些浏览器还采用斜体字。

        §2.7 居中

        很多元素都有对齐方式属性,如hn 、p等。也可以直接用居中链接签

      …</center>


      Wonderful!!



      This must be my dream.

      Wonderful!!
      This must be my dream.
      分享 分享 |  评论 (0) |  阅读 (?)  |  固定链接 |  类别 (理论知识) |  发表于 11:12
      搜狐博客温馨提示:搜狐博客官方不会要求参加活动的各位博友缴纳任何的手续费用。请勿轻信留言、评论中的中奖信息,更不要拨打陌生电话及向陌生帐户汇款,谨防受骗!识别更多网络骗术,请 点击查看详情
      您还未登录,只能匿名发表评论。或者您可以 登录 后发表。
       
        *中国人爱国心,搜狗输入法爱国主题皮肤下载>>
      表  情:
      加载中...
      回复通知: 同时用小纸条通知对方该回复