第1章网页基础知识.docx

《第1章网页基础知识.docx》由会员分享，可在线阅读，更多相关《第1章网页基础知识.docx（47页珍藏版）》请在课桌文档上搜索。

1、第1章网页基础知识本章要点(1)HTM1.基本概念:(2)认识HTM1.5;(3) HTM1.文档类型；(4) HTM1.基本元素。学习目标(1) 了解网页设计相关概念、专业术语；(2)掌握HTM1.文档类型；(3)了解网页设计工具；(4)掌握常用HTM1.标签的使用。1.1 HTM1.简介相对于HTM1.这个稍具专业色彩的术语而言，“网页”是我们更为熟悉的事物。近年来，网页伴随着互联网的普及深入生活的方方面面。除了我们熟知的大型门户网站(如新浪、搜狐等)，在移动设备、各种应用软件中都能看到网页的身影。而隐藏于网页之后的HTM1.技术，则深刻地影响着互联网时代经贸、科技、娱乐等各个领域的变革。

2、令人感到不可思议的是，具有如此大规模影响力的HTM1.技术，却被很多软件开发人员戏称为“世界上最简单的编程语言”，甚至并不认为HTM1.算一门编程语言。HTM1.究竟是什么？我们还是要从一段历史谈起。与大多数编程语言一旦推出新版本，老版本就好像隐退的那种“长江后浪推前浪”的发展历程不同，HTM1.的发展历程显得格外特殊、复杂，了解HTM1.发展的历史有助于我们选择最佳的方式进行Web设计。1989年，蒂姆伯纳斯-李(TimBemCrS-1.Ce)发明了万维网(WOr1.dWideWcb),并为其编写了第一套万维网服务器与客户端程序。1990年12月，他完成了第一版的HTM1.规范，规定了超链接

3、的使用，并定义了URI、HTTP等概念。HTM1.因其简单、高效等特性，一经推出就迅速成为发布Web内容的主要格式。1994年，为了更好地规范HTM1.,TimBemers-1.ee成立了W3C委员会(WOrIdWideWebConsortium),该委员会在M1.T(麻省理工学院)、ERC1.M(欧洲数学与信息学研究机构)、日本庆应义熟大学的领导下致力于发展、完善各种网络技术规范，为软件开发人员所熟悉的HTM1.、CSSsXM1.等技术规范均出自W3C组织。然而遗憾的是，在相当长的一段时间内，W3C并没有强势地维护其制定HTM1.标准的权力，导致HTM1.的发展经历了长时期混乱、恶性竞争的阶

4、段。造成这种局面的起因史称“浏览器之争”。在TimBemers-1.ee发明了HTM1.之后，他本人却无意开发图形界面的HTM1.浏览器，而大多数的计算机使用者并不擅长借助命令行程序浏览网页。来自伊利诺伊州立大学的学生马克安德森抓住了这一机会，研发了图形界面的MOSaiC浏览器，之后于1994年成立了网景公司，推出了NaVigatOr浏览器，一年半后，NaVigator浏览器的用户达到了6500万人,Navigator浏览器成为人们浏览网页的首选。很快微软公司看到了浏览器软件所带来的商机，于是推出了InternetEXPIorer浏览器，并通过免费使用、与操作系统捆绑等商业手段占据了浏览器市场

5、的半壁江山。在InternetExp1.orer与Navigator浏览器竞争的过程中，为了绑定Web开发人员，两者均在W3C制定的HTM1.标准上又推出了只能在自家浏览器上正常运行的新特性。这种竞争方式在之后的大大小小浏览器之争中频繁出现，造成了Web编程不统一，难以兼容各种浏览器的局面。归纳起来，HTM1.的发展历程如下。超文本标记语言（第一版）1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）。HTM1.2.01995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布已经过时。 HTM1.3.21996年1月14日，W3C推荐标准。HTM

