HTML+CSS+JavaScript项目2 “说旅游”专题页制作_0518_连蕊.pptxVIP

项目2 “说旅游”专题页制作;;【任务2-1】认识HTML;1;HTML文档的基本格式，主要包括!DOCTYPE文档类型声明、html根标记、head头部标记、body主体标记。;!DOCTYPE 标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，如例2-1中使用的是Dreamweaver默认的XHTML1.0过渡型XHTML文档。本书将全部采用XHTML1.0过渡型XHTML文档。 必需在开头处使用!DOCTYPE标记为所有的XHTML文档指定XHTML版本和类型，这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。 !DOCTYPE标记和浏览器的兼容性相关，删除!DOCTYPE，就是把如何展示HTML页面的权利交给浏览器。这时，IE6，IE7，IE8，Firefox2，Firefox3，Chrome，有多少种浏览器，页面就有可能有多少种显示效果，这是不被允许的。;html标记位于!DOCTYPE 标记之后，也称为根标记，用于告知浏览器其自身是一个 HTML 文档， html标记标志着HTML文档的开始，/html标记标志着HTML文档的结束，在它们之间是文档的头部和主体内容。 在html之后有一串代码“xmlns=/1999/xhtml”用于声明XHTML统一的默认命名空间。;head标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在html标记之后，主要用来封装其他位于文档头部的标记，例如title、meta、link及style等，用来描述文档的标题、作者以及和其他文档的关系等。关于head内的重要标记将在本章后面详细讲解。 一个HTML文档只能含有一对head标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。;body标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于body标记内，body标记中的信息才是最终展示给用户看的。 一个HTML文档只能含有一对body标记，且body标记必须在html标记内，位于head头部标记之后，与head标记是并列关系。;在HTML页面中，带有“ ”符号的元素被称为HTML标记，如上面提到的html、head、body都是HTML标记。所谓标记就是放在“ ”标记符中表示某个功能的编码命令，也称为HTML标签或HTML元素，本书统一称作HTML标记。;2、HTML标记—双标记;2、HTML标记—单标记;2、HTML标记—注释标记;3、标记的属性;3、标记的属性—例子;3、标记的属性—标记嵌套;4、HTML文档头部相关标记;4、HTML文档头部相关标记—title ;4、HTML文档头部相关标记—meta /;4、HTML文档头部相关标记—meta / name=“”;4、HTML文档头部相关标记—meta / name=“”;4、HTML文档头部相关标记—meta / name=“”;4、HTML文档头部相关标记—meta / http-equiv=“” ;4、HTML文档头部相关标记—meta / http-equiv=“” ;4、HTML文档头部相关标记—meta / http-equiv=“” ;4、HTML文档头部相关标记—link;4、HTML文档头部相关标记—style;知识引入;1;1、标题和段落标记—标题标记;1、标题和段落标记—标题标记;1、标题和段落标记—段落标记;1、标题和段落标记—水平线标记hr /;1、标题和段落标记—水平线标记hr /;1、标题和段落标记—换行标记br /;2、文本样式标记;3、文本格式化标记;4、特殊字符标记;1;1、div标记;知识引入;1;1、常用图像格式—GIF;1、常用图像格式—PNG;1、常用图像格式—JPG;2、图像标记;2、图像标记;2、图像标记;2、图像标记;2、图像标记;2、图像标记;2、图像标记;2、图像标记;3、相对路径和绝对路径;3、相对路径和绝对路径;1;1、切片;1、切片;1、切片;1、切片;最终效果如图所示：;效果如图所示：;效果如图所示：;效果如图所示：;效果如图所示：;效果如图所示：;建议读者每完成一部分的代码，都要用浏览器查看效果，在过程中感受HTML标记的神奇。 制作项目时认真体会页面的布局、不同HTML标记的语义及属性。 编辑代码过程中，出现问题不要担心，可以检查是否有错误字符、标点符号、空格等问题，重在体验，保持正能量才能更好的完成哦！