基于Web标准的网页设计与制作

中国高等院校计算机基础教育课程体系规划教材唐四薪编著清华大学出版社2009年11月《基于Web标准的网页设计》配套网站：第〇讲网页设计艺术唐四薪网页设计的基本问题从艺术的角度看网页设计属于平面设计的问题布局的问题（三种布局方式）配色的问题从技术的角度看运用html，css等解决网页布局和美观的问题所以网页设计中很多技术问题都是为了使网页看起来美观网页的布局网页版面布局的方法框架布局将浏览器窗口分割成几部分，每部分放一个不同的网页（示例）表格布局将网页元素装填入表格内实现布局，表格相当于网页的骨架，因此表格布局的步骤是先画表格，再往表格里填内容。DIV＋CSS布局用盒子布局，利用网页元素本身的盒子模型，通过盒子在页面上的排列和嵌套进行布局。

布局的含义网页版面布局是网页设计中的一项重要内容。版面指的是浏览器看到的完整的一个页面。因为每个人的显示器分辨率不同，所以同一个页面的分辨率可能出现800*600像素，1024*768像素等。布局，就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。网页版面布局是指定网页内容在浏览器中的显示方式，例如徽标的位置、导航栏的显示、主要内容的排版等。经常用到的版面布局结构主要有以下几种：常见网页的版式1－3－1式1－2－1式艺术版式1-3-1式示例Logobanner导航条（Navigator)Bottom(版权信息）栏目1栏目2栏目3用表格实现用CSS布局实现表格布局的原则各栏目之间必须相对独立，方法是把每个栏目装在一个单独的表格中，这样修改一个栏目时不会对其他栏目产生影响各栏目之间必须用占位表格(或CSS边界）留出一定的空隙栏目采取纵列的形式排列用CSS布局实现1-3-1布局中间几列的盒子必须用一个大盒子包含起来，否则这几列无法实现居中网页的配色网页的配色网页不只是传递信息的媒介，同时也是网络上的艺术品。如何让浏览者以轻松惬意的心态吸收网页传递的信息，是一个值得研究的课题。任何网页创意使用的视觉元素总的归纳起来不外乎三种：文字、图像、色彩。三者选用搭配的适当，编排组合的合理，将对网页的美化起到直接的效果。色彩的基本知识色彩的RGB模式：RGB是表示红色、绿色、蓝色又称为三原色光，英文为R(Red)、G(Green)、B(Blue)，在电脑中，RGB的所谓“多少”就是指亮度，并使用整数来表示。

通常情况下，RGB各有256级亮度，用数字表示为从0、1、2至255。红、黄、蓝是三原色，其它色彩都可以用这三种颜色调和而成。网页中色彩表达除了用颜色名称表达外，就是用这三种颜色的数值表示：红色color(255,0,0)、十六进制表示为(ff0000)如：“bgcolor=#ffffff”表示背景色为白色色彩的基本知识色彩的HSB模式：

HSB是指颜色分为色相、饱和度、明度三个要素。英文为H(Hue)、S（Saturation）B（Brightness)饱和度高色彩较艳丽。饱和度低色彩就接近灰色。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。一般浅色的饱和度较低，亮度较高，而深色的饱和度高而亮度低。色彩的三要素色相、明度和饱和度构成色彩的三要素。自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其它所有的颜色均属于彩色，任何一种色彩都具有明度、纯度、饱和度三大属性。(1).色相色相指色彩的相貌。如：红、黄、蓝、绿等。(2).明度明度指色彩的明暗程度。(3).饱和度（纯度）纯度指色彩的纯净程度，纯度越高，色相感越强。色相(Hue)（1）色相(Hue)

基本色相为：红、橙、黄、绿、蓝、紫六色。在各色中间加插一两个中间色，按光谱顺序为：红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝绿、蓝、蓝紫、紫、红紫,形成十二基本色相。

色相的计算机数值表示以颜色在色相环上的度数值来表示如红色是0度，橙色是60度，黄色是120度，那么用色相值0表示红色，60表示橙色，因此色相的取值应该是0－360，但计算机中是用八位2进制数表示色相的，所以取值只能是0－240，这样还要把原来的色相值乘以2/3明度(Brightness)（2）明度(Brightness)

明度是色彩的第二属性。是指色彩的明暗程度，也叫亮度，体现体现颜色的深浅。是全部色彩都具有的属性，明度越大，色彩越亮。明度越低，颜色越暗饱和度(Saturation)（3）饱和度(Saturation)也叫纯度，指色彩的鲜艳程度。原色最纯，颜色的混合越多则纯度逐渐减低。如某一鲜亮的颜色，加入了白色或者黑色，使得它的纯度低，颜色趋于柔和、沉稳。

纯度网页例图（4）色彩的特质色彩的特质指的是色彩和色彩组合所能引发的特定情绪反映。我们依靠光来分辨颜色，再利用颜色和无数种色彩的组合来表达思想和情绪。热冷暖凉亮暗艳淡原色也叫"三原色"。即红、黄、蓝三种基本颜色。自然界中的色彩种类繁多，变化丰富，但这三种颜色却是最基本的原色，原色是其他颜色调配不出来的。除白色外，把三原色相互混合，可以调和出其他种颜色。

根据三原色的特性做出相应的色彩搭配，有最迅速最有力最强烈的传达视觉信息效果。

红色网页例图蓝色网页例图间色又叫"二次色"。它是由三原色调配出来的颜色，是由2种原色调配出来的。红与黄调配出橙色；黄与蓝调配出绿色；红与蓝调配出紫色，橙、绿、紫三种颜色又叫"三间色"。在调配时，由于原色在份量多少上有所不同，所以能产生丰富的间色变化

间色是由三原色中的两原色调配而成的，因此在视觉刺激的强度相对三原色来说缓和不少。属于较易搭配之色。

间色尽管是二次色，但仍有很强的视觉冲击力，容易带来轻松、明快、愉悦的气氛。间色配色网页复色也叫"复合色"。复色是由原色与间色相调或由间色与间色相调而成的"三次色"，复色是的纯度最低，含灰色成份。复色包括了除原色和间色以外的所有颜色。复色网页示例复色网页配色说明以上4种颜色中深绿色和赭石色为复色，之所以还选择其它2颜色，为的是更好的配合说明复色的特性，如果没有另外两种非复色搭配，页面配色就可能出现肮脏等不舒服的感觉。复色是由两种间色或原色与间色混合而成，因此色相倾向较微妙、不明显，视觉刺激度缓和，如果搭配不当，页面便呈现易脏或易灰朦朦的效果，沉闷、压抑之感，属于不好搭配之色。但有时复色加深色搭配能很好的表达神秘感、纵深感空间感；明度高的多复色（参看明度的网页例图）多用来表示宁静柔和、细腻的情感，易于长时间的浏览。网页选色的考虑

从以上例子可看出三原色视觉冲击力最强，也最是刺目的，容易制造冲突、烦燥、不舒适的心情，所以是较难掌握的配色，大面积大范围使用要慎重。间色是由三原色中的两色调配二次，间于原色和复色之间，属于中性色，视觉冲击力次之，颜色的刺激缓和不少，给人舒适、愉悦的心情，是较容易掌握的配色，也是在设计中使用得比较多的颜色。复色是由两种间色或原色与间色相混合而产生的颜色，呈灰色阶，视觉冲击力更弱，柔和但是使人沉闷压抑。复色调配好了，能体现出高层次高素养的成熟特性魅力，也称为高级灰，是很经看的颜色。

色彩的4种角色■主色调

页面色彩的主要色调、总趋势，其他配色不能超过该主要色调的视觉影响■辅色调

仅次与主色调的视觉面积的辅助色，是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。■点睛色

在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜明生动。■背景色

衬托环抱整体的色调，协调、支配整体的作用。

网页中色彩的角色示例色彩搭配的方案同类色搭配邻近色搭配互补色搭配对比色搭配同类色比邻近色更加接近的颜色，色环中距离为0－60度的颜色。它主要指在同一色相中不同的颜色变化。例如，红颜色中有紫红、深红、玫瑰红、大红、朱红、桔红等等种类，黄颜色中又有深黄、土黄、中黄、桔黄、淡黄、柠檬黄等等区别。它起到色彩调和统一，又有微妙变化的作用。同类色搭配邻近色

是在色环上任一颜色同其毗邻之色。邻近色也是类似色关系，只是范围扩大了一点。例如红色和黄色，绿色和蓝色，互为邻近色。邻近色搭配补色补色(分离补色）：

色轮上的任意颜色，以及它的补色的两边颜色，当使用在同个版面上的时候被称为“分离补色”。分离补色的运用可以造成很强烈的对比。

补色搭配对比色对比色是指在色环中的直接位置相对的颜色，如果想要使网站中的色彩强烈突出、富有冲击力的话，可以选择对比色搭配。对比色搭配对比色搭配对比色搭配色彩的对比对比与调和就是形式美的变化与统一规律在一定条件下，不同色彩之间的对比会有不同的效果。在不同的环境下，多色彩给人一种印象，色彩单一给人另一种印象。

很多人都以为色彩对比主要是红绿、橙蓝、黄紫色的对比，实际色彩对比范畴不局限于这些。是指各种色彩的界面构成中的面积、形状、位置以及色相、明度、纯度之间的差别，使网页色彩配合增添了许多变化、页面更加丰富多彩。

色相对比是指因色相之间的差别形成的对比。当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力。不同色相对比取得的效果有所不同，两色越接近，对比效果越柔和。越接近补色，对比效果越强烈。色相对比纯度对比是指不同色彩之间纯度的差别而形成的对比。色彩纯度可大致分为高纯度、中纯度、低纯度三种。未经调和过的原色纯度是最高的，而间色多属中纯度的色彩，复色其本身纯度偏低而属低纯度的色彩范围。纯度的对比会使色彩的效果更明确肯定。纯度对比补色对比纯度对比面积对比同一种色彩，面积越大，明度、纯度越强，面积越小，明度、纯度越低。面积大的时候，亮的色显得更轻，暗的色显得更重。这种现象称为色彩的面积效果。面积对比是指页面中各种色彩在面积上多与少、大与小的差别，影响到页面主次关系。面积的对比,可以是中高低明度差的面积变化及中高低纯度差的面积变化。

面积对比色彩调和两种或两种以上的色彩合理搭配，产生统一和谐的效果，称为色彩调和。色彩调和的几种基本方法同种色的调和相同色相、不同明度和纯度的色彩调和。使之产生秩序的渐进，在明度、纯度的变化上，弥补同种色相的单调感

类似色的调和

在色环中,色相越靠近越调和。主要靠类似色之间的共同色来产生作用。对比色的调和

调和方法有：

1、提高或降低对比色的纯度；

2、在对比色之间插入分割色（金、银、黑、白、灰等）；

3、采用双方面积大小不同的处理方法；

4、对比色之间加入相近的类似色。渐变色的调和

渐变色实际是一种调和方法的运用。是颜色按层次逐渐变化的现象。色彩渐变就像两种颜色间的混色，可以有规律地在多种颜色中进行。暗色和亮色之间的渐变会产生远近感和三维的视觉效果。色彩调和的经验

主要是通过面积大小、冷暖对比来表达体现页面的主次关系、中心思想。●颜色平淡可加入适当类似色对比色来使页面产生变化。颜色凌乱可以适当加入同类色或者类似色、白色、黑色、灰色做到统一调配的目的。●对比色的搭配并不是就是说是绝对值的红或者绿，蓝或橙、黄或紫。对比色的第一视觉倾向越明显配色难度就越大，也就是说越难调和；反之，倾向越不明显的对比色越容易调和。请参照刚才对比色调和页面分析例子方法。●不是一种色彩面积用得越多或者越少、纯度、明度越高就是能突出主体的主角色，主要是根据色彩相互之间的搭配关系来体现的。●一个页面中单纯绝对的使用某种颜色或是使用绝对非常多种颜色搭配，容易产生个性效果，那叫玩色彩了，限于色彩运用得非常熟练的朋友，但不推荐初学者使用。网页的色彩搭配颜色分非彩色与彩色两类：非彩色指黑、白、灰，其它为彩色。网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。我们通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。网页的色彩搭配非彩色的搭配黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是中庸色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。网页的色彩搭配颜色分：暖色系、中性系、寒色系不同的颜色会给浏览者不同的心理感受,如：绿色介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。它和金黄，淡白搭配，可以产生优雅，舒适的气氛。每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。

网页色彩的搭配原理1.色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。2.色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。配色的基本技巧技巧1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。2.用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。如用蓝色和黄色,，整个页面色彩丰富但不花稍。3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。网页色彩的搭配忌讳不要将所有颜色都用到，尽量控制在三种色彩以内。背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。边框和背景的颜色应相似，且边框的颜色较深，背景的颜色较浅一些网页配色方案柔和、明亮、温和柔和、洁净、爽朗可爱、快乐、有趣轻快、华丽、动感狂野、充沛、动感华丽、花哨、女性化回味、女性化、优雅高尚、自然、安稳学习网页设计的建议善于观察，发现细微的不同注重细节，追求完美重视网页的源代码，达到知其然，而且知其所以然抓住重点，表格和CSS的灵活运用是重点勤于实践，只有在自己做的过程中才能发现很多书本上没讲到的问题参考书籍LearningWebDesign(3rd)别具光芒－DIVCSS网页布局与美化精通CSS+DIV网页样式与布局精通CSS－高级Web标准解决方案CSS设计彻底研究（温谦）网页设计与配色实例分析（黎芳）中国高等院校计算机基础教育课程体系规划教材唐四薪编著清华大学出版社2009年11月《基于Web标准的网页设计》配套网站：本书目录第一章网页设计概述第二章HTML、XHTML和Web标准第三章HTML标记第四章CSS第五章Fireworks第六章网站开发和网页设计的过程第七章JavaScript第一章网页与网站基础本章要点

网页和网站的关系

Web服务器和浏览器动态网页和静态网页域名与主机的关系

URL的结构internetInternet是由遍布全世界的各种各样的网络通过TCP/IP协议连接成的一个松散结合的全球网，它使网络上的各台计算机（Internet上称为主机，即host）可以互相交换信息。Internet为用户提供了各种各样的服务，如WWW，Email，FTP，即时通信等。GoogleearthWWWWWW的含义是全球信息网（WorldWideWeb），简称为Web或“万维网”。它是一个基于超文本(hypertext)方式的信息查询工具，通过http协议传输超文本信息。是由欧洲核子物理研究中心（CERN）研制的。WWW将位于全世界Internet上不同网址的相关数据信息有机地编织在一起，通过浏览器（browser）提供一种友好的信息查询界面。WWW特点WWW具有三个统一：

1.统一的资源定位方式：URL（统一资源定位器，即网址）。

2.统一的资源访问方式：HTTP（超文本传输协议）。

3.统一的信息组织方式：HTML（超文本标记语言）。网页网页即是超文本，是通过超文本标记语言HTML（HypeTextMarkupLanguage）书写的一种纯文本文件，客户通过浏览器看到的包含了如文字、图像、声音和动画等多媒体信息的每一个页面，其本质是一个纯文本文件。浏览器对该纯文本文件进行了解释，才生成了多姿多彩的网页，除文本外，其它媒体素材（图像、声音、动画和影像等），都需要保存成单独的文件，通过URL嵌入到网页文件中。可以看出，WWW服务主要是通过一个个多媒体网页提供给用户各种信息的HTML超文本标记语言超文本标记语言HTML作为一种语言，它具有语言的一般特征，即它是一种符号系统，具有自己的词汇（符号）和语法（规则）。所谓标记，就是作记号。如我们写文章时通常用大体字标记文章的标题，用换行空两格标记一个段落所谓超文本，就是相比普通文本有超越的地方，如超文本可以通过超链接转到指定的某一页，而普通文本只能一页页翻，超文本还具有图像，视频，声音等元素，并能和用户交互，这些都是普通文本无法达到的HTML的历史超文本标记语言HTML是一种建立超文本/超媒体文档的语言，它用标签标记文档中的文本及图像等各种元素，指示浏览器如何显示这些元素。HTML的发展历程如图所示

GML(1969)SGML(1985)HTML(1993)XML(1998)XHTML(2000)CMLVMLGeneralizedMarkupLanguageStandardGeneralizedMarkupLanguageHyperTextMarkupLanguageeXtensibleMarkupLanguage……HTML与编程语言的区别HTML语言与编程语言有明显不同，首先它不是一种计算机编程语言，而是一种描述文档结构的语言，或者说排版语言；其次HTML是弱语法语言，随便怎么写都可以，计算机尽力去理解执行，不理解的按原样显示，而编程语言是严格语法的语言，写错一点点计算机就不执行，报告错误；再次HTML语言不像大多数编程语言一样需要编译成指令后执行，而是每次由浏览器解释执行。网站一个网站对应磁盘上的一个文件夹，网站的所有网页和其他资源文件都会放在该文件夹下或其子文件夹下，设计良好的网站通常是将网页文档及其它资源分门别类地保存在相应的文件夹中以方便管理和维护。这些网页通过链接组织在一起，其中有个网页称为首页，常命名为index.htm，必须放在网站的根目录下。网页中所需要的图片文件一般单独保存在该目录下一个叫images的文件夹下。网站结构Wgzxwebindex.htmimagesstyle.cssabout.htmlh1.htmh2.htmh3.htm首页文件的直接上级目录，是网站根目录首页文件的间接上级目录，不是网站根目录网站目录的建立因此制作网站的第一步是在硬盘上新建一个文件夹，作为网站根目录，以后把这个目录上传到服务器上就可以了。由于我们制作网站一般需要用到Dreamweaver，所以还要配置网站在Dreamweaver下的开发环境，在Dreamweaver中新建站点，任意取一个站点名，把刚才新建的那个文件夹作为站点文件夹就可以了，这样站点目录内的html文件之间的链接会使用相对Url的形式。示范网站的特点众多的网页确定的主题统一的风格、便捷的导航、栏目的分层

网站制作的流程：确定站点的核心内容－网站的规划－网站外观的设计－网页具体制作－网站性能测试－网站发布－网站更新与维护。网页和网站的制作工具Adobe的DreamweaverCS3Microsoft的ExpressionWebVSWeb服务器和浏览器网页被放置在Web服务器上用户通过Url请求web服务器时，web服务器把相应的网页传送到用户浏览器端Web服务器的作用：对于静态网页，web服务器仅仅是定位到网站对应的目录，找到每次请求的网页传送给客户端。对于动态网页，web服务器找到该网页后要先对动态网页中的服务器端程序代码进行执行，生成静态网页代码再传送给客户端浏览器。Web服务器由于web服务器对静态网页起的只是一个查找和传输的作用，因此我们测试静态网页时可不安装web服务器，直接找到该网站对应的目录双击网页文件预览测试，而测试或运行动态网页则一定要在本机上安装web服务器(如IIS)，因为动态网页要经过web服务器解释执行生成html文档才能被浏览器解释浏览器浏览器：用户浏览网页所用浏览器的本质：解释html代码生成我们看到的网页目前常见的浏览器（按使用量多少排列）有：IE6、IE7、IE8、Firefox3、Safari4、GoogleChrome2、Opera10及NetscapeNavigator9浏览器的logo

IE7&IE8 Firefox3 NetscapeNavigator9Opera10 Safari4 GoogleChrome2静态网页和动态网页静态网页是不包含服务器端代码的html文件，web服务器只是负责把静态网页发送给浏览器，由浏览器解释执行动态网页中含有服务器端代码，需要先由web服务器对这些服务器端代码进行解释执行生成客户端代码后再发送给客户端浏览器动态网页的特征同一个网页根据每次请求的不同，可每次显示不同的内容因为要显示不同的内容，所以往往需要数据库做支持从网页的源代码看，动态网页中含有服务器端代码，后缀名不能是.htm域名、ip和主机域名和主机的关系：多对一即在一台主机上可建立多个网站，这些网站的存放方式称为“虚拟主机”，通过web服务器上设置“主机头”进行区别。域名作用有二，一是将域名发送给DNS服务器解析得到web服务器的IP地址以进行连接，二是将域名信息发送给web服务器，通过域名与web服务器上设置的“主机头”进行匹配确认客户端请求的是哪个网站，若客户端没有发送域名信息给web服务器，例如直接输入ip，则web服务器将打开默认网站。域名的作用1.方便记忆IP地址2.作为主机头信息识别请求的网站URLURL（UniversalResourceLocator）是统一资源定位器的英文缩写，每个站点或站点上的每个文件（网页及所有资源文件）都有一个唯一的地址，浏览器是通过URL来定位目标信息的URL的一般格式为：协议名://主机名[:端口号][/文件夹名/文件名]协议名一般有：http（超文本传输协议，用于传送网页）；ftp（文件传输协议，用于传送文件）Url的举例/web/1/200807/10172331484.html表示信息存放在一台被称为www的服务器上，是一个已被注册的域名。主机名、域名合称为主机头。/web/是服务器网站目录下的一个文件夹，这个一致资源地址将带你到这个文件，10172331484.html是网页的文件名复习题1.Internet上的域名和IP地址是（ ）的关系。A.一对多 B.一对一 C.多对一 D.多对多2.网页的本质是（ ）文件。A.图像 B.纯文本 C.可执行程序 D.图像和文本的压缩3.下列哪项不是动态网页的特点（ ）。A.动态网页可每次显示不同的内容B.动态网页中含有动画 C.动态网页中含有服务器端代码

D.动态网页一般需要数据库做支持

中国高等院校计算机基础教育课程体系规划教材唐四薪编著清华大学出版社2009年11月《基于Web标准的网页设计》配套网站：第二章HTML、XHTML

与Web标准

本章要点HTML文档的基本结构 标记(Tags)和元素(Elements)HTML标记的分类 行内元素和块级元素2.3从HTML到XHTML的转变html存在的问题和web标准XHTML与HTML的区别

(X)HTML文档的基本结构<html>…</html>：告诉浏览器HTML文档开始和结束的位置，其中包括head部分和body部分。HTML文档中所有的内容都应该在这两个标记之间，一个HTML文档总是以<html>开始，以</html>结束。<head>…</head>：HTML文件的头部标记，头部主要提供文档的描述信息，head部分的所有内容都不会显示在浏览器窗口中，在其中可以放置页面的标题以及页面的类型、使用的字符集、链接的其它脚本或样式文件等内容<body>…</body>：用来指明文档的主体区域，网页所要显示的内容都放在这个标记内，其结束标记</body>指明主体区域的结束编写HTML网页文档的方法HTML文档是一个纯文本文件，可以使用任何文本编辑器编写保存使用记事本编辑一个html文件使用Dreamweaver新建一个html文件标记(Tags)和元素（Elements）标记是HTML文档中一些有特定意义的符号，这些符号指明内容的含义或结构。标记总是放在三角括号中，大多数标记都是成对出现的，表示开始和结束。把HTML标记如<p>…</p>和标记之间的内容组合称为元素。网页中文字，图像，链接等所有的内容都是以元素的形式出现在html代码里的。标记相同而标记中的内容不同应视为不同的元素，同一网页中标记和标记中的内容都相同的元素如果出现两次也应视为两个不同的元素，因为任一个元素在网页中浏览器都会为它分配唯一的id，不存在两个元素的id也完全相同的情况。

例1下面body内元素的个数是多少<body><ahref="box.html"><imgsrc="xxwlzx/cup.gif"border="0"align="left"/></a><p>图片的说明内容</p><hr/><p>图片的说明内容</p></body>答案：5个，即1个a元素、1个img元素、2个p元素和1个hr元素。带有属性的HTML元素的结构

/>例2找出下面html代码的错误下列HTML元素的写法错在什么地方？<img"birthday.jpg"/><i>Congratulations!<i><ahref="file.html">linkedtext</ahref="file.html"><p>Thisisanewparagraph<\p><li>Thelistitem</li>HTML标记的分类头部标记：title,meta,link,style文本标记：font,b,i,u,strong,段落标记：p,hn,pre,marquee,br,hr列表标记：ul,ol,li,dl,dt,dd5) 超链接标记：a,map,area6) 图像及媒体元素标记：img,embed,object7) 表格标记：table,tr,td,th,tbody8) 表单标记：form,input,textarea,select,option,fieldset,legend9) 框架标记：frameset,frame,iframe10) 容器标记：div,spanHTML标记的分类（2）为便于记忆，可将标记按出现的情况分为：单标记：<br/>，<hr/>，<img/>，<input/>，<meta/>，<link/>配对标记：大部分标记都是配对标记成组标记：table，form，ul,ol,dl,frameset，fieldset及其子标记等，配对标记中很多都是成组标记行内元素和块级元素

