第2章第1部分HTML语言

1、1/112第第2章章 HTML语言语言网页是由HTML语言组成的，所以要学习网页设计与制作，必须从网页的基本语言HTML开始。主要内容：l 2.1 HTML概述l 2.2 HTML语法l 2.3 HTML文档结构l 2.4 HTML常用标记2/112 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：199

2、7年12月18日发布，W3C推荐标准。 （4）XHTML 1.0：2000年1月26日发布，W3C推荐标准，2002年8月1日修订后发布。 （5）XHTML 2.0：W3C工作草案，因为改动过大，学习这个新技术的成本过高，现在最常用的还是XHTML1.0的标准。（6）HTML 5：2008年，W3C取消了对XHTML的开发，将HTML5规范纳入W3C的框架中。3/112 2.2 HTML语法HTML是一种描述性的标记语言，用于描述超文本中内容的显示方式。1双标记双标记双标记是由一个起始标记和一个结束标记所组成，其语法为：受控制内容 例如：这是斜体字2. 单标记单标记HTML中大部分的标记是成对

3、出现的，但也有一些是单独存在的。这些单独存在的标记称为单标记。其语法为：，例如，标记等。3注释标记注释标记注释是网页设计者对页面代码进行的解释，不会在浏览器中显示。注释标记的语法格式如下：4/112 2.3 HTML文档结构l 2.3.1 DOCTYPE文档声明l 2.3.2 头部标记l 2.3.3 body标记5/112 2.3 HTML文档结构nHTML文件的基本结构 html文件开始 html文件的头部开始 html文件的头部内容 html文件的头部结束 html文件的主体开始 html文件的主体内容 html文件的主体结束 html文件结束 6/1122.3.1 DOCTYPE文档声明

4、nDOCTYPE是document type（文档类型）的简写，是指示Web浏览器关于页面使用的XHTML或者HTML是什么版本。以下是三种版本的HTML文档声明示例：n（1）n（2）n（3）7/1122.3.2 头部标记n与标记之间是网页的描述性信息，头部标记是指存放在与标记之间的标记，头部标记中描述的内容信息不会显示在页面中，常见的头部标记有以下几种。8/1122.3.2 头部标记n1页面标题页面标题标记标记n标记用来定义网页文档的标题，语法格式为：标题n-【代码清单】-nnnn n网站首页nnn 河南科技大学软件学院nn9/1122.3.2 头部标记n2元信息标记元信息标记n标记：通过属

5、性来定义文件信息的名称、内容等。n标记的属性： http-equiv (生成一个标题域) name (表示关键字) content (关键字/取值的内容)10/112定义编辑工具定义编辑工具n基本语法： n注明：generator：定义编辑器 content：定义编辑器的名称2.3.2 头部标记11/112设定关键字设定关键字n基本语法： n注明： keywords ：定义关键字 content：定义关键字的内容2.3.2 头部标记12/112设定描述设定描述n基本语法： n注明： discription ：描述定义 content：定义描述的内容2.3.2 头部标记13/112设定作者设定作

6、者n基本语法： n注明： author ：作者定义 content：定义描述的内容2.3.2 头部标记14/112设定建立网站的日期设定建立网站的日期n 基本语法： 注： build ：网页建设 content：定义建设的时间 2.3.2 头部标记15/112说明版权说明版权n 基本语法： 注： copyright ：版权 content：定义版权信息 2.3.2 头部标记16/112记载联系人的邮箱记载联系人的邮箱n 基本语法： 注： reply-to ：回复 content：定义邮箱地址 2.3.2 头部标记17/112限制搜索方式限制搜索方式n 基本语法： 注： robots ：定义搜索

