HTML知识_关于css的基本知识

HTML知识_关于css的基本知识HTML网页制作_在html语言中,格式中的#可以是

HTML知识_关于css的基本知识

第一章:HTML 语言的结构

   html文件是标准的ASCII文件,它看起来象是加入了许多被称为标注(tag)的特殊字符串的普遍文本文件。从结构上讲,html文件由元素(element)组成,组成html文件的元素有许多种,用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”,即它有起始标记和结尾标记。元素的起始标记叫做起始标注(start tag),元素结束标记叫做结尾标注(end tag),在起始标注和结尾标注中向的部分是元素体。 每一个元素都有名称和可选择的属性,元素的名称和属性都在起始标注内标明。 比如体元素(body)

<body backgroud=”back-ground.gif”>

<h2> demo</h2>

This is my firsthtml file. <p>

</body>

   第一行是体元素的起始标注,它标明体元素从此开始。因为所有的标注都具有相同的结构,所以我们将仔细分析这个标注的各个部分,以便读者对标注的写法

有一大概了解。

   < 起始标注开始

   body 元素名称,由于元素和标注一一对应,所以元素名也叫标注名。需要注意的是<和body之间不能有空格。元素名称不分大小写。

   background属性名。一个元素可以有多个属性,属性及其属性值不分大小写。本属性指明用什么方法来填充背景。

  =指明属性值

   “background.gif”属性值,表示用background.gif文件来填充背景。

   属性名,=,属性值合起来构成一个完整的属性,一个元素可以有多个属性,各个属性用空格分开。

   > 起始链接链结束。

   第二行和第三行是body元素的元素体,最后一行是body元素的结尾标注。结尾标注用</开始,随后是元素名,然后是大于号>。

   从上面的例子中,我们可以看出,一个元素的元素体中可以有另外的元素。(上例中第二行的标题元素<h2>…</h2>和第三行的分段元素<p>。实际上,html文件仅由一个html元素组成,即文件以<html>开始,以</html>结尾,文件其部分都是 html的元素体。html元素的元素体由

两大部分,即头元素<head>..</head>和体元素<body>…</body>和一些注释组成。头元素和体元素的元素体又由其它的元素和文本及注释组成。也就是说,一个html文件应具有下面的结构:

   <html>  html文件开始

   <head> 文件头开始

   文件头

   </head> 文件头结束

<body> 文件体开始

   文件体

   </body> 文件体结束

   </html>   html文件结束

   需要说明的是,html是一门发展很快的语言,早期的html文件并没有如此严格的结构,因而现在流行的浏览器(如Netscape,Mosaic等)为保持对早期html文件的兼容性,也支持不按上述结构编写的html文件。还需要说明的是,各种浏览器对html元素及其属性的解释也不完全一样,本书中所讲的元素,元素的属性及其输出是以Netscape2.0 浏览器为准的,作者将尽量给出别的浏览器对某一元素的解释。

   一般来讲,html的元素有下列三种表示方法:

   1)<元素名>文件或超文本</元素名>

   2)<元素名  属性名=“属性值…>文本成超文本</元素名>

   3)<元素名>

   第三种写法仅用于一些特殊的元素,比如分段元素P,它仅仅通知www浏览器在此处分段,因而不需要界定作用范围, 所以它没有结尾标注。htlm3.0标准中,也定义了</p>标注,它用于需要界定作用范围的段落,比如增加对齐方式属性的段落。

   注意:HTML并非大小写敏感. <title> 和<TITLE>或者<TiTlE>是一样的.

   html文件中,有些元素只能出现在头元素中,绝大多数元素只能出现在体元素中。在头元素中的元素表示的是该html文件的一般信息,比如文件名称,是否可检索等等。这些元素书写的次序是无关紧要的,它只表明该html有还是没有该属性。与此相反,出现在体元素中的元素是次序敏感的,改变元素在html文件中的次序会改变该html文件的输出形式。

第二章: 构成网页的基本元素

  2.1标题(TITLE)

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

   <title>文件标题</title>

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

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

   <title> AnIntroduction to HTML </title>

   在头元素中还可以出现其他元素,如<isindex>,<meta>等等。这些元素都不是必须的,而且也不常用。 这些元素的用法和它们的含义可以参考有关文献。

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

<html>

<title>thesimplest html file</title>

This is my firsthtml file.

</html>

 §2.2 标题(hn)

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

   h1 黑体,特大字体,居中,上下各有两行空行。

   h2 黑体,大字体,上下各有一到两行空行

   h3 黑体(斜体),大字体,左端微缩进,上下空行

   h4 黑体,普通字体,比h3更多缩进,上边一空行

   h5 黑体(斜体),与h4相同缩进,上边一空行

   h6 黑体,与正文有相同缩进,上边一空行

   Netscape 对hn的解释为,一律黑体,字体越来越小。

   hn可以有对齐属性,align=#,   #表示

left标题居左

center标题居中

right 标题居右

   例: <h2 align=center>Chapter2 </h2>

<h1>标题元素!</h1> 标题元素!

<h2>标题元素!</h2> 标题元素!

<h3>标题元素!</h3> 标题元素!

<h4>标题元素!</h4> 标题元素!

<h5>标题元素!</h5> 标题元素!

<h6>标题元素!</h6> 标题元素!

 §2.3 分段<P>

   html的浏览器是基于窗口的,用户可以随时改变显示区的大小,所以html将多个空格以及回车等效为一个空格,这是和绝大多数字处理器不同的。html的分段完全依赖于分段元素<P>。比如下面两段源文件有相同的输出。