行内元素(inline)是指元素与元素之间从左到右并排排列，只有当浏览器窗口容纳不下才会转到下一行，块级元素(block)是指每个元素占据浏览器一整行位置，块级元素与块级元素之间自动换行，从上到下排列。块级元素内部可包含行内元素或块级元素，行内元素内部可包含行内元素，但不得包含块级元素，另外，块级元素<p>元素内部也不能包含其他的块级元素行内元素和块级元素举例行内元素：a，img，font，b，i，u，span，input块级元素：p,div,hn,pre,hr,ul,ol,li,form快速记忆法：即所有文本标记，链接标记和图像标记是行内元素所有段落标记，列表标记是块级元素行内元素和块级元素示例<body><b>粗体文字</b><p>图片的标题</p><p>图片的说明内容</p><b>粗体文字</b><b>粗体文字</b></body>常见的html标记的属性公共属性：

align（对齐方式），border（边框），title（提示文字），src（链接的文件路径），style（引入CSS行内样式），id，name特有属性：<ahref（链接的目标），target（窗口打开方式）><inputtype（元素的类型），size（含义依据type而不同）>html存在的问题和web标准HTML语言最开始是用来描述文档的结构的，如标题，段落等标记，后来因为人们还想用它控制文档的外观，HTML又增加了一些控制字体，对齐等方面的标记和属性，这样做的结果是HTML既可以用来描述文档的结构，又能表示文档的外观，但是两方面都描述不好。于是人们想出了web标准，即结构和表现分离，网页由结构，表现和行为组成，用HTML的新版本XHTML描述文档的结构，XHTML是一种为了适应XML而重新改造的HTML。用CSS控制文档的表现，因此XHTML和CSS就是内容和形式的关系，由XHTML确定网页的内容，而通过CSS来决定页面的表现形式。Web标准网页由结构，表现和行为组成，1．内容：内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。如：忆江南(1)唐.白居易江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，(3)能不忆江南。作者介绍772－846，字乐天，太原人。唐德宗朝进士2．结构：可以看到上面的文本信息本身已经完整。但是混乱一团，难以阅读和理解，我们必须给它格式化一下。把它分成标题、作者、章、节、段落和列表等。