7、方式 content：定义可以采用的方法 2.3.2 头部标记18/112设定字符集设定字符集n 基本语法： n 例：gb2312 ：简体中文 BIG5 ：繁体中文（台湾计算机界实行的汉字编码字符集） UTF-8 ：2.3.2 头部标记19/112设定自动刷新设定自动刷新n基本语法： (注：时间以秒记)n 例： 2.3.2 头部标记20/112设定自动跳转设定自动跳转n 基本格式: n 例： 2.3.2 头部标记21/112设定转场效果设定转场效果n 基本语法： n Page-enter：进入网页时的网页过渡效果n Page-exit ：退出网页时的网页过渡效果2.3.2 头部标记22/112

8、n例： (水平百叶窗) (盒状收缩)2.3.2 头部标记23/112设定禁用缓存设定禁用缓存n 基本语法： 注： cache-control：缓存控制 content：定义禁止缓存 2.3.2 头部标记24/112设定有效期限设定有效期限n 基本语法: 注：日期格式： “星期，日 月 年 时 分 秒 gmt ”n 例:2.3.2 头部标记25/1122.3.3 body标记n又称为主体标记，用于定义文档的主体，网页中所要显示的内容都要放在这个标记内，在后面章节所介绍的HTML标记都将放在这个标记内。表2-1 body元素属性描述26/112文字颜色属性文字颜色属性TEXTn 基本语法注： co

9、lor-value 是颜色的值2.3.3 body标记27/112背景颜色属性背景颜色属性bgcolorn 基本语法注： color-value 是颜色的值2.3.3 body标记28/112背景图像属性背景图像属性backgroudn基本语法注： img_file_url 是图片的路径2.3.3 body标记29/112背景图像固定属性背景图像固定属性bgpropertiesn基本语法注： fixed是固定图像2.3.3 body标记30/112链接文字的颜色属性链接文字的颜色属性n link：设定链接文字默认的颜色 alink：设定激活链接时文字的颜色 vlink：设定访问过的链接文字的颜

10、色n基本语法：注：color_value是颜色的值2.3.3 body标记31/112边距属性边距属性n topmargin：设定上边距 leftmargin：设定左边距n基本语法：注：value一般指像素2.3.3 body标记32/112 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 交互标记33/112文字的内容文字的内容n 输入普通的文字 （直接输入到（直接输入到与与之间）之间）n 输入空格符号

11、 基本语法:  n输入特殊符号n 如: “ - " & - &amp ;2.4.1 文本标记34/112n注释语句, 基本语法： 2.4.1 文本标记35/112n 标题字标记 一级标题 大 二级标题 三级标题 四级标题 五级标题 六级标题 小n 标题字的对齐属性 alignn 左对齐n 居中对齐n 右对齐2.4.1 文本标记36/112n 文字的修饰标记n 粗体标记,n 基本语法： n 斜体标记, n基本语法： 2.4.1 文本标记37/112n上标标记 n基本语法： n下标标记 n基本语法： n大字号标记 n基本语法： n小字号标记 n基

12、本语法： 2.4.1 文本标记38/112n下划线标记 n 基本语法：n删除线标记 ,n基本语法： n地址文字标记 n基本语法：n打字机标记 n基本语法：2.4.1 文本标记39/112n等宽文字标记、n 基本语法： n键盘输入文字标记 n基本语法：n声明变量标记 n基本语法：2.4.1 文本标记40/112字体标记字体标记n基本语法： n字体标记的属性 face：字体 size：字号 color：颜色l 基本语法： 2.4.1 文本标记41/112n段落标记n : 段落标记（新建一个段落,相当于 enter）n : 换行标记 （ 相当于软回车：shift+enter）n : 不换行标记基本语

13、法：n n n n 段落对齐属性 align2.4.1 文本标记42/112n : 标记中强制换行的标记基本语法：n ：预格式化标记 基本语法：n ：居中标记基本语法：n：缩排标记 基本语法： 2.4.1 文本标记43/112n水平线标记 nhr中的常用属性有：nwidth：水平线的宽度nsize：水平线的高度ncolor：水平线的颜色nnoshade：水平线去掉阴影属性nalign：水平线对齐属性n 基本语法： 注：value1、value2表示像素值或百分比 value3 表示颜色名称或十六进制数 value4 表示left 、right 或 center 2.4.1 文本标记44/112

