HTML语言基础教学课件.ppt

《HTML语言基础教学课件.ppt》由会员分享，可在线阅读，更多相关《HTML语言基础教学课件.ppt（21页珍藏版）》请在三一办公上搜索。

1、第3章 HTML语言基础,3.1 HTML语言的基本结构标记3.1.1 常用页面标记 1、 开始和结束标记 HTML文档的开始标记是,它告诉浏览器下面的内容是HTML文档，在HTML文档结束处要有对应的标记，它告诉浏览器HTML文档结束了。它的语法格式如下： HTML文件的所有内容 2、头部标记 HTML文档的头部标记是,它告诉浏览器下面的内容是HTML文档的头部，显示在文本之前，而标记告诉浏览器头部内容结束了。头部里面一般包括注释、Meta和标题。它的语法格式为 HTML文档的头部内容 ,第3章 HTML语言基础 3.1 HTML语言的基本结构,3、标题标记 和标记中间所包括的文字将成为这个

2、Web页面的标题，一般写在头部标记之中。标题文字会显示在Web浏览器最上面的title(标题)栏上。浏览器用户可以把标题加入收藏夹中，。标题文字最好使用中文并且有明确的意义。它的语法格式为 Web页面的标题 我们先看一个例子头部标记和标题标记使用的例子例 3-1 头部标记和标题标记这是页面的标题,3、标题标记,4、4、 主体标记标记是Web页面主体标记的开始，并对应结束符.Web页面的主要内容都出现在和标记之中。它的语法格式为： 主体内容 例3-2HTML语言的主体标记 例3-2 这是使用HTML语言编写的Web页面文件z 标记还具有一些可以设定Web页面背景的属性，可使用图片/图像作背景，确

3、定链接的颜色，设置文字的颜色等。 它的语法格式为： 文档内容 ,4、4、 主体标记,3.1.2 文本格式标记,1、 标题标记符在HTML中，用户可以通过Hn标记符来标识文档中的标题和副标题，其中：n是1-6的数字；表示最大的标题，表示最小的标题。使用标题样式时，必须使用结束标记符。 它的语法格式为： 标题文字(I=1,26)例3-4 不同的标题文字例3-4这是7号字体这是5号字体这是3号字体这是号字体,3.1.2 文本格式标记 1、 标题标记符,2、字体控制标识符FONT标记符用于控制字符的样式，包括开始标记符和结束标记符，FONT标记符具有3个常用的属性：size 属性 字号属性的值可以从

4、1 到 7，3 是默认值，字号越大显示的字符就越大。该属性值也可以用 +n 或 -n 来作为相对值指定。color 属性 字体标记符的 COLOR 属性可用来控制文字的颜色，使用方法与正文标记符中使用的 BGCOLOR 属性相同。face 属性 face 属性用来指定字体样式。在这个属性中用户可以指定一个或几个字体名称 例3-5 字体设置 例3-5 这是7号字体 这是5号字体 这是3号字体 这是号字体 ,2、字体控制标识符,3、 段落标记和换行标记在HTML中一般用来标记段落，在HTML中，一般使用标记符的align属性来设置段落的对齐方式它的语法格式为： 文本 另处一个类似的标记元素是,这个

5、标记用来标识一个换行动作。在HTML文件中可以用它来调整行间距 4、水平线标记 在HTML中除了可以用P标记划分落，还可以用添加水平线的方法分隔文档的不同部分。 水平线的标记符为，它包括以下属性： SIZE 属性用来改变水平线的粗细程度 WIDTH 属性用来更改水平线的长度 NOSHADE 属性用来使水平线以实线显示 COLOR 属性用来设置水平线的颜色 ALIGN 属性用来设置水平线的对齐方式 其中：COLOR 属性在 Microsoft Internet Explorer 3 及更高版本中，通过在中设置 COLOR 属性可以控制水平线的颜色。,3、 段落标记和换行标记,5、 物理字符标记所