<h2>This is alevel Two Heading </h2>

paragraph one<p>paragraph two <p>

… … … … … … … … … …

<h2>This Is aLevel Two Heading</h2>

paragraph one<p>

paragraph Two<p>

   <p>也可以有多种属性,比较常用的属性是:

   aligh=#,  #可以是left,center,right,其含义同上文。

   例 <p align=center>This is a centeredparagraph </p>

   当 html文件中有图形,图形可能占据了窗口的一端,图形的周围可能还有较大的空白区。这时,不带clear属性的<p>可能会使文章的内容显示在该空白区内。为确保下一段内容显示在图形的下方,可使用clear属性。clear属性的含义为:

clear=left 下一段显示在左边界处空白的区域

clear=right 下一段显示在右边界处空白的区域

clear=all 下一段的左右两边都不许有别的内容

   §2.4 列表List

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

  2.4.1 无序列表(ul)

   无序列表用(ul)开始,每一个列表条目用<li>引导,最后是</ul>,注意列表条目不需要结尾标注</Li>。输出时每一列表条目缩进,并且以黑点标示。

例 :

  <ul>

  <li>Today

  <li>Tommorow

  </ul>

输出为

 ●Today

 ●Tommorow

  2.4.2 有序列表<ol>

   有序列表与无序列表相比,只是在输出时列表条目用数字标示,下面是一个例子及其输出:

   例:

    <ol>

    <li>Today

    <li>Tommorow

    </ol>

   输出为:

   1.Today

    2.Tommorow

   2.4.3 定义列表<dl>

   定义列表用于对列表条目进行简短说明的场合,用<dl>开始,列表条目用<dt>引导,列表条目的说明用<dd>引导。

<dl>

<dt>Item 1

<dd>The definition of item 1

<dt>Item 2

<dd>Definition or explaination of item 2

</dl>

输出为:

Item 1

   The definition of item 1

Item 2

   Definiton or explaination of item 2

  2.4.4 改变条目标记

   1.改变无序列表条目标记

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

<ul>

<li type=disc>ONE

<li type=circle>TWO

<litype=square>THREE

</ul>

输出为:

●ONE

○TWO

■THREE

   2.改变有序列表条目标记

   有序列表条目标记的缺省值是阿拉伯数字,可以用type属性修改。方法为:

<li type=#>

Li=    A, 大写字母

a, 小写字母

I, 大写罗马数字

i, 小写罗马数字

l, 缺省,阿拉伯数字

<ol><litype=A>ONE-ONE

<li>ONE-TWO</ol>

输出为:

A.ONE-ONE

B.ONE-TWO

<ol><litype=a>ONE-ONE

<li>ONE-TWO</ol>

输出为:

a.ONE-ONE

b.ONE-TWO

<ol><litype=I>ONE-ONE

<li>ONE=TWO</ol>

输出为:

Ⅰ.ONE-ONE

Ⅱ.ONE-TWO

<ol><litype=i>ONE-ONE

<li>ONE-TWO</ol>

输出为:

i.ONE-ONE

ii.ONE-TWO

<ol><litype=1>ONE-ONE

<li>ONE-TWO</ol>

输出为:

1.ONE-ONE

2.ONE-TWO

  3.改变有序列表条目的起始数字

   有序列表的条目数字在缺省情况下是从1开始的,用start属性可修改这一值。方法为<ol start=#>   #是条目起始号

<ol start=5>

<litype=A>ONE-ONE

<li>ONE-TWO

<ol start=10>

<li>TWO-ONE

<litype=i>TWO-ONE

</ol></ol>

输出为:

E.ONE-ONE

F.ONE-TWO

10.TWO-ONE

xi.TWO-TWO

   2.4.5 列表的嵌套

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

   §2.5 预格式化文本<pre>

   html的输出是基于窗口的,因而html文件在输出时都是要重新格式化的,若确实不需要重新格式化的内容,可以用<pre>…</pre>通知浏览器。浏览器在输出时,对这部分内容几乎不做修改地输出,输出的字体电传打字机字体。早期的html规范规定在预格式化区内不能出现格式化输出的元素。如hn等,Netscape在遇到预格式化元素时,允许其中有其他元素。

<pre>

please use yourcard.

VISA Master

<b>Here is anorder form.</b>

<ul><li>Fax

<li>Air Mail</ul>

</pre>

输出为:

please use yourcard

VISA Master

Here is an orderform.

●Fax

●Air Mail

   §2.6 块引用<BLOCKQUOTE>

   块引用用<BLOCKQUOTE>标注,使屏幕显示单独的一块。大多数的浏览器采用缩进编排的方式,使这一块和其他部分的文本区分开来,上下各有一空行。

块引用(Blockquote)<blockquote>…</blockquote>

Her Song:

<blockquote>

When I was young, Ilistened to the radio

waiting for myfavorite songs….

</blockquote>

Her Song:

When I was young, Ilistened to the radio waiting for my favorite songs….

   §2.7 居中

   很多元素都有对齐方式属性,如hn 、p等。也可以直接用居中标注<center>…</center>

<h3align=center>Wonderful!!</h3>

<center>Thismust be my dream.</center>

输出为:

Wonderful!!

This must be mydream.

今天的文章HTML知识_关于css的基本知识分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/87905.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注