html基础.ppt

《html基础.ppt》由会员分享，可在线阅读，更多相关《html基础.ppt（81页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、H T M LH T M L 语语 言言 HTML语言概述语言概述 HTML基础知识基础知识 装饰网页装饰网页 使用列表使用列表 使用表格使用表格一一.HTML语言概述语言概述l超文本置标语言超文本置标语言HTML（HyperTextMarkup Language）是是SGML（Standard Generalized Markup Language）语言的一个应用，是语言的一个应用，是WWW“世界世界”的通用的通用“语言语言”。WWW“世界世界”诸服务器诸服务器与浏览器之间通过它互相沟通。与浏览器之间通过它互相沟通。WWW“世界世界”中中的信息可以通过它来的信息可以通过它来“表现表现”。没有

2、。没有HTML就没就没有有WWW“世界世界”。lHTML HTML 不是程序设计语言不是程序设计语言，而是一种结构语言。，而是一种结构语言。lHTML HTML 与平台无关，只要是相同的浏览器。与平台无关，只要是相同的浏览器。lHTMLHTML有许多元素，文档通过元素置标就有许多元素，文档通过元素置标就形成了所谓的形成了所谓的HTMLHTML文档。文档。lHTML HTML 也是文本文件，所以可以用纯文本也是文本文件，所以可以用纯文本编辑器来编辑（如编辑器来编辑（如Windows Windows 的记事本、的记事本、写字板写字板)l其其后缀名必须是后缀名必须是.html html 或或.htm

3、htm l只有通过浏览器才可以对只有通过浏览器才可以对HTMLHTML文档进行文档进行相应的解释。相应的解释。H T M LH T M L 语语 言言 HTML语言概述语言概述 HTML基础知识基础知识 装饰网页装饰网页 使用列表使用列表 使用表格使用表格二二.HTML基础知识基础知识l lHTML的基本语法的基本语法HTML的主要语法是标记、标记属性和内容注释。标记标记标记标记用于描述功能的符号。如：一个一个HTML实例实例 标记属性标记属性标记属性标记属性HTML语言的的标记具有一定的属性。如：内容注释内容注释内容注释内容注释基本格式：l lHTML文档的基本架构文档的基本架构 HTML

4、网页的标题网页的标题网页的标题网页的标题 /TITLE 网页的内容，很多标记都作用于此。网页的内容，很多标记都作用于此。网页的内容，很多标记都作用于此。网页的内容，很多标记都作用于此。/BODY 特点解说特点解说：l整份文件处于标记与之间。用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。l文件分两部分，由至称为开头开头开头开头，至称本文本文本文本文。基本上两者各有适用的标记，如只可出现于开头部分。l开头部分用以存载重要信息，而只有本文部分会被显示。所以大部分标记会运用于本文部分。l所标示的是文件的标题。会出现于浏览器顶部及为别人Bookmark时的名称，所以每页有不同而明确的标

5、题是需要的。ex3-1.html标记标记 -文本体中可以规定整个文档的一些属性：Bgcolor-背景色text-文本色Link-超级链接对象的颜色Alink-连接中对象的颜色 Vlink-连接后对象的颜色Background-背景文件Bgproperties-背景图片是否跟着卷动ex3-3.htm：图像标记图像标记 及其属性及其属性SRC -不可缺少不可缺少WIDTHHEIGHTALIGNALTISMAPBORDERHSPACEVSPACEl用这个Tag可以在HTML里面插入图片。l最基本的语法如下：lurl表示图片的路径和文件名。比如url可以是http:/ 基本上链接分成基本上链接分成:l

6、外部链接外部链接 链接至网络的某个链接至网络的某个URL网址或文件网址或文件l内部链接内部链接 链接本链接本HTML文件的某个区段文件的某个区段 常用链接标记常用链接标记常用链接标记常用链接标记l.链接指令链接指令。相关属性:HREF 链接的链接的URL位址或文件位址或文件NAME 名称名称TARGET指定链接到的指定链接到的URL位址或文件显示于那一个位址或文件显示于那一个窗口窗口 ltitle属性:让鼠标悬停在超链接上的时候，显示该超链接让鼠标悬停在超链接上的时候，显示该超链接的文字注释。如果希望注释多行显示，可以使用的文字注释。如果希望注释多行显示，可以使用 作作为换行符。为换行

