复旦大学：《高级Web技术》课程教学课件PPT（2011）_04 Web内容呈现技术

Web内容呈现技术 韩伟力

韩伟力

内容 ●HTML& XHTML ●CsS ● JavaScript Ai ax

内容  HTML & XHTML  CSS  JavaScript  Ajax

内容 o html XhTml ●CsS ● JavaScript Ai ax

内容  HTML & XHTML  CSS  JavaScript  Ajax

HTML&ⅩHTML ●扩展超文本标记语言( XHTML: eXtendible Hyper Text Markup language, XHTML)是开发基于Web应用程序客 户端的标准语言,属于标记语言的一种。 XHTML是HTML 的发展,和HTML的功能目标基本一致。 ●标记(tag)是标记语言的基础,指用于标注文档结构或者 给予文档中某些内容以一定含义的符号。标记可以根据其 所处位置和功能分为开始标记、结束标记和空标记 Here is content. 标记还可以拥有一个或多个属性,属性是与元素相关的附 加信息,如元素内容应该如何显示。 This is a paragraph

HTML & XHTML  扩展超文本标记语言（XHTML: eXtendible HyperText Markup Language，XHTML）是开发基于Web应用程序客 户端的标准语言，属于标记语言的一种。XHTML是HTML 的发展，和HTML的功能目标基本一致。  标记 (tag) 是标记语言的基础，指用于标注文档结构或者 给予文档中某些内容以一定含义的符号。标记可以根据其 所处位置和功能分为开始标记、结束标记和空标记。  Here is content.  标记还可以拥有一个或多个属性，属性是与元素相关的附 加信息，如元素内容应该如何显示。  This is a paragraph

SGML、HTML、XML和HTML 发展 集) SGML XML 应用 应用 发展 HTML (高版本) XHTML

SGML、HTML、XML和HTML

从“Hel|oWor|d"开始 01 03 First HTML document 5 06 Hello world!

从“Hello World” 开始 01 02 03 04 First HTML document 05 06 07 Hello World! 08 09

回顾一下Java的 Hello world! public class Hello World(. Use html to show public static void main(String System. out. printIn( Hello W hello world Javac Hello World. java Hello world Java hello World class

•回顾一下Java的Hello World！ public class HelloWorld { public static void main(String[] args){ System.out.println(“Hello World!"); } } •Javac HelloWorld.java •Java HelloWorld.class •Use HTML to show Hello World! Hello World!

HTML的基本组成结构 ●整个文档的内容部分由若干相互嵌套的元素组成 嵌套外层的元素称为父元素,嵌套内层的元素称为子元素, 包含所有元素的最外部元素称为根元素。 ●HTML的内容部分拥有唯一的根元素htm,根元素拥有两 个子元素head和body,分别称为HTML的头部元素和主体 元素 头部元素head中必须包含tite子元素,此外还可以包含 meta、 style、 script和ink等元素。如果head中还包含其他 元素,则itle子元素必须排在第一个。 title元素的内容对应 于浏览器窗口上方标题栏中的内容 主体元素body的内容对应于浏览器窗口中显示的具体内容, 我们希望显示的信息一般都放在这个部分

HTML的基本组成结构  整个文档的内容部分由若干相互嵌套的元素组成。  嵌套外层的元素称为父元素，嵌套内层的元素称为子元素， 包含所有元素的最外部元素称为根元素。  HTML的内容部分拥有唯一的根元素html，根元素拥有两 个子元素head和body，分别称为HTML的头部元素和主体 元素。  头部元素head中必须包含title子元素，此外还可以包含 meta、style、script和link等元素。如果head中还包含其他 元素，则title子元素必须排在第一个。title元素的内容对应 于浏览器窗口上方标题栏中的内容。  主体元素body的内容对应于浏览器窗口中显示的具体内容， 我们希望显示的信息一般都放在这个部分

HTML文档的书写规贝 ●元素的开始标记包含在之间,结束标记包含在 之间 ●所有元素必须有相匹配的开始标记和结束标记 ●不含任何内容的元素称为空元素。空元素可以将开始标记 和结束标记缩减为特殊的形式,标记包含于之间 注意:标记名和/之间需要有一个空格。如。 文档具有唯一的根元素html,它包含了其它所有元素。 所有元素必须正确嵌套。如不能出现类似 …/head>的情况 元素的属性表现为“名字=值”的形式。值必须包含在单 引号“或者双引号“”中。如不能出现类似 align=eft>的写法,必须写作。SD 所有元素名称和属性名字都用小写

HTML文档的书写规则  元素的开始标记包含在之间，结束标记包含在 之间。  所有元素必须有相匹配的开始标记和结束标记。  不含任何内容的元素称为空元素。空元素可以将开始标记 和结束标记缩减为特殊的形式，标记包含于之间。 注意：标记名和/之间需要有一个空格。如。  文档具有唯一的根元素html，它包含了其它所有元素。  所有元素必须正确嵌套。如不能出现类似 ….的情况。  元素的属性表现为“名字＝值”的形式。值必须包含在单 引号‘’或者双引号“”中。如不能出现类似的写法，必须写作。  所有元素名称和属性名字都用小写

基本布局元素 ●基本格式化元素 文本格式化 换行元素 式化 段落元素 物理格式化元素 水平线元素 逻辑格式化元素 特殊字符 块元素与行内元素

基本布局元素  基本格式化元素  换行元素  标题元素  段落元素  水平线元素  特殊字符  文本格式化  物理格式化和逻辑格 式化  物理格式化元素  逻辑格式化元素  块元素与行内元素