6、1.4.01997年12月18日，W3C推荐标准。HTM1.4.01（微小改进）1999年12月24日，W3C推荐标准。ISO/IEC15445:2000（ISOHTM1.）2000年5月15日发布，基于严格的HTM1.4.01语法，是国际标准化组织和国际电工委员会的标准。 XHTM1.1.0发布于2000年1月26日，是W3C推荐标准,后来经过修订于2002年8月1日重新发布。XHTM1.1.1于2001年5月31日发布。XHTM1.2.0XHTM1.2.0是完全模块化可定制的XHTM1.,随着HTM1.5的兴起，XHTM1.2.0工作小组被要求停止工作。2006年，W3C组织组建了新的HT

7、M1.工作组，并于2008年发布了HTM1.5o HTM1.52014年10月28日，W3C组织宣布经历8年努力，HTM1.5标准规范终于定稿。由于各个浏览器之间的标准不统一，给网站开发人员带来了很大的麻烦。HTM1.5的出现即是为了解决这一问题，致力于将Web带入一个成熟的应用平台。很多人误认为HTM1.5是指用HTM1.5+CSS+JavaScript实现的综合网页效果，但实际上HTM1.5仅仅是一套新的HTM1.标准，是对HTM1.及XHTM1.的继承与发展。HTM1.5是一个向下兼容的版本，本质上并不是什么新技术，只是在功能特性上变得丰富。1.2 认识Web标准我们在日常生活中会不经意

8、地使用到标准。如，买灯泡时，我们知道要买螺旋式或卡口式灯泡，这样才会与家中的灯座配置匹配。标准保证了我们买的灯泡不会太大，也不会太宽。标准在我们身边：插头、电器的额定功率，以及我们使用的时间、距离、温度，等等。Web标准出自同样的道理。当浏览器制造商和WCb开发人员都采用统一的标准时，编写浏览器专用标记的需求就减少了。通过使用结构良好的HTM1.对网页内容进行标记，并使用CSS来控制网页的呈现，我们便可设计出能在各种标准兼容浏览器中显示一致的Web网站，而不管是什么样的操作系统。重要的是，当同样的标记由基于文本的旧式浏览器或移动设备浏览器呈现时，其内容仍然是可访问的。Web标准节约了Web设计

9、者的时间，让他们坚信自己的杰作是可访问的，而不管用户使用的是哪种平台或浏览器。Wcb标准成立于1998年，Web标准直致力于跨不同浏览器的标准实现和基于标准的Web设计方法。其目标是降低Web开发的成本与复杂性，并通过使Web内容在不同设备和辅助技术之间更具一致性和兼容性，提高Web页面的可访问性。浏览器和工具开发商务必进行改进和协调，以支持WOrIdWideWebConSOrtiUm(万维网联盟，W3C)推荐的Web标准，参见如下“知识链接”模块。知识链接：W3CW3C(Wor1.dWideWebConsortium)是万维网联盟的缩写，是制定网络标准的一个非营利组织，成立于1994年10月

10、，其宗旨是通过促进通用协议的发展并确保其通用性，激发Web世界的潜能；研究Web规范和指导方针，致力于推动Web发展，保证各种Web技术能很好地协同工作。大约500名会员组织加入这个团体，它的主任TimBemers1.ee()在1990年发明了WeboW3C推行的主要规范有HTM1.、CSS、XM1.、XHTM1.和DOM(DocumentObjectMode1.)OW3C同时与其他标准化组织协同工作，比如Internet工程工作小组(IntemetEngineeringTaskForce)无线应用协议(WAP)以及Unicode联盟(UniCodeCOnSortiUm)OW3C自成立以来，已

11、发布了100多份技术规范，领导着Web技术向前发展。1.3 HTM1.的基本概念1什么是HTM1.HTM1.指的是超文本标记语言(HyPerTeXtMarkUP1.angUage)。HTM1.不是一种编程语言，而是一种标记语言(MarkUP1.angUage),是用于描述网页内容结构的语言。使用HTM1.可以:发布包含标题、文本、表格、列表、图片的在线文档。通过单击超链接进行网页间的跳转。设计表单将用户输入的内容提交给服务器进行处理。可以嵌入声音、视频等多媒体内容。2 .什么是HTTPHTTP(HypertextTransferProtoco1.,超文本传输协议)是互联网上应用最广泛的一种网络

