《Web技术基础》第2课标准化页面结构化文档

第2课标准化页面结构化文档知识回顾•Web体系结构。•超文本标记语言。•Web标准。前馈及作业总结•较好：2、3、5、8组。•问题–没有分组的。没交（8），没完成（6、10）。–6、7组是复制。–9、11组互相复制而且内容错误。–没有提出问题（1）、有的组个人。–是否精讲全是否（1）。•格式–第2小组《Web技术基础》课程前馈表。前馈检查•XHTML有哪几种不同的DTD？•元素和标签可以分为哪两类？•文档头部中有哪个元素是必须的？•简述结构化文档的主要架构，主要使用什么语句建立结构化文档？•XHTML列表有几种？讲授内容•XHTML文档结构•XHTML语法•XHTML通用元素•XHTML列表•建立结构化文档2.1XHTML基础•XHTML文件是由一些标签语句组成的文本文件，标签标识了内容和类型，Web浏览器通过解析这些标签进行显示。XHTML文件可以通过任意文本编辑器创建，但文件的扩展名必须使用“.htm”或“.html”，建议使用“.html”，以适应跨平台的需要。2.1XHTML基础——XHTML文档结构类型声明版本信息!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN元素htmlxmlns=头元素head标题元素title标题内容/title其他头内元素元标签meta（文档说明）脚本元素script（脚本语言函数定义）/head体元素body文档内容/body/html2.1XHTML基础——XHTML文档结构•相应的源代码如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN=…/headbody…/body/html2.1XHTML基础——XHTML文档结构•在XHTML文档中，文档类型声明!DOCTYPE是强制使用的，总是位于首行。XHTML文件结构和元素标签是由DTD（DocumentTypeDefinition/Declaration，文档类型定义/声明）定义的，DTD规定了XHTML通用标记语言的语法和标签的规则，这些规则包括一系列的元素和实体的声明。XHTML1.0定义了三种文档类型。2.1XHTML基础——XHTML文档结构1.XHTML1.0Strict（严格类型）•严格类型不允许使用HTML框架集元素frame、frameset和noframes，也不赞成使用HTML元素applet、basefont、center、dir、font、iframe、isindex、menu、s、strike和u，这些元素大多与外观表现有关。文档类型格式声明如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN基础——XHTML文档结构2.XHTML1.0Transitional（过渡类型）•过渡类型可以使用严格类型不赞成使用的元素，但不能使用框架集元素。文档类型格式声明如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN基础——XHTML文档结构3.XHTML1.0Frameset（框架类型）•框架类型可以使用框架集元素和严格类型不赞成使用的元素。格式声明如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Frameset//EN•严格类型限制最多，很多传统的HTML元素都不支持。框架类型最宽松，支持所有传统HTML元素。建议使用XHTML1.0Strict。2.1XHTML基础——元素与标签•元素是标记语言的基本单元，元素是通过使用XHTML标签进行定义的。•元素（element）指文档的各种成分（如头、标题、段落、表格和列表等）。元素的类型、属性和范围用标签来标识、设置和界定。•元素之间可以嵌套（形成树状结构），但不能交叉。嵌套的诸元素构成父子关系，外层称为父元素，内层称为子元素，多级嵌套则形成多重辈分的层次等级关系。2.1XHTML基础——元素与标签•标签（tag，标志/标记/标识/标注）是用来描述文档内容的类型、组成与格式化信息的文本字符串，用一对尖括号“”和“”括起，位于起始标签和终止标签之间的文本是元素的内容。标签可用于标识元素的类型，设置元素的属性，并界定元素内容的始末。•如这是一个XHTML元素：b此文本是粗体的。/b2.1XHTML基础——元素与标签•元素可按有无元素内容分为非空元素和空元素两类，对应的标签为非空标签与空标签。1.非空元素与标签•非空元素指含有内容的元素，非空标签指标识非空元素的标签，有开始和结束两个标签。非空元素标签语句语法如下：元素名[属性名=属性值]…元素内容/元素名2.1XHTML基础——元素与标签•其中“元素名[属性名=属性值]…”标识元素的开始，方括号内为可选内容。“/元素名”标识元素的结束。•例如标题和超连接元素。title测试页/titleahref=清华大学/a2.1XHTML基础——元素与标签2.空元素与标签•空元素指不含内容的元素，空标签指标识空元素的标签。一个空元素只有一个标签。空元素标签语句语法如下：元素名[属性名=属性值]…/•例如图像、换行和水平线元素。imgsrc=lena.gif/br/hr/2.1XHTML基础——元素与标签XHTML1.0参考手册•XHTML1.0中共有91个元素，其中有12个空元素、11个严格类型不赞成使用的元素和3个严格类型不允许使用的框架集元素。2.1XHTML基础——属性•属性为XHTML元素提供附加信息。属性总是以“名称/值”对的形式出现，比如：“name=value”，属性总是在XHTML元素的开始标签中规定。•开始标签使用多个属性时，用空格分隔，出现的顺序无关紧要。属性值要用单引号或双引号括起来，单引号括起来的属性值中可以包含双引号，双引号括起来的属性值中也可以包含单引号。bodybgcolor=yellow2.1XHTML基础——属性•XHTML有些属性是通用于每个标签的，是XHTML标准属性，标准属性主要有核心属性和语言属性（有个别例外），同时各个标签都有自己的特殊属性。1.核心属性（CoreAttributes）•核心属性是标签使用最多也是最重要的属性，标签base、head、html、meta、param、script、style和title元素不能使用。2.1XHTML基础——属性•为了区分重复元素，可以用id属性给每个元素定义唯一的标识。每个元素的id属性值在XHTML文档中必须是唯一的。•有些元素无论内容还是样式都基本相同，可以把这些元素合并为一类，用class属性进行标识。属性值描述classclass_rule或style_rule元素的类（class）idid_name元素的特定idstyle样式定义内联样式定义title提示文本显示于提示工具中的文本2.1XHTML基础——属性2.语言属性（LanguageAttributes）•语言属性不经常使用，标签base、br、frame、frameset、hr、iframe、param和script元素不能使用。属性值描述dirltr|rtl设置文本的方向lang语言代码设置语言代码2.1XHTML基础——语法规则1.元素必须正确嵌套•在XHTML中，所有的元素必须彼此正确地嵌套。如：bi粗体和斜体/i/b!--正确--bi粗体和斜体/b/i!--错误--2.1XHTML基础——语法规则2.元素标签必须被关闭•非空标签必须使用结束标签。如：p这是段落/p!--正确--p这是段落!--错误--•空标签也必须被关闭，在标签必须使用“/”结尾。如：hr/!--正确--hr!--错误--2.1XHTML基础——语法规则3.元素标签名和属性名必须小写•XHTML标签名和属性名对大小写敏感，标签名和属性名必须小写。如：bodyp这是段落/p/body•如果这样写就是错误的：BODYP这是段落/P/BODY2.1XHTML基础——语法规则4.属性值必须加引号•属性值必须用引号括起来。如：tablewidth=100%!--正确--tablewidth=100%!--错误--5.属性必须有值•使用的属性必须有值，不能简写。如：inputchecked=checked/!—正确--inputchecked!—错误--2.2Dreamweaver基础•AdobeDreamweaver是一款集网页制作和管理网站于一身的所见即所得网页编辑器，Dreamweaver是针对专业网页设计师设计的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的网页。2.2Dreamweaver基础——工作流程概述1.规划和设置站点2.组织和管理站点文件3.设计网页布局4.向页面添加内容5.通过手动编码创建页面6.测试和发布2.2Dreamweaver基础——使用站点1.关于Dreamweaver站点•在Dreamweaver中，站点是指网站中所有文件和资源的本地或远程存储位置，主要由本地根文件夹和远程文件夹组成。2.建立设置新站点3.创建标准化空白页面4.手动编写网页代码2.3文档结构元素•XHTML文档结构元素用来描述XHTML文档的顶层结构，包括文档根元素html、头元素head和体元素body。2.3文档结构元素——html标签•html与/html标签定义了文档的开始和结束，元素内容是文档的头部和主体。文档的头部由head标签定义，而主体由body标签定义。html元素有一个必需的属性xmlns。•xmlns属性在文档中定义一个或多个可供选择的命名空间，该属性的值类似于URL。属性值描述xmlns定义XMLnamespace属性2.3文档结构元素——head标签•head标签用于定义文档头部，head元素中的内容可以是脚本、样式表和提供的元信息等。文档的头部描述了文档的各种属性和信息。•base、link、meta、script、style和title这些标签可用在head里，title定义文档的标题，是head唯一必需的元素。•head标签放在文档的开始处，紧跟在html后面。2.3文档结构元素——body标签•body元素定义文档的主体，body元素包含文档的所有内容（如文本、超连接、图像、表格和列表等等）。2.4头部元素•头部元素里可以使用的标签必须用在head里。标签描述title文档标题base页面中所有连接的基准URLlink资源引用meta元信息2.4头部元素——title标签•title定义文档的标题，标题显示在浏览器窗口的标题栏上，当把文档加