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