ASP_第二章___HTML语言免费下载.ppt

第二章HTML语言入门,HTML语言简介,HTML是构成网页最基础的要素。虽然本书专门讨论ASP网页的设计，但是由于ASP程序是内嵌在一般的HTML标记中的，而且ASP程序经服务器解译之后，到头来完全都是以HTML格式将程序最后的结果呈现在客户端的浏览器上，因此了解HTML语法是制作ASP网页必备的基础,可以说要想精通网页制作的话，必须要对HTML语言有相当的了解。,什么是HTML,HTML（HyperTextMarkupLanguage）的中文名称为“超文本描述语言”，是一种专门用来设计网页的计算机语言，用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。HTML对网页上的文字、图片等多媒体数据所出现的位置、形式、顺序及关系都使用标记（Tag）语法作定义以及对网页间加注超链接关系。一般HTML的网页文件都是以.htm为扩展名，浏览器会按照Tag语法做解释并加以处理.htm文件的内容，按照其指定方式将文字、图片等多媒体数据显示或播放出来。即使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。,HTML文件基本构架,HTML文件是标准的ASCII文件，它是包含了许多被称为标签的特殊字符串的普通文本文件。从结构上讲，HTML文件由元素组成，组成HTML文件的元素有许多种，用于组织文件的内容和知道文件的输出格式。HTML通过使用标记和元素来建立文件，其中利用标记来控制文件的结构。一个标准的HTML文件是以标记开始，并以标记结束的，用来告知浏览器这是整个HTML文件的范围。如图2-1所示，在之间包含两个主要的部分：一个是HTML文件的头部（Head），称为“标题设定区”，放置一些有关该文件的识别数据，前后使用标记框住；另一个是文件的主体（Body），称为“HTML网页文本区”，是显示在浏览器中的文件内容及其格式，前后使用标记框住。如果要标识一个文件是做什么的，则可以使用标记，之间所夹的文字就是你在浏览器标题栏所看到的标题的名称。要注意标记必须包含在标记之间。,HTML的语法,标准的HTML文件是由标记（Tag）和要显示在网页上的内容组成的，这些内容可以由文字、图片、声音、视频等组合而成。HTML文件中有各种各样的标记，这些不同的标记用来定义文字、图片、声音、视频等组件在网页中出现的位置、形式、顺序及关系。所以，HTML语法是以标记方式来告知浏览器（例如IE5.0）如何解释及显示文件。在HTML文件中有些标记规定必须是以“”标记开始并以“”标记结束，称为“成对标记”；有些标记则允许单独出现在欲显示内容的前面或后面，称为“非成对标记”。这两种标记的基本格式写法如下：,成对标记的基本格式：displaydata非成对标记的基本格式：displaydatadisplaydata注意：HTML标记在使用上没有大小写的差别，可依自己的习惯来撰写。,在上述基本格式中：是标记名称，用来表示这是标记的开始；而则表示标记的结束。displaydata表示要显示在网页上的内容。标记内的property代表标记的属性。property1=”value1”是用来将属性property1的属性值设置为value1，此时就将displaydata的内容以此设定的格式显示在网页上。若在displaydata后面没有加上结束标记，则接在其后的内容，都会保有原先标记所设定的属性值。,在设定属性值value时不一定要用双引号将属性值括起来，例如：和这两种均为正确的写法。建议value属性值头尾最好用双引号括住，以免字符串中有空格时会产生错误。不同的HTML标记拥有的属性（property）不一定相同，而且在书写属性时没有前后次序关系。由于每个属性都有其默认值，故标记内若不为该属性指定属性值，则会使用该默认值。,如何产生HTML文件,（1）单击“开始”按钮，选择“程序”“附件”“记事本”，打开“记事本”窗口。（2）在“记事本”窗口中，按实验要求输入一个简单的HTML程序，如图2-2所示。,（3）选择“文件”菜单下的“保存”命令，打开“另存为”对话框。如图2-3所示，在“保存在”框中选择用来放置该文件的目录（例如C:inetpubwwwroot），在“文件名”框中输入“22.html”，“保存类型”选择“所有文件（*.*）”，单击“保存”按钮。,2、浏览用HTML编写的网页使用两种方法，在IE浏览器窗口中预览刚才用HTML编写的网页22.html。指导步骤方法一：在存储22.html文件的图标上双击鼠标左键，即可启动IE浏览器，并打开所编辑的网页，如图2-4所示。,方法二：（1）启动IE浏览器，选择“文件”菜单中的“打开”命令，出现“打开”对话框。（2）如图2-5所示，在“打开”框中输入文件所在的路径与地址（例如C:inetpubwwwroot22.html），或是通过“浏览”按钮找到该文件所在的地址。,2.2常用标记（对）,1.设置段落样式的标记段落样式的标记有6种，分别为h1,h2,h6，用途是设置段落标题的大小级数,其中是最大的标题,然后逐级变小,最小的是。要注意的是这几个标题在改变字体大小的同时，还会依大小自动将字体加粗以提高上网者的注意力并在标题文字的上下各加上一空白行，同时在变换字体时亦会自动换行。一般情况下，浏览器对hn标记作如下解释：h1黑体，特大字体，居中，上下各有两行空行。h2黑体，大字体，上下各有一到两行空行h3黑体(斜体)，大字体，左端微缩进，上下空行h4黑体，普通字体，比h3更多缩进，上边一空行h5黑体(斜体)，与h4相同缩进，上边一空行h6黑体，与正文有相同缩进，上边一空行,2预格式化标记HTML的输出是基于窗口的，因而HTML文件在输出时都是要重新排版的，若确实不需要重新排版的内容，可以用通知浏览器。预格式化标记可以保留HTML文件中的一些预格式化的内容，如空格、换行、制表空白标记等，使浏览器中显示的文字排列和在HTML文件中的版面一模一样。不过在一对标记间不能插入不同的字体，并且和标记必须成对使用。,3.段落标签为了排列的整齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一个的开始就意味着上一个的结束。标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有left（左对齐）、right（右对齐）、center（居中）三种4.换行在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上标签。,5设置文字格式的标记（1）字体标记使用字体标记可以设置文字的字体、大小和颜色，并且不会像标题标记那样自动将字体加粗以及在文字上下空一行。是成对标记，其语法如下：displaydata标记有三种属性：face属性：用来设置文字所使用的字体（如face=楷体）。size属性：用来设置文字的大小。属性值为17，预设为3。也可以使用相对大小设定，如size=+1表示将字体大小往上升一级。color属性：用来设置文字的颜色，设置颜色的表示方法有两种：,使用“颜色的英文名称”，例如black（黑色）、white（白色）、red（红色）、green（绿色）、blue（蓝色）和cyan（青色）等，都可以成为color的属性值。直接通过基本的三原色红（Red）、绿（Green）、蓝（Blue）来产生出需要的颜色（可以写作color=“#RRGGBB”或color=“RRGGBB”）。其中RR是红色、GG是绿色、BB是蓝色。每个颜色值是0255，值越大颜色越亮、反之颜色越暗。颜色值必须以十六进制表示其范围：00FF。例如00FF00是绿色、0000FF是蓝色。,（2）文字的特殊标记利用HTML提供的有关文字格式的各种标记，设置文字的外观。有关文字格式的各种标记，如粗体、斜体、加下划线等，都是必须成对出现的,6插入水平线使用水平线标记可以将一个网页的标题以及多个不同性质内容的数据区分开来，使网页的层次更清楚。属于非成对标记，其语法如下：标记的属性说明见表2-2。,7加入项目符号或编号（1）标号列表标记称为“标号列表”标记，适用于以编号列表来显示数据的情况，在此标记之间可以使用来设定标题和项目内容。标记是成对标记，语法如下：displaydata其中的start属性用来设定从何数值开始编号，默认值为1。标记须加在需要编号的数据前面，并且所有的标记要放在标号标记之间。标记是非成对标记，语法如下：displaydata其中type属性用来设定编号的样式，例如type=i，表示编号会以小写的罗马数字（如i、ii）显示。默认情况下编号将以阿拉伯数字（如1、2）显示。,（2）项目列表“项目列表”标记适用于使用项目符号列表来显示数据的情况。在此标记之间也可以使用标记来设定项目内容。标记是成对标记，语法如下：displaydata在标记包含的标记中使用type属性，可以显示不同形状的项目符号：不加type属性：项目符号显示为（默认值）。type=circle：项目符号显示为。type=square：项目符号显示为。,（3）定义列表当要将标示区段内的文字以定义（名词解释）的方式显示示，必须通过标记来完成。是成对标记，语法如下：displaydata标记必须搭配、标记使用，以名词（）置于左边，解释（）置于右边的方式显示出来。其中标记的功能是标示区段内的文字为某项专有名词，语法如下：displaydata标记的功能是标示区段内的文字为某项专有名词的解释，语法如下：displaydata（4）多层列表如果在某个HTML列表标记的有效区段内再加入其他的列表标记区段，可以构成“多层列表”，层状结构可以使HTML文件更具变化性。,8插入图片在网页中插入一个图片（如visa.jpg），设定它的对齐方式为右对齐，与文字的垂直间距为30，图片宽250、高150。（数值的单位均为像素）。几点说明：（1）用来插入图片的HTML标记是，它属于非成对标记，语法如下：标记的属性较多，详细介绍请见表2-3。（2）在刚才的238.htm中，标记的src属性的值是“flower.jpg”，表示浏览器在解译这一标记时，必须继续下载flower.jpg这个文件，然后将其显示在浏览器窗口中。可是浏览器是从哪个目录读取flower.jpg文件的呢？以src=flower.jpg的设置方式来看，flower.jpg必须和HTML文件放在同一个目录中。除此设置格式之外，以下也是常见的设置方式：,src=picture/stone.jpg：以HTML文件所在目录为基础，flower.jpg必须放在HTML文件所在目录的picture子目录。src=./stone.jpg：以HTML文件所在目录为基础，flower.jpg必须放在HTML文件所在目录的上一层目录。src=,9设置网页的属性（1）添加背景音乐延续8中的例子，将音乐文件“enter.wav”以背景音乐的方式重复播放10次。提示：请事先将准备好的背景音乐（如enter.wav），存放在欲保存HTML文件的目录中。,几点说明：如果要在浏览网页的同时播放音乐，须在标记中加入标记。属于非成对标记，语法如下：其中src属性用来指定音乐文件所在的路径与文件名（路径的设置方法与上个实验中介绍的图片文件的路径设置方法相同）。loop属性用来指定音乐播放的次数，该属性省略表示只播放一次，若loop=-1表示播放无限次。,（2）指定网页的背景利用标记的各种属性，为网页添加背景图片（如map0.jpg），并且背景图不跟着网页卷动；设置网页中的文字颜色为red（红色）。几点说明：由于标记和之间包含的是网页的内容，当然网页背景和其他一些属性的设置也要使用标记，其语法如下：displaydata标记的属性见表2-4。,2.3超级链接标记,1使用超级链接利用链接标记制作出链接到“网易”、“新浪”网站以及本机中的网页241.html的超级链接。几点说明：（1）链接标记当我们要在网页中制作“超级链接”时，必须使用链接标记来完成链接工作。是成对标记，其语法如下：hypertext|graph其中URL网络资源参数可以是以下项目：网站：可设置IP地址或是DomainName链接到所指定的网站。网页：链接到本机的网页，可以直接指定网页所在的路径。,下载文件：当链接到的文件的扩展名不是htm（html）或asp，会将链接到的文件下载到你的计算机。网页中的书签：通常使用在网页的长度超过屏幕，当你在某个书签上单击一下，便直接跳转到该书签指向的具体内容，节省了移动滚动条滚动条的时间。name属性用来设定bookmark（书签）的名称。poisiton属性用来指定超级链接到的网页显示的位置。（2）绝对网址和相对网址“绝对网址”表示法是直接写出所链接的文件位于那个服务器中的网站内，主要用来链接其他网站的网页（如果不指定文件名，表示链接到该路径下的首页）。例如“”即属于绝对网址表示法。“相对网址”表示法，指出所链接的文件相对于目前网页所在的位置来表示，其使用时机用来链接目前网站中的其他网页。例如“”即属于相对网址表示法。,2链接到电子邮箱我们可以使用电子邮件地址作为超级链接的目标，当上网者点击该超级链接时，就会启动电子邮件程序并向所设置的电子邮件地址发送电子邮件。要制作电子邮件超级链接，还是利用链接标记中的href属性，其语法如下：hypertext|graph3使用书签链接使用“书签链接”功能，可以将网页中重要的标题列出放在一起作成书签超级链接，浏览时只要在这些具有书签超级链接的文字上单击便可以跳转到指定的书签标题。设定书签的语法如下：bookmarkmemo其中bookmarkmemo是指上网者单击书签超级链接时跳转到的位置，bookmarkname代表书签的名称。制作跳转到书签位置的超级链接的语法如下：hypertext|graph须注意的是，在书签名称前面的“#”号是必不可少的。,2.4表格的制作,1创建表格表格是由多个水平行和垂直列组成的，表格内的小方框称为单元格。由于在以后的章节中介绍到ASP技术时，常会用表格来输出数据库的数据，因此表格的制作是很重要的。2美化表格延续上个实验，设置表格的宽度为300、高度为150，整个表格居中、背景为黄色（yellow），每行的数据均居中且第一行的背景色为银色（silver）。,2.5表单的制作,1单行文本框字段利用单行文本框和密码框，制作供输入用户名和密码的表单，密码限8个字符，两个字段的字符宽度均为12。几点说明：（1）标记表单是由标记来定义的，在之间，通过来设置表单上的字段类别。是成对标记，其语法如下：,我们要设置的表单属性有：action属性：作用是指定server端处理这个表单的程序所在的地址。method属性：设置表单数据传送到server端的方式。属性值为GET或POST。若设置成GET（默认值），按下提交按钮后，表单上的数据会附在网址后传送到server端；设置成POST，浏览器会等待server来读取数据。比较而言，GET方法的执行效率较高，但数据传送的安全性较低，而且传送的数据量是有限制的（2K左右）；POST方法则没有数据长度的限制，且安全性较高。name属性：设置表单的名称。,（2）单行文本框在表单中加入单行文本框，可以让上网者在其中输入数据。创建一个单行文本框，可以使用标记，其语法如下：2.单选按钮和复选框利用单选按钮和复选框制作调查问卷，将Yahoo前的单选按钮的初始状态设置为选中，“文学艺术”前的复选框设置为不可选。,几点说明：（1）单选按钮单选按钮通常成组使用，让上网者从一组互斥的选项中选择一项。创建单选按钮可以使用标记，语法如下：其中name属性用来给单选按钮命名（建议以rad为前缀），同一组单选按钮的name属性是相同的。当表单数据被提交时，会将被选中的单选按钮的value属性值送出，提供给服务器端程序读取用。而加上checked属性，可以设置单选按钮的初始状态被选中。,（2）复选框对于用复选框列出的多个选项，上网者可以全选、多选、单选，也可以一个也不选。创建复选框字段可以使用标记，语法如下：name属性用来对复选框命名（建议以chk为前缀），由于每个复选框都是独立的，因此名称最好不要相同。其余属性的作用与单选按钮基本相同。,3下拉式菜单几点说明：下拉式菜单用于让上网者从一个列表中选择一项或多项，从功能上来看，下拉式菜单完全可以由一组单选按钮或复选框代替，但前者占用的空间较小。创建下拉菜单可以使用标记，语法如下：titlename1titlename2其中size属性用来设置下拉菜单的大小，即屏幕上可以显示出多少个选项。若加入multiple属性，表示下拉菜单中的选项可以复选。是成对标记，必须包含在标记内。它的value属性值将在表单被提交时传送到服务器端；而加入selected属性，可以将该选项预设为选中。,4滚动文本框使用标记在表单中创建一个不会自动换行的滚动文本框，宽度为30、高度4。几点说明：单行文本框只能输入一行信息，如果要输入多行文本信息，就要使用标记来创建滚动文本框。是成对标记，其语法如下：其中rows和cols属性分别用来设置滚动文本框的显示宽度和高度（以字符数为单位）。wrap属性用来指定滚动文本框中文字的换行方式，可取的属性值有：wrap=virtual（默认值）：输入的文字超过cols属性设置的显示宽度就自动换行，在传送表单数据时，不会将换行字符传出。wrap=physical：自动换行