Web标准－结构标题忆江南(1)

作者唐.白居易

正文

江南好，风景旧曾谙。(2)

日出江花红胜火，春来江水绿如蓝，(3)

能不忆江南。

节1作者介绍

772－846，字乐天，太原人。唐德宗朝进士

Web标准－表现表现（Presentation）：虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现”

行为行为：就是对内容的交互及操作效果。例如，使用JavaScript可以响应鼠标的点击和移动，可以判断一些表单提交，使我们的操作能和网页进行交互。网页的组成行为层内容如何对事件做出响应表现层内容如何显示结构层内容的语义内容层内容网页是由四层信息构成的一个共同体：Web标准的实现结构标准语言（1）XML（2）XHTML表现标准语言CSS（CascadingStyle

Sheets，层叠样式表）行为标准语言JavaScriptWeb标准网页示例结构表现行为XHTMLCSSJavaScriptXHTML与HTML的区别1.所有XHTML文档必须在文档的第一行有一个文档类型的声明（DOCTYPE），如：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">文档类型声明是用来说明XHTML使用标准的类型的，有Transitional，Strict和Frameset三种类型，Transitional是过渡类型的XHTML，表明兼容原来的HTML标记和属性；Strict是严格型的应用方式，在这种形式下，不能使用HTML中任何样式表现的标记（如font）和属性（如bgcolor）；Frameset是针对框架网页的应用方式