12、协议，它规范了通过网络请求与接收HTM1.页面的方法。浏览网页时在浏览器地址栏中输入的UR1.前面都是以http:开始的。HTTP定义了信息如何被格式化、如何被传输，以及在各种命令下服务器和浏览器所采取的响应。HTTP将一次用户浏览网页的过程定义为一次客户端与服务器端的交互。客户端是终端用户，服务器端是网站。客户端通过使用Web浏览器或其他工具对服务器上指定的端口(默认为80泼出HTTP请求；服务器则接收此HTTP请求，并将服务器上存储的一些资源(比如HTM1.文件和图像)通过HTTP响应发送给客户端。3 .什么是浏览器浏览器(BrOWSer)是万维网(Web)服务的客户端浏览程序，可向万维网

13、服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。通常说的浏览器,般是指网页浏览器，除了网页浏览器之外，还有一些专用浏览器用于阅读特定格式的文件。在互联网上浏览网页内容都离不开浏览器。浏览器实际上是一个软件程序，用于与WWW建立连接，并与之进行通信。它可以在WWW系统中根据链接确定信息资源的位置，并将用户感兴趣的信息资源取I可来，对HTM1.文件进行解释，然后将文字图像或者将多媒体信息还原出来。下面介绍几种目前主流的网页浏览器。(1)微软公司提供的网页浏览器IE(InternetExp1.orer)0IE采用集成于操作系统的方式提供，当用户安装微软操作系

14、统时，自动安装IE,因此采用WindoWS操作系统的电脑不需要单独安装1E,不过新版本的浏览器还需要另行下载安装。最近几年，随着竞争对手层出不穷，市场份额有所下降。IE采用微软研发的Tridem内核，很多浏览器(如遨游、搜狗浏览器等)均是在此内核基础上开发的。(2) Firefox(火狐浏览器)是开源软件，完全免费，该软件有众多互联网高手为其提供技术支持，安全性能都非常有保障。用户可以方便地下载并加载各种各样的功能插件，大大丰富和扩展了火狐浏览器的功能，任何一款浏览器都无法与火狐相比。火狐浏览器的下载量据官方统计已经超过了1亿。(3) OPera浏览器是比较早的一款有影响力的浏览器。因为IE的

15、垄断与压迫，支持者少。OPera浏览器，是挪威OPemSOnWareASA公司制作的支持多页面标签式浏览的网络浏览器，是跨平台浏览器，可以在WindOWs、MaC和1.inUX三个操作系统平台上运行。OPera浏览器创始于1995年4月。(4) GoOgIe(谷歌)公司的ChrOme,是一个由GoogIe公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写的，包括WebKi3目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。软件的名称来自称作Chrome的网络浏览器图形使用者界面(GUI)o软件的beta测试版本在2008年9月2日发布，提供50种语言版本，有WindoWs、

16、MacOSX、1.inux、Android以及iOS版本提供下载。2019年Chrome已达全球桌面份额的69.98%,成为全球使用最广的浏览器。常见浏览器图标如图1-1所示。PC靠浏览SS分布情况慢狗潮览3其他PC战洌见m世界之窗澜览3IE湖览m3516%ChrOme渤宽 21 38.15%FgfS满览券.8.28%QQ 澜宽 33.00%2.35%234SM6 2 00% ESe澜览三 0 98%的澜览3 0.78% I XfM漏更W632%0.23%图1-1常见浏览器图标2019年第一季度国内主流浏览器市场份额调查数据如图1-2所示。0.65%38澜更30.51%达蒙满史m0.45%Op

17、。Q淘览2!0.24%图1-22019年第一季度国内主流浏览器市场份额调查数据知识链接:浏览器大战网页浏览器(简称浏览器)本身只是个显示网站服务器或互联网档案系统内的文件并让用户与这些文件互动的应用软件，但是基于它本身的意义所在成为互联网的入口，因此浏览器之间的“拼杀”和“大战”就不可避免了。1 .“三次浏览器大战”第一次浏览器大战爆发于19951998年，微软通过捆绑操作系统来推广IE,将当时占市场90%的网景NetSCaPe浏览器彻底击败。这次大战给微软留下三个隐患。(1)为对抗NetSC叩e,微软在IE里加入了很多非标准的专属标签，致使后来的IE6成为开发者的噩梦，破坏了开放标准。(2)

18、捆绑销售IE的做法被指垄断，受到反垄断的压制。(3)网景为吸引开发者开放源代码创造了MOZina,虽未能挽回NetSCaPe的市场占有率，但是它衍生出了Phoenix,即现在的FirefbX(火狐浏览器)。由于第一次浏览器大战留下的隐患导致了20052007年的第二次浏览器大战。这次大战后，FirefOX在北美、欧洲等地区的占有率接近甚至超过20%,微软全球范围内的份额也从IE6高峰时的96%先是下降到85%,2007年年末的时候稳定在60%左右，不再是“唯一的浏览器”了。第三次浏览器大战暂时还没有明确定义，大致于2009年开始至现在。先来回顾几个关键的节点。(1) 2009年7月，在欧盟反垄

19、断的压力下，WindOWS7欧版将不再捆绑正，使用者可以自选浏览器。(2) 2010年1月，FirefbX在欧洲市场占有率超越IE,首次突破微软独大的局面。(3) 2011年12月，ChrOme全球市场份额超越FirefbX,成为仅次于IE的全球第二大浏览器。(4) 2012年3月18日，Chrome全球市场份额为32.70%,而IE为32.48%,Chrome首次以微弱优势超过微软IE。第二天后，IE浏览器的浏览量回升至35%,ChrOme浏览器的份额则下滑至30%。2 .未来之势三次浏览器大战后，基本态势已经形成。除去在部分国家IE、FirefbX和ChrOme各自占优势外，这三大桌面浏览

20、器在全球范围内目前有并驾齐驱之势。不过走势却不尽相同，除了Chrome依旧处于上升阶段外，IE和FirefoX都在缓慢下降。1.4 HTM1.文件类型Web页面(网页)也是一种文档，HTM1.就是用来编写这些文档的一种标记语言，文档的结构和格式的定义是通过HTM1.元素来完成的，HTM1.元素是由单个或一对标签定义的包含范围。一个标签就是左右分别有一个小于号(V)和大于号()的字符串。开始标签是指不以斜杠(/)开头的标签，其内是一串允许的属性/值对；结束标签则是以一个斜杠(/)开头的。HTM1.元素的组成如图1-3所示。开始标签属性/值对内容Z结束图1-3HTM1.元素的组成HTM1.标记(m

21、arkup)和标签并不是同义的。HTM1.标记包括开始标签(tag)、结束标签、空元素标签、实体引用、字符引用、注释、文档类型声明等。学习HTM1.的重点;就是掌握HTM1.元素及其属性的作用。一个标准的HTM1.文件应该以Vhtm1.开始标签开始,中间包含Vhead与VbOdy等元素，其中Vhead部分可以定义页面的标题、简介、编码格式等内容，body部分为在浏览器中显示的页面正文。1)标记符Vhtm1标记符说明该文件是用HTM1.来描述的，它是文件的开头，而VhtmA则表示该文件的结尾，它们是HTM1.文件的开始标记和结尾标记。2)头部标记符head和head这两个标记符分别表示头部信息的

