HTML语言.ppt

《HTML语言.ppt》由会员分享，可在线阅读，更多相关《HTML语言.ppt（114页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、 2.1 HTML概述HTML的全称是Hypertext Markup Language（超文本标记语言），是用于描述网页文档的一种标记语言。HTML的发展经历了如下很多版本。（1）HTML 2.0：1995年11月发布，于2000年6月之后被淘汰。 （2）HTML 3.2：1996年1月14日发布，W3C推荐标准。 （3）HTML 4.0：1997年12月18日发布，W3C推荐标准。 （4）XHTML 1.0：2000年1月26日发布，W3C推荐标准，2002年8月1日修订后发布。 （5）XHTML 2.0：W3C工作草案，因为改动过大，学习这个新技术的成本过高，现在最常用的还是XHTML1

2、.0的标准。（6）HTML 5：2008年，W3C取消了对XHTML的开发，将HTML5规范纳入W3C的框架中。 2.2 HTML语法HTML是一种描述性的标记语言，用于描述超文本中内容的显示方式。1双标记双标记双标记是由一个起始标记和一个结束标记所组成，其语法为：受控制内容 例如：这是斜体字2. 单标记单标记HTML中大部分的标记是成对出现的，但也有一些是单独存在的。这些单独存在的标记称为单标记。其语法为：，例如，标记等。3注释标记注释标记注释是网页设计者对页面代码进行的解释，不会在浏览器中显示。注释标记的语法格式如下： 2.3 HTML文档结构l 2.3.1 DOCTYPE文档声明l 2.

3、3.2 头部标记l 2.3.3 body标记 2.3 HTML文档结构nHTML文件的基本结构 html文件开始 html文件的头部开始 html文件的头部内容 html文件的头部结束 html文件的主体开始 html文件的主体内容 html文件的主体结束 html文件结束 2.3.1 DOCTYPE文档声明nDOCTYPE是document type（文档类型）的简写，是指示Web浏览器关于页面使用的XHTML或者HTML是什么版本。以下是三种版本的HTML文档声明示例：n（1）n（2）n（3）2.3.2 头部标记n与标记之间是网页的描述性信息，头部标记是指存放在与标记之间的标记，头部标记中

4、描述的内容信息不会显示在页面中，常见的头部标记有以下几种。2.3.2 头部标记n1页面标题页面标题标记标记n标记用来定义网页文档的标题，语法格式为：标题n-【代码清单】-nnnn n网站首页nnn 河南科技大学软件学院nn2.3.2 头部标记n2元信息标记元信息标记n标记：通过属性来定义文件信息的名称、内容等。n标记的属性： http-equiv (生成一个标题域) name (表示关键字) content (关键字/取值的内容)定义编辑工具定义编辑工具n基本语法： n注明：generator：定义编辑器 content：定义编辑器的名称2.3.2 头部标记设定关键字设定关键字n基本语法： n

5、注明： keywords ：定义关键字 content：定义关键字的内容2.3.2 头部标记设定描述设定描述n基本语法： n注明： discription ：描述定义 content：定义描述的内容2.3.2 头部标记设定作者设定作者n基本语法： n注明： author ：作者定义 content：定义描述的内容2.3.2 头部标记设定建立网站的日期设定建立网站的日期n 基本语法： 注： build ：网页建设 content：定义建设的时间 2.3.2 头部标记说明版权说明版权n 基本语法： 注： copyright ：版权 content：定义版权信息 2.3.2 头部标记记载联系人的邮箱

6、记载联系人的邮箱n 基本语法： 注： reply-to ：回复 content：定义邮箱地址 2.3.2 头部标记限制搜索方式限制搜索方式n 基本语法： 注： robots ：定义搜索方式 content：定义可以采用的方法 2.3.2 头部标记设定字符集设定字符集n 基本语法： n 例：gb2312 ：简体中文 BIG5 ：繁体中文（台湾计算机界实行的汉字编码字符集） UTF-8 ：2.3.2 头部标记设定自动刷新设定自动刷新n基本语法： (注：时间以秒记)n 例： 2.3.2 头部标记设定自动跳转设定自动跳转n 基本格式: n 例： 2.3.2 头部标记设定转场效果设定转场效果n 基本语法