XHTML与HTML的区别(续)2．XHTML文档可通过xmlns定义命名空间(Namespace)，如<htmlxmlns=“/1999/xhtml”>

表示该xhtml文档的命名空间是这个，如果我们换一个命名空间，就可以自定义xhtml文档的标记<A公司:程序员>小王</程序员><A公司:会计>小颜</会计><A公司:品管部><B公司:证券部><B公司:程序员>小刘</程序员>A公司和B公司就是两个命名空间，可以在上面定义不同的标记，只要引用相应的XMLDTD就可以使用这些标记了XHTML与HTML的区别(续)3．文档里必须具有html，head，body，title这些元素。4．在HTML语言规范的基础上，XHTML对标记还有下面一些额外的要求：1）标记名和属性名必须小写；2）属性值必须用双引号引起；3）所有标记包括单标记都必须封闭。4）不允许省略属性值（如<inputchecked/>错例3找出符合xhtml语法规范的语句[例3]：下列哪条html语句的写法符合XHTML规范：（）A.<br>B.<imgsrc=”photo.jpg”/>C.<IMGsrc=”photo.jpg”></IMG>D.<imgsrc=photo.jpg></img>复习题1.下列哪条不是XHTML规范的要求： （）A.标记名必须小写 B.属性名必须小写C.属性值必须小写 D.属性值不能省略2.下列哪种不是XHTML的DTD： （）A.Loose B.Transitional C.Strict D.Frameset3.Web标准是由谁制订的。 （）A.Microsoft B.NetscapeC.TheWorldWideWebConsortium（W3C） D.OSI4.html中的元素可分为块级(block)元素和行内(inline)元素，下列哪个元素是块级元素：（）A.<p>B.<b>C.<a>D.<span>《基于Web标准的网页设计》唐四薪编著清华大学出版社2009年11月第三章HTML标记功能详述

