HTML超文标记语言概述构成网页的基本元素

网页

  2.1题目(TITLE)

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

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

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

<title> 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.

时间: 2025-01-03 13:15:31

HTML超文标记语言概述构成网页的基本元素的相关文章

Html超文标记语言简明导引

总类(所有HTML文件都有的) 文件类型 <HTML></HTML> (放在档案的开头与结尾) 文件主题 <TITLE></TITLE> (必须放在「文头」区块内) 文头 <HEAD></HEAD> (描述性资料,像是「主题」) 文体 <BODY></BODY> (文件本体) --------------------------------------------------------------------

超文本标记语言--Html

        高端大气上档次的网页,低调奢华有内涵的界面,都是由静态网页和一些动态效果,插入的视频,和flash等组成,不得不说,静态网页的制作,是学习网页的必经之路,可见静态网页在学习网页的前端是十分重要.静态网页主要是通过html制作.简单来说html是一种超文本标记语言,静态网页也是由,html的标记和标记中的属性,体现出来,打开你喜爱的网络浏览器,在浏览器的地址输入框内敲入相关网址,进入Active Server Pages的网点(你的计算机应该已连上了Internet).当在屏幕上显

《HTML5实战》——第1章 HTML5:从文档到应用的转变1.1 探索标记语言:HTML5速览

第1章 HTML5:从文档到应用的转变 本章主要内容 HTML5的基本知识 新语义标记及媒体特性 新的JavaScript API 紧密相关的Web规范 HTML5是现在Web开发的最热门主题之一,这是有充分理由的.这不仅因为它是最新的Web标记语言,还因为它制定了Web应用开发的一整套新标准.上一个版本的HTML语言(以及它那以严格著称的基于XML的兄弟:XHTML)主要把HTML限定为一种用于页面文档的标记性语言.HTML5则是第一个将Web作为应用开发平台的HTML语言. HTML5定义了

无线标记语言(WML)基础之WML编程方法

编程 元素和标签是WML的主要语法,它们决定了WML编程的基本原则.本章我们将从WML的元素.标签.属性等方面详细讲解WML的编程方法.学习本章知识之前,读者应当了解WML元素与标签的区别.WML的元素通常有一个首标签.内容.其它元素及一个尾标签组成.也就说,单独的标签是一个元素,成对出现的标签与其包含的内容也构成一个元素.由于元素牵涉及标签,标签又涉及属性. 3.1 卡片.卡片组及其属性 我们前面介绍了WML的卡片与卡片组,主要从概念和相互关系的角度进行了分析.我们这里则从卡片.卡片组的组成.

无线标记语言(WML)基础之WML程序结构

程序 上一节我们降解了一个简单的WML程序,具有HTML编程的读者可以看出,WML程序在结构上形式上与html程序有很多相似之处.下面我们就根据一个实例来分析一下WML程序的结构及组成. 1.WML的元素和标签 分析实例之前,我们有必要对WML的元素和标签予以简单说明.与HTML类似,WML的主要语法也是元素和标签.元素是符合DTD(文档类似定义)的文档组成部分,如title(文档标题).IMG(图像).table(表格)等等,元素名不区分大小写.WML使用标签来规定元素的属性和它在文档中的位置

《OpenGL编程指南(原书第9版)》——2.3 OpenGL着色语言概述

2.3 OpenGL着色语言概述 本节将会对OpenGL中着色语言的使用进行一个概述.GLSL具备了C++和Java的很多特性,它也被OpenGL所有阶段中使用的着色器所支持,尽管不同类型的着色器也会有一些专属特性.我们首先介绍GLSL的需求.类型,以及其他所有着色阶段所共有的语言特性,然后对每种类型的着色器中的专属特性进行讨论.2.3.1 使用GLSL构建着色器 我们将在这里介绍如何创建一个完整的着色器. 从这里出发 一个着色器程序和一个C程序类似,都是从main()函数开始执行的.每个GLS

WP8 和 Win8 应用程序开发布局的XAML标记语言实例教程

XAML提供了一种便于扩展和定位的语法来定义和程序逻辑分离的用户界面,而这种实现方式和ASP.NET中的"代码后置"模型非常类似.XAML是一种解析性的语言,尽管它也可以被编译.它的优点是简化编程式上的用户创建过程,应用时要添加代码等. XAML 示例 下面是创建按钮的简单 XAML 示例. XAML <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"&

大总结一:由“四则运算”到“可扩展标记语言”到“SQL”

现代信息时代,到处都是信息化,数字化.有的信息是天生的数字的,比如个数,1,2,3,4等:有些信息本身是非数字化的,比如声音,因此就有了"A/D"转换,将模拟信息数字化. 以前知道XML,最近做网页用到了.同学说,现在JSON很流行,于是在网上看了看网上的讲解,其实还是大同小异啊. 自从大学开始接触电脑,现在已经学了快5年了.也算是个小码农,由于最近看了JSON,总结总结那些见过的用过的"可扩展标记语言"进展. 1.((1+2)*(8/4)+(3*7)-21) 没错

无线标记语言(WML)基础之编写WML文件

无限标记语言WML(Wireless Markup Language)是一种基于扩展标记语言XML(Extension Markup Language)的语言,是XML的子集.它可以显示各种文字.图像等数据,是由WAP论坛(http://www.wapforum.org)提出并专为无线设备用户提供交互界面而设计的,目前版本为1.1版.这些无线设备包括移动电话,呼机和个人数字助理PDA(Personal Digital Assistants)等. 1.WML与WAP设备 为了更好的了解和使用WML