7、： n Page-enter：进入网页时的网页过渡效果n Page-exit ：退出网页时的网页过渡效果2.3.2 头部标记n例： (水平百叶窗) (盒状收缩)2.3.2 头部标记设定禁用缓存设定禁用缓存n 基本语法： 注： cache-control：缓存控制 content：定义禁止缓存 2.3.2 头部标记设定有效期限设定有效期限n 基本语法: 注：日期格式： “星期，日 月 年 时 分 秒 gmt ”n 例:2.3.2 头部标记2.3.3 body标记n又称为主体标记，用于定义文档的主体，网页中所要显示的内容都要放在这个标记内，在后面章节所介绍的HTML标记都将放在这个标记内。表2-1

8、 body元素属性描述文字颜色属性文字颜色属性TEXTn 基本语法注： color-value 是颜色的值2.3.3 body标记背景颜色属性背景颜色属性bgcolorn 基本语法注： color-value 是颜色的值2.3.3 body标记背景图像属性背景图像属性backgroudn基本语法注： img_file_url 是图片的路径2.3.3 body标记背景图像固定属性背景图像固定属性bgpropertiesn基本语法注： fixed是固定图像2.3.3 body标记链接文字的颜色属性链接文字的颜色属性n link：设定链接文字默认的颜色 alink：设定激活链接时文字的颜色 vlin

9、k：设定访问过的链接文字的颜色n基本语法：注：color_value是颜色的值2.3.3 body标记边距属性边距属性n topmargin：设定上边距 leftmargin：设定左边距n基本语法：注：value一般指像素2.3.3 body标记 2.4 HTML常用标记l 2.4.1 文本标记l 2.4.2 图像标记l 2.4.3 超链接标记l 2.4.4 列表标记l 2.4.5 分节标记l 2.4.6 表格标记l 2.4.7 浮动框架标记l 2.4.8 多媒体标记l 2.4.9 交互标记2.4.1 文本标记nJavaScript是一种基于对象（Object）和事件驱动（Event Driv

10、en）并具有一定安全性的脚本语言。语法结构上与C、C+以及Java相似。但是JavaScript和Java是两种完全不同的语言，两者之间没有任何关系。JavaScript是以ECMAScript为开发标准，Java则是由Sun Microsystems公司开发的更复杂的面向对象的编程语言。文字的内容文字的内容n 输入普通的文字 （直接输入到（直接输入到与与之间）之间）n 输入空格符号 基本语法:  n输入特殊符号(表2-4) 如: “ - " & - & ;2.4.1 文本标记n注释语句, 基本语法： 2.4.1 文本标记n 标题字标记 一级标题 大 二级标题 三级标

11、题 四级标题 五级标题 六级标题 小n 标题字的对齐属性 alignn 左对齐n 居中对齐n 右对齐2.4.1 文本标记n 文字的修饰标记n 粗体标记,n 基本语法： n 斜体标记, n基本语法： 2.4.1 文本标记n上标标记 n基本语法： n下标标记 n基本语法： n大字号标记 n基本语法： n小字号标记 n基本语法： 2.4.1 文本标记n下划线标记 n 基本语法：n删除线标记 ,n基本语法： n地址文字标记 n基本语法：n打字机标记 n基本语法：2.4.1 文本标记n等宽文字标记、n 基本语法： n键盘输入文字标记 n基本语法：n声明变量标记 n基本语法：2.4.1 文本标记字体标记字