本章要点文本格式标记文本修饰标记（字体标记）列表标记超链接标记图像和多媒体标记HTML标记基础2.什么是标记？标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。标记可以具有相应属性即各种参数，如size、color、text、width和noshade等。例如：<p><fontsize="+1"color="red"></font></p>

文本格式标记网页中添加文本的方法网页中添加文本的方法文本格式标记是网页中定义文本格式的标记1）直接写文本<div>文本</div>、<td>文本</td>、<body>文本</body>、<li>文本</li>；2）用段落标记<p>……</p>格式化文本，各段落文本将分行显示；3）用标题标记<hn>……</hn>格式化文本，作用：定义第n号标题字体，n=1~6，n值越大，字越小；文本将变为粗体显示，可看成特殊的段落标记；4)用预格式化标记<pre>……</pre>格式化文本，标记内的文本将按原来的格式显示，保留文本中的所有空格、换行和定位符；用标题标记<hn>……</hn>格式化文本<h1>第1号标题字体</h1><h3>第3号标题字体</h3><h4>第4号标题字体</h4><h5align="center">第5号标题字体（居中）</h5>标题标记和段落标记<body><h1align="center">1号标题</h1><p>第一段</p><h3>3号标题</h3><p>第二段</p><h5align="right">5号标题</h5><palign="right">第三段</p></body>用预格式化标记<pre>…</pre>格式文本<pre>网页设计师这一职业在今后来说还是有需求的。因为随着网络越来越普及， 像我国的房地产市场</pre>文本的强制换行<br/>电子商务顾名思义就是在internet上做生意，<br/>商品展示，广告宣传、发布供求信息等活动实现的途径就是网页。强制不换行标记<nobr>……</nobr>，常用英文人名<nobr>BillGates</nobr>文本中的空格标记(<pre>除外)内字符前的空格浏览器将全部忽略，字符与字符间的空格浏览器将只保留一个空格显示，回车视为一个空格，块级元素之间忽略所有空格。如果要输入多个空格或需要在字符之前输入空格需在源代码中插入

