HTML文件的基本结构.docx
《HTML文件的基本结构.docx》由会员分享,可在线阅读,更多相关《HTML文件的基本结构.docx(19页珍藏版)》请在冰豆网上搜索。
HTML文件的基本结构
HTML文件的基本结构
HTML的英文全称是HyperTextMarkupLanguage,它是网页超文本标记语言的缩写,是Internet上用于编写网页的主要语言。
HTML中每个用来作为标记的符号都可以看作是一条命令,它告诉浏览器应该如何显示文件的内容。
HTML文件结构
一个完整的HTML文件由标题、段落、表格和文本等各种嵌入的对象组成,这些对象统称为元素,HTML使用标记来分隔并描述这些元素。
实际上整个HTML文件就是由元素与标记组成的。
下面是一个HTML文件的基本结构。
文件开始标记
文件头开始的标记
……文件头的内容
文件头结束的标记
文件主体开始的标记
……文件主体的内容
文件主体结束的标记
文件结束标记
从上面的代码可以看出,HTML代码分为3部分,其中各部分含义如下。
…:
告诉浏览器HTML文件开始和结束的位置,其中包括
和标记。
HTML文档中所有的内容都应该在这两个标记之间,一个HTML文档总是以开始,以结束。
…:
HTML文件的头部标记,在其中可以放置页面的标题以及文件信息等内容,通常将这两个标签之间的内容统称为HTML的头部。
…:
用来指明文档的主体区域,网页所要显示的内容都放在这个标记内,其结束标记指明主体区域的结束。
使用记事本手工编写HTML页面
编写HTML文件有两种方法,一种是利用记事本编写,另一种是在可视化网页制作软件中编写,如Dreamweaver,下面分别进行讲述。
HTML是一个以文字为基础的语言,并不需要什么特殊的开发环境,可以直接在Windows自带的记事本中编写。
HTML文档以.html为扩展名,将HTML源代码输入记事本并保存,可以在浏览器中打开文档以查看其效果。
使用记事本手工编写HTML页面的具体操作步骤如下。
(1)在Windows系统下,执行“开始”→“所有程序”→“附件”→“记事本”命令,新建一个记事本,在记事本中输入代码,如图1-1所示。
(2)编写完HTML文件后,执行“文件”→“保存”命令,弹出“另存为”对话框,在对话框中选择保存的路径,在“文件名”下拉列表框中输入,文件的扩展名为.htm或.html,如图1-2所示。
图1-1输入代码图1-2“另存为”对话框
(3)单击“保存”按钮,这时该文本文件就变成了HTML文件,在浏览器中浏览效果如图1-3所示。
使用Dreamweaver编写HTML页面
Dreamweaver被称为“所见即所得”的网页制作工具。
这使得用户在没有任何HTML语言基础的情况下,照样可以制作网页。
使用Dreamweaver编写HTML页面的具体操作步骤如下。
(1)启动DreamweaverCS3,执行“文件”→“新建”命令,弹出“新建文档”对话框,在对话框中选择“空白页”→HTML→“无”选项,如图1-4所示。
图1-3浏览效果图1-4“新建文档”对话框
(2)单击“创建”按钮,新建网页文档,在“标题”文本框中输入“公司简介”,如图1-5所示。
(3)执行“修改”→“页面属性”命令,弹出“页面属性”对话框,在对话框中将“左边距”、“上边距”、“下边距”和“右边距”分别设置为0,如图1-6所示。
单击“确定”按钮,设置页面属性。
图1-5新建文档图1-6“页面属性”对话框
(4)将光标放在页面中,执行“插入记录”→“表格”命令,弹出“表格”对话框,在对话框中将“行数”设置为2,“列数”设置为1,“表格宽度”设置为“776像素”,如图1-7所示。
(5)单击“确定”按钮,插入表格,此表格记为“表格1”,将“对齐”设置为“居中对齐”,如图1-8所示。
图1-7“表格”对话框图1-8插入表格
(6)将光标置于表格1的第2行单元格中,插入1行13列的表格,此表格记为“表格2”,如图1-9所示。
(7)将光标置于表格1的右边,插入2行1列的表格,此表格记为“表格3”,将“对齐”设置为“居中对齐”,如图1-10所示。
(8)将光标置于表格1的第1行单元格中,执行“插入记录”→“媒体”→Flash命令,弹出“选择文件”对话框,在对话框中选择选项,如图1-11所示。
(9)单击“确定”按钮,插入Flash,如图1-12所示。
图1-9插入表格图1-10插入表格
图1-11“选择文件”对话框图1-12插入Flash
(10)将光标置于表格2相应的单元格中,输入相应的文本,如图1-13所示。
(11)选中插入的文本,打开“属性”面板,在面板中将“大小”设置为13px,“文本颜色”设置为#FFFFFF,如图1-14所示。
图1-13插入文本图1-14设置文本属性
(12)将光标置于表格3的第2行单元格中,输入相应的文本,在“属性”面板中将“大小”设置为13px,“文本颜色”设置为#666666,如图1-15所示。
图1-15输入文本
(13)将光标置于表格1的第2行单元格中,打开“属性”面板,在面板中单击“背景”文本框右边的
按钮,弹出“选择图像源文件”对话框,如图1-16所示。
(14)在对话框中选择相应的背景图像,单击“确定”按钮,插入背景图像,如图1-17所示。
图1-16“选择图像源文件”对话框图1-17插入背景图像
(15)将光标置于表格2相应的单元格中,执行“插入记录”→“图像”命令,弹出“选择图像源文件”对话框,插入图像images/,如图1-18所示。
(16)将光标置于表格3的第1行单元格中,插入图像images/,如图1-19所示。
(17)将光标置于表格3第2行单元格相应的位置,插入图像images/,将“对齐”设置为“右对齐”,如图1-20所示。
(18)执行“文件”→“保存”命令,弹出“另存为”对话框,在对话框中选择保存的位置,在“文件名”文本框中输入,如图1-21所示。
(19)单击“保存”按钮,保存文档,按F12键在浏览器中预览效果,如图1-22所示。
图1-18插入图像图1-19插入图像
图1-20插入图像
图1-21“另存为”对话框图1-22效果图
XHTML入门
XHTML是ExtensibleHyperTextMarkupLanguage的缩写。
它是由国际W3C组织制定并公布发行的。
XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。
HTML语言中只有有限的创建要素,因此无法处理非常规的内容,同时HTML不能很好地支持不断更新的显示媒体,如手机等。
而XHTML是XML的一种应用,因此所有XML的处理器都可以处理XHTML的文档,使语言具有了可扩展性。
使用XHTML具有以下优点。
XHTML提倡使用更加简洁和规范的代码,使得代码的阅读和处理更方便,同时也便于搜索引擎的检索。
XHTML文档在旧的基于HTML的浏览器中能够表现得和在新的基于XHTML的浏览器中一样出色。
XHTML是可扩展的语言,能够包含其他文档类型,既能够利用HTML的文档对象模块(DOM),又能利用XML的文档对象模块。
所以XHTML可以支持更多的显示设备。
在XHTML中,推荐使用CSS样式定义页面的外观。
XHTML分离了页面的结构和表现,方便利用数据和更换外观。
XML是Web发展的趋势,具有更好的向后兼容性。
使用XHTML只要遵守一些简单规则,就可以设计出既适合XML系统,又适合当前大部分HTML浏览器的页面。
首先看一个最简单的XHTML页面结构,其代码如下。
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTMLTransitional//EN"
"">
最简单的XHTML文档这里是正文文档
这段代码,包含了一个XHTML页面必需具有的页面结构。
其具体结构如下。
1.文档类型声明部分
文档类型声明部分由
DOCTYPE>元素定义,在代码的前两行,这部分在浏览器中不会显示。
其对应的页面代码如下。
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTMLTransitional//EN"
"">
2.元素和名字空间
元素是XHTML文档中必须使用的元素,所有的文档内容(包括文档头部内容和文档主体内容)都要包含在元素之中。
标签表示HTML代码的开始,文件的结束标签是。
名字空间是元素的一个属性,写在元素起始标签里。
其在页面中的相应代码如下。
3.网页头部元素
网页头部元素
也是XHTML文档中必须使用的元素。
其作用是定义页面头部的信息,其中可以包含标题元素、元素等,它不会显示在浏览器内。
网页头部元素对应的页面代码如下。
最简单的XHTML文档4.页面标题元素
页面标题元素
用来定义页面的标题。在
和标签之间的文字内容是HTML文档的标题信息,出现在浏览器的标题栏。其对应的页面代码如下。
最简单的XHTML文档5.页面主体元素
页面主体元素
用来定义页面所要显示的内容。
页面的信息主要通过页面主体来传递。
元素可以包含所有页面元素。
在
和标签之间的文字内容是HTML文档主要显示的信息,出现在浏览器中。
其对应的页面代码如下。
这里是正文文档
定义了以上几个元素后,便构成了一个完整的XHTML页面。
此时在浏览器中呈现的效果如图1-23所示。
图1-23简单的XHTML页面显示效果
网站与Web标准
Web标准,即网站标准。
目前通常所说的Web标准一般指网站建设采用基于XHTML语言的网站设计语言,Web标准中典型的应用模式是CSS+DIV。
实际上,Web标准并不是某一个标准,而是一系列标准的集合。
什么是Web标准
Web标准是由W3C和其他标准化组织制定的一套规范集合,Web标准的目的在于创建一个统一的用于Web表现层的技术标准,以便于通过不同浏览器或终端设备向最终用户展示信息内容。
网页主要由三部分组成:
结构(Structure)、表现(Presentation)和行为(Behavior)。
对应的网站标准也分三方面:
结构化标准语言,主要包括XHTML和XML;表现标准语言,主要包括CSS;行为标准,主要包括对象模型(如W3CDOM)、ECMAScript等。
1.结构
结构对网页用到的信息进行分类与整理。
在结构中用到的技术主要包括HTML、XML和XHTML。
2.表现
表现用于对信息进行版式、颜色、大小等形式控制。
在表现中用到的技术主要是CSS层叠样式表。
3.行为
行为是指文档内部的模型定义及交互行为的编写,用于编写交互式的文档。
在行为中用到的技术主要包括DOM和ECMAScript。
DOM(DocumentObjectModel)文档对象模型
DOM是浏览器与内容结构之间的沟通接口,使用户可以访问页面上的标准组件。
ECMAScript脚本语言
ECMAScript是标准脚本语言,用于实现具体界面对象的交互操作。
为什么要建立Web标准
大部分人都有深刻体验,每当主流浏览器版本升级时,刚建立的网站就可能变得过时,则需要升级或者重新设计网站。
在网页制作时采用Web标准技术,可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。
只要对相应的代码做一些简单的修改,就可以改变网页的外观和格式。
简单说,网站标准的目的就是:
提供最多利益给最多的网站用户;
确保任何网站文档都能够长期有效;
简化代码、降低建设成本;
让网站更容易使用,能适应更多不同用户和更多网络设备;
当浏览器版本更新,或者出现新的网络交互设备时,确保所有应用能够继续正确执行。
对于网站设计和开发人员来说,遵循网站标准就是使用标准;对于网站用户来说,网站标准就是最佳体验。
对网站浏览者的好处:
文件下载与页面显示速度更快;
内容能被更多的用户所访问(包括失明、视弱、色盲等残障人士);
内容能被更广泛的设备所访问(包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等);
用户能够通过样式选择定制自己的表现界面;
所有页面都能提供适于打印的版本。
对网站设计者的好处:
更少的代码和组件,容易维护;
带宽要求降低,代码更简洁,成本降低;
更容易被搜寻引擎搜索到;
改版方便,不需要变动页面内容;
提供打印版本而不需要复制内容;
提高网站易用性。
在美国,有严格的法律条款来约束政府网站必须达到一定的易用性,其他国家也有类似的要求。
怎样改善现有网站
大部分的设计师依旧采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。
学习使用XHTML+CSS的方法需要一个过程,使现有网站符合网站标准也不可能一步到位。
最好的方法是循序渐进,分阶段来逐步达到完全符合网站标准的目标。
1.初级改善
为页面添加正确的DOCTYPE
DOCTYPE是documenttype的简写。
用来说明XHTML或者HTML是什么版本。
浏览器根据DOCTYPE定义的DTD(文档类型定义)来解释页面代码。
设定一个名字空间
直接在DOCTYPE声明后面添加如下代码:
声明编码语言
为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使用的编码语言,代码如下:
这里声明的编码语言是简体中文GB2312。
用小写字母书写所有的标签
XML对大小写是敏感的,所以,XHTML也是大小写有区别的。
所有XHTML元素和属性的名字都必须使用小写。
否则文档将被W3C校验认为是无效的。
例如下面的代码是不正确的:
公司简介正确的写法是:
公司简介为图片添加alt属性
为所有图片添加alt属性。
alt属性指定了当图片不能显示的时候就显示供替换文本,这样做对正常用户可有可无,但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。
只有添加了alt属性,代码才会被W3C正确校验通过。
如下所示代码:
给所有属性值加引号
在HTML中,可以不需要给属性值加引号,但是在XHTML中,属性值必须被加引号。
例height="100"是正确的,而height=100就是错误的。
关闭所有的标签
在XHTML中,每一个打开的标签都必须关闭,如下所示:
每一个打开的标签都必须关闭。
HTML可以接受不关闭的标签,XHTML就不可以。
这个规则可以避免HTML的混乱和麻烦。
2.中级改善
接下来的改善主要在结构和表现相分离上,这一步不像初级改善那么容易实现,需要观念上的转变,以及对CSS技术的学习和运用。
用CSS定义元素外观
应该使用CSS来确定元素的外观。
用结构化元素代替无意义的元素
许多人可能从来都不知道HTML和XHTML元素设计的本意是用来表达结构的。
很多人已经习惯用元素来控制表现,而不是结构。
例如下面的代码:
北京
上海
广州
就没有如下的代码好:
给每个表格和表单加上ID
给表格或表单赋予一个唯一的、结构的标记,例如:
为什么要在网页中加入CSS
CSS是CascadingStyleSheets(层叠样式表)的缩写,它可以与HTML或XHTML超文本标记语言配合来定义网页的外观。
什么是CSS
当熟练掌握了Dreamweaver的基本功能后,可能会发现制作的网页有些问题,例如文字不能添加在图片上,段落之间不能设置行距。
有时即使懂得一些HTML标记,但是还不能随意改变网页元素的外观,无法随心所欲地编排网页。
因此W3C协会颁布了一套CSS语法,用来扩展HTML语法的功能。
CSS是网页设计的一个突破,它解决了网页界面排版的难题。
可以说,HTML的标记主要是定义网页的内容(Content),而CSS决定这些网页内容如何显示(Layout)。
网页设计通常需要统一网页的整体风格,统一的风格大部分涉及网页文字属性、网页背景色以及链接文字属性等,如果应用CSS来控制这些属性,会大大提高网页设计速度,更加统一网页总体效果。
例如图1-24和图1-25所示的网页分别为使用CSS前后的效果。
图1-24使用CSS前图1-25使用CSS后
如何编写CSS
CSS的语句是内嵌在HTML文档内的。
所以,编写CSS的方法和编写HTML文档的方法是一样的。
可以用任何一种文本编辑工具来编写CSS。
如Windows的记事本和写字板、专门的HTML编辑工具(FrontPage、Dreamweaver等),都可以用来编辑CSS文档。
要在Dreamweaver中添加CSS语法,先在Dreamweaver的主界面中,将编辑界面切换成“拆分”视图,使用“拆分”视图能同时查看代码和设计效果。
编辑语法在“代码”视图中进行,如图1-26所示。
图1-26在Dreamweaver中编写CSS