j第一章-HTML语言基础课件

第一章第一章 HTML语言基础语言基础lHTML的背景知识的背景知识lHTMLlHTML文件中文字的使用文件中文字的使用lHTML文件中图片的使用文件中图片的使用l超连接的建立超连接的建立l表格的应用表格的应用l窗口框架的应用窗口框架的应用lHTML中多媒体文件的使用中多媒体文件的使用4/25/20241.1 HTML的背景知识的背景知识lHTML，全称为，全称为Hyper Text Mackeup Language 译为超文本标记语言，它是一种标记语言，用来译为超文本标记语言，它是一种标记语言，用来描述网页的格式以及其他网页的链接信息。描述网页的格式以及其他网页的链接信息。使用使用HTML语言编写的文件的扩展名是语言编写的文件的扩展名是.html或或.htm，这就是网页文件，这就是网页文件,也成为也成为HTML文件。文件。HTML语言类似于排版语言，就是在需要显示特语言类似于排版语言，就是在需要显示特定内容的地方，放上特定的标签即可，该标签用定内容的地方，放上特定的标签即可，该标签用于告诉浏览器如何显示指定的内容。于告诉浏览器如何显示指定的内容。4/25/2024南阳理工学院南阳理工学院HTML标记标记l基本的语法基本的语法 内容内容l特点：成对出现特点：成对出现l注意:尖括号是英文半角状态下输入l月亮代表我的心月亮代表我的心/titlel当浏览器收到当浏览器收到HTML文件后，就会解释里面的标文件后，就会解释里面的标记符，然后把标识符相对应的功能显现出来。记符，然后把标识符相对应的功能显现出来。4/25/2024南阳理工学院南阳理工学院HTML标记属性标记属性l许多许多HTML标记都可以设置一个或多个属性来标记都可以设置一个或多个属性来控制标签的显示效果，例如，控制标签的显示效果，例如，标记中的标记中的size和和color就是就是HTML标记属性。标记属性。l属性设置的一般格式为：属性名属性设置的一般格式为：属性名“属性值属性值”l注意：1.每个属性的位置必须跟在起始标记的每个属性的位置必须跟在起始标记的 后面，且位于尖括号之内。后面，且位于尖括号之内。2.标记名与属性之间，属性与属性之间标记名与属性之间，属性与属性之间 必须用空格分隔。必须用空格分隔。例子：例子：4/25/2024南阳理工学院南阳理工学院对对HTML文件的操作文件的操作l创建创建HTML文件文件l修改修改HTML文件文件 步骤：步骤：1.双击打开双击打开HTML文件文件 2.点击点击“查看查看”菜单下面的菜单下面的“源文件源文件”命令命令 3.在弹出的记事本中修改源代码在弹出的记事本中修改源代码 4.保存记事本并关闭保存记事本并关闭 5.刷新刷新HTML文件文件4/25/2024南阳理工学院南阳理工学院课件存放地课件存放地l帐户：帐户：l密码：密码：dongmanclass4/25/2024南阳理工学院南阳理工学院1.2 HTML的全局架构标签的全局架构标签显示在浏览器左上方的显示在浏览器左上方的红色背景、蓝色文本红色背景、蓝色文本4/25/2024南阳理工学院南阳理工学院1.2 HTML的全局架构标签的全局架构标签l整个文档处于标记整个文档处于标记与与之间；之间；l文档分两部分，文档分两部分，到到为头部，用于为头部，用于存放重要的信息，如标题，存放重要的信息，如标题，内容不在浏览器窗口里显内容不在浏览器窗口里显示，示，到到为主体部分，网页中的内为主体部分，网页中的内容都要放在这一部分，大容都要放在这一部分，大部分部分HTML标记使用在这标记使用在这一部分。一部分。HTMLHeadBodyTitle4/25/2024南阳理工学院南阳理工学院1.3 注释与特殊字符注释与特殊字符lHTML文档中的注释文档中的注释 lHTML文档中的符号和特殊字符文档中的符号和特殊字符(P11)表示特殊字符的方式就叫表示特殊字符的方式就叫HTML编码编码 HTML编码使用一个连续的字符序列来代表一编码使用一个连续的字符序列来代表一个特殊的字符，这个连续的字符序列以字符个特殊的字符，这个连续的字符序列以字符&开头，以分号开头，以分号(;)结尾。结尾。例如：例如：<4/25/2024南阳理工学院南阳理工学院2.1 格式标签格式标签l 属性：属性：align 属性值：属性值：left,center,rightl (p11)lll 此标签对之间嵌套的文本或图形在页面的水平此标签对之间嵌套的文本或图形在页面的水平方向居中。方向居中。4/25/2024南阳理工学院南阳理工学院2.1 格式标签格式标签l 此标签对用来对文本进行预格式化处理，告诉此标签对用来对文本进行预格式化处理，告诉浏览器在屏幕上显示嵌套在其中的空格和空行浏览器在屏幕上显示嵌套在其中的空格和空行l（框架）（框架）属性：属性：direction 属性值：属性值：left;right;up;top behavior scroll;slide;alternate 4/25/2024南阳理工学院南阳理工学院文字列表的使用文字列表的使用l创建普通的列表创建普通的列表l 用来创建一个不同的列表用来创建一个不同的列表 用来创建列表中的上层项目用来创建列表中的上层项目 用来创建列表中的最下层的项目用来创建列表中的最下层的项目 注意:都必须放在都必须放在之之间间4/25/2024南阳理工学院南阳理工学院文字列表的使用文字列表的使用l序列提纲序列提纲ll用来创建一个标有数字的列表用来创建一个标有数字的列表l用来创建一个标有圆点的列表用来创建一个标有圆点的列表l 用来创建一个列表项用来创建一个列表项注意：注意：只能在只能在或或之间使之间使用用4/25/2024南阳理工学院南阳理工学院2.2 文本标签文本标签l.l l l 属性：属性：face 控制文字字体控制文字字体 size 77之间，值越小字号就越小之间，值越小字号就越小 color 用颜色的英文表示用颜色的英文表示4/25/2024南阳理工学院南阳理工学院网页背景的设置网页背景的设置l属性名属性值功能bgcolor颜色英文名称颜色英文名称控制网页背景颜色控制网页背景颜色background图片路径图片路径与图片名与图片名控制网页背景图片控制网页背景图片text颜色英文名称颜色英文名称控制网页文字颜色控制网页文字颜色4/25/2024南阳理工学院南阳理工学院路径问题路径问题l相对路径：指以要引用的文件所在的位置为参相对路径：指以要引用的文件所在的位置为参考点而建立起来的路径。所以当不同的文件引考点而建立起来的路径。所以当不同的文件引用同一文件时，其所使用的路径是不一样的。用同一文件时，其所使用的路径是不一样的。l绝对路径：指以服务器的硬盘架构以及所在的绝对路径：指以服务器的硬盘架构以及所在的根目录为参考点而建立起来的路径。所以，当根目录为参考点而建立起来的路径。所以，当不同的文件引用同一个文件时，所使用的路径不同的文件引用同一个文件时，所使用的路径都是一样的。都是一样的。4/25/2024南阳理工学院南阳理工学院文件的位置（路径文件的位置（路径1）webweb1web2imagepig.htm1.jpg2.jpg3.jpg4/25/2024南阳理工学院南阳理工学院文件的位置（路径文件的位置（路径2）webweb1web2appleimagepig.htm1.jpg2.jpg3.jpg4/25/2024南阳理工学院南阳理工学院3.1图片的插入图片的插入l图片的格式 JPG 格式通格式通过选择过选择性地去掉数据来性地去掉数据来压缩压缩文件，是有文件，是有损损压缩压缩。比。比GIF图图像包含更多像包含更多颜颜色方面的信息色方面的信息 优优点点：是色彩比是色彩比较较逼真，文件也逼真，文件也较较小。在多媒体及网小。在多媒体及网页页中用到的照和中用到的照和图图像适合存像适合存为为JPEG格式。格式。GIF 是一种是一种压缩压缩的的8位位图图像文件，广泛用于网像文件，广泛用于网络传输络传输，最多只有最多只有256色色优优点点:GIF格式可以保存格式可以保存动动画和透明（无背景色）画和透明（无背景色）图图像像l插入图片标记 4/25/2024南阳理工学院南阳理工学院 Img属性属性属性名属性值功能 src 图片的路径图片的路径,名称名称指定插入图片位置指定插入图片位置 Height/width n或或n%图片高度图片高度,宽度宽度 Hspace/vspace n控制图片左右控制图片左右上下空白区域上下空白区域 align Top,middle,right图片和文字的位置图片和文字的位置 alt 文字文字设置代替图片的文设置代替图片的文字字4/25/2024南阳理工学院南阳理工学院Windows 画图画图反色反色Invert Colours 水平扭曲水平扭曲 45 o4/25/2024南阳理工学院南阳理工学院4.1 超连接的定义及组成超连接的定义及组成l超级链接让访问者能以非线性方式浏览超级链接让访问者能以非线性方式浏览Web在同一站点的页面之间转换，或是离开一个站点在同一站点的页面之间转换，或是离开一个站点到达另一个站点，快速找到自己所需内容到达另一个站点，快速找到自己所需内容l链接源链接源l超级链接由两部分组成：超级链接由两部分组成：超链接源和超链接目标超链接源和超链接目标l超链接源一般采用文本或图象超链接源一般采用文本或图象l超链接目标是用户单击超链接时打开的网页或文超链接目标是用户单击超链接时打开的网页或文件，一般用路径或件，一般用路径或url4/25/2024南阳理工学院南阳理工学院Url的格式：的格式：协议：协议：/ip地址或域名地址或域名/路径路径/文件名文件名Url的第一部分：协议，指明要访问的是哪一类的第一部分：协议，指明要访问的是哪一类资源，使用什么协议。资源，使用什么协议。常见的有常见的有http（超文本传输协议）（超文本传输协议），ftp（文件（文件传输协议）传输协议）Url的第二部分：存放资源的主机的的第二部分：存放资源的主机的ip地址或域地址或域名。名。Url的第三部分（可选）：用来指定要访问的资的第三部分（可选）：用来指定要访问的资源在计算机中的路径和文件名。源在计算机中的路径和文件名。4/25/2024南阳理工学院南阳理工学院4.2 超链接分类超链接分类 按目标端点的类型分类：按目标端点的类型分类：l内部链接内部链接 目标端点是同一个站点的其他文档。目标端点是同一个站点的其他文档。l外部链接外部链接 目标端点是不同站点中的文档。目标端点是不同站点中的文档。l锚点链接锚点链接 目标端点是同一个网页或不同网页目标端点是同一个网页或不同网页中命名锚的链接。中命名锚的链接。l电子邮件链接电子邮件链接 打开填写电子邮件表格链接打开填写电子邮件表格链接4/25/2024南阳理工学院南阳理工学院创建链接创建链接l链接的标记链接的标记 链接源链接源l文本链接文本链接 文本文本 文本文本l图像链接图像链接 图像热点区域的链接图像热点区域的链接4/25/2024南阳理工学院南阳理工学院创建链接创建链接l特定目标的链接（锚点链接）特定目标的链接（锚点链接）需要两种需要两种标记属性的配合使用标记属性的配合使用步骤：步骤：1.在开头设置向导链接在开头设置向导链接,目的是指明网页目的是指明网页 所应跳到哪个目标名称的位置所应跳到哪个目标名称的位置 链接名称链接名称 2.设置相应的特定目标设置相应的特定目标 链接名称链接名称注意：注意：目标名称和目标名称和“name”的目标名称一致的目标名称一致4/25/2024南阳理工学院南阳理工学院创建链接创建链接l电子邮件的链接制作电子邮件的链接制作 链接格式为：链接格式为：链接源点链接源点lftp站点的链接站点的链接 链接格式为：链接格式为：链接源点链接源点 例如：例如：我的课件我的课件4/25/2024南阳理工学院南阳理工学院5.1表格的应用表格的应用 表格由许多单元格构成，能够以有序，整洁表格由许多单元格构成，能够以有序，整洁的方式组成数据，用户在制作网页的过程中，的方式组成数据，用户在制作网页的过程中，可以在表格的单元格中放任何对象，如文本，可以在表格的单元格中放任何对象，如文本，图形以及表单等，从而利用表格来定位网页图形以及表单等，从而利用表格来定位网页元素，做出不同风格的网页。元素，做出不同风格的网页。4/25/2024南阳理工学院南阳理工学院表格的建立表格的建立l3个基本的个基本的HTML标记标记l lll 这是一个单元格 4/25/2024南阳理工学院南阳理工学院 table属性属性属性名属性值功能border n设置表格边框粗细设置表格边框粗细 cellspacingn设置单元格之间的设置单元格之间的间隔大小间隔大小 cellpadding n设置单元格边框与设置单元格边框与其内部内容之间的其内部内容之间的间隔大小间隔大小 height/width n或或n%图片高度图片高度,宽度宽度alignLeft,center,right表格的水平位置表格的水平位置4/25/2024南阳理工学院南阳理工学院 table属性属性属性名属性值功能bordercolor 颜色值颜色值设置表格边框颜色设置表格边框颜色bgcolor 颜色值颜色值设置表格背景颜色设置表格背景颜色4/25/2024南阳理工学院南阳理工学院 tr属性属性属性名属性值功能height n或或n%控制单行的高度控制单行的高度bordercolor 颜色值颜色值设置边框颜色设置边框颜色bgcolor 颜色值颜色值设置背景颜色设置背景颜色alignLeft,center,right控制单行内文字的控制单行内文字的水平位置水平位置valignTop,middle,bottom控制单行内文字的控制单行内文字的垂直位置垂直位置4/25/2024南阳理工学院南阳理工学院 td属性属性属性名属性值功能width n或或n%控制单元格的宽度控制单元格的宽度bordercolor 颜色值颜色值设置单元格边框颜设置单元格边框颜色色bgcolor 颜色值颜色值设置单元格背景颜设置单元格背景颜色色alignLeft,center,right控制单元格内文字控制单元格内文字的水平位置的水平位置valignTop,middle,bottom控制单元格内文字控制单元格内文字的垂直位置的垂直位置4/25/2024南阳理工学院南阳理工学院标题标记标题标记l表格标题标记表格标题标记 为表格设置名称为表格设置名称 l标题单元格标记标题单元格标记 表格内容以标题文字显示表格内容以标题文字显示 可以和可以和相互替换相互替换 4/25/2024南阳理工学院南阳理工学院表格中图片的应用表格中图片的应用l插入图片插入图片 l设置为背景设置为背景 4/25/2024南阳理工学院南阳理工学院合并单元格合并单元格l水平合并相邻的单元格水平合并相邻的单元格 l垂直合并相邻的单元格垂直合并相邻的单元格 4/25/2024南阳理工学院南阳理工学院6.1窗口框架的应用窗口框架的应用l理解框架网页的基本原理理解框架网页的基本原理：框架的作用就是把浏览器划分成若干个区框架的作用就是把浏览器划分成若干个区域，每个区域可以分别显示具有独立内容域，每个区域可以分别显示具有独立内容的网页的网页l最简单的框架网页包括两个框架，一个框架最简单的框架网页包括两个框架，一个框架显示本站点的主要栏目，也就是在该框架中显示本站点的主要栏目，也就是在该框架中创建一些超链接，另一个框架显示对应栏目创建一些超链接，另一个框架显示对应栏目的内容，也就是超连接对应的目标网页的内容，也就是超连接对应的目标网页l框架由两部分组成：框架集和框架框架由两部分组成：框架集和框架4/25/2024南阳理工学院南阳理工学院框架集框架集l框架集框架集：是一种特殊的网页，一个框架集只用：是一种特殊的网页，一个框架集只用来定义整体的框架布局，但并不提供实际内容，来定义整体的框架布局，但并不提供实际内容，框架集告诉浏览器将整个浏览器分成几个区域，框架集告诉浏览器将整个浏览器分成几个区域，在开始加载页面时都应该加载那些网页。它并在开始加载页面时都应该加载那些网页。它并不是真正意思上的网页，主要是来记录在该框不是真正意思上的网页，主要是来记录在该框架网页中所包含的框架数量以及这些框架如何架网页中所包含的框架数量以及这些框架如何拆分整个浏览器拆分整个浏览器 l框架集是框架的集合，它实际上是一个网页，框架集是框架的集合，它实际上是一个网页，在一个网页文件中用于定义框架区域，为每个在一个网页文件中用于定义框架区域，为每个框架定义位置，名称和框架源。框架定义位置，名称和框架源。4/25/2024南阳理工学院南阳理工学院框架框架l框架框架:就是框架集中要显示的文档，在框架集就是框架集中要显示的文档，在框架集中显示的文档都是中显示的文档都是html文档，只有将所有的框文档，只有将所有的框架页面都创建了，在浏览器中才会正确显示框架页面都创建了，在浏览器中才会正确显示框架集。架集。4/25/2024南阳理工学院南阳理工学院窗口框架的建立窗口框架的建立l是一个主体标记是一个主体标记注意注意：使用时不能加：使用时不能加标记标记l定义一个子窗口，单个使用定义一个子窗口，单个使用l窗口框架的分隔方式窗口框架的分隔方式 1.水平分隔水平分隔 2.垂直分隔垂直分隔 4/25/2024南阳理工学院南阳理工学院frameset属性属性属性名属性值功能bordern控制边框的粗细控制边框的粗细frameborder 0或或1控制是否显示三控制是否显示三维边框维边框bordercolor颜色值颜色值控制边框的颜色控制边框的颜色4/25/2024南阳理工学院南阳理工学院frame属性属性属性名属性值功能src HTML文件的位置文件的位置设置子窗口要显示设置子窗口要显示的网页的网页scrollingYes或或no或或auto控制是否显示滚动控制是否显示滚动条条name文本文本指定子窗口的名字指定子窗口的名字Target属性用于指定在哪个子窗口中显示页面属性用于指定在哪个子窗口中显示页面4/25/2024南阳理工学院南阳理工学院iframe标记标记l在前面的在前面的标记中，发现它只能把标记中，发现它只能把现有的窗口分成几个子窗口，而且大小只能由现有的窗口分成几个子窗口，而且大小只能由框架的高度属性或是宽度属性来设置，不怎么框架的高度属性或是宽度属性来设置，不怎么灵活。今天介绍的灵活。今天介绍的标记，它可以自由标记，它可以自由控制窗口的大小，可以配合表格随意的在网页控制窗口的大小，可以配合表格随意的在网页中的任何位置插入窗口。实际上也就是在窗口中的任何位置插入窗口。实际上也就是在窗口中再创建一个窗口。中再创建一个窗口。4/25/2024南阳理工学院南阳理工学院iframe属性属性属性名属性值功能height n或或n%控制窗口的高度控制窗口的高度widthn或或n%控制窗口的宽度控制窗口的宽度frameborder 0或或1控制是否显示三控制是否显示三维边框维边框scrollingYes或或no控制是否显示滚控制是否显示滚动条动条src网页或图片网页或图片设置插入的文件设置插入的文件4/25/2024南阳理工学院南阳理工学院p经常不断地学习,你就什么都知道。你知道得越多,你就越有力量pStudyConstantly,AndYouWillKnowEverything.TheMoreYouKnow,TheMorePowerfulYouWillBe写在最后谢谢大家荣幸这一路，与你同行ItS An Honor To Walk With You All The Way演讲人：XXXXXX 时 间：XX年XX月XX日