（表示一个半角空格）。行内元素可看成一个字符

文本中的转义字符在HTML源代码中，有些字符有特别的含义，比如小于号“<”就表示HTML标记的开始，html源代码中的“<”是不会在浏览器中显示的，如果要浏览器显示这些字符，就需要输出他们对应的转义字符。例如：<表示<,>表示>,"表示“,&表示&, 表示空格等；通常，一个字符实体是由三部分组成的：（1）一个“&”符号（2）字符专用名称或者字符代号（3）一个“;”符号在DW的设计视图中输入这些特殊字符，DW会自动在代码视图添加它们对应的转义字符DW中插入HTML文本元素的快捷键Enter插入<p> </p>（硬回车）shift＋enter

插入<br/>（软回车）Ctrl＋shift＋space

插入一个

综合实例<html><head><title>分段换行与预格式</title></head><body><h3>以下是直接写文本的情况：</h3>

星期一、星期二、星期三、星期四、星期五、星期六、星期日。

<h3>以下是使用了三个换行标记的情况：</h3>

星期一、星期二、<br/>星期三、星期四、<br/>

星期五、星期六、星期日。<br/><h3>以下使用分段标记（分为两段）：</h3><p>星期一、星期二、星期三、</p><p>星期四、星期五、星期六、星期日。</p><h3>以下使用预格式：</h3><pre>星期一、星期二、星期三、星期四、星期五、星期六、星期日。</pre></body></html>跑马灯<marquee>标记一个特殊的文本标记，能使其中的文本在浏览器屏幕上不断滚动。示例其中behavior=“alternate”设置滚动方式为来回滚动，设置为scroll表示循环滚动，设置为slide表示滚动到目的地就停止。direction属性用于控制滚动的方向，可以上下滚动或左右滚动。loop设置滚动的次数，loop为0表示不断滚动。scrollamount属性设置滚动的速度，scrolldelay属性设置两次滚动间的间隔时间。<marquee>示例<marqueedirection="up"behavior="scroll"scrollamount="10"scrolldelay="4"loop="-1"align="middle"onmouseover=this.stop()onmouseout=this.start()height="120">  测试:网页设计与制作学习：可以将swf文件下载下来用flash播放器全屏播放以达到最好效果，也可以在IE浏览器中按F11键达到全屏效果.</marquee>水平线标记<hr/><hr/>标记是在HTML文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性。size是设置水平线的厚度，而width是设定水平线的宽度，默认单位是像素。noshade属性用来加入一条没有阴影的水平线。<hrsize="3"width="85%"color=“red"noshade="noshade"align="center"/>文本修饰标记（字体标记）文本修饰标记文本修饰标记是对文本的外观进行修饰的标记，如让文字变色，加大，变粗体，添加下划线等。1）font标记：定义文字的各种属性。例：<fontface="fontname"size="n"color="#0066CC">……</font>

