网页设计语言Html.ppt

《网页设计语言Html.ppt》由会员分享，可在线阅读，更多相关《网页设计语言Html.ppt（43页珍藏版）》请在三一办公上搜索。

1、第2章 HTML语言,1 HTML基础,2 基本结构标记,3 文本格式标记,4 超链接标记,5 图像标记,6 表格标记,7 格式标记,8 表单标记,9 使用字幕,2.1 HTML有关基本知识 一、什么是html语言。HTML是超文本标记语言，它是一种用于编写网页的标记语言。几乎所有的网页都是由HTML或其它程序语言编写成的。二、html语言的特性。HTML语言具有与平台无关性，无论用户使用何种操作系统（WINDOWS、DOS、UNIX），只要有相应的浏览器程序，就可以运行HTML文档。三、html语言中的工作原理。HTML编程就是用各种各样的标记把在页面中要显示的内容组织起来，其中包含了许多标

2、记和文本，浏览器可以理解这些标记，并把标记解译出来，显示出漂亮的Web页面。,2.1.1 标记基础HTML语言是由多个标记组成的，标记给浏览器提供了格式化Web文档的指令。一、基本的HTML语法在HTML语言中，所有的标记都必须用尖括号括起来。例如，、等。大部分标记都是成对出现的，包括开始标记和结束标记，开始标记和结束标记定义了所影响的范围。结束标记与开始标记名称相同，但结束标记总是以一个斜线符号开头的。例如，和，也有一些标记没有结束标记符号，例如换行标记就是这样。,HTML标记不区分大小写。HTML文件可支持很多标记，不同的标记代表不同的含义。学习HTML语言上就是学习这些各种各样的标记。每

3、种标记有不同的作用,当需要对网页的某处内容进行修改时，就把相应的标记放置在该处前面，这时浏览器就会知道要以何种方式显示网页的内容了。可以把标记放置在网页中的任意部位，但浏览器不会把这些标记本身显示出来，只是按照标记的要求对标记符之间的内容进行特殊显示。,2.1.2 标记符的属性 大多数标记都包含有多个属性，通过这些属性可以对作用的内容进行更多的控制。在HTML语言中，所有属性都放置在开始标记的尖括号内。例如，使用Font标记设置文本格式时，可以使用Face属性来指定所用的字体，使用Size属性来指定所用的字号。请看下面的HTML代码：心想事成,使用标记时的一些注意事项：,任何标记都用“”所围住

4、，如 标记名与“文本,标记字母不分大小写，标记中的属性名和属性值也都不区分大小写。HTML标记可以嵌套使用，嵌套使用时注意不要发生交叉嵌套。动态网页有少数几个标记没有对应的结束标记。如、。,2.1.3 在HTML文件中使用注释 在HTML 文件中提供了注释标记，注释由开始标记“”构成，这两个标记之间的文字被浏览器解释为注释，注释的内容不会在浏览器窗口中显示，它是给网页设计者看的，主要目的是增加代码的可读性。当浏览器遇见注释标记时，会忽略注释标记中的文字（可以是很多行文字），对添加了注释标记中的内容不作显示。,2.2 HTML文档的基本结构一、文档的开始与结束标记.它是网页的开始和结束标记，其他

5、所有标记都位于这两个标记之间。二、文档头部标记HeadHead 它用来设定有关页面的一些信息，这些信息不是页面显示的主体内容，但有时对于浏览器解释标记是很有用的。,三、主体标记BodyBody 标记符是告诉浏览器这里面的内容是网页的实际内容。对于一个最简单的网页来说，和 这两个标记符是唯一必须使用的标记符，网页中的正文内容必须要放在这两个标记之间。标记包含了文档的内容，文字、图像、动画、超链接以及其他HTML元素均位于该标记中。,HTML文档的基本结构可以表示如下：标题文字 文本、图像、动画、HTML指令等,2.3 文本格式标记 2.3.1 标题字体HnHn 标题标记用于设置文档中的标题，其中

6、.标记表示字体最大的标题，标记表示字体最小的标题。演示：Sample2_4.htm,2.3.2 字体控制标记 一、设置字体、字号和颜色使用字体标记来设置文本的字符格式，将文本置于和标记之间，通过FACE、SIZE和COLOR属性来设置字体、字号和颜色。FACE属性指定一种字体,SIZE属性指定字体的大小，其取值可以从1到7，SIZE属性值越大，显示的字号就越大COLOR属性指定文本的颜色，可以用颜色名称表示，也可以用十六进制RGB格式表示。演示：Sample2_5.htm,二、控制字体的特殊效果 通过设置字符样式可以为某些字符设置特殊格式，如粗体、斜体、下划线、删除线、上标、下标等。常用的设置