12、体标记n基本语法： n字体标记的属性 face：字体 size：字号 color：颜色l 基本语法： 2.4.1 文本标记n段落标记n : 段落标记（新建一个段落,相当于 enter）n : 换行标记 （ 相当于软回车：shift+enter）n : 不换行标记基本语法：n n n n 段落对齐属性 align2.4.1 文本标记n : 标记中强制换行的标记基本语法：n ：预格式化标记 基本语法：n ：居中标记基本语法：n：缩排标记 基本语法： 2.4.1 文本标记n水平线标记 nhr中的常用属性有：nwidth：水平线的宽度nsize：水平线的高度ncolor：水平线的颜色nnoshade：

13、水平线去掉阴影属性nalign：水平线对齐属性n 基本语法： 注：value1、value2表示像素值或百分比 value3 表示颜色名称或十六进制数 value4 表示left 、right 或 center 2.4.1 文本标记n在文字上方标注说明标记,l 基本语法： 被标示的文字 说明文字 l举例： 886 拜拜啦 2.4.1 文本标记n图片的基本格式图片的基本格式nJpgnGifnBmp2.4.2 图像标记n路径路径1、绝对路径：为文件提供的完全路径，包括适用的协议或盘符。 例：http:/ d:/wsp/myweb/images/back.jpg2.4.2 图像标记2、 相对路径：指

14、由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。 例：文件1.htm的绝对路径是：d:/wsp/myweb/1.htm 文件2.htm的绝对路径是：d:/wsp/myweb/2.htm 那么：1.htm相对于2.htm的路径就是：1.htm2.4.2 图像标记n相对链接的使用方法：n如果链接到同一目录下，则只需输入要链接文档的名称 。例： n如果链接到下一级目录，则需要先输入目录名，然后加 “ / ”，再输入文件名。例：n如果连接到上一级目录，则需要先输入”/ “，然后再输入目录名、文件名。 例：2.4.2 图像标记3、 根路径： 根目录的相对地址。n根路径的书写方式：以斜杠 “

15、/ ” 开头，然后是文件夹名，再写文件名。例： 2.4.2 图像标记n图片标记n相关属性 ：n src：描述图片的路径n lowsrc：设定分辩率比较低的图片n alt：设定图像的提示文字属性n width、height：设定图像的宽度和高度n border：设定图片的边框n vspace：设定图像的垂直间距n hspace：设定图像的水平间距n align：设定图像的排列属性2.4.2 图像标记n图片标记基本语法： 语法解析：是插入图片的标记 src 是描述图片路径的属性 “ image_url ”表示图片的路径举例：2.4.2 图像标记n设定图片的提示文字设定图片的提示文字 alt属性属性

16、 基本语法：举例：2.4.2 图像标记n 设定图片的宽度：设定图片的宽度： width 设定图片的高度：设定图片的高度：height基本语法：其中:宽度和高度的单位都是像素举例： 2.4.2 图像标记n设定图像的垂直间距设定图像的垂直间距 vspase 设定图像的水平间距设定图像的水平间距 hspase基本语法：举例：2.4.2 图像标记n设定图片的边框设定图片的边框 border基本语法： 举例： 2.4.2 图像标记n设定图像的排列属性设定图像的排列属性 基本语法：注：value值如下表所示,表示的是相对文字的对齐方式。举例：2.4.2 图像标记属性值描述Top文字的中间线居在图片上方Mi

17、ddle文字的中间线居在图片中间Bottom文字的中间线居在图片底部Left图片在文字的左侧Right图片在文字的右侧Absbottom文字的底线居在图片底部Absmiddle文字的底线居在图片中间Baseline英文文字基准线对齐texttop英文文字上边线对齐n2.4.2 图像标记图片的超链接图片的超链接n图片的超链接就是在图片上建立链接。和文字的链接相同，就是点击过链接的图片或文字后就会跳到相应的目的地址上。n图片的超链接与文字相同都是标记，与文字不同的是，文字的链接只能是一个，而图片不同可以是一个或多个。2.4.3 超链接标记n超链接：从一个页面指向另一个目的端的链接。n 链接标记：链