<!--face属性定义文字的字体，fontname为能获得的字体名称；size属性定义文字的大小，n为正整数，n值越大则字越大；color属性定义文字的颜色，-->注意：文本修饰标记由于是行内标记，没有align属性(说明）加粗、倾斜与下划线标记2）加粗、倾斜与下划线的定义标记（b、i、u）<b>……</b><!--加粗文字--><i>……</i><!--文字倾斜--><u>……</u><!--加下划线--><em>……</em><!--加粗，倾斜--><strong>……</strong><!--加粗文字-->使用加粗、倾斜与下划线标记（b、i、u）的组合，可对文本文字进一步修饰。如：<b><fontcolor="red"size="5">此处以红色五号字粗体显示</font></b>上标（sup）和下标（sub）标记用于书写数学公式或分子式。如：H₂O<!--H2O-->X² <!--X2-->由于字体标记属于对文本外观进行修饰的标记，是由于当时CSS语言尚未出现时html定义的表现的范畴，随着CSS的出现，这些表现功能均可以由CSS完成，所以不含有语义的字体标记慢慢过时了。列表标记列表标记为了合理地组织文本，网页中常常要用到列表。在HTML中可以使用的列表标记有无序列表、有序列表和定义列表三种。无序列表(UnorderedList)<ul>,<li>

有序列表(OrderedList)<ol>,<li>定义列表(DefinedList)<dl>,<dt>,<dd>

嵌套的无序列表示例<ulid="nav"><li><ahref="">文章</a><ul> <li><ahref="">CSS教程</a></li> <li><ahref="">DOM教程</a></li> <li><ahref="">XML教程</a></li></ul></li><li><ahref="">参考</a><ul> <li><ahref="">XHTML</a></li> <li><ahref="">XML</a></li> <li><ahref="">CSS</a></li></ul></li></ul>有序列表(OrderedList)<ulid="nav"><li><ahref="">文章</a><ol><li><ahref="">CSS教程</a></li> <li><ahref="">DOM教程</a></li><li><ahref="">XML教程</a></li><li><ahref="">Flash教程</a></li> </ol></li></ul>定义列表(DefinedList)<dl><dt>湖南城市</dt><dd>长沙</dd><dd>衡阳</dd><dd>常德</dd></dl><dl><dt>湖北城市</dt><dd>武汉</dd><dd>襄樊</dd><dd>宜昌</dd></dl>超链接标记<a>超链接标记<a>超链接是网页的基本元素，网页正是通过超链接而相互链接组织成一个网站，并将internet上的各个网站联系在一起。浏览者通过超链接选择阅读路径。超链接是通过URL（统一资源定位器）来定位目标信息的。URL包括4部分：网络协议、域名或IP地址、路径和文件名。URL分为绝对URL和相对URL绝对URL

绝对URL是采用完整的URL来规定文件在internet上的精确地点，包括完整的协议类型、计算机域名或IP地址、包含路径信息的文档名。书写格式为：协议：//计算机域名或IP地址[/文档路径]［/文档名］例如：http:///download/download.gif相对URL相对URL是相对于包含超链接页的地点来规定文件的地点。如链接到同一路径下的文档，直接输入文件名即可，如news.htm如链接到同一路径下子文件夹的文档，则先输入子文件夹名和斜杠（/），再输入文件名，如yule/news.htm如链接到上一级路径中，要在文件名前输入“../”，如“../news.htm”，其中“..”表示上级目录，“.”表示本级目录。相对URL示例wgzxyuleindex.htmoa.htmpop.htmnews.htm1.href="yule/news.htm"212.href="../oa.htm"3.href=“pop.htm”3相对URL的优势可以看出相对URL方式比较简便，不需输入一长串完整的URL；另外相对路径还有一个非常重要的特点是：可以毫无顾忌地修改Web网站的域名或网站在服务器硬盘中的存放目录。

超链接的种类－根据源对象划分1)用文本做超链接：

<ahref="index.htm"target="_blank">首页</a>2)用图像做超链接：<ahref="index.htm"><imgsrc="images/info.gif"title="返回首页"border="0"

/></a>3)文本图像混合做链接：<ahref="brand1.htm"><imgsrc="green.gif"/><br/>格力空调1型</a>

该方法在商品展示的网站上较常用。使用图像做超链接后，图像会自动增加边框，可设置边框为0去掉超链接的种类－根据源对象划分24)热区链接：使用map在图像上定义一幅地图，地图上可包含多个热区，每个热区用area单标记定义，area的shape属性定义了热区的形状，coords定义了热区的坐标点，href定义了热区链接的文件。同时img标记用usemap指明用了哪幅地图<imgsrc="images/163227.png"width="600"height="518"border="0"usemap="#Map"/><mapname="Map"id="Map"><areashape="rect"coords="51,131,188,183"href="default.asp"/><areashape="rect"coords="313,129,450,180"href="#h3"/></map>

超链接的种类－根据href的取值1)链接到其他网页或文件（jpg,rar等）内部链接<ahref="../index.htm">返回首页</a>外部链接<ahref="">网易网站</a>下载链接<ahref="software/wybook.rar">点击下载</a>2)电子邮件链接<ahref="mailto:xiaoli@163.com">给我留言</a>如果IE不能打开该文件，则会弹出文件下载的对话框比普通链接多了个”mailto:”超链接的种类－根据href的取值23)锚链接（链接到页面中某一指定的位置）当网页内容很长，需要进行页内跳转链接时，就需要定义锚点和锚点链接，锚点可使用name属性或id属性定义。<aid="yyyy"></a><!--定义锚点yyyy--><ahref="#yyyy">……</a><!--网页内跳转链接，链接到锚点yyyy处-->也可以链接到其他网页某个锚点处<ahref="intro.htm#yyyy">……</a><!--链接到intro.htm网页的锚点yyyy处-->4)空链接和脚本链接:<ahref=“#”>……</a><!--相当于没有定义锚点名的锚链接，网页会返回页面顶端--><ahref="JavaScript:alert('确定删除吗')">……</a>超链接的打开方式（target属性的取值）在本窗口打开：_self（target的默认值）在新窗口打开：_blank在父窗口打开：_parent将链接的文件载入到父框架在整个窗口打开：_top：将链接的文件载入到整个浏览器窗口中，并删除所有框架_parent、_top仅仅在网页被嵌入到其他网页中有效，如框架中的网页，所以这两种取值用得很少。超链接的title属性title属性在很多标记里都有，其作用是在鼠标停留在该元素上时显示设置的说明文字如<p><ahref="定义列表.html"title="格力太阳能喜获国家免检产品称号">格力太阳能喜获…</a></p>超链接制作的原则1)可以使用相对链接尽量不要使用绝对链接，如../index.htm而不是2)链接目标尽可能简单如，而不是/index.jsp课后思考url（统一资源定位器）url一般作为哪些属性的取值？

href=“index.asp”src=“logo.gif”url的种类 相对url

