《网页设计基础》 HTML和XHTML.pptVIP

《网页设计基础》第2章 HTML和XHTML 主讲：赵慧周 zhaohuizhou@ 北京语言大学信息科学学院 HTML和XHTML 要求 掌握 HTML XHTML 提纲 HTML XHTML HTML的历史 1989年，Tim Berner Lee开发 1990年，HTML1.0 1993年，HTML+ 78个标记，很多已被废弃 1994年，HTML2.0 第一个官方标准，RFC1866 49个标记 1995年3月，HTML3.0 FORM标记的属性 1996年5月，HTML3.2 HTML2.0的真正继承者，增加了19个新标记 保持了HTML3.0的表格和文本刘属性并且综合了许多Netscape扩展 HTML4.0/4.01 Object标记：图像和多媒体嵌入元素 支持CSS 改进了填充表单和表格、客户方脚本、用于数学和高级出版的其他特别字符 HTML扩展 从HTML2.0开始，Microsoft和Netscape已经开发了被他们的浏览器支持的专有元素，也都为已有元素添加了新属性 Microsoft object、帧和一些表格元素 Netscape font、center、big、small、sub、sup HTML入门 编写HTML代码 任意文本编辑器 所见即所得编辑器 页面测试工具：浏览器 学习要点 标记、属性←→排版显示 例：具有跳转功能的简单网页 ex3-01.htm和ex3-01_1.htm HTML标记功能 html head title简单的html案例/title /head body 欢迎！请单击a href=ex3-01_1.htmlHello World!/a /body /html html head titleHello World!/title /head body祝贺你，初始成功！ /body /html HTML文件的结构 html head title标题/title /head body 文档部分 /body /html HTML标记（1） 标记（Tags）：HTML文档中一些有特定意义的符号，这些符号指明内容的含义或结构。 在一对尖括号之间 标记名称HTML内容/标记名称 例：h2你好！/h2 分为“起始标记”、“结束标记”，名称相同，结束标记在名称前有/ 大小写无关（最好小写） HTML标记（2） 单标记、配对标记 单标记最好自封闭：br /、img /、hr /…… 标记名称大小写无关（最好小写） 标记可以联合使用，也可以嵌套使用 pb粗体字/b/p 标记可以带有一个或多个属性参数 标记名称 属性1=“属性值1” … 属性n=“属性值n”内容/标记名称 注释标记!--注释内容-- 注释内容不在浏览器中显示 HTML标记（3） 以下写法有什么错误 img birthday.jpg / iCongratulations!i a href=file.htmllinked text/a href=file.html pThis is a new paragraph/p li The list item /li HTML元素（1） 元素：把HTML标记（如p……/p）和标记之间的内容组合称为元素 构成HTML文档的基本部件 一般起始标记是元素的开始，结束标记表示元素的结束 有内容的元素、空元素 内容：文字或其他元素 pb粗体字/b/p HTML元素（2） body标记中的元素个数？ 行内元素和块级元素 例子：inline_block.html h2, p, ul, div a, img, b, font, span 根据是否会占满一整行，可以把HTML元素分为行内元素和块级元素 行内（inline）元素：元素之间从左到右排列，只有当浏览器容纳不下才会转到下一行 块级（block）元素：每个元素占据浏览器一整行，块级元素之间自动换行，从上到下排列 HTML页面结构标记 文件标记html…/html html文档的最外层，表示html文件的开始与结束 文件头标记head…/head 保存说明整个文件的综合信息，包括以下标记： 文件主体标记body…/body 文档的主体 可以使用属性使页面带有背景颜色或背景图案 特殊字符、HTML编码和字符代码 段落标记 段落标记p…/p 换行标记br 预格式化标记pre/pre 空格、Tab符、回车换行符起作用 水平线标记hr 常用属性：size, width, align, color 页面修饰标记 居中标记center…/center 标题文字标记hn…/hn h1~h6 hn align=left|center|right标题文字/hn 文字样式标记font…/font 常用属性：face, size, color 特定文字样式标记 例：ex3