6、谓物理字符样式，是指标记符本身就说明了所修饰文字的效果的标记符。常用的物理标记符有：斜体：(italic)或(emphasize)黑体：(black)或添加下划线： (underline)选择打印机字体:标记HTML语句:标记定义的语句:标记键盘字符:标记某个命令的例子:标记程序变量:,5、 物理字符标记,3.2 超链接标记,3.2.1 什么是超链接 超链接是WWW的一种链接技巧 ，它通过已定义好的关键字和图形，只要您点取某个图标或某段文字，就可以自动连上相对应的其他文件。 所以在WWW的站点画面中 ， 您可以通过超链接点取的方式，从一个网页链接到另一个网页 。超链接标记为与 3.2.2 链接

7、到其他的文件 称连结标记，由 与 所围的文字、图片等等可以成为一个连结。 的一般参数设定：例如href=“index.html”这参数不能与另一参数 name 同时使用，使用这参数才能造成可按的连结。当作为一外部连结时： href 所设定的是该连结所要连到的文件名称，若 该文件与此 html 档不是同在一目录请加上适当的路径，相对绝对皆可。,3.2 超链接标记 3.2.1 什么是超链接,当作为一内部连结时： 除了链接到另一个HTML文件，也可以在一篇文章内随心所欲地链接。需要先做出一个“锚”标记，即链接的目标地，再做到“锚”的链接。做“锚”标记用例如在文章中先选择第一章做“锚”标记，第一章,再

8、做到“锚”的链接，从这里可以链接到第一章 name=“hello”： 这参数是为文件埋下参考点，作为被连结，不会被显示。所以说造成一个内部连 结要使用两次 连结标记。一个使用参数 name 事先於文件中埋下一参考 点，另一个使用参数 href 连到这个参考点。 target=“_top”: 设定连结被按後之结果所要显示的视窗。可选值为： _blank, _parent, _self, _top, 框 窗名称。 target=“框窗名称” 这只运用于框架中，若被设定则连结结果将显示於该“框窗名称”之框窗 中，框窗名称是事先由框架标记所命名。 target=“_blank” 或 target=“n

9、ew“ 将连结的画面内容，开在新的浏览视窗中。 target=”_parent“ 将连结的画面内容，当成文件的上一个画面。 target=_self“ 将连结的画面内容，显示在目前的视窗中。(内定值)target=_top,当作为一内部连结时： 除了链接到另一个HTML文件，也可以在,3.3 加入音频、视频和图像,3.3.1 加入音频和视频 在WEB页面中加入音频的方法很简单，只要把href指定的URL写上相应的音频文件名就可以了。例如： 在这里欣赏音乐 视频与音频类似，例如： 在这里欣赏视频 3.3.2 图像标记 我们要可以在页面中插入一些漂亮的图像，使文章图文并茂，如何在Web页面上插入图

10、像呢？它的语法格式为： 例 例3-12 插入一个图像 单击这里可以看到一个图像 单击这里可以欣赏音乐 ,3.3 加入音频、视频和图像 3.3.1 加入音频和视频,3.4 制作表格,3.4.1 基本表格标记 表格的语法格式分为5部分：1、表格标记 表示下面是一个表格的内容的开始，表示表格结束。2、表格标题标记 表格标题 表示一个表格的标题也可不要。其中参数align可选择top(放在表格上面居中),bottom(放在表格下面居中),默认时标题放在表格上面居中3、表格行标记表示表格一行的开始和结束4、字段名标记字段名 在和中间加入字段名，有几个字段名就加入几个字段名标记,3.4 制作表格 3.4.

11、1 基本表格标记,5、数据标记数据 在与中间加入数据，一般有几个字段名就要加入几个数据 标记相关属性：Border= #表示表的边框，默认时表没有边框Cellspacing= #表示表格的宽度，默认时为2Cellpadding= #表示边框和内容间的距离，默认值为1Colspan= # 表示占用列数，默认值为1Rowspan= # 表示占用行 数，默认值为1Width= #%表示表格宽度。3.4.2 表头单元格标记 通过TD和TH标记的下列属性可以对指定单元格的格式进行设置：(1) ALIGN：指定单元格内文本的水平对齐方式，取值为left（默认值）、center或right。(2) BACK

