网页基础语言HTML.ppt

《网页基础语言HTML.ppt》由会员分享，可在线阅读，更多相关《网页基础语言HTML.ppt（64页珍藏版）》请在三一办公上搜索。

1、补充 网页基础语言HTML,主要内容 网页概述 HTML文档的基本结构 标记及属性的概念 常用标记的用法,1.1网页概述,网页：网页是通过网络浏览器看到的网站页面。网页的本质是一个计算机文件。当浏览器获得网页访问的指令后，即在互联网上查找指定的网页文件，并对网页文件进行解读，然后将网页呈现在用户屏幕上。,1.1.1 域名和URL,IP地址：Internet上的每台主机都有一个专门的地址，称为IP地址，通过IP地址就可以访问到每一台主机。IP地址由4个数字组成,如：，在浏览器的地址栏输入这个IP地址，就可以访问这台主机。域名：域名是IP地址的形象标识，如是搜狐网站WWW主机的域名，浏览者主要通过

2、域名访问网站。,1.1.1 域名和URL,URL：Uniform Resource Location，译为“统一资源定位器”。URL的构成：protocol:/machine.name:port/directory/filenameprotocol：访问该资源所采用的协议madcine.name：资源主机的IP 地址,通常使用域名port：服务器在该主机所使用的端口号directory和filename：资源的路径和文件名,1.1.2 WWW与网页浏览,WWW:World Wide Web，译为万维网或环球信息网，也称为Web，是一个把信息检索与超文本技术相结合而形成的全球信息系统，它由遍布I

3、nternet中被称为WWW服务器的计算机组成，该服务器除了提供它自身的信息服务之外，还指向存放在其他服务器上的信息。网页浏览：通过WWW浏览器软件访问网页资源。目前最为流行的WWW浏览器为Microsoft的Internet Explorer和Netscape的Navigator。,1.1.3 静态网页与动态网页,静态网页静态网页是标准的HTML文件，其文件扩展名是.htm或.html;静态网页不能实现用户和网站之间的信息交互功能;静态网页可以包含翻转图像、GIF动画或Flash影片。动态网页能实现用户和网站之间的信息交互功能。包括两类：客户端动态网页和服务器端动态网页。,1.1.4 网页中

4、的基本元素,文本即文字信息，具有多种属性，如字体，字号，颜色，底纹和边框等。图像和动画图像在网页中具有提供信息、展示作品、装饰网页、表达个人情调和风格的作用。图像格式：GIF、JPEG、BMP、TIFF、TGA、RAS、EPS、PCX、PNG、PCD和WMF格式等。动画是运动的图画，一组静态画面的连续播放形成动画。制作动画的常用软件：Fireworks、Flash、3DS MAX等网页中使用最多的图像文件是GIF文件。,1.1.4 网页中的基本元素,声音和视频声音文件格式：MIDI、WAV、MP3和AIF等。视频文件格式：Realplay格式,MPEG,AVI和DivX等。超级链接从网页的热点

5、指向一个目的端的链接。目的端可以是另一个网页，也可以是一幅图片，一个电子邮件地址，一个文件，一个程序或者是本网页中的其他位置。热点通常是文本、图片或图片中的区域，也可以是一些不可见的程序脚本。,1.1.4 网页中的基本元素,表格在网页中表格用来控制网页中信息的布局方式。显示表格数据。表单实现网页与浏览用户的信息交互。如收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登陆站点等。其他常见元素悬停按钮、Java特效、ActiveX特效等。,1.1.5 网页中的HTML编码,HTML（Hyper Text Mark-up Language）即超文本标记语言，

6、是构成网页的基础语言，Internet网站中的每一个网页都有它对应的HTML编码。,显示网页的HTML编码打开一个网页，用图示快捷菜单的“查看源文件”命令。,HTML文件由HTML命令组成的描述性文本，HTML命令可以说明文字、图像、动画、声音、表格、链接等。,1.1.6 网页设计的基本方式,三种方式：直接编码利用可视化工具直接编码和可视化工具结合,网页设计的基本工具,1网页设计工具普通的文本编辑软件：用HTML语言直接编制Web页，如Windows记事本。可视化网页制作工具：Dreamweaver、FrontPage等。2素材处理工具常用：Photoshop、Flash、Fireworks、

7、CorelDraw、Cool 3D、FreeHand等。,网站设计的一般过程,1确定网站主题2素材组织整理3规划网站4选择合适的制作工具5制作网页6上传测试7推广宣传8维护管理,网页发布的一般过程,1网页发布的方式 直接拷贝 利用FTP工具传输常用的FTP传输软件：CuteFTP、LeechFTP、QuickFTP、FTP Commander等。利用开发工具（如Dreamweaver）的内置上传功能。,网页发布的一般过程,2发布个人网页的一般过程 选择ISP申请主页空间。申请后会得到一个网页地址、FTP主机地址、用户名以及密码等资料。上传网页文件。若使用FTP上传,需要在本地机安装一个FTP软

