5 超文本标记语言(HTML)

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,南京大学金陵学院,1,HTML：,超文本标记语言,王昊,2,网页的特点,网上信息获取方式与传统媒介（如纸媒介）不同，具有非线性。,信息的获取取决于页面设计，可以面对不同对象。,网页可以实现多媒体效果。,3,Web,使用的语言就是,HTML,HTML,超文本标记语言（,HyperText,Markup Language）,：是为网页创建和其它可在网页浏览器中看到的信息设计的一种置标语言。,HTML,被用来结构化信息,例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。由蒂姆,伯纳斯-李给出原始定义，由,SGML（,标准通用置标语言）发展而来，后来成为国际标准，由万维网联盟（,W3C）,维护。,应用：,出版联网文档，这种文档可包含标题、文字、表格、列表、图像以及声音和影视文件等,通过超文本链接可以检索和阅读联网信息,设计交易单（,form）。,这是一种用来从读者处收集信息,的,Web,文档，可以与远程服务单位作交易,HTML,使用预先定义的标签（,tag）,来描述网页中的元素,HTML,简介,4,示例,5,标记符基础,概述,标记符都用尖括号括起来,绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。开始标记符和相应的结束标记符定义了标记符所影响的范围。,属性,属性是用来描述对象特征的特性。例如，一个人的身高、体重就是人这个对象的属性。在,HTML,中，所有的属性都放置在开始标记符的尖括号里。,属性,6,比较标准的,HTML（,无内容）,正文标记符,和,包含,Web,页的内容。文字、图形、链接以及其他,HTML,元素都位于该标记符内。注意：空格、回车这些格式控制在显示时都不起作用，如要使它们起作用，应使用预格式化元素,和。,Title,Pre,7,添加注释,不论是编写程序还是制作网页，为所做的工作添加注释都是一种良好的工作习惯。,HTML,的注释由开始标记符 构成。注释内容都将被浏览器解释为注释，而不在浏览器中显示。,注释,8,为什么会有,“,转义字符串,”,：,像,“,”,这类符号已经用来表示,HTML,标签，不能直接当作文本中的符号来使用,有些字符在,ASCII,字符集中没有定义，需要使用转义字符串来表示,字符,十进制,转义字符,&,quot;,&,&,amp;,&,gt;,空格,&,nbsp;,转义字符串,转义,9,页面总体设置,背景颜色,在,标记符中使用,BGCOLOR,属性可以为网页设置背景颜色。在,HTML,中，除了使用颜色名称以外，还可以用格式 #,RRGGBB,来表示颜色。,背景图案,设置网页背景颜色使用,BODY,标记符的,BACKGROUND,属性可以设置背景图案。,HTML,语句为：,字符和链接的颜色,设置正文和链接颜色时，可以使用,BODY,标记符的,TEXT、LINK、VLINK,和,ALINK,属性。其中，,TEXT,属性用于设置正文的颜色；,LINK,属性用于设置未被访问的链接的颜色；,VLINK,用于设置已被访问过的链接的颜色；,ALINK,用于设置活动链接（即当前选定的链接）的颜色。,背景声音,在标记符,HEAD,中添加：,例,例,例,例,10,物理字符样式,常用的设置物理字符样式的标记符有：黑体标记、,斜体标记、,下划线标记,等。,例,11,标题样式,用户可以通过 ,标记符来标识文档中的标题和副标题，其中,n,是 1 至 6 的数字；,表示最大的标题，,表示最小的标题。使用标题样式时，必须使用结束标记符。,例,12,其他逻辑字符样式,如、,等。注意：在使用,等标记时，不要忘记将特殊字符转换为参考字符。,例,13,FONT,标记符,size,属性,字号属性的值可以从 1 到 7，3 是默认值。该属性值也可以用 + 号或 - 号来作为相对值指定。,BASEFONT,标记符使用标记符,可以更改默认的字号属性，方法为：在需要更改默认字号属性的位置之前添加语，,其中,n,是 1 到 7 的整数。,COLOR,属性,字体标记符的,COLOR,属性可用来控制文字的颜色，使用方法与正文标记符,中使用的,BGCOLOR,属性相同。,FACE,属性,FACE,属性用来指定字体样式。在编制网页时，通过在,标记符中指定,FACE,属性，用户可以指定一个或几个字体名称（用逗号隔开）。,例,例,例,14,段落格式,分段标记符,分段标记符用于将文档划分为段落，标记为，,其中结束标记符通常可省略。,换行标记符,换行标记符用于在文档中强制断行，标记为一个单独的。,该标记与分段标记符,是有区别的。,例,15,对齐方式,DIV,标记符,DIV,标记符用于为文档分节，以便为文档的不同部分应用不同的段落格式，其标记为。,位于,DIV,标记符中的多段文本将被认为是一个节，可为它们设置一致的对齐格式。,ALIGN,属性,ALIGN,属性用于设置段落的对齐格式，其值包括：,RIGHT（,右对齐）、,LEFT（,左对齐）、,CENTER（,居中对齐）和,JUSTIFY（,两端对齐）。,ALIGN,属性可应用于多种标记符，最典型的是应用于,DIV、P、Hn（,标题标记符）、,HR,等标记符。,CENTER,标记符,如果要将文档内容居中，还可使用,CENTER,标记符，方法为：将需居中的内容置于,和,之间。,例,例,例,16,水平线,标记符为，,它包括：,SIZE,属性用来改变水平线的粗细程度；,WIDTH,属性用来更改水平线的长度；,NOSHADE,属性用来使水平线以实线显示；,COLOL,属性在,Microsoft Internet Explorer 3,及更高版本中，通过在,中设置,COLOR,属性可以控制水平线的颜色。,例,17,格式嵌套,如果所设置的格式是相容的，则取格式叠加的效果。,如果所设置的格式是冲突的，则取最近样式的修饰效果。,例,18,列表1,有序列表,有序列表（,Ordered list）,也称数字式列表，它是一种在表的各项前显示有数字或字母的缩排列表。定义有序列表需要使用有序列表标记符,和列表项（,List item）,标记符（,结束标记符可省略）。,演示,有序列表,演示,有序列表的嵌套,例,例,19,列表2,无序列表,无序列表（,Unordered list）,也称强调式列表，它是一种在表的各项前显示有特殊项目符号的缩排列表。定义无序列表需使用无序列表标记符,和列表项标记符。,与,OL,标记符类似，,UL,标记符也包含一个常用的,TYPE,属性，用于控制列表项前特殊符号的显示。同时，无序列表中的,LI,标记符也具有相同的,TYPE,属性。注意：在,Internet Explorer,中，,TYPE,的值是区分大小写的。,与有序列表类似，无序列表也可以嵌套。需要注意的是，无序列表嵌套时将根据浏览器的不同而在不同层次显示不同的项目符号。另外，有序列表和无序列表也可互相嵌套。,例,20,列表3,定义列表,定义列表（,Definition list）,用于定义术语，它是一种在表的各项前没有任何数字和符号的缩排列表。创建定义列表应使用定义列表标记符,DL、,定义术语（,Definition term）,标记符,DT,和定义描述（,DD）,标记符。,DL,标记符必须有结束标记，但,DT,和,DD,标记符的结束标记可以省略。,例,21,常用图像格式,GIF,GIF（Graphics Interchange Format，,图形交换格式）格式的特点：,无损压缩,最多 256 色,能够使用透明色,交错式,Gif（interlaced gif）,动画,Gif,JPEG,JPEG（Joint Photographic Expert Group，,联合图形专家组）格式的特点：,有损压缩,没有颜色限制,可以控制压缩比,渐进式,JPEG,PNG,PNG（Portable Network Graphics，,可移植的网络图形）格式的特点：,无损压缩,没有颜色限制,支持透明度,矢量格式,矢量格式的特点：,文件较小,矢量动画,例,例,例,22,在网页中插入图像,IMG,标记符,SRC,和,ALT,属性,WIDTH,和,HEIGHT,属性,BORDER,属性,HSPACE,和,VSPACE,属性,例,例,例,23,使用动画,gif,什么是动画,gif,在网页中插入动画,gif,例,24,超链接基础,统一资源定位器,URL（Universal Resources Locator）,用于定位,Web,上的文档信息。一个,URL,包括 5 部分：协议、登录信息、主机地址、文件路径、端口。协议：/ 登录信息主机/文件路径:,Port,绝对,URL,是指资源的完整地址，主要指包括计算机部分的,URL，,即：协议：/计算机/文档名,相对,URL,是指,Internet,上资源相对于当前页面的地址，它包含从当前页面指向目标页面位置的路径。,不同类型的超链接,内部网页超链接,外部网页超链接,页面内的超链接（锚点、,CSS、,脚本、空链接等）,文件下载超链接,Email,超链接,25,创建超链接,A,标记符,用于创建超链接（结束标记符不能省略），,href,属性用于指定超链接的目标。,内部超链接：link,外部超链接：link,锚点链接,使用锚点超链接时，首先需要定义锚点，然后在超链接中指向该锚点。指向其他页面内锚点的超链接：,link,定义锚点应使用,指向锚点：,link,文件下载,当我们的超链接目标为浏览器不能识别的格式时，那么就自动生成了文件下载链接。 ,下载,Email,链接,Email,Email,图像链接,例,例,例,例,26,图像,MAP,什么是客户端图象映射,客户端图象映射的使用（1）定义映射图（2）使用映射图,定义映射图：,标记符和 ,标记符,使用映射图：,AREA,标记符,Shape,属性（,rect、circle、polygon）,Coords,属性,Href,属性,例,27,表格的组成,表格标记符,table,表格标题,caption,表格行,tr （table row）,表格数据,td （table data）,表格表头,th （table heading）,例,28,表格的构造与属性,表格的构造,rowspan,进行行合并,colspan,进行列合并,表格的属性设置,边框与分隔线,Frame,属性,Rules,属性,Border,属性,表格对齐,表格的页面对齐,表格内容的对齐,控制单元格空白,Cellspacing,属性,Cellpadding,属性,例,例,例,例,例,29,表格的应用,页面布局,划分页面区域,背景色的设置,演示,划分页面区域,演示,背景色的设置,嵌套表格,演示,使用嵌套表格,特殊排版效果,演示,表格细线 1,演示,表格细线 2,例,例,例,例,例,30,frameset,文档的基本结构：,此网页使用了框架，但您的浏览器不支持框架。,帧（,Frame）,例,这之间的文字将只出现在不支持帧的浏览器中，建议使用,noframes,元素，因为并非所有的浏览器都支持帧。,31,frameset,元素（）,使用,COLS,属性和,ROWS,属性来设置帧的文件位置，它可以包含多个,frame,元素。,COLS：,用来定义两个或多个垂直帧的尺寸大小，每个帧的,宽度值用逗号隔开。,每个帧窗口的宽度可以用绝对宽度和相对宽度两种,方法表示，单位是像素。,例如：,frameset,元素,Cols,例,32,ROWS：,用来定义两个或多个水平帧的尺寸大小，每个帧的,高值用逗号隔开。,每个帧窗口的高度可以用绝对高度和相对高度两种,方法表示，单位是像素。,上下两帧的例子：,frameset,元素,Rows,33,可以同时在,标签中使用,COLS,和,ROWS,属性，例如：,，,它表示成三行两列的六个帧分割一个窗口，这种形式是不常见的。较常见的形式是这两个属性的嵌套使用。,frameset,元素 混合,例,34,BORDER：,用来设定帧边框宽度,BORDERCOLOR：,用来设定帧边框颜色,FRAMEBORDER：,用来设定帧的边框是否可见,frameset,元素 修饰,例,35,frame,元素（）,必须在,后使用，它用来定义一个帧。,标签中也可以使用许多属性来改变每个帧的显示内容和外观效果。,SRC：,是,frame,元素最重要的属性，它用来指定在该帧中显示的,HTML,文档、图像或其他多媒体文件的,URL,地址，可以是绝对路径，也可以是相对路径。每个帧中的文件都必须存放在一个单独的文件中，例如前面的例子中有这样的代码：，,表示在该帧中显示的文档是,A.html。,Frame,元素,36,BORDER,：,用来指定帧的边框宽度,FRAMEBORDER,：,用来指定帧的边框是否可见，缺省值是有边框，即,FRAMEBORDER=YES,或,1,，,FRAMEBORDER =0,表示没有边框。,Frame,元素 边框,例,37,BORDERCOLOR,：,如果帧的边框可见，可使用,BORDERCOLOR,属性设置每个帧的边框颜色，缺省颜色是灰色。当然如果要使整个窗口中的所有帧的边框颜色相同的话，可以在,标签中指定,BORDERCOLOR,属性。,例,Frame,元素 颜色,38,Frame,元素 大小,SCROLLING,：,缺省情况下，如果帧中的内容在当前帧中不能完全显示时，会出现垂直或水平或两者兼有的滚动条，但是我们可以通过,SCROLLING,属性来设置是否出现滚动条，共有三种情况：,SCROLLING=“YES”,表示帧中总出现滚动条,SCROLLING=“NO”,表示帧中决不出现滚动条,SCROLLING=“AUTO”,表示帧中自动使用滚动条，当浏览器窗口大于帧时不出现滚动条，反之不出现滚动条。这是,SCROLLING,属性的缺省值，建议使用此属性值,NORESIZE,：,缺省情况下，在浏览含有帧的页面时，只要用鼠标拖动边框就可以改变帧的大小，但是我们可以通过,NORESIZE,属性来控制用户不能这样做。例如：,表示,A.html,文档的帧是不能改变大小的。,例,例,39,NAME：,用来指定帧的名字。它的作用是在,标签中使用,TARGET,属性指定某个,NAME,属性值，从而来指定链接文件显示在哪一个帧中或者说是哪一个目标窗口中。,Frame,元素 命名与目标,Top,框架,Left,框架,Main,框架,40,夜思,怨情,例,Frame,元素 命名与目标,41,TARGET,属性不仅可以用来指定在哪个帧中显示，它还可以含有几个特殊的目标窗口选项以产生特殊的显示效果。有以下四个具有特殊含义的目标窗口选项：,_,blank,：,当,TARGET=_blank,时，链接点指向的文档将在一个新窗口中显示。例如：,ONE,，,当单击“,ONE,”,链接点时，浏览器将会开一个新窗口显示文档,1.,html,_parent,：,当,TARGET=“_parent”,时，链接点指向的文档将在包含链接的父级帧中打开。,_,self,：,当,TARGET=“_self”,时，链接点指向的文档将在当前帧中显示，此选项为缺省值。,_,top：,当,TARGET=_top,时，链接点指向的文档将在,frameset,所在帧也就是整个浏览器窗口显示，这是这四个属性值中最常用的。,Frame,元素 命名与目标,例,42,表单是如文本框、单选按钮等信息域的集合，它是,WWW,中实现交互功能的主要界面，我们在浏览网页时，经常会见到一些如用户反馈表这样的表单，用户在填写完表单后将其送到,Web,服务器，然后,Web,服务器把信息交由相应的程序处理，处理结果一般又会通过网页的形式再次反馈给用户，通过这种类型的表单就为,Web,作者和访问者提供了交互的机会。,表单,Form,43,form,元素以,标签为起始标签，在,中可以使用很多属性,。,ACTION,：,用来指定表单处理程序的,URL,地址，比较典型的是指定接收表单数据的,email,地址。,例如：,表示将填写好的表单数据发送到,poorbear,。,ACTION,44,METHOD,：,用来指定表单数据发送到,ACTION,属性所指定的,URL,地址所使用的方法，它的属性值只有,POST,和,GET,两种。,POST,方法把表单数据作为一个数据块传送，它通常在,ACTION,属性值指定的是,email,地址的时候使用。,例如：,GET,方法在,ACTION,属性值指定的是,CGI,程序地址的时候使用，它将用户输入的数据直接附加在,URL,后面，然后传送给,CGI,程序进行处理，,GET,方法不太常用。,例如：,METHOD,例,45,input,元素是表单中最常用、最灵活的元素，它主要用于表单的数据输入以及建立一些按钮。,input,元素以,标签起始，没有结束标签,属性：,TYPE,和,NAME，,及一些可选的属性,TYPE,属性有10个不同类型的属性值：,TEXT、PASSWORD、RADIO、CHECKBOX、SUBMIT、RESET、BUTTON、IMAGE、HIDDEN,以及,FILE，,缺省值为,TEXT，,一般我们都使用,NAME,属性来指定这10个属性值所建立的各信息域的内部名称，名称可以随意起，只要不包括空格和特殊字符就可。,input,元素,46,TEXT,：,创建单行文本框。,例如：,My email box: ,PASSWORD,：,建立密码输入框。,例如：,RADIO,：,建立单选按钮。,例如：,Please choose the color:,red,blue,yellow,input,元素,例,47,CHECKBOX,：,建立复选框。,例如：,I like,：,HTML,ASP,PHP,SUBMIT,：,提交按钮。可出现在表单的任何位置来提交表单中的数据。,例如：,您的职业：,RESET,：,重置按钮。不把数据送往服务器，而把表单中的值恢复成缺省值 。,input,元素,例,48,BUTTON,：,在表单中定义按钮，它必须与按钮动作行为有关的,onClick,属性连用，当用户单击按钮后，就会执行,onClick,指定的,Javascript,程序。,例如：,表明当单击名为,“,Click Me,”,的按钮时，会执行一个名为,“,tree(),”,的,Javascript,程序。,IMAGE：,与,SUBMIT,功能很相似，只是它不是象普通的提交按钮那样使用灰色的文本框来显示，它使用的是指定的图像。,IMAGE,的使用与,一样，它也必须用,属性来指定所用的图像，另外也可以使用,ALT,属性来指定替代文本。,例如：,input,元素,例,49,HIDDEN,：,定义一些特殊需求的域，这些域不希望被用户浏览或修改，但又必须要提交。,例如：,FILE：,可以让用户本机的文件随表单数据一起提交，一般它会在文本域旁自动显示一个,“,浏览,”,字样按钮让用户选择上传哪一个文件。,例如：,Please choose a file:,File name:,input,元素,例,50,用来在表单中建立一个可选列表,以,为起始标签，以,为结束标签，其中必须包含一个或多个,标签来定义每一个可选项。,例如：,Red,Blue,Yellow,Green,Black,在,标签中还可以用,SIZE,属性来指定列表框中列出的选项个数，如果属性值大于选项个数，列表将用滚动条显示，反之用空行代替。,若想同时选择多项，则须使用,MULTIPLE,属性。选择多个选项时，一般使用按住,CTRL,键单击鼠标选择的方法。,select,元素,例,51,textarea,元素与,中的,TEXT,类型的功能很相似，不同的是它用来创建多行文本框。,textarea,元素以,为起始标签，以,为结束标签。,属性：,NAME,属性，用于控制文本框宽度的,COLS,属性，它以字符个数为单位；用于控制多行文本框高度的,ROWS,属性，它以行为单位。,例如：,你喜欢红色吗？,为什么？,textarea,元素,例,