HTML语言基础教学课件.ppt

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

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

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

4、来作为相对值指定。color 属性 字体标记符的 COLOR 属性可用来控制文字的颜色，使用方法与正文标记符中使用的 BGCOLOR 属性相同。face 属性 face 属性用来指定字体样式。在这个属性中用户可以指定一个或几个字体名称 例3-5 字体设置 例3-5 这是7号字体 这是5号字体 这是3号字体 这是号字体 3、段落标记和换行标记在HTML中一般用来标记段落，在HTML中，一般使用标记符的align属性来设置段落的对齐方式它的语法格式为：文本 另处一个类似的标记元素是,这个标记用来标识一个换行动作。在HTML文件中可以用它来调整行间距 4、水平线标记 在HTML中除了可以用P标记划分

5、落，还可以用添加水平线的方法分隔文档的不同部分。水平线的标记符为，它包括以下属性：SIZE 属性用来改变水平线的粗细程度 WIDTH 属性用来更改水平线的长度 NOSHADE 属性用来使水平线以实线显示 COLOR 属性用来设置水平线的颜色 ALIGN 属性用来设置水平线的对齐方式 其中：COLOR 属性在 Microsoft Internet Explorer 3 及更高版本中，通过在中设置 COLOR 属性可以控制水平线的颜色。5、物理字符标记所谓物理字符样式，是指标记符本身就说明了所修饰文字的效果的标记符。常用的物理标记符有：斜体：(italic)或(emphasize)黑体：(blac

6、k)或添加下划线：(underline)选择打印机字体:标记HTML语句:标记定义的语句:标记键盘字符:标记某个命令的例子:标记程序变量:3.2 3.2 超链接标记超链接标记 3.2.1 什么是超链接什么是超链接 超链接是WWW的一种链接技巧，它通过已定义好的关键字和图形，只要您点取某个图标或某段文字，就可以自动连上相对应的其他文件。所以在WWW的站点画面中，您可以通过超链接点取的方式，从一个网页链接到另一个网页。超链接标记为与 3.2.2 链接到其他的文件链接到其他的文件 称连结标记，由 与 所围的文字、图片等等可以成为一个连结。的一般参数设定：例如href=“index.html”这参数不

7、能与另一参数 name 同时使用，使用这参数才能造成可按的连结。当作为一外部连结时：href所设定的是该连结所要连到的文件名称，若该文件与此html档不是同在一目录请加上适当的路径，相对绝对皆可。当作为一内部连结时：除了链接到另一个HTML文件，也可以在一篇文章内随心所欲地链接。需要先做出一个“锚”标记，即链接的目标地，再做到“锚”的链接。做“锚”标记用例如在文章中先选择第一章做“锚”标记，第一章,再做到“锚”的链接，从这里可以链接到第一章 name=“hello”：这参数是为文件埋下参考点，作为被连结，不会被显示。所以说造成一个内部连 结要使用两次 连结标记。一个使用参数 name 事先於文

8、件中埋下一参考 点，另一个使用参数 href 连到这个参考点。target=“_top”:设定连结被按後之结果所要显示的视窗。可选值为：_blank,_parent,_self,_top,框 窗名称。target=“框窗名称框窗名称”这只运用于框架中，若被设定则连结结果将显示於该“框窗名称”之框窗 中，框窗名称是事先由框架标记所命名。target=target=“_blank_blank”或或 target=target=“newnew“将连结的画面内容，开在新的浏览视窗中。target=target=”_parent_parent“将连结的画面内容，当成文件的上一个画面。target=_se

9、lftarget=_self“将连结的画面内容，显示在目前的视窗中。(内定值)target=_top 3.3 加入音频、视频和图像加入音频、视频和图像 3.3.1 3.3.1 加入音频和视频加入音频和视频 在WEB页面中加入音频的方法很简单，只要把href指定的URL写上相应的音频文件名就可以了。例如：在这里欣赏音乐 视频与音频类似，例如：在这里欣赏视频 3.3.2 图像标记图像标记 我们要可以在页面中插入一些漂亮的图像，使文章图文并茂，如何在Web页面上插入图像呢？它的语法格式为：例 例3-12 插入一个图像 单击这里可以看到一个图像 单击这里可以欣赏音乐 3.4 制作表格制作表格 3.4.

10、1 3.4.1 基本表格标记基本表格标记 表格的语法格式分为5部分：1、表格标记 表示下面是一个表格的内容的开始，表示表格结束。2、表格标题标记 表格标题 表示一个表格的标题也可不要。其中参数align可选择top(放在表格上面居中),bottom(放在表格下面居中),默认时标题放在表格上面居中3、表格行标记表示表格一行的开始和结束4、字段名标记字段名 在和中间加入字段名，有几个字段名就加入几个字段名标记5、数据标记数据 在与中间加入数据，一般有几个字段名就要加入几个数据 标记相关属性：Border=#表示表的边框，默认时表没有边框Cellspacing=#表示表格的宽度，默认时为2Cellp