8、件。上传文件时，需要提供申请得到一个网页地址、FTP主机地址、用户名以及密码等资料。上传之后，即可通过浏览器访问网页。,HTML 语言起源于标准综合标记语言(Standard Generalized Markup Language 简称 SGML)，是由 CERN(欧洲粒子物理实验室)首先提出来的。其最早版本起源于1992年，HTML 4.01版于1999年12月24日被推荐使用。HTML通过文件格式标准化，统一使用一些标记符号(TAG)，对文件的内容进行标注，指出内容的输出格式，如字体大小、颜色，背景颜色，表格形式，各部分之间逻辑上的组织等。使用支持 HTML 的浏览软件，其它用户就可以对文

9、件进行自由的跳跃式的阅读，还可自行调整显示和阅读的形式。由于它简单易学，表现力强，适用广泛,所以深受用户喜爱，迅速得到了推广和普及。,HTML语言的由来,1.2 HTML文件的基本结构,HTML文件是由HTML的标记命令构成的文本文件，构成HTML文件的标记命令既有规定的语法格式，也有规定的使用位置。任何文本编辑软件都可对其进行编辑，以htm或html为扩展名存储后，用Web浏览器即可浏览相应的网页。1.2.1 HTML标记1.2.2 标记和属性,1.2.1 HTML标记,例1-1简单HTML文件示例 我的网页 Hello！网页设计的学习现在开始啦！,1.2.1 HTML标记,1标记HTML用

10、于描述功能的标识符称为标记，标记在使用时必须用尖括号“”加以限定，如。说明：HTML的多数标记都是成对出现的，前面的一个称为开始标记，后面的一个称为结束标记，结束标记需在标识符前使用斜杠“/”符号。标记中允许包含其他标记，但标记不能出现交叉。任何标记的大写和小写形式都是等价的。有的浏览器对有些标记是不支持的，当浏览器不支持某个标记时，该标记即被忽略。,1.2.1 HTML标记,2.标记的属性在标记中使用的参数称为标记的属性。一个标记可以有多个属性，每个属性都有对应的属性值。举例：其中：align：标记的属性；center：属性“align”的值。例1-2 标记属性示例,1.2.1 HTML标记

11、,例1-2 sample-p.htm 我的网页 Hello！网页设计的学习现在开始啦！同一个世界，同一个梦想！,超文本标识语言结构简单，语法较松散，易学易用。它是一种文字处理语言，而不是“程序”语言。超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。序（HTML的版本声明）是超文本标识语言的附加标识，放在HTML文档的第一行。在一般的文档中也许没有，序只是用来告知浏览器所遵循的HTML版本，当前的浏览器一般不要求含有序，而且也不会处理序，因此该标识可以忽略。但是若想保持编写严格遵循标准通用标识语言（SGML）的HTML文档，那么就该

12、保留序的位置。,1.2.2 HTML文件的结构,头 部 信 息文 档 主 体，正 文 部 分,1.2.2 HTML文件的结构,1.2.2 HTML文件的结构,HTML文件的基本结构图,1.2.2 HTML文件的结构,1.html标记html标记由“”和“”构成，“”通常位于HTML文件的开头，表示HTML文档的开始，“”位于文件的结尾，表示HTML文档的结束，HTML文档的其他内容都限定在html标记对中。一个HTML文件只有一对html标记。2.head标记head标记由“”和“”构成，位于HTML文档的前部。head区常用的标记有title、meta 等。,1.2.2 HTML文件的结构,

13、title标记功能：标识网页标题。格式：字符串说明：格式中的“字符串”是网页的标题内容，浏览网页时该内容显示在网页顶部的标题行中。meta标记功能：描述网页关键字和网页说明、定义网页语言编码、页面刷新设置等，进行网页浏览时，这些标记信息是不可见的。,1.2.2 HTML文件的结构,meta标记描述网页关键字“关键字列表”中的关键字是网络搜索引擎借以分类的关键词。例如：,1.2.2 HTML文件的结构,meta标记描述网页说明“网页说明信息”是一段文本，它将作为搜索引擎对网页的描述信息。搜索引擎就能够根据这些关键字搜索到相应网页，并显示关于网页的说明信息。,1.2.2 HTML文件的结构,met