7、符。l外部链接：外部链接：l-之间的内容是锚标链接到的位置是目标点目标点三种三种:跳转到其他文档跳转到其他文档 跳到标记的位置跳到标记的位置 跳到连接地图跳到连接地图 如下例子如下例子:1、跳到其他文档跳到其他文档(ex3-16.html)ex3-16.html2、跳到标记位置、跳到标记位置 (internet.html 见后见后）ex3-17.html3、跳到地图位置、跳到地图位置ex3-19.htmlH T M LH T M L 语语 言言 HTML语言概述语言概述 HTML基础知识基础知识 装饰网页装饰网页 使用列表使用列表 使用表格使用表格换行标记换行标记 Break 单独出现，用于使

8、网页文本另起一行。单独出现，用于使网页文本另起一行。ex3-4.htm标题标记标题标记 (i=1,2,3,4,5,6)成对出现成对出现，用于设置标题，隐含换行的作用，用于设置标题，隐含换行的作用，H1 最最大，大，H6最小，最小，align属性用于对齐。属性用于对齐。ex3-5.html段落标记段落标记-用于在网页内插入新的段落，可以成对也可以不成对，具有align属性。ex3-6.html 水平线标记水平线标记 单独使用，属性：单独使用，属性：Size Width Align ex3-8.html：预格式化标记预格式化标记 成对出现，使网页在浏览器器内的显示保持与成对出现，使网页在浏览器器内

9、的显示保持与编辑器内的式样一致。编辑器内的式样一致。ex3-9.html (如果删如果删,会是？）会是？）字符格式标记字符格式标记 Bold italic Underlinedex3-10.html 标记均为成对出现标记均为成对出现:ex3-13.html字体标记字体标记 成对出现成对出现 拥有属性：拥有属性：face -字体字体 size -字号字号 color -颜色颜色例子：例子：文字的特殊标记文字的特殊标记：如：如 等等 必须成对出现。必须成对出现。ex3-14.htmlex3-15.html“跑马灯跑马灯”标记标记格式：格式：displaydata 功能：使文字或图片产生移动效果功能

10、：使文字或图片产生移动效果 只能用于只能用于IElex3-23.htmlex3-23.html：H T M LH T M L 语语 言言 HTML语言概述语言概述 HTML基础知识基础知识 装饰网页装饰网页 使用列表使用列表 使用表格使用表格HTML的列表功能标记的列表功能标记 无序列表无序列表,条列前面是符号条列前面是符号 排序列表排序列表 ,条列前面是数字条列前面是数字 目录列表目录列表 菜单列表菜单列表 描述性列表描述性列表标记隐含标记隐含标记标记displaydata 如下例子（如下例子（ex3-24.html)Unordered List:displaydata display ex

11、3-24.htmlOrdered List display ex3-25.html描述性列表：描述性列表：(项目前不加数字和符号）项目前不加数字和符号）描述项描述项 隐含隐含 解释项解释项 隐含隐含 如下例子：如下例子：ex3-27.html列表也可以嵌套列表也可以嵌套(ex3-28.html)H T M LH T M L 语语 言言 HTML语言概述语言概述 HTML基础知识基础知识 装饰网页装饰网页 使用列表使用列表 使用表格使用表格 简单表格的建立 表格的基本构成：表格的基本构成：表格的基本构成：表格的基本构成：标题（标题（Caption）：指示表格的含义；可有可无数据项名（标记）数据项

12、名（标记）：指示行、列存放内容的说明 表格数据表格数据：表格中存放的信息表格单元表格单元：表格中各个独立的区域ex1.htmll表格的基本标记表格的基本标记 .-定义表格HTML要求一个表格的全部内容要包含在该标记中；其border属性用来控制表格边框的宽度，无border时为表格没有边框。-定义表行用和表示表格每一行的开始与结束-定义表头用和表示数据标记（数据项名）-定义表元(表格的具体数据)用和表示数据项，用于存放数据。和标记将产生不同的显示效果。表格的修饰表格的修饰表格及表格单元的对齐1、表格的对齐表格的对齐是指规定表格在网页上的位置。使用标记的ALIGN属性可以将表格定位在网页的左端、

13、右端或居中。2、表格单元的对齐指规定表格数据在表格单元中的位置。表格单元的对齐方向有：水平和垂直。用Align和Valign控制。举例说明如下：源程序如下：3、表格的大小及间距表格的宽度可以用WIDTH属性来定义，有两种方法：绝对定义和相对定义。相对定义是用屏幕的宽度的百分比来定义。表格的间距通过标记的几个属性定义：border属性；表格边框宽度；cellspacing属性；表格单元之间的距离；cellpadding属性；表格单元边缘与单元内容之间的距离。例如：源代码如下页：表格中可以使用链接，如下例：建立复杂表格方法建立复杂表格方法在这个例子中，应用了表格中的跨行和跨列的方法。在这个例子中，

14、应用了表格中的跨行和跨列的方法。为了定义跨行和跨列的表格单元，需要采用为了定义跨行和跨列的表格单元，需要采用和和标记中的标记中的ROWSPAN和和COLSPAN属性，同时属性，同时应遵循如下的约定：应遵循如下的约定：如果一行中的一个单元跨了多行，用户不需要如果一行中的一个单元跨了多行，用户不需要在下一行再次定义此单元，只需忽略此单元，直接在下一行再次定义此单元，只需忽略此单元，直接书写下一个单元。由于表格单元总是自然地向下、书写下一个单元。由于表格单元总是自然地向下、向右延伸，所以创建一个跨多列的单元时只需为最向右延伸，所以创建一个跨多列的单元时只需为最左端的单元（如表中的左端的单元（如表中的

15、成绩成绩栏）指定栏）指定COLSPAN，创创建一个跨多行的单元时只需为最上端的单元（如表建一个跨多行的单元时只需为最上端的单元（如表格中的格中的一班一班栏）指定栏）指定ROWSPAN。下面是上例的源程序：练习制作一个简单的通迅录（ex10.htm)lHTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。l举个简单的例子，一个让用户输入姓名的HTML表单(Form)。示例代码如下：ll请输入你的姓名：llllHTML表单(Form)最关键要掌握的有三个要点：表单控件(FormControls)ActionMethodl表单控件，通过HTML表单的各种控件，用户可以输

16、入文字信息，或者从选项中选择，以及做提交的操作l用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。lmethod，表示了发送表单信息的方式。method有两个值：get和post。lget的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏里看到)。lpost则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。lHTML表单(Form)常用控件有：linput type=“text”单行文本输入框单行文本输入框linput type=“submit”将表单将表单(Form)里的信息里的信息提交给表单里提交给

