分享
 
 
 

构成网页的基本元素

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

2.1题目(TITLE)

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

<title>文件题目</title>

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

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

<titl>An Introduction to HTML 2.0 </title>

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

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

<html>

<title>the simplest html file</title>

This is my first html file.

</html>

§2.2 标题(hn)

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

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

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

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

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

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

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

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

hn可以有对齐属性,align=#,#表示left 标题居左center 标题居中right 标题居右

例: <h2 align=center>Chapter 2 </h2>

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

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

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

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

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

<h5>Today is fine!</h5> Today is fine!

<h6>Today is fine!</h6> Today is fine!

§2.3 分段<P>

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

<h2>This is a level Two Heading </h2>

paragraphy one <p>paragraph two <p>

… … … … … … … … … …

<h2>This Is a Level Two Heading</h2>

paragraph one <p>

paragraph Two <p>

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

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

例<p align=center>This is a centered paragraph </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

<li type=square>THREE

</ul>

输出为:

●ONE

○TWO

■THREE

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

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

a, 小写字母

I, 大写罗马数字

i, 小写罗马数字

l, 缺省,阿拉伯数字

<ol><li type=A>ONE-ONE

<li>ONE-TWO</ol>

A.ONE-ONE

B.ONE-TWO

<ol><li type=a>ONE-ONE

<li>ONE-TWO</ol>

a.ONE-ONE

b.ONE-TWO

<ol><li type=I>ONE-ONE

<li>ONE=TWO</ol>

Ⅰ.ONE-ONE

Ⅱ.ONE-TWO

<ol><li type=i>ONE-ONE

<li>ONE-TWO</ol>

i.ONE-ONE

ii.ONE-TWO

<ol><li type=1>ONE-ONE

<li>ONE-TWO</ol>

1.ONE-ONE

2.ONE-TWO

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

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

<ol start=5>

<li type=A>ONE-ONE

<li>ONE-TWO

<ol start=10>

<li>TWO-ONE

<li type=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等,Netscapr2.0在遇到预排版元素时,允许其中有其他元素。

<pre>

please use your card.

VISA Master

<b>Here is an order form.</b>

<ul><li>Fax

<li>Air Mail </ul>

</pre>

please use your card

VISA Master

Here is an order form.

●Fax

●Air Mail

§2.6 块引用<BQ>

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

§2.7 居中

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

<h3 align=center>

Wonderful!!

</h3>

<center>

This must be my dream.

</center>

Wonderful!!

This must be my dream.

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有