18、接标记：l链接标记的属性：n href : 指定链接地址n name : 给链接命名n title：给链接提示文字n target：指定链接的目标窗口n accesskey：链接热键2.4.3 超链接标记n内部链接与外部链接内部链接与外部链接l内部链接：链接指向站点文件夹之内的文件。例： l外部链接：链接指向站点文件夹之外的文件。例： 2.4.3 超链接标记n 制作内部链接制作内部链接l 基本语法： 链接文字 l 举例：返回首页n 设定链接的目标窗口设定链接的目标窗口l 基本语法： 链接文字 注：target属性中value的取值：l_parent ：在上一级窗口中打开。l_blank：在新窗

19、口中打开。l_self：在同一窗口中打开。（默认）l_top ：在浏览器的整个窗口中打开，忽略任何框架。l 举例 ：返回2.4.3 超链接标记书签链接书签链接n建立书签建立书签l 基本语法：文字l 举例：李白n 链接同一页面的书签链接同一页面的书签l 基本语法：文字l 举例： 李白n 链接到其他页面中的书签链接到其他页面中的书签l 基本语法：文字l 举例： 李白2.4.3 超链接标记外部链接外部链接n 链接路径应使用绝对路径，即带有协议或盘符的路径。n 链接到外部网站链接到外部网站n 基本语法：链接文字 其中“ http:/ ”表示http站点的“ URL ”n 举例：2.4.3 超链接标记n

20、下载文件下载文件n基本语法： 链接文字 其中“ file_url ”表示文件所在的路径。2.4.3 超链接标记图片的超链接图片的超链接n图片的超链接就是在图片上建立链接。和文字的链接相同，就是点击过链接的图片或文字后就会跳到相应的目的地址上。n图片的超链接与文字相同都是标记，与文字不同的是，文字的链接只能是一个，而图片不同可以是一个或多个。2.4.3 超链接标记n基本语法：n文字n举例：n返回2.4.3 超链接标记图片的映射图片的映射n一张图片可以有多个超链接，一幅图片被切分成不同的区域，每一个不同的区域可以链接到不同的地址，这每个区域被称为图像的热区。每一个热区可以有自己的链接地址，浏览者单

21、击图片上的热区后，就会转到相应的链接地址上去。这个过程就称为图像的映射。n建立图像映射分两部分：图像链接地址的创建和制作图像映射。2.4.3 超链接标记n图像链接地址的创建图像链接地址的创建 先使用html语言创建出包含有文字链接地址的页面；（一般在页面内建立标签或建立页面间链接）2.4.3 超链接标记n制作图片映射制作图片映射使用工具(dreamweaver或frontpage)制作出图像映射，即创建热区，使用、标记。建立图片的映像说明（使用alt属性标签）2.4.3 超链接标记n标记的属性标记的属性 shape：定义图象映射区域的形状 rect表示矩形区域 circle表示椭圆形区域 po

22、ly表示多边形区域 href：定义不同区域的链接地址 alt：设定替代的文字，提示文字 coords：设定区域坐标2.4.3 超链接标记n标记的基本语法：标记的基本语法：例如：例如：2.4.3 超链接标记n建立热区的基本语法：建立热区的基本语法：2.4.3 超链接标记n建立热区的基本语法：建立热区的基本语法：2.4.3 超链接标记n列表有两种类型: n无序列表 有序列表n无序列表: 没有顺序的列表项目,使用等特殊项目符号.n有序列表: 按照字母或数字等顺序排列的列表项目. : 列表项目标记2.4.4 列表标记 n 有序列表标记： 基本语法： 项目1 项目2 2.4.4 列表标记 n有序列表的属