22、开始和结尾。头部包含的是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符，它用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用作书签和收藏清单。3)正文标记符网页中显示的实际内容均包含在body和v/body这两个正文标记符之间。正文标记符又称为实体标记符。4)文档标题文档标题头部以tit1.e开始，以/tit1.e结束。下面的代码为一个不包含内容的标准HTM1.文档结构：通过VtitIe元素可以指定页面的标题，标题会出现在浏览器的标题栏中，如果通过浏览器收藏本页面，页面标题也会作为收藏夹中页面的内容。文档的内

23、容是通过元素来指定的，在元素的开始标签和结束标签之间放置文档的内容。如果需要在页面上添加注释，可以使用符号V!一和一包含注释内容。例1-1是一段设置了标题和内容的HTM1.文件代码。【例1-1】标题tit1.e的设置。页面标题!一这是一段注释一这是在HTM1.中显示的文本。注意：浏览器遇到连续的空格或换行时只会在页面上显示个空格结果如图1-4所示。Or*%aI!sa7+这是在B1.1.中显示的文本.注意，浏览器遇到连续的空格或按行时只会在页面上显示一个空格图1-4例1-1在浏览器中显示的效果如果显示的文本中包含一些特殊字符（比如可能会与标记符号冲突的V和符号），需要通过字符引用的方式才能输入。

