超文本标记语言HTML

1、超文本标记语言-HTML,ID:SCSC007-HTML,CSS,JS,2020/7/25,超文本标记语言-HTML,2,超文本标记语言-HTML,HTML概念 HTML页面的基本框架 HTML常用格式标签 图像标签 列表标签 表格标签 HTML超链接 框架 表单,2020/7/25,超文本标记语言-HTML,3,统一资源定位器URL,URL（UniformResourceLocation）即统一资源定位器，它指出了文件在Internet中的位置。URL由协议名、Web服务器地址、文件在服务器中的路径（即目录）和文件名四部分构成。例如，http：/ 其中http：/是协议名，表示文件的运行是遵

2、循超文本传输协议的。是Web服务器的地址，/intl/cn是文件所在的目录，index.html则是文件名。,2020/7/25,超文本标记语言-HTML,4,超文本标语语言HTML,HTML（HypertextMarkupLanguage）即超文本标记语言，它是一种用于编写超文本文档的标记语言。自从1990年首次应用于网页编辑后，HTML迅速崛起成为网页编辑的主流语言。几乎所有的网页都是由HTML或以其他程序语言嵌套在HTML中编写的。HTML并不是一种程序语言而是一种结构语言，它具有平台无关性。无论用户使用何种操作系统（Windows、Dos、Unix等等），只要有相应的浏览器程序，就可以

3、运行HTML文档。,2020/7/25,超文本标记语言-HTML,5,超文本传输协议HTTP,超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和要进行的操作。HTTP协议的制定使测览器在运行超文本文档时有了统一的规则和标准，从而大大增强了网页的适用性。,2020/7/25,超文本标记语言-HTML,6,Client/Server架构,Client,Server,清求,响应,2020/7/25,超文本标记语言-HTML,7,HTML页面的基本框架, 标题 内容 ,2020/7/25,超文本标记语言-HTML,8,HTML页面的基本框架, 必须位于head内，设置背景音乐 Src 位置

4、Loop 循环次数，如果不设置，则一直播放,2020/7/25,超文本标记语言-HTML,9,标签,“BGCOLOR”。指定HTML文档的背景色。 “TEXT”。指定HTML文档中文字的颜色。 “LINK”。指定HTML文档中待连接超链接对象的颜色。 “ALINK”。指定HTML文档中连接中超链接对象的颜色。 “VLINK”。指定HTML文档中已连接超链接对象的颜色。 “BACKGROUND”。指定HTML文档的背景文件。,2020/7/25,超文本标记语言-HTML,10,常用标签,-换行 -文档中的标题 -创建一个段落 -固定格式文本块 -粗体 -斜体 -下划线 -设置字体及大小 -文本块

5、容器 -水平分隔线,2020/7/25,超文本标记语言-HTML,11,图像标签,-链接一个图像文件 常用属性： SRC=被链接文件的URL WIDTH=图像的宽度 HEIGHT=“图像的高度 BORDER=“图像的边框 ALT=“图像说明文字 ALGN=与图像相邻的文字相对位置 VSPACE=垂直方向与图像相邻的对象之间距离 VHPACE=水平方向与图像相邻的对象之间距离 BORDER=图像过框的宽度,2020/7/25,超文本标记语言-HTML,12,常用的图像文件格式,网页中常用的图像文件格式： GIF颜色数不超过256色，可用于动画或透明背景的图像。 JPG适用于颜色丰富或渐变色较多的

6、图像文件，但不可以做成动画。,2020/7/25,超文本标记语言-HTML,13,列表标签,创建一个标有数字的列表 创建一个标有圆点的列表 放在每个列表项之前,若在之间则每个列表项加上一个数字,若在之间则每个列表项加上一个圆点,2020/7/25,超文本标记语言-HTML,14,列表嵌套的范例程序, 一些常见的水果： 苹果和桔子 香蕉和草萄 西瓜和桃子 这是列表的第二项 一些常见的肉类 猪肉和牛肉 羊肉和兔肉 ,2020/7/25,超文本标记语言-HTML,15,表格标签, border边框宽度 width表格的宽度 height表格的高度 align表格与其相邻的文字的相对位置 cellpa

