1、DHTML(HTML CSS Java Script),HTML(HyperText Markup Language),科泰软件教育WEB开发,马跃峰,HTML基础,要让设计者在网络上发布的网页能够被世界各地的浏览者所阅读，需要一种规范化的发布语言。在万维网（WWW）上，文档的发布语言是HTML。HTML语言是英文HyperText Markup Language的缩写，中文名为超文本标记语言。 所谓超文本标记语言，就是该文档有别于纯文本的单个文件的浏览形式，超文本文档中提供的超级链接能够让浏览者在不同的页面之间跳转。标记语言是一种基于源代码解释的访问方式，它的源文件由一个纯文本文件组成，代码
2、中由许多元素组成，而前台浏览器通过解释这些元素显示各种样式的文档。换句话说，浏览器就是把纯文本的后台源文件，以赋有样式定义的超文本文件方式显示出来。,HTML语言概述,HTML和网络是紧密连接的，它应网络传输的需求而开发，配合文档显示而发展。HTML是在1989年由Timonthy Berners-Lee制定出来的，随后，由NCSA推出Mosaic浏览器，将HTML语言推广并得到越来越多用户的欢迎。但是由于多种浏览器同时流行于世界各地，它们支持HTML语言的标准也不相同，这样限制了HTML标记语言本身的发展。逐渐，W3C（World Wide Web Consortium）网络标准化组织联手一
3、些较为流行的浏览器开发商一同定义HTML标准，并且力推浏览器解释语言和显示方法的统一，这也在另一方面为HTML标准的统一起到了关键作用。,HTML概述,HTML语言是一种标签语言，它不需要编译，可以直接由浏览器执行。在标准网页设计中HTML负责填充网页的内容，HTML编写的超文本文档（文件）称为HTML文档（网页），它包含了一些HTML元素，使用HTML或HTM为文件名后缀，能独立于各种操作系统平台，如Unix、Windows等。 HTML文档是普通的文本文档（ASCII），在编辑方面，任何文字编辑器都可以，只要能将文件另存成ASCII纯文字格式即可。可以使用普通的文本编辑器，如Windows
4、中的记事本、写字板。也可以采用专用的HTML编辑工具：如Eclipse、Dreamweaver、Homesite等工具，专用的HTML编辑工具在编写过程中能够提示标签和标签属性，并能够自动检查HTML文档中的语法错误并协助改正。,HTML文档结构,标准的HTML文档是由标签和要显示在网页上的内容组成。HTML用于描述功能的符号称为“标签”，如、等。HTML标签规定HTML文档的逻辑结构，并且控制文档的显示格式，然后由浏览器来负责解释并显示页面。通过使用标签可以区分文本文件的各个组成部分，对网页上的文字、表格、图片等多媒体数据所出现的位置、形式、顺序及网页间的超链接关系进行设定。,HTML标签,
5、标签都封装在一对尖括号“”之中。标签只改变网页的显示方式，本身不会显示在窗口中。HTML文档中最先出现的标签是标签。标签是文档标识符，它是成对出现的，首标签和尾标签分别位于文档的最前面和最后面，明确地表示文档是以超文本标识语言（HTML）编写的。该标签不带任何属性。 事实上，我们现在常用的Web浏览器（FireFox和IE）都可以自动识别HTML文档，并不要求有标签，也不对该标签做任何操作。但是，为了提高文档的适用性，使我们编写的HTML文档能适应日新月异的Web浏览器，还是应该养成使用这个标签的习惯。 在.之间主要包括了以下几个部分。,头部标签,Head是英文“头”的意思。习惯上用户把HTM
6、L文档分为文档头和文档主体两部分。文档主体部分就是在Web浏览器窗口的用户区内看到的内容，而文档头部分用来规定该文档的标题（出现在Web浏览器窗口的标题栏中）和文档的一些属性。标签对的作用就是控制文档的头部信息。此标签中间可以使用、标签对，在此标签中间可以放置用户编辑的JavaScript代码。 HTML文档的标签是可以嵌套的，即在一对标签中可以嵌入另一对子标签，用来规定母标签所含范围的属性或其中某一部分内容，嵌套在标签对中使用的主要有标签。,标题标签,标签是成对出现的，用以规定HTML文档的标题。在和之间的内容将显示在Web浏览器窗口的标题栏中。另外，标签对，只能放在标签对之间，而且其内部不
7、能包含其他标签。 代码段“个人资料”，控制显示了网页的标题。“个人资料”四个字出现在IE浏览器的最左上方。,主体标签,标签是成对出现的。在标签对之间的内容，将显示在Web浏览器窗口的用户区内，它是HTML文档的主体部分。可以把HTML文档的主体区域简单地理解成标题以外的所有部分，该部分可以包含、等标签。结束标签指明主体区域的结尾。在标签中可以规定整个文档的一些基本属性： “bgcolor”：指定HTML文档的背景色。 “text”：指定HTML文档中文字的颜色。 “link”：指定HTML文档中待连接超链接对象的颜色。 “alink”：指定HTML文档中连接中超链接对象的颜色。 “vlink”
8、：指定HTML文档中已连接超链接对象的颜色。 “background”：指定HTML文档的背景文件。,特殊字符,在HTML里有很多特殊的符号是需要特别处理的，例如，“”这两个符号是用来表示标签的开始和结束的，是没有办法通过直接打“” 来呈现“”的，必须输入编码表示法：“表示空格。,HTML格式标签,HTML的格式标签的主要作用是在浏览器中控制文本对象的显示，包括段落、换行、水平线等标签，下面介绍几个常用的HTML格式标签。所有的格式标签全部都是嵌套在标签对之间的。,段落标签,段落标签的英文全程是Paragraph，几乎所有的HTML文档都离不开这个标签，而且在使用时必须成对出现。标签对用于创建
9、一个段落，在此标签中的文本以段落的方式显示在浏览器上。段落标签对支持align属性来设置对齐方式，语法如下： 段落内容 属性align的功能是专门设定水平对齐位置，其常见的设定值有三个，也就是置左（align=“left“）、置中（align=“center“）、置右（align=“right“）。,换行标签,换行标签的作用是在不另起一段的情况下将当前文本强制换行。它的起始标签必须有，而结束标签是禁止出现的，也就是说标签属于单独出现的标签。使用换行标签的代码如下：换行标签这段文字一共包含了两个强制换行标记,预格式化标签,在HTML文档中，有时候设计者需要按照自己的格式编写源文件，并且希望在浏览
10、器中显示的格式和编辑时的格式相同。标签对可以完整保留设计者在源文件中所定义的格式，包括各种空格，缩进，以及其他特殊格式，全都原封不动的反映在浏览器页面上。使用标签进行预格式化的代码如下：锄禾日当午， 汗 滴 禾 下 土。 谁知盘中餐， 粒 粒 皆 辛 苦。 ,列表标签,HTML文档中使用的列表主要有无序列表、排序列表、目录列表、菜单列表、描述性列表五种类型。下面有重点地分别进行介绍。 1无序列表(ul) 2排序列表(ol) 3目录列表 4菜单列表 5描述性列表(dl)列表头列表内容,HTML文本标签,HTML文本标签用于设置文本的样式及显示属性，可以让浏览器按照某种格式显示文本。下面主要介绍几
11、下几种常用的文本标签。,标题标签,HTML提供了将文本设置为标题显示的标签对，标签对。夹在标签对之间的文字是HTML文档的标题。设定标题字体大小，n=1（大）6（小），标题的大小一共有6种，也就是从到。其中标签所括起的文字是第一级标题，最大最粗，标签所括起的文字是最后一级标题，最小最细。,字体修饰标签,字体修饰标签可对文字的格式做相应的变化，如粗体、斜体、底线、上标、下标等。常用的字体修饰标签有以下几种。 标签对指定文字为粗体字。标签对指定文字为斜体字。标签对指定文字为带有下划线。标签对指定文字为打字机效果。标签对指定文字为上标。标签对指定文字为下标。标签对指定对某段文字进行强调，通常用斜体字
12、显示出来。标签对对文本进行强调，通常用粗体字显示出来。,字体标签,Font标签可以设置文档的字体，通过改变其属性，对文本进行不同的设置，可以对文本的字体、大小、颜色等进行改变。 1属性size 2属性face 3属性color,HTML超链接标签,HTML最显著的优点就在于它支持文档的超链接，用户可以很方便地在不同文档，以及同一文档的各段段落之间跳转。HTML中的链接包括两部分：锚标和目标点。锚标就是链接的源点，当鼠标被移到锚标处时会变成小手状。此时，用户通过单击鼠标就可以到达链接的目标点。目标点可以是一张图片、一个网络文档、一个多媒体文件等。,属性href,href是hypertext re
13、ference的缩略词，用于设定链接地址，其链接地址必须是URL地址，必须给出具体的路径。其中URL地址可以为下面内容： （1）网站：可以设置ip地址或者是网站的网址。例如，链接到google站点首页可以表示为以下形式。 Google Google （2）网页：链接到本机的网页，可以直接直接指定网页所在的路径。 搜狐首页 回到主页面,属性href,（3）可执行文件：当链接到的文件的扩展名不是.htm（.html）或者.asp（.jsp/.php）时，而是其他可执行的文件，会将链接到的文件下载到本地计算机上或者直接执行。如果是文本文件（如Word格式），则在浏览器中打开文件并进行编辑。 word
14、文档，打开文档进行编辑 播放声音文件 执行对应的应用程序 （4）网页上的书签：通常使用在网页的长度超过屏幕时，可以使用书签直接跳转到该书签指向的具体内容，节省移动滚动条的时间。,属性target,打开链接的位置由target属性进行控制，属性值分为_blank、_self、_parent、_top。taget=”_blank”在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。target=”_self”将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。target=”_parent”将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框
15、架，则所链接的文档载入整个浏览器窗口。target=”_top”将链接的文档载入整个浏览器窗口，从而删除所有框架。 搜狐首页 上述代码表示，在新的窗口中打开搜狐首页。,属性title,这是一个很实用的属性，title属性可以用来为链接添加附加的解释信息，当鼠标悬停在有超链接的文字或者图片等对象上的时候，显示该超链接的解释信息。以下代码，在显示的时候，当把鼠标放在超级链接文字上面时，浏览器会以浮动提示的方式显示解释信息“科泰集团欢迎你”。 科泰IT培训网站,属性name,超级链接标签同样可以用来进行文档内部定位，设计者需要做的就是首先在文档内设定一个标签，称为“锚定位”，这样做相当于在文档中的某
16、一个位置放置一个标签，通过超链接标签的href属性，可以跳转到已经设置号的“锚定位”标签的位置。利用标签的name属性可以实现文档内部的定位。代码的说明如下： 需要设置定位的文本,链接到E-mail地址,可以使用电子邮箱作为超级链接的目标。一点击这个链接，就会触发你的邮件客户端，比如Outlook Express，然后显示一个新建E-mail的窗口。用可以实现这样的功能。使用格式如下所示。 邮件链接 以下代码添加一个电子邮箱地址链接。 个人邮箱地址,HTML图像标签,图像可以使Web页面更加生动美观、富有生机。Web浏览器可以显示JPEG和GIF图像。其中GIF图像最多只能使用256种颜色（即
17、只能保存为8位颜色），而JPEG格式可保存为24位，对具有连续色调的图像有最佳效果。不过，GIF图像虽然在图像质量上不及JPEG图像，但其所占存储空间小，下载速度快。因此应视不同情况而决定应使用哪种格式的图像。对于徽标、公司厂标等在每一主页显示，要求能快速下载并能在低配置的系统中查询的图像，应采用GIF格式，而对于扫描图片、艺术作品这种对显示质量要求很高的图像则应采用JPEG格式。 在HTML文档中插入图像是通过标签来实现的，它只有起始标志没有结尾标志，所有图像样式都由的属性决定，用法如下： ,属性src,src属性用来定义图片的URI（统一资源定位符）地址，它是图片必不可少的属性。如果图片U
18、RI地址指定错误，在浏览器页面中图片的位置将会出现一个红色“”号。src属性的使用方法如下：URL表示图片的路径和文件名。比如URL可以是绝对路径http:/ 表格中不可缺少的标签主要有标签、标签、标签，下面就表格中常用的标签，作详细介绍，并对它们的属性进行说明。,表格标签,和标签用来创建一个表格，它具有以下属性： 通过width和height属性设置表格的宽度和高度；通过border属性和bordercolor属性设置表格边框的像素值和颜色值；通过cellspacing属性和cellpadding属性设置单元格之间的空间大小，以及单元格的边框与其内部的文字之间的空间大小。,行标签,和标签用来
19、创建表格中的每一行。此标签只能放在和标签对之间，而且在此标签对之间加入文本是无效的。标签具有以下一些属性： 1属性align 2属性valign 3属性bgcolor,单元格标签,和标签是用来创建表格中每一行里的每一个单元格，此标签对只能放在和标签对之间才是有效的。想要输入的文本只能放在和标签对之间。标签具有以下一些属性： 1属性width和height 2属性align和valign 3属性colspan和rowspan,表头标签,和标签，用来设置表格头，通常是黑体字居中文字，与和标签没有太大区别。大多数表格式的数据包含一行和一列表头，用来说明某一行或某一列数据的属性类别，这种情况就可以利用
20、和标签的特点，来设置表头，此标签用来告诉浏览器将一个单元格的内容格式化为表头。,说明标签,和标签是表格的说明性文字，通常出现在表格的上方，主要是用来总结表格的内容和提供表格内容的简明信息。新的HTML规范（从HTML4.0标准开始）规定，如果有标题元素，它必须跟踪表格的起始标签之后。,HTML框架标签,一个浏览器文档窗口中一般只能显示一个网页文件，但是，使用框架标签就可以将一个浏览器文档窗口分割成多个子窗口，每个子窗口中都可以显示一个独立的网页文件。 框架是由英文Frame翻译过来，它代表浏览器文档窗口中的一个子窗口。每个框架都可以显示一个HTML文件，多个框架组成了一个框架集（Framese
21、t）。框架集通常的使用方法是在一个框架中放置一个网页，此网页含有可以链接到其他多个网页的超链接条目，访问者单击这些超链接条目后，可以将超链接指向的网页文件显示在另外一个指定的框架中。如果要求在单个应用窗口中显示一个以上的网页，就可以使用框架。,框架集标签,一个被划分成若干框架的窗口区域被称为框架集，框架窗口必须定义在框架集中，和标签用来定义框架集中有几个框架，以及各个框架时如何排列的。 和标签嵌套在标签对中，也可以嵌套使用，但是必须放在和标签之外，因为，和标签只是用来划分框架窗口的，而不能显示其他的网页元素。 标签具有两个比较重要的属性rows和cols属性，使用此标签时，至少应选择这两个属性
22、中的一个，否则浏览器只显示第一个定义的框架，剩下的一概不管，和标签也就没有起到任何作用了。,框架标签,标签放在和标签之间，用来定义某一个具体的框架窗口。标签具有两个比较重要的属性，src和name属性，这两个属性都是必须赋值的。src指定整个框架窗口中初始装载的网页文件的URL地址，浏览器将会在此框架中显示src指定的HTML文件；name指定框架窗口的名字，这个名字是用来供超文本链接标签中的target属性指定链接的HTML文件将显示在哪一个框架中。例如，定义了一个框架名字为main，其他某个框架窗口中的超链接标签的target属性值等于这个框架窗口的名字main，当那个超连接被单击后，它指
23、向的HTML文件将显示在main框架中。,标签,和这对标签的作用是当浏览者使用的浏览器太旧，不支持框架这个功能时，看到的将会是一片空白。为了避免这种情况，可使用这个标签，当使用的浏览器看不到框架时，就会看到之间的内容，而不是一片空白。这些内容可以是提醒浏览转用新的浏览器的字句，甚至是一个没有框架的网页，或能自动切换至没有框架的版本。在此标签对之间，应该先紧跟着和标签。,浮动窗口标签,标签称为浮动窗口标签。和标签不需要放在和标签之间，它的作用是在一个网页中间插入一个简单的框架窗口，在这个框架窗口中可以显示另外一个文件，这样就能够实现一种“画中画”的效果。在和标签对中放入的文本只有在浏览器不支持标
24、签时才会显示，给用户一个提示信息。标签的属性的用法与标签类似，这里不多做介绍。,框架的高级设置,在设计应用中，还会使用框架的一些高级设置，如框架的嵌套和框架之间的链接。 1框架的嵌套 2框架间的链接 在超链接中通过“HTML入门”设置了target=”zhu”的属性，将链接页面显示的目的地设置为”zhu”的框架。点击超链接的文字“HTML入门”，命名为“zhu”框架中的内容会发生相应变化。,HTML表单标签,表单（Form）是HTML的一个重要部分，主要用于采集和提交用户输入的信息，使网页具有交互的功能。一般是将表单设计在一个HTML文档中，当用户填写完信息后做提交（submit）操作，表单的
25、内容就被传送到服务器上，等处理完毕后，再将结果信息返回到客户端。,表单标签,和标签用来创建一个表单，在标签对之间的都属于表单的内容。标签有三个比较常用的属性，具体如下。 1属性action 2属性method 3属性target,用户输入区域标签,表单中提供给用户的输入形式一般使用标签来实现，此标签用来定义一个用户输入区，用户可以在其中输入信息。这个标签必须放在和标签之间。标签提供了多种类型的输入区域，具体是哪一种类型由type属性决定。具体如下： 1单行文本输入框（input type=“text“） 2多行输入框（textarea） 3密码输入框（input type=“password“
26、） 4单选框（input type=“radio“） 5复选框（input type=“checkbox“） 6下拉框（select） 7提交（input type=“submit“） 8重置(input type=“reset“) 9图片提交（input type=“image“） 10列表框 11隐藏控件,小结,本章主要介绍了HTML的基础知识。作为一种超文本标记语言，HTML文档可以通过任何文字编辑器进行编写，并通过浏览器直接运行。本章的知识重点是，HTML中各种常用标签的使用方法和作用，主要有格式标签、文本标签、超链接标签、表格标签等等。HTML的常用标签也可以利用属性的不同设置，来控制页面的不同显示。,
