html文件的基本结构

DreamweaverCS3很酷的网页设计CSS 1.1 HTML文件的基本结构HTML的全英文名称是Hyper Text Markup Language，它是网页的超文本标记语言的缩写，是在Internet上编写网页的主要语言. . HTML中用作标记的每个符号都可以视为命令，它告诉浏览器如何显示文件内容. 1.1.1 HTML文件结构完整的HTML文件由各种嵌入式对象组成，例如标题，段落，表和文本. 这些对象统称为元素. HTML使用标记来分隔和描述这些元素. 实际上，整个HTML文件都是由元素和标签组成的. 以下是HTML文件的基本结构. 文件开始标签文件标签结束标签文件正文开始标签„„文件正文标签的内容文件正文标签结束文件结束标签如上图所示，HTML代码分为3部分，每个部分的含义如下. “: 告诉浏览器HTML文件的开始和结束位置，包括: HTML文件标题标签，您可以在其中放置页面标题以及文件信息和其他内容，通常这两个标签之间的内容统称为HTML标头. ”用于指定文档的主体区域. 要在网页上显示的内容位于该标记中，并且结束标记指示主体区域的结束.

1.1.2使用记事本手动编写HTML页面编写HTML文件的方法有两种，一种是使用记事本，另一种是在可视网页创建软件（例如Dreamweaver）中进行编写，下面分别介绍. HTML是一种基于文本的语言，不需要任何特殊的开发环境. 它可以直接在Windows附带的记事本中编写. HTML文档的扩展名为.html. 将HTML源代码输入到记事本中并保存. 您可以在浏览器中打开文档以查看其效果. 使用记事本手动编写HTML页面的具体步骤如下. （1）在Windows系统下，执行“开始”，“所有程序”，“附件”和“记事本”命令，创建一个新的记事本，并在记事本中输入代码，如图1-1所示. （2）写好HTML文件后，执行“文件”“保存”命令，弹出“另存为”对话框，在Dreamweaver + CSS对话框中选择保存路径，在“文件名”下拉菜单中输入index下拉列表框“ .htm”，文件扩展名为“ .htm”或“ .html”，如图1-2所示. 图1-1输入代码图1-2“另存为”对话框（3）单击“保存”按钮，文本文件将成为HTML文件，在浏览器中的浏览效果如图1-3所示. . 1.1.3使用Dreamweaver编写HTML页面Dreamweaver被称为“所见即所得”网页创建工具.

这使用户无需任何HTML语言基础即可制作网页. 使用Dreamweaver编写HTML页面的具体步骤如下. （1）启动Dreamweaver CS3，执行“文件”“新建”命令，弹出“新建文档”对话框，在对话框中选择“空白页” HTML“无”选项，如图1-4所示. 图1-3浏览效果图1-4“新建文档”对话框（2）单击“创建”按钮创建一个新的Web文档，并在“标题”文本框中输入“ Company Profile”html页面的基本结构，如图所示. 1-5. （3）执行“修改”“页面属性”命令，弹出“页面属性”对话框，在对话框“左页边距”中，Dreamweaver CS3酷网页设计CSS“上边距”，“下边距”和“右边”距离设置为0，如图1-6所示. 单击“确定”按钮设置页面属性. 图1-5新建文档图1-6“页面属性”对话框（4）将光标放在页面上，执行“插入记录”“表”命令，“弹出“表格”. 在对话框中，将“行数”设置为2，将“列数”设置为1，将“表宽度”设置为“ 776像素”，如图1-7所示. （5）单击“确定”按钮以插入表格. 该表标记为“表1”，“对齐”设置为“中心对齐”，如图1-8所示.

图1-7“表格”对话框图1-8插入表格（6）将光标放在表格第1行的单元格中，然后插入1行13列的表格. 该表被标记为“表2”，如图1-9所示. （7）将光标放在表1的右侧，并插入一个两列的表. 该表被标记为“表3”，并且“对齐”设置为“中心对齐”，如图1-10所示. （8）将光标置于表的第1行的单元格中，执行“插入记录”和“媒体” Flash命令，并弹出“选择文件”对话框. 在对话框中，选择banner.swf选项，如图1-11所示. （9）单击“确定”按钮以插入Flash，如图1-12所示. Dreamweaver + CSS简介图1-9插入表图1-10插入表图1-11“选择文件”对话框图1-12插入Flash（10）将光标放在表2的相应单元格中，然后输入相应的文本，如图1-13所示. （11）选择插入的文本，打开“属性”面板，在面板中将“大小”设置为13px，将“文本颜色”设置为#FFFFFF，如图1-14所示. 图1-13插入文本图1-14设置文本属性（12）将光标放在表格行单元格中，输入相应的文本，然后在“属性”中将“大小”设置为13px，将“文本颜色”设置为面板是#666666，如图1-15所示.

Dreamweaver CS3酷网页设计CSS图1-15输入文本（13）将光标放在表格的行单元格中，打开“属性”面板，单击面板中“背景”文本框右侧的按钮，弹出“选择图像源文件”对话框如图1-16所示. （14）在对话框中选择相应的背景图像，然后单击“确定”按钮以插入背景图像，如图1-17所示. 图1-16“选择图像源文件”对话框图1-17插入背景图像（15）将光标放在表的相应单元格中，执行“插入记录”“图像”命令，然后执行“选择图像源”将在“文件”对话框中弹出框架，插入图像images / 018.gif，如图1-18所示. （16）将光标放在表格的第3行单元格中，然后插入图像images / 013.gif，如图1-19所示. （17）将光标放置在表的三行中的相应位置，插入图像images / sds.jpg，然后将“ Alignment”设置为“ Right Alignment”，如图1-20所示. （18）执行“文件”“保存”命令，弹出“另存为”对话框，在对话框中选择保存位置，在“文件名”文本框中输入index.htm，如图1所示. -21. （19）单击“保存”按钮保存文档，然后按F12在浏览器中预览效果，如图1-22所示.