14、n在文字上方标注说明标记,l 基本语法： 被标示的文字 说明文字 l举例： 886 拜拜啦 2.4.1 文本标记45/112n图片的基本格式图片的基本格式nJpgnGifnBmp2.4.2 图像标记46/112n路径路径1、绝对路径：为文件提供的完全路径，包括适用的协议或盘符。 例：http:/ d:/wsp/myweb/images/back.jpg2.4.2 图像标记47/1122、 相对路径：指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。 例：文件1.htm的绝对路径是：d:/wsp/myweb/1.htm 文件2.htm的绝对路径是：d:/wsp/myweb/2.htm

15、 那么：1.htm相对于2.htm的路径就是：1.htm2.4.2 图像标记48/112n相对链接的使用方法：n如果链接到同一目录下，则只需输入要链接文档的名称 。例： n如果链接到下一级目录，则需要先输入目录名，然后加 “ / ”，再输入文件名。例：n如果连接到上一级目录，则需要先输入”/ “，然后再输入目录名、文件名。 例：2.4.2 图像标记49/1123、 根路径： 根目录的相对地址。n根路径的书写方式：以斜杠 “ / ” 开头，然后是文件夹名，再写文件名。例： 2.4.2 图像标记50/112n图片标记n相关属性 ：n src：描述图片的路径n lowsrc：设定分辩率比较低的图片n

16、 alt：设定图像的提示文字属性n width、height：设定图像的宽度和高度n border：设定图片的边框n vspace：设定图像的垂直间距n hspace：设定图像的水平间距n align：设定图像的排列属性2.4.2 图像标记51/112n图片标记基本语法： 语法解析：是插入图片的标记 src 是描述图片路径的属性 “ image_url ”表示图片的路径举例：2.4.2 图像标记52/112n设定图片的提示文字设定图片的提示文字 alt属性属性 基本语法：举例：2.4.2 图像标记53/112n 设定图片的宽度：设定图片的宽度： width 设定图片的高度：设定图片的高度：he

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

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

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

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

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

22、区。每一个热区可以有自己的链接地址，浏览者单击图片上的热区后，就会转到相应的链接地址上去。这个过程就称为图像的映射。n建立图像映射分两部分：图像链接地址的创建和制作图像映射。2.4.3 超链接标记68/112n图像链接地址的创建图像链接地址的创建 先使用html语言创建出包含有文字链接地址的页面；（一般在页面内建立标签或建立页面间链接）2.4.3 超链接标记69/112n制作图片映射制作图片映射使用工具(dreamweaver或frontpage)制作出图像映射，即创建热区，使用、标记。建立图片的映像说明（使用alt属性标签）2.4.3 超链接标记70/112n标记的属性标记的属性 shape

23、：定义图象映射区域的形状 rect表示矩形区域 circle表示椭圆形区域 poly表示多边形区域 href：定义不同区域的链接地址 alt：设定替代的文字，提示文字 coords：设定区域坐标2.4.3 超链接标记71/112n标记的基本语法：标记的基本语法：例如：例如：2.4.3 超链接标记72/112n建立热区的基本语法：建立热区的基本语法：2.4.3 超链接标记73/112n建立热区的基本语法：建立热区的基本语法：2.4.3 超链接标记74/112n列表有两种类型: n无序列表 有序列表n无序列表: 没有顺序的列表项目,使用等特殊项目符号.n有序列表: 按照字母或数字等顺序排列的列表项

24、目. : 列表项目标记2.4.4 列表标记 75/112n 有序列表标记： 基本语法： 项目1 项目2 2.4.4 列表标记 76/112n有序列表的属性标记：、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 列表标记 77/112n无序列表标记 基本语法： 项目1 项目2 2.4.4 列表标记 78/112n 无序列表的类型属性 基本语法

