[高等教育]网站开发与管理第二章XHTML和CSS网页设计.ppt

网站开发与管理 第二章 XHTML和CSS网页设计 HTML XHTML概述 CSS HTML HTML(HyperText Markup Language超文本标记语言) HTML文件是被浏览器读取，产生网页的文件 WWW是一个由HTML文件及一系列传输协议组成的集合。 最早的网页设计语言就是HTML,虽然随着技术的进步而产生了各种网页设计语言，如DHTML、XML、JavaScript、VBScript等，但它们依然是建筑在HTML之上，并没有舍弃已有的HTML。可以说，HTML是构成网页的最“基础”的要素 HTML的特点 容易学习 HTML文档独立于平台，兼容各种平台，但不同的浏览器显示的效果会有所不同 HTML文件是纯文本文件，可使用记事本、写字板等文本编辑器来编写，扩展名为.htm或.html 说明： l????? html 元素是HTML文档的最高层元素，原则上用它来指出HTML文档的开始与结束。 l???????? head 元素用来标识网页的头部， l??????? title 元素用来指定浏览器所要显示的标题文字。 l????? ?body 元素用来标识HTML文档的主体部分。 ? HTML常用标记 头部标记 HEAD和/HEAD是HTML的头部标记，其中主要包括对当前网页的一些基本描述信息，例如网页标题、一些说明信息和搜索关键字等。 1．网页标题标记 格式： TITLE 标题文字 /TITLE 示例： title留言簿/title Title标记 HTML常用标记 2．元信息标记 META标记是HTML头部标记中常见的元信息标记，可重复出现在头部标记中，用来指明本网页的作者、网页制作工具、所包含的的关键字，以及其他一些描述网页信息。META标记的另一个作用是创建HTTP响应头，以便让浏览器知道如何去处理这个网页，例如这个网页什么时候过期，隔多少时间自动刷新等。 HTML常用标记 meta http-equiv=Refresh content=10; url= http://yourlink 10秒后刷新到http://yourlink; Meta http-equiv=Content-Type Content=text/html; Charset=gb2312  说明所用语言及文字... Meta name=“keywords” Content=“life,universe,mankind,science”  告诉搜索引擎关键字 HTML常用标记 HTML常用标记 HTML常用标记 主体标记 BODY和/BODY标记是HTML文档的主体标记，其内包括了将在网页中显示的文字、图片、表格、链接、表单等所有内容。 主体标记 BODY标记应用示例 body bgcolor=gold body background=abc.jpg bgproperties=fixed body topmargin=12 leftmargin=20 标记示例 段落标记 1．标题文字标记 Hn align = 对齐方式 标题文字 /Hn 2．分段标记 P align = 对齐方式 文字 /P 说明：分段标记不仅使得后面的文字换行输出，还将在两个段落之间产生一个空行。分段结束标志 /P 可以省略。 3．换行标记 文字 BR 说明：可以连续使用多个BR 标记来产生多个空行 演示——标题效果 HTML HEAD TITLE标题效果/TITLE /HEAD BODY H1一级标题/H1 H2二级标题/H2 H3三级标题/H3 H4四级标题/H4 H5五级标题/H5 H6六级标题/H6 P正常文本/P /BODY /HTML 演示效果： 段落标记 4．横线标记 HR size = 粗细 align = 对齐方式 width = 宽度 color = 颜色 5．文本缩排标记 Blockquote 文字 /Blockquote 文字格式标记 1．字体标记 格式： FONT size = 大小 face = 字体名称 color = 颜色文字/FONT 2．文字修饰标记 特殊字符 典型问题：“”、“”如何在网页中显示？ 演示——FONT size=“” HTML HEAD TITLE使用FONT属性〈/TITLE〉 〈/HEAD〉 〈BODY〉 P正常文本 pFONT size=7这些是大字体文本/FONT pFONT color=red本行文字为红色/FONT pFONT face= 隶书隶书/FONT 〈/B