Dreamweaver + CSS简介图1-18插入图像图1-19插入图像图1-20插入图像图1-21“另存为”对话框图1-22效果图Dreamweaver CS3酷的Web设计CSS 1.2XHTML入门XHTML是可扩展超文本标记语言的缩写. 它由国际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 1.0，只要遵循一些简单的规则，就可以设计适用于XML系统和大多数最新HTML浏览器的页面. 首先来看最简单的XHTML页面结构，代码如下. 这是文本文件. 此代码包含XHTML页面必须具有的页面结构. 其具体结构如下. 1.文档类型声明部分文档类型声明部分由元素定义. 在前两行代码中，此部分不会显示在浏览器中. 相应的页面代码如下. 2.元素和名称空间元素是XHTML文档中必须使用的元素. 所有文档内容（包括文档标题内容和文档主要Dreamweaver + CSS简介正文内容）都必须包含在元素中. 标签指示HTML代码的开始，文件的结束标签为. 名称空间是元素的属性，写在元素的开始标记中. 页面中的相应代码如下. 3.网页标题元素网页标题元素4. 页面标题元素页面标题元素用于定义页面标题. 和标记之间的文本是HTML文件的标题信息，该信息显示在浏览器的标题栏中.

对应的页面代码如下. 最简单的XHTML文档5. 页面正文元素页面正文元素用于定义要在页面上显示的内容. 页面的信息主要通过页面的主体传输. 元素可以包含所有页面元素. 和标记之间的文本内容是主要显示在HTML文档中并显示在浏览器中的信息. 相应的页面代码如下. 这是主要的文本文件. 在定义了以上元素之后，它构成了一个完整的XHTML页面. 此时在浏览器中显示的效果如图1-23所示. 图1-23简单的XHTML页面显示效果Dreamweaver CS3 Cool Web Design CSS 101.3网站和Web Standard Web标准是网站标准. 目前，常用的Web标准一般是指基于XHTML语言的网站设计语言进行网站建设. Web标准中的典型应用程序模式是CSS + DIV. 实际上，Web标准不是单个标准，而是标准的集合. 1.3.1什么是网络标准？ Web标准是W3C和其他标准化组织制定的一组规范. Web标准的目的是为Web表示层创建统一的技术标准，以便可以通过不同的浏览器或终端设备进行传递. 向最终用户显示信息内容. 该网页主要由三个部分组成: 结构，表示和行为.

相应的网站标准也分为三个方面: 结构化标准语言，主要包括XHTML和XML；表达标准语言，主要包括CSS；行为标准，主要包括对象模型（例如W3C DOM），ECMAScript1. 结构结构对网页使用的信息进行分类和排序. 结构中使用的技术主要包括HTML，XML XHTML. 2. Presentation Presentation用于控制信息的格式，颜色和大小. 演示文稿中使用的技术主要是CSS级联3. 行为行为是指文档内部模型的定义以及交互行为的编写. 它用于编写交互式文档. 该行为中使用的技术主要包括DOM和ECMAScript. DOM（DocumentObject Model）文档对象模型DOM是浏览器和内容结构之间的通信接口，允许用户访问页面上的标准组件. ECMAScript脚本语言ECMAScript是一种标准脚本语言，用于实现特定接口对象的交互操作. 1.3.2为什么要建立Web标准？大多数人都有深刻的经验. 升级主流浏览器版本后，新建立的网站可能会过时，因此您需要升级或重新设计网站. Web标准技术用于创建网页，可以有效地实现对页面布局，字体，颜色，背景和其他效果的更精确控制.

只需对相应的代码进行一些简单的修改，就可以更改网页的外观和格式. 简而言之，网站标准的目的是: 使网站易于使用，适应更多不同的用户和更多的网络设备； 11 Dreamweaver + CSS入门更新浏览器版本或出现新的网络交互式设备时，请确保所有应用程序可以继续正确执行. 对于网站设计师和开发人员，遵循网站标准正在使用标准；对于网站用户而言，网站标准是最好的体验. 对网站访问者的好处: 内容可以通过各种设备（包括屏幕阅读器，手持设备，搜索机器人，打印机，冰箱等）进行访问；所有页面都可以提供可打印的版本. 对网站设计师的好处: 提高网站的可用性. 在美国，有严格的法律条款规定政府网站必须实现一定的易用性，而其他国家/地区也有类似的要求. 1.3.3如何改善现有网站大多数设计师仍然使用传统的表格布局，性能和结构来创建网站. 学习使用XHTML + CSS的方法需要一个过程，并且不可能一步一步地使现有网站符合网站标准. 最好的方法是循序渐进，逐步达到逐步完全符合网站标准的目标. 1.主要改进将正确的DOCTYPE添加到页面. DOCTYPE是文档类型的缩写. 用于解释XHTML或HTML的版本.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-251795-1.html