24、在HTM1.中有两种字符引用类型：字符引用和实体引用。字符引用和实体引用都是以一个和号（&）开始并以一个分号（；）结束。如果使用的是字符引用，需要在和号（&）之后加上一个#号（#），之后是所需字符的十进制代码或十六进制代码（ISO10464字符集中字符的编码）。如果使用的是实体引用，在和号（&）之后写上字符的助记符。常用特殊字符的字符引用和实体引用如表1-1所示。表1-1常用特殊字符的字符引用和实体引用引用字符字符引用（十进制代码）字符引用（十六进制代码）实体引用描述"""双引号&&&和号续表引用字符字符引用（十进制代码）字符引用（十六进制

25、代码）实体引用描述>>>；大于号   不间断空格©©©符号®®®注册商标使用字符引用的显示如例1-2所示。【例1-2】设置特殊字符效果。Ctit1.e页面标题    HTM1.中标题元素为tit1.e>    所有的转义字符都以&符号作为开始结果如图1-5所示。O口勇孱浏冤!jti+%削中标题元素为所有的转义字符都以&符号作为开始图15例1-2在浏览器中显示的效果1.5 HTM1.5概述1.5

26、.1 了角星HTM1.5HTM1.5和CSS3是新一代Web技术的标准，致力于构建一套更加强大的Web应用开发平台，以提高Web应用开发的效率。HTM1.5的第一份正式草案于2008年1月22日公布。目前，HTM1.5仍处于不断完善之中。2012年12月170,W3C宣布凝结了大量网络工作者心血的HTM1.5规范正式定稿。W3C的发言稿称“HTM1.5是开发Web网络平台的奠基石”。2013年5月6日，HTM1.5.1正式草案公布，该规范第一次要修订万维网的核心语言一HTM1.o在这个版本中，新功能不断推出，以帮助Web应用程序的作者努力提高新元素的互操作性。2014年10月29日，W3C宣布

27、，经过近8年的艰苦努力，HTM1.5标准规范终于制定完成了，并已公开发布。目前，各主流浏览器都能很好地支持HTM1.5,包括FirefbX（火狐浏览器）、IE9及其更高版本、Chrome（谷歌浏览器）、SafariOPera等；国内的MaXthon（遨游浏览器）以及基于IE或ChrOmiUm（ChrOme的实验版）所推出的360浏览器、搜狗浏览器、浏览器、猎豹浏览器等国产浏览器同样具备支持HTM1.5的能力。1.5.2 HTM1.5的新功能从HTM1.4、XHTM1.到HTM1.5,从某种意义上讲，这是HTM1.描述性标记语言的一种更加规范的过程。因此，HTM1.5并没有给开发者带来多大的冲击