25、： 项目1 项目2 无序列表的类型： disc 表示 circle 表示 square 表示 2.4.4 列表标记 79/112n 定义列表标记 、基本语法： 名词1 解释1 名词2 解释2 注：表示名词；表示对名词的解释。2.4.4 列表标记 80/112n 定义列表的嵌套 基本语法： 名词1 解释1 解释2 解释3 名词2 解释1 解释2 解释3 2.4.4 列表标记 81/112n无序及有序列表的嵌套 l基本语法： 项目1 二级项目1 二级项目2 项目2 二级项目1/LI 二级项目2 2.4.4 列表标记 82/112n1.页眉标记页眉标记n标记用来包含文档的页眉，提供一些介绍性信息（如

26、标题、副标题或logo等），用于正文或正文中的节。例如：nwalker石的博客2.4.5 分节标记 83/112n2.页脚标记页脚标记n标记定义文档或节的页脚。通常包含文档的作者、版权信息、使用条款链接、联系信息等。可以在一个文档中使用多个标记。例如：n版权所有XXXX2.4.5 分节标记 84/112n3.导航标记导航标记n标记用于定义网页中的导航栏。例如：nn n 菜单一n 菜单二n 菜单三n n2.4.5 分节标记 85/112n4.章节标记章节标记n标记用来为网页文档分章节，表现文档结构最基本的元素，其代码结构如下，显示效果如图所示。 n 第一章标题 内容 第二章标题 内容 2.4.5

27、 分节标记 86/112n5. 独立文档标记独立文档标记n标记一般用来表现文档正文内容。2.4.5 分节标记 87/112n6.相关文档标记相关文档标记n标记定义标记以外的内容，用于包含当前文档相关的内容，如侧栏提示文档或相关文档等。我们可以利用下面的代码来定义页面结构，定义完成的页面结构如图所示。n- 顶部n导航栏nn 标题n 内容nn辅助栏n底部2.4.5 分节标记 88/112n语法解释：表格标记：行标记：单元格标记n举例说明2.4.6 表格标记89/112nborder：设置表格的边框。（单位为像素）nbodercolor：设置表格的边框颜色。nbodercolorlight：设置表格

28、的（大边框的）左上边框或（小边框的）右下边框的颜色。nbodercolordark：设置表格的（大边框的）右下边框或（小边框的）左上边框的颜色。2.4.6 表格标记90/112n基本语法： 其中，颜色可以是名称或十六进制数。n举例: 2.4.6 表格标记91/112n Width、 Height ：设定表格的宽度、高度n Bgcolor：设定表格的背景色n Background：设定表格的背景图片n基本语法： n举例 2.4.6 表格标记92/112nCellspacing：设定单元格与单元格之间的距离n基本语法： 其中，value的单位是像素。n举例 ：2.4.6 表格标记93/112nCe

29、llpadding： 设定单元格边框与内容之间的距离n基本语法： 其中，value的单位是像素。n举例：2.4.6 表格标记94/112n基本语法： n语法解释： 对齐方式有： left ：居左 right ： 居右 center ：居中n举例： 2.4.6 表格标记95/112n：设置表格的标题，默认的情况下居中对齐。nalign：设置表格标题的对齐方式，有三种：left（左对齐 ） right（右对齐 ）center（居中）nvalign：设置表格标题的垂直对齐方式，即可在表格上方或下方，有两种：top (上方) bottom (下方)n基本语法：基本语法： n举例 2.4.6 表格标记9

30、6/112n基本格式： n举例：设置表格的表头 姓名 出生年月 张三 1986.1.5 李四 1987.2.16 2.4.6 表格标记97/112n行标记的属性：nbgcolor：设置行的背景色。nbordercolor：设置行的边框颜色。nbordercolorlight：设置行的亮边框颜色。nbordercolordark：设置行的暗变框颜色。nalign：设置行的对齐方式，（里面内容的对齐方式）有三种：left、center、right。nValign：设置行的垂直对齐方式，有三种：top（居上）、middle（居中）、bottom（居下）。n 基本语法： 2.4.6 表格标记98/11

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

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