11、adding=#表示边框和内容间的距离，默认值为1Colspan=#表示占用列数，默认值为1Rowspan=#表示占用行 数，默认值为1Width=#%表示表格宽度。3.4.2 3.4.2 表头单元格标记表头单元格标记 通过TD和TH标记的下列属性可以对指定单元格的格式进行设置：(1)ALIGN：指定单元格内文本的水平对齐方式，取值为left（默认值）、center或right。(2)BACKGROUND：指定图像的URL，该图像用作单元格的背景。(3)BGCOLOR：指定单元格的背景颜色。(4)BORDERCOLOR：指定单元格的边框颜色。(5)BORDERCOLORDARK：用于指定单元格

12、的3D边框的阴影颜色。(6)BORDERCOLORLIGHT：用于指定单元格的3D边框的高亮颜色。(7)COLSPAN：指定合并单元格时一个单元格跨越的表格列数。(8)NOWRAP：若指定该属性，则避免Web浏览器将单元格里的文本换行。(9)ROWSPAN：指定合并单元格时一个单元格跨越的表格行数。(10)VALIGN：指定单元格中文本的垂直对齐方式，取值可以是top、middle（默认值）、bottom或baseline。3.4.3 3.4.3 表格设计实例表格设计实例 3.5 3.5 制作表单制作表单 3.5.1 表单标记表单标记 表单的基本语法格式为：method=“POST”传送资料给

13、asp的的方式，可选值为 POST,GET。其中的Post是允许传输大量数据的方法，而Get方法会将所要传输的数据附在网址后面，然后一起送达服务器，因此传送的数据量就会受到限制，但是执行效率却比Post方法好。使用Get或Post方法都可以将数据送至服务器，使用Request对象接收数据的相对应方法如下：Get：Request.QueryString（“字段名称”），也可以写成Request（“字段名称”）Post：Request.Form（“字段名称”），也可以写成Request（“字段名称”3.5.2 文本框标记文本框标记 简单输入文本框提供给读者输入简短一行回答的方式。其HTML语言十分

14、简单，只是在标记后加入并以结束即可。其中属性size可以设置文本框的大小。其中默认值为20。属性maxlength=N限制最多输入的字节。属性name是文本框的名字，也是以后将输入值传给其他程序时使用的输入信息的名字 3.5.3 下拉式菜单标记和选项标记下拉式菜单标记和选项标记 下拉菜单也是以标记开始，再紧接标记。标记表明读者可以在一个给定的选择项范围内进行选择。而这些选择项是用来标记的。标记需放在每个选择项之前。所以一个下拉菜单的标记可以为：选择项1选择项2./select 滚动菜单与下拉菜单差不多，只不过是在标记中加入multiple属性，允许读者一次选多个选项，类似多选框如.如果缺省mu

15、ltiple,一次只能选择一项，类似于单选框。其中size=x是你想一次同时显示在菜单里的选择项（或选择行）数。例 创建滚动菜单例3-20滚动菜单可多选苹果香蕉葡萄樱桃草莓 单选框是提供给作者一些可选的内容，从中只能选择一项。要创建一个单选框(radio button)非常容易，只需在标记后加上input type=“radio”，再以结束 有时读者需要选择多项内容，这时我们就要用到多选框。多选框的实现是在标记后加上并以结束。记住在每一个“checkbox”后面加入所要用于选择的文本内容或图像。如果在几个checkboxes里出现一具已划钩的选择项表示默认，只需在标记里加入一个checked(

16、已选择)的属性 3.5.4 提交及重置按钮提交及重置按钮提交（submit)是为了把读者所输入的内容提交给发问的“人”，实际上是把输入的信息提交给相关程序，让服务器进行处理。标记是在标记下面再加入重新设置按钮（reset button）是把读者所输入的内容清除掉，重新输入。它的标记是在标记下面再加入在input标记里，输入value的属性值可改变按钮上的字，否则它自动写上submit和reset.上面介绍的文本框实际上都要配上提交及重置按钮才算完整。提交按钮是和Form中的action一起使用的。当我们点击“提交”按钮后，就会把表单中的数据提交到action 所指向的页面中。3.6 3.6 实训实训-商品浏览页面设计商品浏览页面设计程序流程如图所示：点击“电视”后出现下图：点击“钢管”后，出现下图