28、，但HTM1.5增加了很多非常实用的新功能和新特性。下面具体介绍HTM1.5的一些新功能。1 .解决了跨浏览器问题在HTM1.5之前，各大浏览器厂商为了争夺市场份额，会在各自的浏览器中增加各种各样的功能，并且不具有统一的标准；使用不同的浏览器，常常看到不同的页面效果。在HTM1.5中，纳入了所有合理的扩展功能，具备良好的跨平台性能。针对不支持新标签的老式IE浏览器，只需简单地添加JaVaSCriP1.代码就可以使用新的元素。2 .新的文档类型DOCTYPE和字符集根据HTM1.5的设计准则，Web页面的DoeTYPE被极大地简化了。XHTM1.中的DOCTYPE代码如下：!DOCTYPEhtm

29、1.PUB1.ICn-W3CDTDXHTM1.1.0Transitiona1.ENuHTM1.5中的DOCTYPE代码如下：同样，在HTM1.5中，字符集的声明也被简化了许多。XHTM1.的字符集声明如下：HTM1.5中的字符集声明如下：3 .脚本和链接省去了type属性在HTM1.4或XHTM1.中，添加CSS或JaVaSCriPt文件时，代码中需有type属性。例如：在HTM1.5中不再需要指定类型属性，因此，代码可以简化如下：4 .语义化标记在HTM1.5之前，Web前端开发者使用div来布局网页，但div没有实际意义，即使通过添加C1.aSS和id的方式表达这块内容的意义，标记本身也没

30、有含义，只是提供给浏览器的指令。HTM1.5则为页面章节定义了含义，也就是语义化元素。虽然对Web前端开发者来说，这些语义化元素与普通的div元素没有任何区别，但却为浏览器提供了语义的支持，使得浏览器对HTM1.的解析更智能和快捷。GOOgIe分析了上百万的页面，从中分析出了div标签的通用ID名称，并且发现其重复量很大，例如很多开发人员使用VdiVid=heade”来标记页眉区域。所以HTM1.5就添加了标记来定义页眉内容。5 .支持现有内容HTM1.5是向后兼容的。它包含HTM1.4规范的全部特性，进行了少量修改和完善。它还包含很多用于创建动态Web应用程序以及创建更高质量的标记所需的附件

31、素材。为了兼容各个浏览器，HTM1.5采用宽松的语法格式，在设计和语法方面做了一些改变，具体如下。标签不区分大小写。允许属性值不使用引号。标签可以不用关闭。HTM1.5同时允许这些写法，对于那些写了很多年XHTM1.1.0代码，已经非常适应严格语法的开发人员来说，这是难以适应的。但站在浏览器的角度，这些写法实际上是一样的，肯定没有什么问题。HTM1.5具有比XHTM1.1.O宽松得多的语法限制。HTM1.5允许Web页面使用HTM1.4.01或XHTM1.1.0语法进行标记，无论使用哪一种语法，HTM1.5都能对其进行包容。我们建议采用比较严格的XHTM1.语法。因为规则是有用的，它们能够协同

32、工作，让大家遵照一种标准化语法。规则也使标记易于学习。1.5.3 HTM1.5的新特性HTM1.从1.O到5.0经历了巨大的变化，从单的文本显示功能到图文并茂的多媒体显示功能，许多特性经过多年的完善，已经发展成为种非常重要的标记语言。1 .新增的与结构相关的元素(1)在HTM1.5之前，与页面结构相关的元素主要使用DIV+CSS进行页面布局，而HTM1.5中，可以直接使用各种主体结构元素进行布局。这些元素包括如下几种。section：表示页面的一个内容区域。artic1.e,：表示页面的一块独立内容。:表示页面上元素之外的，但是与相关的辅助信息。:表示页面中的导航部分。(2)除此之外，还新增了