14、a标记定义网页语言编码格式：例如：浏览器将自动选用gb2312 编码作为本网页的字符编码。,1.2.2 HTML文件的结构,meta标记页面刷新格式：其中：content属性中的“数值”代表刷新网页延迟的时间，单位是秒；“文件名或网址”为刷新时要链接到的文件或网址。当缺少URL项时，浏览器将刷新当前网页。,1.2.2 HTML文件的结构,meta标记例1-3 mark-meta.htm 我的网页 Hello！网页设计的学习现在开始啦！,1.2.2 HTML文件的结构,3.body标记网页的主体标记，由和构成，网页中的可见对象通常在body区内进行描述。body区常用的标记：排版标记、图像标记、

15、超链接标记、表格标记等。,1.2.2 HTML文件的结构,body标记的常用属性 bgcolor属性用于定义网页的背景颜色。用法一：bgcolor=#RGB颜色编码RGB颜色编码：一组六位的十六进制数值，第1、2位表示红色值（R），第3、4位表示绿色值（G），第5、6位表示蓝色值（B）。例如：,1.2.2 HTML文件的结构,bgcolor属性用法二：bgcolor=颜色标识符“颜色标识符”在HTML的预定义颜色符中取值。常用的预定义颜色符：black、olive、teal、red、blue、maroon、navy、gray、lime、fuchsia、white、green、purple、sl

16、iver、yellow、aqua例如：,1.2.2 HTML文件的结构,其他常用属性,1.3 排版标记,排版标记是对网页的页面版式进行控制的标记，主要有标题标记、段落标记、换行标记、文本标记、文字风格标记等 1.3.1 标题标记 1.3.2 段落标记 1.3.3 换行标记 1.3.4 文本标记 1.3.5 文字风格标记,1.3.1 标题标记,标题标记用于表示文本的各种题目，标题号越小，字号越大。格式：标题内容其中：hn分别表示h1、h2、h6。align是标题标记的属性，属性值为标题的对齐方式，具体为left、center和 right，分别使标题居左、居中和居右。例1-4 mark-hn.h

17、tm,标题标记,例1-4 mark-hn.htm 标题标记应用示例 这里是标题h1这里是标题h2这里是标题h3这里是标题h4这里是标题h5这里是标题h6,1.3.2 段落标记,段落标记p用于定义一个段落，并对段落的属性进行说明。格式：段落文本align属性的常用值：left，center和right，分别规定段落在窗口中的水平位置为居左、居中和居右。说明：p标记中的标记可以省略，浏览器在遇到下一个标记时自动开始一个新段落。通常一般文档中使用的分段标识在HTML中都被忽略掉，只有遇到标记时才会产生新段落。段落中不管有多少个连续空格，都将被处理为一个空格。例1-5 mark-p.htm,1.3.2

18、 段落标记,例1-5 mark-p.htm p标记和段落的示例第29届奥运会在北京举行。同一个世界，同一个梦想！2008，北京！中国北京欢迎来自世界各地的朋友！北 京 欢 迎 您！,1.3.3 换行标记,换行标记产生换行。格式：仅产生一个新行，并不产生新段落。若在一个段落中使用该标记，产生的新行仍然具有原段落的属性。例1-6 mark-br.htm,1.3.3 换行标记,例1-6 mark-br.htmbr标记示例第29届奥运会在北京举行。同一个世界，同一个梦想！2008，北京！中国北京欢迎来自世界各地的朋友！北 京 欢 迎 您！,1.3.4 文本标记,文本标记font用于控制文字的显示形式常

19、用属性：size、face、color，分别定义文字的大小、字形、颜色。1设定文字大小设定文字大小由size属性实现。绝对形式：文字字号取值1-7，数值越大字越大，HTML的默认字号为3号字。,1.3.4 文本标记,1设定文字大小相对形式：文字相对形式中字号的实际大小有两种情况：在没有特别设定基准字号的情况下，字号以默认字号3为基准变化。当使用标记设定基准字号后，字号将以n为基准变化。,1.3.4 文本标记,1设定文字大小例1-7 mark-font-size.htmfont(size)标记示例同一个世界，同一个梦想！同一个世界，同一个梦想！同一个世界，同一个梦想！同一个世界，同一个梦想！,1

20、.3.4 文本标记,1.设定文字字体设定文字字体由face属性实现，格式如下：文字例如：石油是一种不可再生能源说明：只有当前系统中能够使用的字体，相应设定才是有效的。,1.3.4 文本标记,3设定文字颜色设定文字的显示颜色由color属性实现。格式一：文字格式二：文字 示例：用法一：网页设计用法二：网页设计,1.3.4 文本标记,例1-8 mark-font.htmfont标记示例同一个世界，同一个梦想！同一个世界，同一个梦想！同一个世界，同一个梦想！,1.3.5 文字风格标记,1.3.5 文字风格标记,例1-9 mark-style.htm文字风格标记示例要设计好网页学习HTML是必要的！学