绝对urlurl格式的类型 协议名://主机ip或域名/文件目录/文件名url协议的类型常见的url协议的类型httpftpfile:///web/wy.gif当在DW中建立网站目录后，那么网站目录内的文件之间建立链接就会自动采用相对链接的方式，相对链接以网站目录为基准。若没建立网站目录，DW则采用file协议方式，以磁盘根目录为基准，建立链接，而这是我们应该避免的图像标记<img/>图像标记：<imgsrc=“图像文件名”/>

将图形文件嵌入到网页文档中的当前位置说明：网页中插入图像有两种方法，一是插入一个<img>元素，二是将图像作为背景嵌入到网页中由于CSS的背景属性的功能很强大，现在更推荐将所有的图像都作为背景嵌入。如果图像是通过<img>元素插入，则可以在浏览器上通过按住鼠标左键拖动选中图片，或者将它拖动到地址栏里，如果作为背景嵌入，则无法选中图片图像标记<img>网页中支持的图像文件格式网页中可以插入的图像文件的类型有jpg格式，gif格式和png格式。这些文件都是压缩格式的图像格式，其中jpg格式适合用于网页中较大尺寸的真彩色图片，是一种有损压缩的格式；gif格式一般用于较小尺寸的图片，是一种无损压缩的格式，只支持256色，GIF在存储非连续色调的图像或具有大面积单一色彩的图像方面比较出色，gif格式的特点是可以实现gif动画，和gif全透明的图像；png格式可以用于alpha透明效果，但IE6不能够支持。

<img>标记的常见属性<img>是一个行内元素，插入<img>元素不会导致任何换行。下面是<img>标记的常见属性：img的属性含义src图片文件的url地址alt当图片无法显示时显示的替换文字title鼠标停留在图片上时显示的说明文字align图片的对齐方式，默认为基线对齐，即图片的下边缘和文字的下边缘对齐width、height图片在网页中的宽和高在单元格中插入图像的方法对于表格布局的网页，所有的元素都是放置在单元格中的，图像也不例外，要在单元格中插入图像，且单元格的边框和图像之间没有间隙。那么必须将该单元格的宽和高设置为图片的宽和高，且表格中其它单元格的大小也必须固定，然后确保<td>与</td>之间只有<img>标记，没有空格和换行符，否则单元格会被空格撑开。如：<tdwidth="768"height="132"><imgsrc="images/info.gif"/></td><!--</td>不能换行--><img>插入图像的对齐方式<img>标记的对齐方式仍然通过align属性实现，但其取值多达9种，其中要实现图片和文本混排可使用“左对齐”或“右对齐”，要实现文本和图片顶部对齐可使用“文本上方”。<imgsrc="images/info.gif"width="158"height="41"align="left"/>，但通常是将图片放在表格里，通过表格定位来实现文本和图像的混排。复习题a标记的常用属性有哪些hreftargetnametitleimg标记的常用属性有哪些srcwidthheightalttitle作业（第一次）用DW制作一个个人求职的网页，要求用表格布局，网页中必须包含图像、文本、列表、链接及表格等基本元素，制作完成后，把该网页的源代码抄写两遍交上来或者直接用编写代码的方式制作该网页，再在作业本上抄写两遍下次上课前必须交，否则扣10分(10/30)媒体元素插入标记<embed/><object></object>插入flash的两种方法方法一：执行菜单命令：“插入－媒体－flash”，在代码视图中可看到插入flash元素是通过同时插入object标记和embed标记实现的，以确保在IE5和Firefox中都获得应有的效果方法二：执行菜单命令：“插入－媒体－插件”，此方法在代码视图中仅插入了embed元素。由于IE6和Firefox都能正常显示效果，而代码更简洁，所以推荐用这种方式（但不能用来插入透明flash，否则IE浏览器中没有object标记的parm属性不会透明）在图像上添加透明flash首先可以将一张需要放置透明flash的图片作为单元格的背景导入，然后在此单元格内插入一个透明flash文件，可以调整此flash元素的大小与单元格相一致，选中该flash文件，点击属性面板里的“参数”按钮，新建一个参数“wmode”值设置为“transparent”。

<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"width="768"height="132"><paramname="movie"value="xxwlzx/10.swf"/><paramname="quality"value="high"/>

<paramname="wmode"value="transparent"/><embedsrc="xxwlzx/10.swf"quality="high"pluginspage="/go/getflashplayer"type="application/x-shockwave-flash"width="768"height="130"wmode="transparent"></embed></object>这句使flash在IE浏览器中透明这句使flash在非IE浏览器中透明插入视频或音频文件插入视频可分别使用ActiveX按钮或插件按钮实现<objectwidth="280"height="216"><paramname="autostart"value="false"/><embedsrc="2.mpg"width="280"height="216"autostart="false"></embed></object>ActiveX方式<embedsrc=“2.mpg”width=“276”height=“218”autostart=“false”></embed>插件方式流媒体简介流媒体实际指的是一种新的媒体传送方式，而非一种新的媒体,流式传输方式将整个多媒体文件经过特殊的压缩方式分成一个个压缩包，由视频服务器向用户计算机连续、实时传送。在采用流式传输方式的系统中，用户不必像采用下载方式那样等到整个文件全部下载完毕常见的流媒体文件格式real公司：rm\rmvb\raapple公司：quicktime\movmicrosoft公司：asf\wmv\wma插入流媒体元素的方法网页中插入流媒体也能向插入一般媒体一样使用embed标记，只是要在classId框中设置流媒体的类型插入RealPlayer流格式的视频文件属性面板中设置:ClassID为RealPlayer……。选中Embed复选框。Src为zhaodan.rm。单击“参数…”按钮，设置属性。parm参数示例参数：console属性：可以将各种不同的RealPlayer控制聚集在网页上，这样它们可以交互使用或是保持独立，而且互相不影响演示1:8000/ec/youhua/kclx-1.htm容器标记<div><span>div和spandiv和span是不含有任何语义的标记，用来在其中放置任何网页元素，就象一个容器一样，当把文字放入后，文字的格式外观都不会发生任何改变，应用容器标记的主要作用是通过引入CSS属性对容器内元素内容的表现进行设置。div和span的唯一区别是div是块级元素，span是行内元素。div和span<body><divstyle="background-color:#3399ff">块状区域1<