17、表单里action所指向的文件所指向的文件linput type=“checkbox”复选框复选框linput type=radio单选框单选框lelect下拉框下拉框ltextArea多行文本输入框多行文本输入框linput type=password密码输入框密码输入框(输入的文输入的文字用字用*表示表示)l单行文本输入框单行文本输入框(input type=text)l单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下：ll复选框复选框(input type=checkbox)l复选框允许用户在一组选项里，选择多个。示例代码：l苹果l桔子l芒果演示示例l用checked

18、表示缺省已选的选项。l桔子演示示例l单选框单选框(input type=radio)l使用单选框，让用户在一组选项里只能选择一个。示例代码：l苹果l桔子l芒果演示示例l用checked表示缺省已选的选项。l桔子演示示例l下拉框下拉框(select)l下拉框(Select)既可以用做单选，也可以用做复选。单选例句如下：ll苹果l桔子l芒果l演示示例l如果要变成复选，加muiltiple即可。用户用Ctrl来实现多选。例句：l演示示例l用户还可以用size属性来改变下拉框(Select)的大小。l演示示例l多行输入框多行输入框(textarea)l例句如下：lll其中cols表示textarea的

19、宽度，lrows表示textarea的高度。l演示示例l密码输入框密码输入框(input type=password)l例句如下：ll演示示例l提交提交(input type=submit)l通过提交(inputtype=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。例句如下：ll演示示例如何在网页中使用框架（多窗口）前面我们学习的HTML文件，当用户用浏览器阅读时，都是在单一窗口中显示。即如果用户正在阅读某个网页，再调用另一个网页时，则前一个网页自动关闭。这里介绍几个新的标记，用它们书写的HTML文件，可以对屏幕进行横向或纵向的分割，在同一屏幕上出现多个窗

20、口，每个窗口上显示不同的网页内容，并且可以独立变化。使用多窗口技术，可以使屏幕的信息量增大，使Web网页更加吸引读者。多窗口（FRAMESET）HTML书写并不复杂，只是多了几个标记。多窗口及其HTML书写格式首先看一个多窗口的网站的例子来认识框架：http:/ 属性Target除了上述属性外，还有下列几个常用属性：1、target=“_blank”：将超级链接的网页显示在一个新窗口中；2、targer=“_top”：将超级链接的网页显示在整个窗口中。3、targer=“_parent”：将超级链接的网页显示在上一层框架中4、targer=“_self”：将超级链接的网页显示在当前框架中。其中“_top”和“_parent”通常都是因为在框架中还有框架，因此可以用“_parent”表示上一层的框架，而“_top”则表示最上层的框架。如果要超级链接到别人的网页中，最好使用target=“_blank”或是target=“_top”来左超级链接，因为如果将别人的网页放在自己的网页的某一个框架中，会有著作权的问题。现在用上面的例子加以说明（ex9.htm)：开启新窗口在上一层窗口左边窗口改变练习划分两个框架（窗口）左窗口是著名网站名称；右窗口是网站内容。（ex11.htm)