从HTML语言到网上家园 第二章 构成网页的基本元素

 　　在本章中，咱们仅引见局部常用的 html 标志，其它常用标志将辨别在此后的各章节中引见。 　　2.1 题目 (hn)

　　题目元素有 6 种，运用 h1 到 h6 规则作品中的百般题目。题目号越小，字体越大。

　　题目的基础方法为：

　　<hn> …… </hn>

　　普遍情景下， ie 欣赏器中题目的证明如次：

　　h1 黑体，特大字体，居中，左右各有两行空行。

　　h2 黑体，大字体，左右各有一到两行空行

　　h3 黑体 ( 斜体 ) ，大字体，左端微缩进，左右空行

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

　　h5 黑体 ( 斜体 ) ，与 h4 沟通缩进，上边一空行

　　h6 黑体，与正文有沟通缩进，上边一空行

　　netscape 对 hn 的证明为，一致黑体，字体越来越小。

　　hn 不妨有多种属性，个中最常用的是对齐属性， align ＝ left | center |right ，辨别表白题目居左、居中大概居右，默许情景下题目均居左。

　　例 : 底下的 html 代码的表露功效如图所示

　　<h1> 我的第一个网页！ </h1>

　　<h2> 我的第一个网页！ </h2>

　　<h3> 我的第一个网页！ </h3>

　　<h4> 我的第一个网页！ </h4>

　　<h5> 我的第一个网页！ </h5>

　　<h6> 我的第一个网页！ </h6>

　　<h1 align="center"> 我的第一个网页！ </h1>

　　<h1 align="right"> 我的第一个网页！ </h1 >

　　证明： 这个元素是块元素，发端标志和中断标志都是诉求的。

　　2.2 分段 <p>

　　网页中的分段实足依附于分段元素 <p> 。段落的基础方法为：

　　<p> …… </p> 在欣赏器中的表露功效为跳下一条龙并加一条龙空缺。

　　<p> 不妨有多种属性，比拟常用是 align ＝ left | center |right 。

　　例： <p align＝center > 这是一个段落。 </p>

　　当 html 文献中有图形，图形大概吞噬了窗口的一端，图形的范围大概再有较大的空缺区。这时候， <p> 不妨用 clear 属性来决定图片范围笔墨的盘绕方法。 clear 属性的含意为：

　　left 下一段表露在左边境处空缺的地区

　　right 下一段表露在右边境处空缺的地区

　　all 下一段的安排双方都不许有其余实质

　　证明： <p> …… </p> 中的 </p> 不妨简略

　　2.3 列表list

　　列表用来列发难实，常用的列表有无序列表 ul(unordered list) ，无序列表 ol(ordered list) 和设置列表 dl(definition list)3 种方法。

　　无序列表用 <ul> 发端，每一个列表条件用 <li> 启发，结果是 </ul> ，其基础方法为：

　　<ul>

　　<li>

　　……

　　<li>

　　</ul>

　　列表条件不须要结果标明 </li> 。输入截止为每一列表条件缩进，而且以黑点标示。

　　与无序列表比拟，无序列表 <ol> 不过在输入时列表条件用数字标示。基础方法如次：

　　<ol> 　　<li> 　　……

　　<li> 　　</ol>

　　设置列表 <dl> 用来对列表条件举行简略证明，用 <dl> 发端，列表条件用 <dt> 启发，它的证明用 <dd> 启发，基础方法如次：

　　<dl> 　　<dt> 　　<dd>

　　……

　　</dl>

　　下边咱们用例子来证明无序列表、无序列表和设置列表的输入功效和辨别。

　　类型

　　无序列表

　　无序列表

　　设置列表

　　html 代码

　　<ul>

　　<li> 无序列表

　　<li> 无序列表

　　<li> 设置列表

　　</ul>

　　<ol>

　　<li> 无序列表

　　<li> 无序列表

　　<li> 设置列表

　　</ol>

　　<dl>

　　<dt> ol

　　<dd> 无序列表

　　<dt> ul

　　<dd> 无序列表

　　<dt> dl

　　<dd> 设置列表

　　</dl>

　　表露功效

　　· 无序列表

　　· 无序列表

　　· 设置列表

　　1. 无序列表

　　2. 无序列表

　　3. 设置列表

