《DHTML动态网页设计 教学课件 ppt 作者 王愉 ppt-HTML》由会员分享，可在线阅读，更多相关《DHTML动态网页设计 教学课件 ppt 作者 王愉 ppt-HTML（72页珍藏版）》请在金锄头文库上搜索。
1、网页设计与技术基础,王愉.2008.11,HTML 基础 I,基本概念,HTML： 超文本标记语言Hyper Text Markup Language。它不是象 C+ 和 Java 之类的程序语言，而是一种描述性语言，一种标记语言。 URL： 统一资源定位器Uniform Resource Locator。 协议名称 域名 子目录 网页文档 实例 http: / /direc /index.htm,XML： 是可扩展标记语言eXtensible Markup Language的缩写，XML用来定义如何标记文本的一套规则，但并不描述如何显示文本。XML没有一套固定的标记，在XML中，程序员可以根
2、据所需要的数据元素定义不同的标记。XML是区分大小写的，所有元素必须成对出现，所有属性值必须用英文引号括起来。XML文档只有一个根标记，其它标记嵌套其中，从而形成一棵标记树。 XHTML： 是可扩展超文本标记语言eXtensible Hypertext Markup Language的缩写，它建立在HTML4.0基础上并遵循XML规则，是HTML向XML过渡的标记语言。XHTML采用XML严谨的语法结构,打开Dreamweaver CS3，新建HTML文档 标准XHTML文档结构,W3C - World Wide Web Consortium 万维网联合会 DTD Document Type
3、Define 文档类型定义 xmlns - XHTML 命名空间， namespace 属性 内容、样式、行为分开,标准的XHTML 文档需要以DOCTYPE标记开始，通常有以下三种类型： （1） 过渡类型 基本格式： 说明： 使用过渡类型的XHTML文档，浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标记，但是要符合XHTML的语法。 （2） 严格类型 基本格式： 说明： 使用严格类型的XHTML文档，浏览器对XHTML的解析比较严格，不允许使用表现样式的元素和属性，提倡内容与样式分开。 （3） 框架类型 基本格式： 说明： 如果文档使用了框架结构，就需要使用框架类型。,1.
4、1 HTML 语法基础,1.1.1 HTML基本结构,1.1.2 HTML文档头和文档体的基本标记 ,头部标记,（1） 标记 基本格式： （2） 标记 Link元素定义当前页面和其它文件之间的关系。常用于外部层叠样式表（CSS文件）的链接。 基本格式： ,（3） 标记 META标记用于描述当前HTML页面的一些文档信息，例如字符编码、作者、版权、关键字、截止日期和页面刷新间隔等。 关键字 描述 刷新 编码 作者 调用最新版 , HEAD元素示例 ,（4） 标记 base元素用来定义当前HTTP 文件基本URL，以设定文件中所有链接标记的参数默认值，其它如 ftp:/ 及 gopher:/ 等则
5、不受影响。href参数只可填入一个相对或绝对路径，不必填入文件名称。 基本格式： , BASE Link baselink , 标记,（1） 文字属性 text：指定HTML页面中所有无链接文字的颜色。 link：指定HTML页面中未进行链接的超链接文字的颜色。 alink：指定HTML页面中正处于链接中的超链接文字的颜色。 vlink：指定HTML页面中已链接过的超链接文字的颜色。 （2） 背景属性 bgcolor：指定HTML页面背景色。 background：指定HTML页面背景图像，默认该图像在页面内有平铺的属性。 bgproperties：只有与background属性扩展一起使用才
6、有效，若设置成fixed，则背景图像固定、不滚动。 （3） 边距属性 leftmargin：指定HTML页面左侧页边距，单位为像素 topmargin：指定HTML页面顶端页边距，单位为像素,1.2 文本、段落标记,1.2.1 文本标记 （1） 、 粗体标记 （2） 、 斜体标记 （3） 下划线标记 （4） 删除线标记 （5） 字体加大标记、 字体缩小标记 （6） 上标记、 下标记,示例2-2-1：常用文本标记,（7） 标题标记 在(X)HTML中，标题一共有6个级别：、和。这些标记用于定义标题字大小，即，其中n的取值可以从1到6，总共有6级，数字越大文字越小。每个标题标记所标示的字句将独占一
7、个段落。,示例2-2-2：标题文字,1.2.2 段落标记 （1） 注释标记 （2） 段落标记 有一个基本属性是align对齐，属性值left、center、right （3） 换行标记,示例2-2-5：换行标记,示例2-2-4：段落标记,（4） 水平线标记 1 size属性，设定水平线厚度 2 width属性，设定水平线长度（像素或者百分比 ） 3 align属性，当水平线长度小于浏览器窗口宽度时，使用该属性可以设定水平线对齐方式 4 color属性，设定水平线颜色 5 noshade属性，设定水平线为平面显示,例2-2-6：水平线标记,（5） 预格式化标记 为预格式化标记，成对使用。Web浏
8、览器按照文档编辑时原始字符的排列方式显示。保留原始字符中输入的空格及空行。,示例2-2-7：预格式化标记,（6） 区块标记与 内嵌标记 为区块标记，为内嵌标记，都是用来设定元素的布局位置，两者均成对或使用。与常用于CSS层级样式表，作为定义样式的容器。 display: inline; display: block;,（7） 居中标记 （8） 地址标记 （9） 块引用标记,1.3 图像标记,基本格式： align属性 ：top、 middle、bottom、left、right,1.4 列表标记,：有序列表（Ordered List） ：无序列表（Unordered List） ：项目标记（L
9、isted Item） 、：定义列表（Definition List）,有序列表的顺序编号方式 无序列表的项目符号外观,1.5 超链接标记 ,（1） 链接至其他网页： 有链接的对象 （2） 在图像上建立超链接： （3） 链接至电子邮件： 锚标,（4） 锚点(anchors)链接 设置锚点： 先将光标移至预建立锚点的位置，输入 链接锚点： 链接至本网页的锚点，格式为： 预链接的文字 链接至其他网页的锚点，格式为： 预链接的文字,（5） 建立超链接地图 ,HTML 基础 II,2.1表格标记,2.1表格标记,1. 表格标记 基本格式： 表格内容及参数 说明： cellspacing属性 表格内单元
10、格间距以及单元格边框和表格边框的间距（像素） cellpadding属性 单元格内容与单元格边框间距（像素）,2. 行标记 行内容 3. 普通单元格标记 单元格内容 说明： colspan ：代表一个单元格内容水平方向跨了多少列，rowspan ：代表一个单元格内容垂直方向跨了多少行。,4. 标题单元格标记 项目标题 说明： 标题单元格标记（Table Header）与同样是标识一个单元格，不同的是所标识的单元格中的文字是以粗体、居中显示，通常用于把表格的第一行或第一列作为其他单元格内容的标题 。 5. 表格标题标记 表格标题 说明： 标记必须内嵌于标记内使用。,2.2框架标记,、 ,2.2框
11、架标记,（1）框架集文件基本格式： 框架集文件 请使用支持框架的高版本浏览器 ,说明： 是框架集标记， 框架窗体标记，必须嵌套在 中使用。 因此，若有n个框架窗体，则共有n+1个文件（1个框架集文件，n个框架文件）才能完全读取所有信息。,（2） 框架集标记 基本格式： ,（3） 框架标记 基本格式： ,2.3 IFRAME 浮动帧标记,2.3 IFRAME 浮动帧标记,（1）基本格式： 说明： name属性 设定此浮动框架的名称，常供标记中的target属性引用，也可供Flash的getURL()函数中的window属性引用。,（2） 设置背景透明的浮动框架 必须同时满足两个条件： 一、标记的
12、allowTransparency属性值为true，即 二、浮动框架链接的源文档的标记的bgcolor属性值为transparent，即,HTML 基础 III,3.1多媒体标记, 播放声音 播放视频、音频、flash动画等 当标记设置了dynsrc属性时，也可以用于播放视频,（1） 标记 基本格式： （只对IE有效）,示例利用框架标记和背景音乐标记创建音乐不间断跳转,（2） 标记 基本格式： （只对IE有效）,（3） 标记 基本格式： 说明： 标记用来插入各种多媒体，可以是 midi、wav、swf、au 等格式文件。,（4） 插入flash 标记 基本格式： ,3.2 表单标记,3.2 表
13、单标记,基本结构： 说明： 1） action将表单传给相应的接收和处理表单数据的应用程序，也可参数为 action =“mailto:admin_“ 2）get 方法将变量追加到 URL 末尾，信息长度不能超过255个字符，该方法用于发送少量变量；post 方法用于发送长的变量字符串。一般情况下，申请表单用post，而搜索引擎用get,3） 、输入域标记、选择域标记、文本域标记 输入域标记的常见类型有： Text、Radio、Checkbox、Password、Image、File、Hidden、Button必须至少设置type和name属性 Submit/Reset必须设置type属性,（
14、1） Text 单行文本域 基本格式： ,（2） Password 密码域 基本格式： ,（3） Radio 单选框 基本格式： ,说明： 同组各单选项之间是互相排斥的，用户只能选择该组中的一个作为输入信息。 同组单选框中所有单选项的name 属性值是相同的。,（4） Checkbox 复选框 基本格式： ,2-4-4,说明： 各复选项的name 属性值不同。,（5） Image 图像 基本格式： 说明： 因为表单中的按键外观不一定适合网页设计的整体风格，所以在表单中插入的图像通常用来替代按键实现当用户单击图像按键时将表单输入信息传送给服务器。,action=“http:/ File 文件域
15、基本格式： ,（7） Button 按键 基本格式： （8） Hidden 隐藏域 基本格式： ,（9） Submit 发送键及 Reset 重置键 基本格式： 说明： Submit 发送键使浏览器将表单输入信息传送给服务器；Reset 重置键用于将表单输入信息恢复到初始值。, 标记 基本格式： 说明： 是表单中的多行文本域标记，是成对使用的，首尾标记之间的内容就是此多行文本域的初始显示信息。常用于需要用户填写大量资料 。, 标记 基本格式： ,onChange=“pic.src=selpic.value“,onChange=“pic.src=sel.value“,使用name或者id都可以:
16、,XHTML遵循严格的语法规则(部分),（1） 文档中的根元素之前必须有 DOCTYPE 声明 DOCTYPE声明必须引用 XHTML 的三个文档类型定义 (DTD) 文件（严格、过渡或框架页）之一。 例如：在 XHTML 文档中添加一个 XHTML DOCTYPE。 （2） 文档的根元素必须为 html html 元素必须指定 XHTML 命名空间，将 namespace 属性添加到 html 元素，例如： （3） 标准文档必须包含完整的结构元素 标准的文档必须包含 head 、title 和 body 结构元素。框架集文档必须包含 head 、title 和 frameset 结构元素。,（4） 标记必须成对使用 空元素必须有结束标记，或者开始标记必须以 / 结束。例如， 无效；正确的形式为 或 (而不是