23、性标记：、1. 基本语法： 项目1 项目2 注： value1表示有序列表项目符号的类型 value2表示项目开始的数值有序列表的类型： 1 ：数字 1 ，2 ，3 a : 字母 a , b , c A : 字母 A , B , C i : 小写罗马数字 I , ii , iii I : 大写罗马数字，2.4.4 列表标记 n无序列表标记 基本语法： 项目1 项目2 2.4.4 列表标记 n 无序列表的类型属性 基本语法： 项目1 项目2 无序列表的类型： disc 表示 circle 表示 square 表示 2.4.4 列表标记 n 定义列表标记 、基本语法： 名词1 解释1 名词2 解释

24、2 注：表示名词；表示对名词的解释。2.4.4 列表标记 n 定义列表的嵌套 基本语法： 名词1 解释1 解释2 解释3 名词2 解释1 解释2 解释3 2.4.4 列表标记 n无序及有序列表的嵌套 l基本语法： 项目1 二级项目1 二级项目2 项目2 二级项目1/LI 二级项目2 2.4.4 列表标记 n1.页眉标记页眉标记n标记用来包含文档的页眉，提供一些介绍性信息（如标题、副标题或logo等），用于正文或正文中的节。例如：nwalker石的博客2.4.5 分节标记 n2.页脚标记页脚标记n标记定义文档或节的页脚。通常包含文档的作者、版权信息、使用条款链接、联系信息等。可以在一个文档中使用

25、多个标记。例如：n版权所有XXXX2.4.5 分节标记 n3.导航标记导航标记n标记用于定义网页中的导航栏。例如：nn n 菜单一n 菜单二n 菜单三n n2.4.5 分节标记 n4.章节标记章节标记n标记用来为网页文档分章节，表现文档结构最基本的元素，其代码结构如下，显示效果如图所示。 n 第一章标题 内容 第二章标题 内容 2.4.5 分节标记 n5. 独立文档标记独立文档标记n标记一般用来表现文档正文内容。2.4.5 分节标记 n6.相关文档标记相关文档标记n标记定义标记以外的内容，用于包含当前文档相关的内容，如侧栏提示文档或相关文档等。我们可以利用下面的代码来定义页面结构，定义完成的页

26、面结构如图所示。n- 顶部n导航栏nn 标题n 内容nn辅助栏n底部2.4.5 分节标记 n语法解释：表格标记：行标记：单元格标记n举例说明2.4.6 表格标记nborder：设置表格的边框。（单位为像素）nbodercolor：设置表格的边框颜色。nbodercolorlight：设置表格的（大边框的）左上边框或（小边框的）右下边框的颜色。nbodercolordark：设置表格的（大边框的）右下边框或（小边框的）左上边框的颜色。2.4.6 表格标记n基本语法： 其中，颜色可以是名称或十六进制数。n举例: 2.4.6 表格标记n Width、 Height ：设定表格的宽度、高度n Bgco

27、lor：设定表格的背景色n Background：设定表格的背景图片n基本语法： n举例 2.4.6 表格标记nCellspacing：设定单元格与单元格之间的距离n基本语法： 其中，value的单位是像素。n举例 ：2.4.6 表格标记nCellpadding： 设定单元格边框与内容之间的距离n基本语法： 其中，value的单位是像素。n举例：2.4.6 表格标记n基本语法： n语法解释： 对齐方式有： left ：居左 right ： 居右 center ：居中n举例： 2.4.6 表格标记n：设置表格的标题，默认的情况下居中对齐。nalign：设置表格标题的对齐方式，有三种：left（左

28、对齐 ） right（右对齐 ）center（居中）nvalign：设置表格标题的垂直对齐方式，即可在表格上方或下方，有两种：top (上方) bottom (下方)n基本语法：基本语法： n举例 2.4.6 表格标记n基本格式： n举例：设置表格的表头 姓名 出生年月 张三 1986.1.5 李四 1987.2.16 2.4.6 表格标记n行标记的属性：nbgcolor：设置行的背景色。nbordercolor：设置行的边框颜色。nbordercolorlight：设置行的亮边框颜色。nbordercolordark：设置行的暗变框颜色。nalign：设置行的对齐方式，（里面内容的对齐方式）