　　ol

　　无序列表

　　ul

　　无序列表

　　dl

　　设置列表

　　证明： 列表标志是块元素，个中 <ul> 、 <ol> 和 <dl> 诉求发端标志和中断标志都有， <li>,<dt> 和 <dd> 不妨没有中断标志。

　　用户不妨用 type 序性窜改条手段标志。对于无序列表， type ＝ disc | circle | square ，（ disc 实心圆点　 cirde 圈子 square 实心方点），缺省值为 type ＝ disc 。无序列表 type=a | a | i | i | 1 （ a, 小写假名； a, 小写假名； i, 小写罗马数字； i, 小写罗马数字； l, 缺省 , 阿拉伯数字），缺省值为阿拉伯数字。

　　例： html 代码：

　　<ul>

　　<li> 无序列表

　　<li type= "circle" > 无序列表

　　<li type= "square" > 设置列表

　　</ul>

　　<ol>

　　<li> 无序列表

　　<li type= "i" value= "1" > 无序列表

　　<li type= "a" value= "1" > 无序列表

　　<li type= "a" value= "1" > 无序列表

　　<li type= "i" value= "1" > 无序列表

　　</ol>

　　表露功效：

　　· 无序列表

　　o 无序列表

　　§ 设置列表

　　1. 无序列表

　　i. 无序列表

　　a. 无序列表

　　a. 无序列表

　　i. 无序列表

　　缺省情景下无序列表的条件数字是从 1 发端的，咱们不妨用 value 属性窜改条件开始号。

　　例：

　　<ol>

　　<li value= "3" type= "i" > 无序列表 </li>

　　<li> 无序列表 </li>

　　<li> 设置列表 </li>

　　</ol>

　　表露功效：

　　iii. 无序列表

　　iv. 无序列表

　　v. 设置列表

　　证明： 百般列表不妨彼此嵌套，每一个列表条件都不妨是一个独立的列表。

　　2.4 横向标尺<hr>

　　常常咱们会看到网页顶用一条横线来划分左右两段的实质，画出这一横向标尺的最大略的本领即是运用 hr 标志。该元素的基础方法是：

　　<hr>…</hr>

　　个中 </hr> 不妨简略。

　　咱们不妨运用 hr 的多个属性对其加以化装：

　　align=left | center | right 对齐属性，设置了横向标尺的场所，默许值为 center ；

　　color 设置横向标尺的脸色；

　　size=n 树立 <hr> 元素的莫大，单元是相素；

　　width=n 规则元素初始宽窄，不妨是像素大概百分数。

　　例： <hr width= "50%" size= "3" color= "#000080" noshade align= "left" >

　　表露功效如次：

　　2.5居中<center>

　　很多元素都有对齐办法属性，如 <hn> 、 <p> 等，但那些元素的对齐属性只对本标志内的文书档案控制，即使想要让所有网页大概网页中的大块文书档案居中，不妨径直用居中标明 <center>…< ／ center> 。

　　例：

　　<center>

　　<h1> 从 html 谈话到网上故乡 </h1>

　　<p> 我的第一个网页 </p>

　　</center>

　　表露功效：

从 html 谈话到网上故乡

我的第一个网页

　　证明： <center> 是块标志，所以发端标志和中断标志都须要。该元素的效率与 <div align=center> 同等。

　　2.6 div

　　div 元素用来表白一个文书档案中各别典型的元素，比方章、节、文章摘要和附录等。基础方法为 <div>…</div> ，其最常用的属性是 align 属性。该元素的中断标志 </div > 不行缺乏。

　　2.7剧本<script>

　　要想创造充分多彩、功效宏大的网页，仅凭 html 谈话是远远不够的，往交易须要嵌入少许用其它谈话编写的剧本， <script> 的效率即是为页面指定一个教本，并由剧本引擎证明为 html 谈话。常用方法为：

　　<script language= 剧本谈话称呼 > 剧本代码 </script>

　　language 属性规则暂时剧本编写运用的谈话，或挪用相映剧本引擎的谈话。常用的剧本谈话有 javascript ， jscript ， vbscript ， vbs ，默许值是 javascript 。

　　证明： 包括在 script 块中的剧本代码在网页翻开时登时实行。该元素是块元素，发端标志和中断标志必需成对展示。