7、字符样式的标记如下：.粗体.斜体.删除线.小字体.删除线.上标.下标.下划线 演示：Sample2_6.htm,2.3.3 分段与换行 一、分段标记 分段标记定义了一个段落，使用该标记后续内容隔一行显示。若同时使用和，则将段落包围起来，表示一个分段的块；若省略结束标记，可以将开始标记放在段尾。分段标记的常用属性是ALIGN，用于设置段落的水平对齐方式。演示：Sample2_7.htm、Sample2_8.htm,二、换行标记 大多数情况下，段落标记是分隔文本的最佳符号，但有时可能会希望内容另起一行，但在新行与上一行之间并不空出一行间距，在逻辑上还属于一段。在这种情况下，最好使用分行标志符。演示

8、：Sample2_9.htm,2.3.4 使用列表格式 一、创建有序列表 有序列表使用OL和LI标记来创建，语法如下：列表项1列表项n OL标记有两个常用属性：Start和Type。Start属性用于数字序列的起始值，可以取整数值；Type属性用于设置数字序列样式，其取值可以是：1：表示阿拉伯数字1、2、3等，此为默认值。A：表示大写字母A、B、C等。演示：Sample2_11.htm,二、创建无序列表使用UL和LI标记来创建，语法格式如下：列表项1列表项nUL标记的TYPE属性用于指定列表项前面显示的项目符号，其取值可以是：disc：使用实心圆作为项目符号（默认值）。circle：使用空心圆

9、作为项目符号。square：使用方块作为项目符号。演示：Sample2_10.htm,2.4 超链接标记AA 超级链接的HTML标记是，使用格式为：链接载体 一、链接另一页面 二、链接到一个图像文件：三、链接到一个需要下载的文件：四、当链接的目标文件是压缩文件、EXE或COM文件、可以实现选择下载或立即打开。演示：Sample2_12.htm 显示 可以实现单击超链接使隐藏的对象显示,2.5 使用图像使用IMG标记在网页中插入一个图像。语句格式：2.5.1 在网页中插入图像 演示：Sample2_13.htm、Sample2_14.htm,2.5.2 播放多媒体文件Img标记不仅用于在网页中插

10、入图像，也可以用于播放多媒体文件（.avi）。若要在网页中播放多媒体文件，应在IMG标记中设置以下属性：DYNSRC：指定要播放的多媒体文件的URL。START：指定何时开始播放多媒体文件，其取值可以是fileopen或mouseover。,2.6 使用表格若要创建一个表格，可以使用以下HTML代码：数据 数据数据数据数据,2.6.1 标记 创建表格时，可以通过标记的下列属性来对表格的格式进行设置：ALIGN：表格在页面的对齐方式，left、center或right。BACKGROUND：指定用作表格背景图片的URL地址。BGCOLOR：指定表格的背景颜色。BORDER：表格边框的宽度单位(像

11、素)。则默认值为0。WIDTH：指定表格的宽度，以像素或百分比为单位。,2.6.2 设置表行的标记表格中的每一行是用TR标记来定义的，可以通过该标记的下列属性对指定行的格式进行设置：ALIGN：行中的水平对齐方式，值为left（默认值）、center或right。BGCOLOR：指定行的背景颜色。VALIGN：行中单元格的垂直对齐方式，该属性的取值可以是top（顶端对齐）、middle（居中对齐）、bottom（底端对齐）或baseline（基线对齐）。,2.6.3 设置单元格的标记 通过TD标记的下列属性可以对指定单元格的格式进行设置：ALIGN:指定单元格内文本的水平对齐方式，取值为lef

12、t（默认值）、center或right。BGCOLOR:指定单元格的背景颜色。COLSPAN:合并单元格时一个单元格跨越的列数。ROWSPAN:合并单元格时一个单元格跨越的行数。演示：Sample2_15.htm、Sample2_16.htm,2.7 设置格式标记 格式标记用来设置页面中元素的位置，主要有标记和标记。2.7.1 标记 标记用来排版大块的HTML段落，在其中加入多种其它标记，实现对其中包含元素版面设置功能。2.7.2 标记 标记用来实现对网页中包含元素的版面居中设置功能。演示：Sample2_17.htm、Sample2_18.htm,sub hide()=none 隐藏块对象e

13、nd subsub disp()=block 显示块对象end sub,设置表格线的几种方法：1、使用CSS样式定义表格外框线，表行分别用奇偶行设置不同的颜色。2、设置表格的背景色，单元格间距设置为1，然后为表行设置白色。3、使用CSS样式设置不同的表线。方法一：border-collapse 边框合并属性（collapse）表示两个相邻单元格的相邻边合并了演示示例：设置表格县线的样式.htm方法二：演示示例：设置表格县线的样式2.htm.my background:red;.my td background:#eeeeee;姓名 王江民 职务 董事长 电话,sub hide()=none 隐

14、藏块对象end subsub disp()=block 显示块对象end sub,2.8 使用表单 一、什么是表单？表单是用来收集站点访问者信息的区域。表单可以包含允许用户进行交互的各种控件，例如文本框、列表框、复选框和单选按钮等。二、如何使用表单？可以通过输入文本、单击按钮与复选框、从下拉菜单中选择选项方式填写表单，站点访问者便送出所输入的数据，该数据就会根据所设置的表单处理程序，以各种不同的方式进行处理。,三、创建表单 表单通过FORM标记来定义，基本语法格式如下：NAME：指定表单的名称。命名表单后，可以使用脚本语言（如VBScript）来引用或控制该表单。METHOD：指定将表单数据传