29、有三种：left、center、right。nValign：设置行的垂直对齐方式，有三种：top（居上）、middle（居中）、bottom（居下）。n 基本语法： 2.4.6 表格标记n单元格标记的属性设置：nbgcolor：设置单元格的背景颜色。nbackground：设置单元格的背景图片。nbordercolor：设置单元格的边框颜色。nbordercolorlight：设置单元格的亮边框颜色。nbordercolordark：设置单元格的暗边框颜色。nwidth：设置单元格的宽度。nheight：设置单元格的高度。nalign：设定单元格内容的水平对齐方式，有三种：right（居右）、

30、 left（居左） 、center（居中）。nValign：设定单元格的垂直对齐属性，有三种：top（居上）、middle（居中）、bottom（居下）。n rowspan：单元格的跨行属性。（垂直方向上）n Colspan：单元格的跨列属性。（水平方向上）2.4.6 表格标记n基本语法：n举例2.4.6 表格标记n表头标记的属性设置：nbgcolor：设置表头的背景颜色。nbackground：设置表头的背景图片。nbordercolor： 设置表头的边框颜色。nbordercolorlight：设置表头的亮边框颜色。nbordercolordark：设置表头的暗边框颜色。nwidth：设置

31、表头的宽度。nheight：设置表头的高度。nalign：设定表头内容的水平对齐方式，有三种：right（居右）、 left（居左） 、center（居中）。nValign：设定表头的垂直对齐属性，有三种：top（居上）、middle（居中）、bottom（居下）。n rowspan：表头的跨行属性。n Colspan：表头的跨列属性。2.4.6 表格标记n基本语法： n举例2.4.6 表格标记n用于定义表格最上方表首的格式。n基本语法： n举例： 2.4.6 表格标记n用于定义表格主体的格式。n基本语法： n举例： 2.4.6 表格标记n用于定义表格最下方表尾的格式。n基本语法： n举例：

32、2.4.6 表格标记n基本语法： 2.4.6 表格标记浮动框架标记浮动框架标记及属性及属性n浮动框架是一种特殊的框架页面，在浏览器在窗口中可以嵌套子窗口，在其中显示页面的内容。n基本语法： 2.4.7 浮动框架标记nSrc、width、height、name属性n基本语法： n frameborder与scrollingnFrameborder：设定框架的边框是否显示，有两种：0表示不显示，1表示显示。 scrolling：设定浮动框架滚动条是否显示，有三种：yes表示显示，no表示不显示，auto表示自动显示。n基本语法： 2.4.7 浮动框架标记n浮动框架边缘宽度属性：marginwidt

33、h 浮动框架边缘高度属性：marginheight 浮动框架对齐属性：alignn 基本语法：2.4.7 浮动框架标记n1标记标记n标记用于在网页中插入背景音乐，但此标记只适用于IE浏览器。例如：nn其中：src属性设置背景音乐文件及路径，可以是相对路径或绝对路径；autostart属性设置音乐文件下载完之后就自动播放，其值有true（是），false（否，默认值）；loop属性设置音乐播放次数，其值为infinite（是否自动重复播放），正整数表示重复两次，1则表示是无限重复。使用标记插入背景音乐，当浏览器窗口最小化时就自动暂停播放，窗口恢复时，则继续播放。2.4.8 多媒体标记n标记标记n标记用于在网页中插入多媒体对象，包括flash、音频、视频等。例如：n2.4.8 多媒体标记n标记标记n标记用于在网页中插入滚动的文字或图像。基本语法如下：n滚动的文字或图像2.4.8 多媒体标记n交互标记是HTML5新增的标记，用来设置当前任务的进度（完成情况），显示以属性max为最大值，value为当前值的进度条。例如：nn其中：max属性表示总进度，value属性表示当前进度，max和value属性的值必须大于0，value的值必须小于或等于max属性的值。2.4.9 交互标记