12、GROUND：指定图像的URL，该图像用作单元格的背景。(3) BGCOLOR：指定单元格的背景颜色。(4) BORDERCOLOR：指定单元格的边框颜色。,5、数据标记,(5) BORDERCOLORDARK：用于指定单元格的3D边框的阴影颜色。(6) BORDERCOLORLIGHT：用于指定单元格的3D边框的高亮颜色。(7) COLSPAN：指定合并单元格时一个单元格跨越的表格列数。(8) NOWRAP：若指定该属性，则避免Web浏览器将单元格里的文本换行。(9) ROWSPAN：指定合并单元格时一个单元格跨越的表格行数。(10) VALIGN：指定单元格中文本的垂直对齐方式，取值可以是

13、top、middle（默认值）、bottom或baseline。 3.4.3 表格设计实例,(5) BORDERCOLORDARK：用于指定单元格的3D,3.5 制作表单,3.5.1 表单标记 表单的基本语法格式为：method=“POST” 传送资料给asp的的方式，可选值为 POST, GET。其中的Post是允许传输大量数据的方法，而Get方法会将所要传输的数据附在网址后面，然后一起送达服务器，因此传送的数据量就会受到限制，但是执行效率却比Post方法好。 使用Get或Post方法都可以将数据送至服务器，使用Request对象接收数据的相对应方法如下： Get：Request.Query

14、String（“字段名称”），也可以写成Request （“字段名称”） Post：Request.Form （“字段名称”），也可以写成Request （“字段名称”,3.5 制作表单 3.5.1 表单标记,3.5.2 文本框标记 简单输入文本框提供给读者输入简短一行回答的方式。其HTML语言十分简单，只是在标记后加入并以结束即可。其中属性size可以设置文本框的大小。其中默认值为20。属性maxlength=N限制最多输入的字节。属性name是文本框的名字，也是以后将输入值传给其他程序时使用的输入信息的名字 3.5.3 下拉式菜单标记和选项标记 下拉菜单也是以标记开始，再紧接标记。标记表明

15、读者可以在一个给定的选择项范围内进行选择。而这些选择项是用来标记的。标记需放在每个选择项之前。所以一个下拉菜单的标记可以为：选择项1选择项2./select,3.5.2 文本框标记,滚动菜单与下拉菜单差不多，只不过是在标记中加入multiple属性，允许读者一次选多个选项，类似多选框如.如果缺省multiple,一次只能选择一项，类似于单选框。其中size=x是你想一次同时显示在菜单里的选择项（或选择行）数。例 创建滚动菜单例3-20滚动菜单可多选苹果香蕉葡萄樱桃草莓,滚动菜单与下拉菜单差不多，只不过是在标记,单选框是提供给作者一些可选的内容，从中只能选择一项。要创建一个单选框(radio b

16、utton)非常容易，只需在标记后加上结束 有时读者需要选择多项内容，这时我们就要用到多选框。多选框的实现是在标记后加上并以结束。记住在每一个“checkbox”后面加入所要用于选择的文本内容或图像。如果在几个checkboxes里出现一具已划钩的选择项表示默认，只需在标记里加入一个checked(已选择)的属性,单选框是提供给作者一些可选的内容，从中只能选择一项。,3.5.4 提交及重置按钮提交（submit)是为了把读者所输入的内容提交给发问的“人”，实际上是把输入的信息提交给相关程序，让服务器进行处理。标记是在标记下面再加入重新设置按钮（reset button）是把读者所输入的内容清除掉，重新输入。它的标记是在标记下面再加入在input标记里，输入value的属性值可改变按钮上的字，否则它自动写上submit和reset.上面介绍的文本框实际上都要配上提交及重置按钮才算完整。提交按钮是和Form中的action一起使用的。当我们点击“提交”按钮后，就会把表单中的数据提交到action 所指向的页面中。,3.5.4 提交及重置按钮,3.6 实训-商品浏览页面设计,程序流程如图所示：,3.6 实训-商品浏览页面设计程序流程如图所示：,点击“电视”后出现下图：,点击“钢管”后，出现下图,点击“电视”后出现下图： 点击“钢管”后，出现下图,HTML语言基础教学课件,