15、输到服务器的方法，其取值可以是：post：在HTTP请求中嵌入表单数据。get：将表单数据附加到请求该页的URL中。ACTION：将要接收表单数据的动态网页的网址。,2.8.1 使用输入型表单控件 一、在表单中添加单行文本框如果要获取站点访问者提供的一行信息，可以在表单中添加单行文本框。创建单行文本框的基本语法格式为：NAME属性:文本框名称，可以在脚本中引用该文本；VALUE属性:指定文本框的初始值；SIZE属性:指定文本框的宽度；MAXLENGTH:允许在文本框内输入的最大字符数。,二、在表单中添加密码域 创建密码域的基本语法格式为：NAME属性:用于指定密码域的名称;VALUE属性:用于

16、指定密码域的初始值；SIZE属性:指定密码域的宽度；MAXLENGTH属性:用于指定允许在密码域内输入的最大字符数。1、利用CSS样式定义文本框的高度及外观（线、字体、背景）2、利用STYLE样式属性设置：3、设置文本框无轮廓线：,三、在表单中添加复选框创建复选框基本语法格式如下：选项文本每个语句产生一个复选项，有多少个复选项，就应该定义多少个语句，一组中各个复选框的Name属性值应该相同，但Value值应该不同。Name:指定复选框对象的名称。Value:每一个复选框必须有且仅有一个value，当被 选择时这值便会传送给表单处理程序。Checked：指定对应复选框为默认选中项。,四、在表单中

17、添加单选按钮创建单选按钮基本语法格式如下：选项文本NAME属性：指定单选按钮的名称，若干个名称相同的单选按钮构成一个控件组，在该组中只能选中一个选项；VALUE属性：一组相关的Radio的Name属性值要相同，但Value值要不同，可让使用者任选其一。CHECKED属性：是可选的，若使用该属性，则当第一次打开表单时该单选按钮处于选中状态。,五、File 将所选择的文件上传给文件服务器 文件域是由一个文件名输入文本框和一个“浏览”按钮组成，用户既可以在文本框中输入文件的路径和文件名，也可以通过单击“浏览”按钮从磁盘上查找和选择所需的文件。定义格式如下：例如：Name：指定表单元素所传输文件的名称

18、。在服务器端处理程序中用该变量代表所传输过去的文件名称。,六、Hidden 在表单中添加隐藏域若要在表单结果中包含不希望让站点访问者看见的信息，可以通过隐藏域传送数据值。定义的格式如下：type=”Hidden”：指定输入方式为隐藏域。Name：指定表单元素的名称。value：指定要传输的内定值，当提交表单后，会从该变量获取传送的数据值。,七、Button 在表单中生成一个命令按钮 用标记可以在表单中添加3种类型按钮：提交按钮、重置按钮、普通命令按钮。创建按钮的基本语法格式为：Type：定义命令按钮的类型当类型值为submit时，创建一个提交按钮。当值定义为reset时，创建一个重置按钮。当值

19、定义为Button时，创建一个自定义按钮。表单中添加自定义按钮后，应该为该其编写脚本。,Name:指定命令按钮的名称。Value：设定命令按钮上显示的文本内容。Onclick：指定单击命令按钮时，系统自动调用并执行的函数或过程。,2.8.2 多行多列的文本框 标记用来定义一个多行的文本框，用户可以在其中输入和编辑文本，它只能用在标记中。语法定义格式如下：文本区中的字符串 其中的各属性含义如下：Name：指定多行文本框的名称。Cols：设定文字区块的字符宽度。Rows：设定文字区块的列数，即其高度。Readonly：设定多行文本框中的内容为只读。,2.8.3 列表框 可以使用标记提供一个可以复选

20、的下拉列表，以来标记其范围，里面的项目用标记来指定。标记的一般格式为：可选项1的提示 可选项2的提示,标记的name属性用于指定表单元素的名称。标记用来在由标记所指示的列表框中指示一个选项。标记属性的含义如下：Value：指定某一选项的值。可以自行修改，表单处理程序中接收的是此属性传送的值。但不同选项必须有不同的值。Selected：指定某选项为默认选中项。如果不指定此参数，则第一项为默认选项。演示示例：Sample2_19.htm,2.10 使用字幕 通过标记可以在页面中插入一个滚动的字幕，用于滚动显示文本或图像信息。标记使用格式如下：演示示例：Sample2_20.htm要滚动显示的文本信息或标记 Marquee标记的主要属性有：Behavior：文本滚动的类型，可以是scroll、slide或alternate。Bgcolor：指定字幕的背景颜色。Direction：文本的移动方向，值可以是down、left、right或up。Height：指定字幕的高度，以像素或百分比为单位。Scrollamount：指定字幕文本每次移动的距离，以像素为单位。Scrolldelay：指定与前段字幕文本延迟多少ms后重新开始移动文本。,