网页设计基础知识.ppt

第一章 网页设计基础知识 1.1 网站概述 1.2 网站策划 1.3 网站开发流程 1.4 网页版式设计 1.5 色彩 1.6 网站标准结构 internet基础 INTERNET的概述 Internet是相互连接的网络集合。Internet是由成 千上万个网络、上亿台计算机通过特定的网络 协议相互连接而成的全球计算机网络，是提供 信息资源查询和信息资源共享的全球最大的信 息资源平台。 网络协议是网络中的设备进行通信时共同遵循的 一套规则，即以何种方法获得所需的信息。 Internet最初并不是为商业性和广泛使用而设计的 。它起源于1969年美国国防部高级研究计划署协 助开发的ARPANET。最初是只允许国防部人员 进入的封闭式网络。到1987年，在美国国家科学 基金会的推动下，将之主要从军事用途转向科学 研究和民事用途，形成了今天的Internet主干网 雏形NSFNET。全球网络的发展是空前且出人意 料的。今天，检查电子邮件、访问喜爱的网站这 些活动已融入我们的日常生活。 internet基础 从国内Internet的发展现状来看，1994年4月，中科院计算 机网络信息中心正式接入Internet，在10多年的时间里， 中国Internet发生了飞速的发展，截至2009年底，我国网 民人数超过了2亿。10%的网民普及率将是互联网发展的 高速拐点，突破10%之后，中国互联网将迎来更快速的增 长期。另外网站数、IP地址等也迅速增长，分别达到84.3 万和9800万。从域名、网站数、IP地址等增长情况来看， 我国互联网资源得到了全面提升。 Internet所提供的服务主要是WWW、E-mail、FTP、网上传 呼、在线聊天、网上购物等等，而其中WWW和E-mail是 最常用的服务。 internet基础 WWW WWW(World Wide Web)简称为Web或万维网，客户端 只要通过“浏览器”（Browser）就可以非常方便地访问 internet上的服务器端，迅速地获得所需的信息。如图所 示。 internet 浏览器 WEB服务器 客户端 HTTP网络协议 用户通过浏览器访问WEB服务器的网页，那么如何查找这些网 页呢？通过在浏览器的地址栏中输入网址，即URL，统一资 源定位器。 URL的一般格式为：“协议名：/主机名/文件夹名/文件名” 常用的协议名如下： HTTP：超文本传输协议，用于转换网页。 FTP：文件传输协议，主要用于传输文件，许多提供软件下载 的网站使用“FTP”作为下载的网址。 MAILTO：传送E-mail协议，主要用于传输电子邮件。 例如： mailto: 1.1.1 网页与网站 构建WWW的基本单位是网页。网页中包含所谓的“超链接”， 通过已经定义好的关键字和图形，只要用鼠标轻轻一点， 就可以自动跳转到相应的其它文件，获得相应的信息，从 而实现网页之间的链接，从而构成了WWW的纵横交织的 网状结构。 通过超链接连接起来的一系列逻辑上可以视为一个整体的页 面，则叫做网站。 网站点概念是相对的，大的如新浪、搜狐等大的门户网站， 页面非常多，可能分布于多台服务器上；小的如一些个人 网站，可能只有几个页面，仅在某台WEB服务器的占据很 小的空间。 一个站点的起始页面通常被称为“主页”，主页是一个网站的 开始，因此主页的好坏决定了这个网站的访问情况，一般 主页的名称是固定的index.htm或index.html等。 1.1.2 网站基本分类 专业网站 商业网站 形象类网站 个人主页网站 域名与IP地址 在Internet上的每台网络设备都要有一个唯一的地址才能被访问到， 这个地址就是IP地址。 IP地址是由32bits的二进制数值构成，分成4组，转化为十进制用点 分隔，比如：1。 1 0 网络号 主机号 0 1 2 3 8 16 24 31 0 网络号 主机号 0 1 2 3 8 16 24 31 1 1 0 网络号 主机号 0 1 2 3 8 16 24 31 A类地址的范围为： 55 B类地址的范围： -55 C类地址的范围： -55 A B C 域名与IP地址 IP地址是一串难以记忆的数字，因此在1985年开 始，引入了域名的概念，用具有含义的字符来表 示网络中的主机，以便于浏览者访问。域名与IP 地址如何对应呢？通过DNS域名解析系统将域名 解析到相应的IP地址上，实现这二者之间的对应 关系。 我们知道新浪网的域名：，但 很少有人知道新浪网WEB服务器的IP地址是多少 ？ 域名的分类：域名系统是一个分层的树状结构组 织，如图所示。最上面是一个无名的根域，下层 为顶级域名，接着是二级 1.1.4 域名与IP地址 根域 Com net org jp cn tw Ibm hp yahoo Com edu net Sina ebay alibaba 图1.2 域名结构图 域名域名机构附注：全称 Com商业机构Commercial organization Edu教育机构Educational institution Gov政府部门government Int国际性机构International organization Mil军队military Net网络机构Networking organization Org非盈利机构Non-profit organization 表1.1 按组织分类的顶级域名 表1.2 按地理区域分类的项级域名 域名 国家附注：全称 cn中国China ca加拿大Canada jp日本Japan kr韩国Korea ru俄罗斯Russia tw台湾Taiwan hk香港Hong Kong 域名的书书写格式为为：叶节节点名.二级级域名.顶级顶级 域名 例如：，www：web服务务器名，sohu：企业业名称， com：顶级顶级 域名。 1.1.3 网页设计软件概述 目前网页制作工具较多，大多数网页制作工作都是 通过“所见即所得”的编辑工具完成的，在网页制作 过程，还需要进行素材的创作和加工，即图形和动 画制作工具。 网页编辑工具 网页编辑工具主要分为标记型和所见即所得型。标 记型工具常用的是notepad(记事本)、Ultraedit等 。 所见即所得型的编辑软件主要有：微软的 Frontpage和Dreamweaver。其中Frontpage继 承了OFFICE系列软件的界面通用、操作简单的 特点，十分适合初学者使用。但与MacroMedia 公司的Dreamweaver相比，在HTML源代码的精 确性、实用性以及对各种新技术的支持上都略逊 一筹，因此我们这本教材主要介绍的网页编辑工 具是Dreamweaver。 图形和图像处理工具 目前常用的图形和图像处理工具主要：Photoshop及 Firework。 Photoshop的功能十分强大，是目前最为广泛的专业图形图 像处理软件之一，它捆绑了Image Ready，能够实现各种专 业化的图像处理、动画的制作等。 Fireworks是由MacorMedia公司出品的首选WEB图形图像 处理软件。它的独特之处在于其能够优化处理大图片、切割 图片、为图片加入特殊效果、制作网页的动态行为等，可以 生成Firework HTML，直接导入到网页中，使用非常方便。 本教材将在以后的章节做详细的介绍。 动画制作工具 Flash是目前网页制作中最为出色的动画制作软件，它是 一种交互式动画设计工具，用它可以将音乐、声效、动画 以及富有新意的界面融合在一起，以制作出高品质的网页 动态效果。Flash所使用的图形是压缩的矢量图形，采用 了网络流式媒体技术，突破了网络带宽的限制，可以边下 载边播放，这样避免用户长时间的等待，设计者可以随心 所欲地设计出高品质的动画，Flash已经慢慢成为网页动 画的标准，成为一种新兴的技术发展方向。本教材将在以 后的章节做详细的介绍。 1.2 网站策划 网站策划是以客户需求为基础，以个性化创意为 主线，用专业的逻辑、语言与流程，阐述网站价 值、模式及其实现方式，从而有效地解决网站建 设的方向性问题。 1.3 网站开发流程 要建设一个优秀的网站，通常应该遵循以下工作 流程：确定站点的核心网站的规划网站外观 的设计网页具体制作网站性能测试网站发 布网站更新与维护。 规划 设计 维护 发布开发 1.3.1 网站规划 一个网站的成功与否与建站前的网站规划有着极 为重要的关系。在建立网站前应明确建设网站的 目的，确定网站的功能，确定网站规模、投入费 用，进行必要的市场分析等。只有详细的规划， 才能避免在网站建设中出现的很多问题，使网站 建设能顺利进行。 1明确建立网站的目标和用户需求 2确定网站的风格 3网站的技术问题 1.3.2 网站设计 对网站进行详细的规划之后，就可进入到设计阶段。 好的Web站点要做到主题鲜明突出，要点明确，以简单明 确的语言和画面体现站点的主题。调动一切手段充分表现 网站点的个性和情趣，突出网站的特点。 1网站的版式设计设计 2色彩在网页设计中的作用 3网页形式与内容相统一 4三维空间的构成和虚拟现实 5多媒体功能的利用 1.3.3 网页制作 静态网页的制作：采用HTML（超文本标记语言）生成的网 页，供浏览者浏览。此阶段需要根据设计阶段制作的示范 网页，通过去Dreamweaver等软件在各个具体网页中添 加实际内容，如：文字、图像、FLASH动画、多媒体文 件等。这类静态网页缺少动态的交互，因此还需添加网页 的交互性，即动态网页的制作。 动态网页的制作：动态网页的编程目前常用的技术为 .ASP.PHP.JSP等，实现客户端与服务器的交互。比如 说：会员注册、信息查询、产品选购、留言、论坛等。 1.3.4 站点的测试和上传 网站制作完毕，在本机上进行测试，查看网站上是否存在某些错误，如 网站是否存在链接的错误，图片是否正常显示，网页程序代码是否有 错等。 测试完毕，后用上传工具传到WEB服务器上。 1.3.5 站点更新和维护 要充分发挥网站的市场功能，及时更新最新的产品信息。一 个企业要有专业的网站维护人员或交给专业的网络公司来 承担这项工作。 1.4 网页版式设计 一.网页页布局的基本概念 1.页页面尺寸： 由于页页面尺寸和显显示器大小及分辨率有关系，网页页的局限性 就在于你无法突破显显示器的范围围，而且因为为浏览浏览 器也将 占去不少空间间，留下给给你的页页面范围变围变 得越来越小。一 般分辨率在800x600的情况下，页页面的显显示尺寸为为： 780x428个象素；分辨率在640x480的情况下，页页面的显显 示尺寸为为:620X311个象素；分辨率在1024X768的情况下 ，页页面的显显示尺寸为为：1007x600。从以上数据可以看出 ，分辨率越高页页面尺寸越大。 1.4 网页版式设计 浏览浏览 器的工具栏栏也是影响页页面尺寸的原因。一般目前的浏浏 览览器的工具栏栏都可以取消或者增加，那么当你显显示全部 的工具栏时栏时 ，和关闭闭全部工具栏时栏时 ，页页面的尺寸是不一 样样的。 在网页设计过页设计过 程中，向下拖动页动页 面是惟一给给网页页增加更多 内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的 内容能吸引大家拖动动，否则则不要让访问让访问 者拖动页动页 面超过过 三屏。如果需要在同一页页面显显示超过过三屏的内容，那么 你最好能在上面做上页页面内部连连接，方便访问访问 者浏览浏览 。 1.4 网页版式设计 2.整体造型： 页页面的整体形象，是一个整体，图图形与文本的接合应该应该 是 层层叠有序。虽虽然，显显示器和浏览浏览 器都是矩形，但对对于页页 面的造型，你可以充分运用自然界中的其它形状以及它们们 的组组合：矩形，圆圆形，三角形，菱形等。 对对于不同的形状，它们们所代表的意义义是不同的。比如矩形代 表着正式，规则规则 ，你注意到很多ICP和政府网页页都是以矩 形为为整体造型；圆圆形带带表着柔和，团结团结 ，温暖，安全等 ，许许多时时尚站点喜欢欢以圆圆形为页为页 面整体造型；三角形代 表着力量，权权威，牢固，侵略等，许许多大型的商业业站点 为显为显 示它的权权威性常以三角形为页为页 面整体造型；菱形代 表着平衡，协调协调 ，公平，一些交友站点常运用菱形作为为 页页面整体造型。虽虽然不同形状带带表着不同意义义，但目前 的网页页制作多数是接合多个图图形加以设计设计 ，在这这其中某 种图图形的构图图比例可能占的多一些。 1.4 网页版式设计 3.页头页头 ： 页头页头 又可称之为页为页 眉，页页眉的作用是定义页义页 面的主题题。比 如一个站点的名字多数都显显示在页页眉里。这样这样 ，访问访问 者 能很快知道这这个站点是什么内容。页头页头 是整个页页面设计设计 的关键键，它将牵牵涉到下面的更多设计设计 和整个页页面的协调协调 性。页头页头 常放置站点名字的图图片和公司标标志以及旗帜帜广 告。 4.文本： 文本在页页面中出现现都数以行或者块块(段落)出现现，它们们的摆摆放 位置决定者整个页页面布局的可视视性。在过过去因为页为页 面制 作技术术的局限，文本放置的位置的灵活性非常小，而随着 DHTML的兴兴起，文本已经经可以按照自己的要求放置到页页 面的任何位置。 1.4 网页版式设计 5.页页脚： 页页脚和页头页头 相呼应应。页头页头 是放置站点主题题的地方，而页页脚 是放置制作者或者公司信息的地方。你能看到，许许多制作 信息都是放置在页页脚的。 6.图图片 图图片和文本是网页页的两大构成元素，却一不可。如何处处理好 图图片和文本的位置成了整个页页面布局的关键键。而你的布 局思维维也将体现现在这这里。 7.多媒体 除了文本和图图片，还还有声音，动动画，视频视频 等等其它媒体。 随着动态动态 网页页的兴兴起，它们们在网页页布局上也将变变得更重 要。 1.4 网页版式设计 网页页布局的技术术 1.层层叠样样式表的应应用 在新的HTML4.0标标准中，CSS(层层叠样样式表)被提出来，它能 完全精确的定位文本和图图片。CSS对对于初学者来说显说显 得 有点复杂杂，但它的确是一个好的布局方法。你曾经经无法 实现实现 的想法利用CSS都能实现实现 。目前在许许多站点上，层层 叠样样式表的运用是一个站点优优秀的体现现。你可以在网上 找到许许多关于CSS的介绍绍和使用方法。 2.表格布局 表格布局好像已经经成为为一个标标准，随便浏览浏览 一个站点，它 们们一定是用表格布局的。表格布局的优势优势 在于它能对对不 同对对象加以处处理，而又不用担心不同对对象之间间的影响。 而且表格在定位图图片和文本上比起用CSS更加方便。 1.4 网页版式设计 表格布局唯一的缺点是，当你用了过过多表格时时，页页面下载载 速度受到影响。对对于表格布局，你可以随便找一个站点的 首页页，然后保存为为HTML文件，利用网页编辑页编辑 工具打开 它(要所见见即所得的软软件)，你会看到这这个页页面是如何利用 表格的。 3.框架布局 不知道什么原故，框架结结构的页页面开始被许许多人不喜欢欢， 可能是因为为它的兼容性。但从布局上考虑虑，框架结结构不 失为为一个好的布局方法。它如同表格布局一样样，把不同 对对象放置到不同页页面加以处处理，因为为框架可以取消边边框 ，所以一般来说说不影响整体美观观。 我今天来介绍绍的布局指南并不是全部的网页页布局技术术，从某 种意义义上来说说，我想引导导你在制作网页页的时时侯，怎样样把 图图片和文本放置的恰到好处处，而且如何拥拥有一个跳越的 设计设计 思维维。 1.5 色彩 一、色彩的基础础知识识 色彩五颜颜六色、千变变万化，我们们平时时所看到的白色光 ，经过经过 分析在色带带上可以看到，它事实实上包括红红、橙、 黄、绿绿、青、蓝蓝、紫等七色，各颜颜色间间自然过过渡。其中 ，红红、黄、蓝蓝是三原色，三原色通过过不同比例的混合可 以得到各种颜颜色。色彩有冷暖色之分，冷色(如蓝蓝色)给给人 的感觉觉是安静、冰冷；而暖色(如红红色)给给人的感觉觉是热热烈 、火热热。冷暖色的巧妙运用可以让让网站产产生意想不到的 效果。 色彩与人的心理感觉觉和情绪绪也有一定的关系，利用这这 一点可以在设计设计 网页时页时 形成自己独特的色彩效果，给浏给浏 览览者留下深刻的印象。一般情况下，各种色彩给给人的感 觉觉是： 1.5 色彩 红红色代表热热情、活泼泼、热闹热闹 、温暖、幸福、吉祥 橙色代表光明、华丽华丽 、兴奋兴奋 、甜蜜、快乐乐 黄色代表明朗、愉快、高贵贵、希望 绿绿色代表新鲜鲜、平静、和平、柔和、安逸、青春 蓝蓝色代表深远远、永恒、沉静、理智、诚实诚实 、寒冷 紫色代表优优雅、高贵贵、魅力、自傲 白色代表纯洁纯洁 、纯纯真、朴素、神圣、明快 灰色代表忧忧郁、消极、谦谦虚、平凡、沉默、中庸、寂寞 黑色代表崇高、坚实坚实 、严肃严肃 、刚刚健、粗莽 1.5 色彩 色彩搭配既是一项项技术术性工作，同时时它也是一项艺术项艺术 性很 强的工作，因此，设计设计 者在设计设计 网页时页时 除了考虑虑网站本 身的特点外，还还要遵循一定的艺术规艺术规 律，从而设计设计 出色 彩鲜鲜明、性格独特的网站。 1.特色鲜鲜明 一个网站的用色必须须要有自己独特的风风格，这样这样 才能 显显得个性鲜鲜明，给浏览给浏览 者留下深刻的印象。 2.搭配合理 网页设计虽页设计虽 然属于平面设计设计 的范畴，但它又与其它平 面设计设计 不同，它在遵从艺术规艺术规 律的同时时，还还考虑虑人的生 理特点，色彩搭配一定要合理，给给人一种和谐谐、愉快的感 觉觉，避免采用纯纯度很高的单单一色彩，这样这样 容易造成视觉视觉 疲劳劳。 1.5 色彩 3.讲讲究艺术艺术 性 网站设计设计 也是一种艺术艺术 活动动，因此它必须须遵循艺术规艺术规 律，在考虑虑到网站本身特点的同时时，按照内容决定形式的 原则则，大胆进进行艺术创艺术创 新，设计设计 出既符合网站要求，又 有一定艺术艺术 特色的网站。 三、色彩搭配要注意的问题问题 1.使用单单色 尽管网站设计设计 要避免采用单单一色彩，以免产产生单调单调 的 感觉觉，但通过调过调 整色彩的饱饱和度和透明度也可以产产生变变 化，使网站避免单调单调 。 2.使用邻邻近色 所谓邻谓邻 近色，就是在色带带上相邻邻近的颜颜色，例如绿绿色 和蓝蓝色，红红色和黄色就互为邻为邻 近色。采用邻邻近色设计设计 网 页页可以使网页页避免色彩杂杂乱，易于达到页页面的和谐统谐统 一 。 1.5 色彩 3.使用对对比色 对对比色可以突出重点，产产生了强烈的视觉视觉 效果，通过过合理使用对对 比色能够够使网站特色鲜鲜明、重点突出。在设计时设计时 一般以一种颜颜色为为 主色调调，对对比色作为为点缀缀，可以起到画龙龙点睛的作用。 4.黑色的使用 黑色是一种特殊的颜颜色，如果使用恰当，设计设计 合理，往往产产生很强 烈的艺术艺术 效果，黑色一般用来作背景色，与其它纯纯度色彩搭配使用。 5.背景色的使用 背景色一般采用素淡清雅的色彩，避免采用花纹纹复杂杂的图图片和纯纯度 很高的色彩作为为背景色，同时时背景色要与文字的色彩对对比强烈一些。 6.色彩的数量 一般初学者在设计设计 网页时页时 往往使用多种颜颜色，使网页变页变 得很“花 ”，缺乏统统一和协调协调 ，表面上看起来很花哨，但缺乏内在的美感。事 实实上，网站用色并不是越多越好，一般控制在三种色彩以内，通过调过调 整色彩的各种属性来产产生变变化。 第2章 Dreamweaver 基础 本章详细讲解Dreamweaver 的基础知识， 其中包括Dreamweaver 的界面、面板和菜 单的的简单介绍。 2.1 Dreamweaver 工作界面 安装好Dreamweaver 软件后，双击安装后的运行程序图标 （或者从Windows“开始”菜单的“所有程序”中选择 Dreamweaver ）运行Dreamweaver 程序，程序运行后的显 示效果如图所示。 2.1.1 菜单栏 菜单栏中包含了Dreamweaver中大多数的命 令，菜单栏包括“文件”、“编辑”、“ 查看”、“插入记录”、“修改”、“文 本”、“命令”、“站点”、“窗口”、 “帮助”等10个选项。 菜单栏中包含了Dreamweaver 中大多数操 作和常用命令，在实际的页面制作中经常 使用。 1.参数设置 选择“编辑” “首选参数”，打开对话框 ，可以进行相应的参数设置 2.页面属性设置 选择“修改” “页面属性”，打开对话框 ，可以进行相应的页面属性设置。在“页 面属性”对话框中，可以定义页面的外观 、链接、标题、标题/编码、跟踪图像等。 下面讲解部分选项中参数的含义。 2.3.2 定义页面属性 1外观属性 2链接属性 选择“页面属性”中的“链接”选项，打开“链接 ”对话框， “链接”对话框用来定义页面链接内容的样式 ，其中部分选项的含义如下所示。 2.3.2 定义页面属性 3标题属性 选择“页面属性”中的“标题”选项，打开“标题 ”对话框 “标题”对话框用来定义页面中各种标题的显 示样式，其中对应的页面HTML代码为 、 等6个标题标签。 2.3.2 定义页面属性 4标题/编码属性 2.1.2 “插入”工具栏 插入栏用来插入各种常用和布局对象。根 据选择的选项不同，在插入菜单中显示的 内容也有所区别。选择“常用”和“布局 ”选项时，插入栏的显示效果如图2-4和图 所示。 2.1.4 视图 文档窗口用来显示当前文档。在文档窗口中，可 以使用三种方式显示文档内容：分别是“设计”视 图、“代码”视图、“拆分”视图。下面分别进行介绍 。 1“设计”视图 2.1.4 文档窗口 2“代码”视图 2.1.4 文档窗口 3“拆分”视图 2.1.5 属性面板 属性面板用来定义页面元素或内容的相应 属性。由于选择的元素或者内容不同，属 性面板中显示的属性也有所区别。下面是 是选择图像内容后，属性面板的显示效果 ，如图所示。 面板和面板组 Dreamweaver中，面板都整合到面板组中，通过单击面板 的标题可以显示和隐藏相应的面板。面板和面板组处于 Dreamweaver工作界面的右侧。当面板关闭时，面板组的 显示效果如图所示，打开某个面板后的显示效果如图所示 。 2.1.6 管理站点 一般在制作网页之前，都要在本地的计算 机中创建本地的测试站点。当测试完成之 后，再传到Internet服务器上。在 Dreamweaver中，可以方便地构建和管理站 点。下面讲解具体的操作方法。 1 新建站点 在新建站点之前，首先要在磁盘中新建一 个站点文件。新建文件时可以直接在磁盘 中建立，也可以在文件面板中建立。 1 新建站点 选择“站点” “新建站点”，在弹出的 对话框中进入站点的创建，点击“高级” 选项卡，可以进行站点内容的设置。 2 管理和编辑站点 执行“站点”|“管理站点”命令，打开“ 管理站点”对话框，如图所示，在对话框 中可以管理站点的相关信息。 2 管理和编辑站点 执行“窗口”|“文件”命令，可以实现对 站点文件的管理。 2.2 插入文本 Dreamweaver提供了多种插入文本的方法供 读者选择。标题、栏目名称等少量文本， 可以选择直接在文档窗口中键入；段落文 本，可以选择从其它文档中复制粘贴；整 篇文章或表格，可以选择导入Word、Excel 文档。 2.2.1 将文本添加到文档 在Dreamweaver中输入文本与Word略有不同，下面 通过实例来说明。要注意不换行空格，换行符的 插入，文本添加效果如图2.1所示。 2.2.2 插入日期 在网页中经常需要插入日期，比如网页的更新日期，文章 的上传日期等。Dreamweaver提供了日期对象，可以方便 地插入当前日期。选择“插入”“日期”命令。 2.2.3 插入特殊字符 Dreamweaver还提供了丰富的特殊字符插入功能，可以插 入如注册商标、版权、货币符号等特殊符号。选择 “插 入”“HTML”“特殊字符”命令。 2.2.4 导入数据文档 除了直接键入文本和复制粘贴文本以外，Dreamweaver还 可以直接将表格式文档、Word文档、Excel文档导入到当 前文档，省去了复制粘贴的麻烦。选择 “文件”“导入 ”命令。 2.3 设置文本格式 2.1节介绍了在网页中插入文本的几种方法 ，由于插入的文本大小、字体格式不一致 ，需要对文本属性进行设置，使其风格保 持统一。 2.3.1 关于设置文本格式 设置文本格式有两种方法：使用HTML标签格式化文本，使 用层叠样式表（CSS）。 使用HTML标签和CSS都可以控制文本属性，包括特定字体 和字大小；粗体、斜体、下划线；文本颜色等。两者区别 在于，使用HTML标签仅仅对当前应用的文本有效，当改变 设置时，无法实现文本自动更新。而CSS则不同，通过CSS 事先定义好文本样式，当改变CSS样式表时，所有应用该 样式的文本将自动更新。此外，