21、习HTML对设计网页毫无帮助！爱因斯坦与E=MC2是科学的奇迹！,1.4 多媒体标记图像标记,格式：功能：在网页中插入图像,1.4 多媒体标记,图像、声音等是重要的网页元素，在HTML文件中这些网页元素用多媒体标记进行描述。图像标记 背景音乐标记,1.4.1 图像标记,格式：功能：在网页中插入图像,例1-10 mark-img.htm图像标记示例,1.4.2 背景音乐标记,背景音乐标记bgsound用于插入背景音乐。一般格式：,用法举例：,1.5 连接标记,1.5.1 超链接标记 HTML的超链接由标记a实现。常用的链接形式：文件链接、锚点链接、E_mail链接。文件链接：指向一个文件目标；锚

22、点链接：指向网页中的某一部分；E-mail链接：通过邮件服务程序向指定信箱发送电子邮件。超链接标记a的常用属性是href属性和name属性。,1.5.1 超链接标记,1建立文件链接格式：字符串href属性中的“url”是被指向的目标，“字符串”在html文件中是链接标识，它以超链接的形式呈现在网页中。链接到网页示例：搜狐首页链接到其他文件示例：就业信息表,1.5.1 超链接标记,1.锚点链接锚点链接是将链接指向网页的某个具体位置，该位置可以在当前网页中，也可以在其他网页中。锚点链接的目的主要是实现较长网页文档的快速浏览。锚点链接需要使用链接标记a的name属性和href属性。name属性用于在

23、链接的目标位置设立锚点，href属性用于建立到锚点的链接，并设立链接标识，当用鼠标点击该链接标识后即跳转到网页的指定位置。,1.5.1 超链接标记,设立锚点设立锚点标记的格式：锚点提示信息 建立页内锚点链接格式：链接标识说明：href属性的“链接字符串”与name属性的“链接字符串”必须完全相同，否则链接将不能实现。“链接标识”可以是任何信息，在网页中以超链接的形式显示。“链接标识”标记可以出现多次，既可以位于锚点标记之前，也可以位于锚点标记之后。建立到其他网页的锚点链接格式：链接标识格式中的“url”是链接到的网页文件的url，若被链接的网页与当前网页在相同位置，则为网页文件的文件名。在这里

24、使用的文件名必须是文件全名。,1.5.1 超链接标记,Page-1.htm锚点标记应用示例（一）唐诗鉴赏台湾校园歌曲唐诗三百首(这里有若干首唐诗）王之涣诗词登鹳雀楼 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。(这里有若干首唐诗）,Page-2.htm锚点标记应用示例（二）歌曲欣赏(这里有若干首歌曲）台湾校园歌曲欣赏校园的早晨沿着校园熟悉的小路，清晨来到树下读书，(这里还有若干首歌曲）,1.5.1 超链接标记,3链接到E-mail一般格式：链接标识符其中：“E_mail地址”是要链接到的E_mail的实际地址。只有客户机已经安装了默认的电子邮件服务程序时，链接到E_mail功能才能启用。用

25、法示例：请给我写信,1.5.1 超链接标记,4用图像建立链接格式：格式中“”将插入一个图像，该图像将作为超链接标记a的链接标志。示例：,1.5.2 link标记,一般格式：主要功能：建立与外部文档的连接，建立的连接在HTML内部发生作用，网页的浏览用户并不会感觉到这种连接的存在。link标记最主要的作用是建立与外部样式表的连接。常用属性：rel属性、href属性、type属性link标记是head区的一个连接标记，与超链接标记a具有完全不同的功能。,1.5.2 link标记,1rel属性定义连接的文件和HTML文档之间的关系。用法：rel=atylesheet|alternate atyles

26、heet当rel取值为“atylesheet”时，指定一个固定或首选的样式；当取值为“alternate stylesheet”时定义一个交互样式。固定样式在样式表激活时总被应用。1.href属性指定目标文档的位置。用法如下：href=url3type属性指定媒体类型，如“text/css”是一个层叠样式表。link标记的用法示例：,第1章 网页基础语言HTML小结,1.HTML文件是由标记和其他文本元素构成的文本文件。2.HTML文档一般分为head区和body区两部分，主要的结构标记有html、head和body。head区的标记和body区的标记具有不同的网页功能。3排版标记主要用于网页主体内容的排版描述，主要内容包括标题定义、段落及换行控制、文本格式及文字风格控制等。4多媒体元素是网页的重要构成内容，包括图形、声音、视频等。5网页中的连接分为两大类：一类为页面可见的超链接，由超链接标记a实现；另一类是由link标记实现的连接，它与超链接完全不同。,