7、dding单元格内的边距 cellspacing单元格间的空白,2020/7/25,超文本标记语言-HTML,16,行列标签,定义行 定义表头 定义列 colspan单元格所跨的列数 rowspan单元格所跨的行数 nowrap是否自动进行文字环绕,2020/7/25,超文本标记语言-HTML,17,共有的常用属性,bgcolor背景颜色 align水平对齐方式（left、right、center） valign垂直对齐方式（top、middle、bottom） bordercolor边框颜色 width、height宽度、高度,2020/7/25,超文本标记语言-HTML,18,表格示例,2

8、020/7/25,超文本标记语言-HTML,19,超链接,HTML是通过链接标签来实现超链接的。链按标签是成对标签，首标签和尾标签之间的内容就是锚标。标签有一个不可缺省的属性href，用于指定链接目标点的位置。 文档之间的跳转、 跳转到标记位置、 链接地图。 外部链接,2020/7/25,超文本标记语言-HTML,20,文档链接,用户可以通过点击锚标从当前文档直接跳转至目标文档。如前所述，首标签和尾标签之间的内容就是锚标，一般是对目标文档的简要说明。此时，href属性的参数值是目标文档的URL。 路径表示方式： text1.htm在当前的目录中 text1.htm在名为docs的子目录中 te

9、xt1.htm在当前目录的上一层目录中 属性： target=“_blank“ _self 当前窗口中打开,2020/7/25,超文本标记语言-HTML,21,文档链接范例程序, 文档链接范例程序 有关苹果的说明 下面是相应的图像锚标： ,2020/7/25,超文本标记语言-HTML,22,文档链接范例程序,如果用户点击文字锚标“有关苹果的说明”或点击苹果图像，浏览器就会载入目标文档aPPlehtml。锚标文字和普通文字在外观上有很大的不同，一般来说，它被显示为带下划线的亮蓝色文字。,2020/7/25,超文本标记语言-HTML,23,跳转到标记位置,浏览器程序在载入目标文档后将自动从文档的开

10、头部分开始显示。然而，用户需要的部分往往并不在文档的开头。如果不加以记号标记，用户将花费大量的时间和精力在文档（特别是一些长文档）中进行查找。为了方便用户，我们可以利用标签的NAME属性在目标位置添加记号，然后在锚标中进行引用。 HTML中标识记号的格式为：目标点；引用记号的格式为锚标内容。,2020/7/25,超文本标记语言-HTML,24,跳转到标记位置, 超链接的源文档 欢迎来到INDEX主页，请选择您想浏览的部分 文件传输 远程登录 电子邮件 电子公告权系统 ,2020/7/25,超文本标记语言-HTML,25,跳转到标记位置, 超链接的源文档 欢迎来到INDEX主页，请选择您想浏览的

11、部分 文件传输 远程登录 电子邮件 电子公告权系统 ,2020/7/25,超文本标记语言-HTML,26,跳转到标记位置,当用户点击锚标“文件传输”后，浏览器将载入目标文档intetnet.html，并从标记位置所在行开始显示，而不像原来那样从文档的开头部分开始显示。,2020/7/25,超文本标记语言-HTML,27,链接地图,链接地图是一种很形象的超链接方式。它将链接源点的图像划分为若干个区域，每个区域都对应着自己的目标文档。链接地图的语法与其它两种超链接方式有很大的不同，,2020/7/25,超文本标记语言-HTML,28,链接地图, ,2020/7/25,超文本标记语言-HTML,29

12、,外部链接,网站链接 好站 电子邮件链接 写信给朋友 ftp链接下载档案 下载档案 news链接seednetnews服务 seednetnews服务 gopher链接seednetgopher服务 seednetgopher服务 bbs链接seednetgopher服务 seednetbbs服务,2020/7/25,超文本标记语言-HTML,30,框架,-框架集标记，用来组织多个分框或嵌套的框架集 常用属性 rows横向分割,以及各个分框的高度 cols纵向分割以及各个分框的宽度 border-边框的宽度 bordercolor边框的颜色 注意此标记不可与标记共存,在head中,2020/7