33、一些非主体结构元素。主要包括如下几种。:表示页面中的一个内容区域或整个页面的标题。 VhgrOUp：对整个页面或页面中VSeCtiOn的Vheader进行组合。 VfbOter：整个页面或页面中VSeCtiOn的页脚。:表示一段独立的文档流内容。 VfigCaPtion：VfigUre元素的标题。2 .新增的与结构无关的元素新增的与结构无关的元素主要用于定义音视频、进度条、时间、注释等。下面列举几个常用的。XJ.1.r Xlz Xlz JZ 1 2 3 4 5 z( z( z( /(V z(:用于定义视频。:用于定义音频。:表示画布，再利用脚本在上面绘制图形等。:表示菜单列表。:用于表示日期、

34、时间。3 .新增的表单元素类型(1) :表示必须输入E-mai1.地址的文本输入框。(2) :表示必须输入UR1.地址的文本输入框。(3) :表示必须输入数值的文本输入框。(4) :表示必须输入一定范围内数字的文本输入框。1.5.4 HTM1.5的新增属性1 .新增的表单相关属性表1-2列出了新增的与表单相关的属性。表1-2新增的与表单相关的属性属性标记描述p1.aceho1.derinput(type=text),textarea对用户的输入进行提示forminpu1.、output、se1.ect、textareabuttonfie1.dset声明属于哪个表单，这样可以将其放在任何位置，而

35、不是必须放在表单内requiredinput(type=text)、textarea用户提交时，检查元素内必须输入内容autofocusinput(type=text)se1.ecttextarea、button打开时自动获得焦点1.istdata1.istxinput定义选项列式，与input配合使用fbnactioninput、button陵盖form元素的action属性fbrmenctypeinpu1.、button覆盖form元素的enctye属性Ibnnmethodinpu1.、button覆盖form元素的method属性fbrmtargetinputbutton覆盖form元素

36、的target属性2 .新增的链接相关属性新增的链接相关属性具体如下。(1)为a、area元素新增了media属性，该属性用于规定目标UR1.是为特殊设备(如iPhone)语音或打EH媒介设计的。可以接受多值，但只能结合href属性一起使用。(2)为area元素增加了href1.ang和re1.属性。hrefIang属性规定了在目标文档中文本的语言，属于纯咨询性的，需要与href属性一起使用；re1.属性规定了当前文档和目标文档之间的关系，也需要与href属性一起使用。(3)为1.ink元素新增了SiZe属性，该属性规定了目标资源的尺寸，只有被链接资源是图标时(re1.=icon)，才能使用该

37、属性。可接受多值，多值之间由空格分隔。(4)为base元素增加了target属性，主要是为了与a元素保持一致。3 .新增的其他属性新增的其他属性具体如下。(1) o1.元素增加了reversed属性，用于指定列表倒序显示。(2) Vmenu元素增加了type和1.abe1.属性。1.abe1.属性为菜单定义个可见的标注，type属性可以让菜单以上下文菜单、工具条与列表菜单三种形式出现。(3) VSty1.e元素增加了SCoPed属性，可以为文档的指定部分定义样式。(4) Vmeta元素增加了CharSet属性。(5) Vhtm1元素增加了manifest属性，开发离线Web应用程序时，该属性与

38、AP1.结合使用。(6)为ifiame增加了Sandbox、SCam1.eSS和SrCdoC三个属性，用来提高页面安全性。1.6 HTM1.编辑器介绍可以通过多种编辑器开发HTM1.页面，下面介绍一些常见的HTM1.编辑器。FrontPage:微软公司提供的老一代静态网页设计工具，现在已经停止更新。Dreamweaver：原为MaCrOmedia公司的老牌网页设计工具，于2005年被Adobe公司收购，是目前最流行的HTM1.开发工具之一。最新版的DreamWeaVer支持实时预览、跨浏览器兼容、CSS检查等高级功能。ExpressionWeb：微软公司提供的FrOntPage替代工具，可以通

39、过可视化的方式快速开发符合Web标准的HTM1.页面，并且支持与后台服务的集成开发。下面以DreamweaverCS6中文版为例，学习如何通过编辑器快速开发HTM1.页面。(1)启动DreamWeaVerCS6后会出现欢迎界面，此时选择“文件”f“新建”命令，弹出如图1-6所示的对话框。图1-6“新建文档”对话框(1)一个网页对应于一个HTM1.文件，HTM1.文件以.htm或.htm1.为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生HTM1.文件。标准的HTM1.文件都具有一个基本的整体结构，即HTM1.文件的开头与结尾标志和HTM1.的头部与实体两大部分。有3个双标记符用

40、于页面整体结构的确认。(2)在“文档类型”下拉列表中选择“无”，然后单击“创建”按钮，DreamwcavcrCS6就会创建一个包含标准结构的HTM1.网页，并以默认视图打开，如图1-7所示。图17网页编辑界面Dreamwcaver生成的代码中包含元素”,此元素用来指定页面中字符的编码格式。编码格式会影响页面的文本。常见的网页编码有UTF8、GB2312、GBK、BIG5,ISO8859-1等，其中GB2312和GBK均为简体中文的编码，BIG5为繁体中文编码，ISo8859-1为英文编码，而UTF8编码为比较通用的字符集，可以容纳世界上大多数的语言文字，使用UTF-8作为网页的编码格式可以让网

41、页具有较高的通用性。有时我们在浏览网页时会发现网页显示为乱码，多数是因为编码格式设置不正确引起的。网页创建成功后，既可以在源代码视图中直接编辑代码，也可以在可视化视图中通过更简单的方式编辑网页内容(注意：在学习HTM1.的初期，为尽快熟悉HTM1.标记，应尽量使用源代码视图编辑代码)。(3)当页面编辑完成后，可以通过单击“预览”按钮在浏览器中查看效果，如图1-8所示。每次预览时DreamWeaVer会自动保存文件内容，首次预览时会提示输入文件名，请注意HTM1.文件的扩展名应为.htm或.htm1.下面使用DrcamwcaverCS6制作一个符合W3C标准的HTM1.5网页，具体操作如下。(1

42、)启动DreamWeaVerCS6,新建HTM1.文档，打开如图1-9所示的对话框，在“文档类型”下拉列表框中选择HTM1.5。图1-9“新建文档”对话框(2)(2)创建新的HTM1.文档，单击文档工具栏中的“代码”按钮，切换至代码状态。HTML基本代码的结构如图1-10所示。(3)修改HTML文档标题，将VtitIe标记中的内容修改为“第一个HTML 5文档”。(4)在网页主体中添加内容，即在VbOdy标记中编写代码如下：htm15的基本结构一个完整的HTML文档包括标题、段落、列表、表格及各种嵌入对象，这些统称为HTML元素， HTML用标记来分隔并描述这些元素。所以，HTML文档就是由各

43、种HTML元素和标记组成的。(5)保存网页，在IE1.O中预览，效果如图IJl所示。图I-IO新建HTM1.5文档&P - I1. 0 MTML5s5:htm1.5的基本结构一个完整的HTM1.文档包括标题、段落、列表、袤格及各种嵌入方象.这总充称为HTML元素.HTML用 标记来分隔并描述这些元素.所以.HTML文档就是 由各HTML元案和标记组成的.100%-图1-11网页预览效果1.7基本元素介绍HTM1.中包含很多元素，本章将详细介绍部分元素，其他元素仅做罗列，具体用法会在后续章节中介绍。1. 页面信息元素Vmeta页面信息元素可提供有关页面的元信息(Me1.a-InfOrmaIion),比如针对搜索引擎提供的页面描述和关键词、指定页面编码等。该元素应该出现在Vhead标记的内部。页面信息元素常用属性如下。(1) http-cquiv：设置本页面有关的信息，需要与COntent属性配合使用。常见的设置如下。指定页面的文本编码格式：页面显示5秒钟后浏览器跳转到页面：浏览器可以缓存本页面直至2011年2月23日18点，超过此时间后浏览器必须重新从服务器上取得此网页内容：(2) name：描述网页内容，供搜索引擎收录；需要与Content属性配合使用。常见的设置如下。设置本网