13、/25,超文本标记语言-HTML,31,框架,-单个分框标记 常用属性 src页而的URL scrolling是否显示滚动条(auto、yes、no) -嵌入式页面标记 常用标记 src页而的URL scrolling是否显示滚动条(auto、yes、no) width、height宽度、高度,2020/7/25,超文本标记语言-HTML,32,框架, ,2020/7/25,超文本标记语言-HTML,33,表单,一个HTML表单是文档中包含标准内容,标注和叫做控件的特殊元素的部分.控件响应并接受用户输入.用户通常通过输入文字,选择菜单条目等来完成表单,然后提交表单以供处理.提交的表单可以通过电

14、子邮件发送给别人也可以发送给程程序来处理. 控件可以是复选框,单选框,标签,菜单等.每个控件可以分配一个名称.当表单被提交时,一些控件(取决于它们的状态)的名称和当前值随表单一起发送.提交的值的自然属性取决于控件(例如:文本框的值是输入的文本). 表单是用元素定义的。,2020/7/25,超文本标记语言-HTML,34,元素,action=url 这个特性指定一来处理提交表单的格式.它可以是一个HTTPURL(提交给程式)或一个电子邮件(MAILTO)URL(邮递这个表单). method=get|post 这个特性指明哪种HTTP方法将被用来提交名称/值对给表单处理者.可能的值为: post

15、:使用HTTPPOST方法.POST方法在表单的主干包含名称/值对，无需包含于action特性的URL中. get:.使用HTTPGET方法.GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成.,2020/7/25,超文本标记语言-HTML,35,元素,enctype 这个特性指明用来把表单提交给服务器时(当method值为post)的互联网媒体形式.这个特性的缺省值是application/x-www-form-urlencoded.值multipart/form-data应当被用于返回的文档中包含提交文件时. n

16、ame：用于设定表单的名称。 onrest和onsubmit是主要针对“reset”按钮和“submit”按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。,2020/7/25,超文本标记语言-HTML,36,元素,FORM元素作为控件的容器.它指定了: 表单的界面(通过元素内容给出). 将用来处理完成和提交表单的程式(action特性).为了使用它们收到的程式必须能够剖析名称/值对. 用户数据通过哪种方式送到服务器(method特性). 为了处理这个表单字符编码方式必须能够被服务器接受(accept-charset特性).用户代理器可以建议用户的accept-charset特性值和/

17、或有防止用户输入不认识的字符的能力.,2020/7/25,超文本标记语言-HTML,37,-表单输入标记 -下拉列表或列表控件标记(由size属性决定) -列表项标记 -多行文本输入标记,表单控件,2020/7/25,超文本标记语言-HTML,38,表单输入标记,type=button普通按钮控件 type=reset重置按钮控件 type=submit提交按钮控件 type=image图像按钮控件 type=checkbox复选框控件 type=radio单选框控件 type=text文本输入控件 type=password密码输入控件 type=file文件上载控件 type=hidden

18、隐藏字段,2020/7/25,超文本标记语言-HTML,39,表单输入标记,value：用于设定输入默认值，即如果用户不输入的话，就采用此默认值； src：是针对type=image的情况来说的，设定图像文件的地址； checked：表示选择框中，此项被默认选中； maxlength：表示在输入单行文本的时候，最大输入字符个数； size：用于设定在输入多行文本时的最大输入字符数，采用width，height方式； onclick：表示在按下输入时调用指定的子程序； onselect：表示当前项被选择时调用指定的子程序。,2020/7/25,超文本标记语言-HTML,40,列表框标记,用标记可以在表间中插入一个下拉菜单，它需与标记联用，因为下拉菜单中的每个选项要用标记来定义。标记的语法如下： name：设定下拉式菜单的名称； size：设定菜单框的高度，也就是一次显示几个菜单项，一般取默认值（size=1）； multiple：设定为可以进行多选。,2020/7/25,超文本标记语言-HTML,41,列表框标记, 请选择您想去的商店: 闪客百货商店 超级