第01讲 超文本标记语言-HTML

Softeem Consultancy Service超文本标记语言超文本标记语言-HTMLID:SCSC007-HTML,CSS,JSSofteem Consultancy Service超文本标记语言超文本标记语言-HTMLHTML概念HTML页面的基本框架HTML常用格式标签图像标签列表标签表格标签HTML超链接框架表单4/27/20232超文本标记语言-HTMLSofteem Consultancy Service统一资源定位器统一资源定位器URLURL（UniformResourceLocation）即统一资源定位器，它指出了文件在Internet中的位置。URL由协议名、Web服务器地址、文件在服务器中的路径（即目录）和文件名四部分构成。例如，http：/ Consultancy Service超文本标语语言超文本标语语言HTMLHTML（HypertextMarkupLanguage）即超文本标记语言，它是一种用于编写超文本文档的标记语言。自从1990年首次应用于网页编辑后，HTML迅速崛起成为网页编辑的主流语言。几乎所有的网页都是由HTML或以其他程序语言嵌套在HTML中编写的。HTML并不是一种程序语言而是一种结构语言，它具有平台无关性。无论用户使用何种操作系统（Windows、Dos、Unix等等），只要有相应的浏览器程序，就可以运行HTML文档。4/27/20234超文本标记语言-HTMLSofteem Consultancy Service超文本传输协议超文本传输协议HTTP超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和要进行的操作。HTTP协议的制定使测览器在运行超文本文档时有了统一的规则和标准，从而大大增强了网页的适用性。4/27/20235超文本标记语言-HTMLSofteem Consultancy ServiceClient/Server架构架构ClientServer清求响应4/27/20236超文本标记语言-HTMLSofteem Consultancy ServiceHTML页面的基本框架页面的基本框架标题内容4/27/20237超文本标记语言-HTMLSofteem Consultancy ServiceHTML页面的基本框架页面的基本框架必须位于head内，设置背景音乐Src 位置Loop 循环次数，如果不设置，则一直播放4/27/20238超文本标记语言-HTMLSofteem Consultancy Service标签标签“BGCOLOR”。指定HTML文档的背景色。“TEXT”。指定HTML文档中文字的颜色。“LINK”。指定HTML文档中待连接超链接对象的颜色。“ALINK”。指定HTML文档中连接中超链接对象的颜色。“VLINK”。指定HTML文档中已连接超链接对象的颜色。“BACKGROUND”。指定HTML文档的背景文件。4/27/20239超文本标记语言-HTMLSofteem Consultancy Service常用标签常用标签-换行-文档中的标题-创建一个段落-固定格式文本块-粗体-斜体-下划线-设置字体及大小-文本块容器-水平分隔线4/27/202310超文本标记语言-HTMLSofteem Consultancy Service图像标签图像标签-链接一个图像文件常用属性：SRC=被链接文件的URLWIDTH=图像的宽度HEIGHT=“图像的高度BORDER=“图像的边框ALT=“图像说明文字ALGN=与图像相邻的文字相对位置VSPACE=垂直方向与图像相邻的对象之间距离VHPACE=水平方向与图像相邻的对象之间距离BORDER=图像过框的宽度4/27/202311超文本标记语言-HTMLSofteem Consultancy Service常用的图像文件格式常用的图像文件格式网页中常用的图像文件格式：GIF颜色数不超过256色，可用于动画或透明背景的图像。JPG适用于颜色丰富或渐变色较多的图像文件，但不可以做成动画。4/27/202312超文本标记语言-HTMLSofteem Consultancy Service列表标签列表标签创建一个标有数字的列表创建一个标有圆点的列表放在每个列表项之前,若在之间则每个列表项加上一个数字,若在之间则每个列表项加上一个圆点4/27/202313超文本标记语言-HTMLSofteem Consultancy Service列表嵌套的范例程序列表嵌套的范例程序一些常见的水果：苹果和桔子香蕉和草萄西瓜和桃子这是列表的第二项一些常见的肉类猪肉和牛肉羊肉和兔肉4/27/202314超文本标记语言-HTMLSofteem Consultancy Service表格标签表格标签border边框宽度width表格的宽度height表格的高度align表格与其相邻的文字的相对位置cellpadding单元格内的边距cellspacing单元格间的空白4/27/202315超文本标记语言-HTMLSofteem Consultancy Service行列标签行列标签定义行定义表头定义列colspan单元格所跨的列数rowspan单元格所跨的行数nowrap是否自动进行文字环绕4/27/202316超文本标记语言-HTMLSofteem Consultancy Service共有的常用属性共有的常用属性bgcolor背景颜色align水平对齐方式（left、right、center）valign垂直对齐方式（top、middle、bottom）bordercolor边框颜色width、height宽度、高度4/27/202317超文本标记语言-HTMLSofteem Consultancy Service表格示例表格示例4/27/202318超文本标记语言-HTMLSofteem Consultancy Service超链接超链接HTML是通过链接标签来实现超链接的。链按标签是成对标签，首标签和尾标签之间的内容就是锚标。标签有一个不可缺省的属性href，用于指定链接目标点的位置。文档之间的跳转、跳转到标记位置、链接地图。外部链接4/27/202319超文本标记语言-HTMLSofteem Consultancy Service文档链接文档链接用户可以通过点击锚标从当前文档直接跳转至目标文档。如前所述，首标签和尾标签之间的内容就是锚标，一般是对目标文档的简要说明。此时，href属性的参数值是目标文档的URL。路径表示方式：text1.htm在当前的目录中text1.htm在名为docs的子目录中text1.htm在当前目录的上一层目录中属性：target=“_blank“_self 当前窗口中打开 4/27/202320超文本标记语言-HTMLSofteem Consultancy Service文档链接范例程序文档链接范例程序文档链接范例程序有关苹果的说明下面是相应的图像锚标：4/27/202321超文本标记语言-HTMLSofteem Consultancy Service文档链接范例程序文档链接范例程序如果用户点击文字锚标“有关苹果的说明”或点击苹果图像，浏览器就会载入目标文档aPPlehtml。锚标文字和普通文字在外观上有很大的不同，一般来说，它被显示为带下划线的亮蓝色文字。4/27/202322超文本标记语言-HTMLSofteem Consultancy Service跳转到标记位置跳转到标记位置浏览器程序在载入目标文档后将自动从文档的开头部分开始显示。然而，用户需要的部分往往并不在文档的开头。如果不加以记号标记，用户将花费大量的时间和精力在文档（特别是一些长文档）中进行查找。为了方便用户，我们可以利用标签的NAME属性在目标位置添加记号，然后在锚标中进行引用。HTML中标识记号的格式为：目标点；引用记号的格式为锚标内容。4/27/202323超文本标记语言-HTMLSofteem Consultancy Service跳转到标记位置跳转到标记位置超链接的源文档欢迎来到INDEX主页，请选择您想浏览的部分文件传输远程登录电子邮件电子公告权系统4/27/202324超文本标记语言-HTMLSofteem Consultancy Service跳转到标记位置跳转到标记位置超链接的源文档欢迎来到INDEX主页，请选择您想浏览的部分文件传输远程登录电子邮件电子公告权系统4/27/202325超文本标记语言-HTMLSofteem Consultancy Service跳转到标记位置跳转到标记位置当用户点击锚标“文件传输”后，浏览器将载入目标文档intetnet.html，并从标记位置所在行开始显示，而不像原来那样从文档的开头部分开始显示。4/27/202326超文本标记语言-HTMLSofteem Consultancy Service链接地图链接地图链接地图是一种很形象的超链接方式。它将链接源点的图像划分为若干个区域，每个区域都对应着自己的目标文档。链接地图的语法与其它两种超链接方式有很大的不同，4/27/202327超文本标记语言-HTMLSofteem Consultancy Service链接地图链接地图4/27/202328超文本标记语言-HTMLSofteem Consultancy Service外部链接网站链接好站电子邮件链接写信给朋友ftp链接下载档案下载档案news链接seednetnews服务seednetnews服务gopher链接seednetgopher服务seednetgopher服务bbs链接seednetgopher服务seednetbbs服务4/27/202329超文本标记语言-HTMLSofteem Consultancy Service框架框架-框架集标记，用来组织多个分框或嵌套的框架集常用属性rows横向分割,以及各个分框的高度cols纵向分割以及各个分框的宽度border-边框的宽度bordercolor边框的颜色注意此标记不可与标记共存,在head中4/27/202330超文本标记语言-HTMLSofteem Consultancy Service框架框架-单个分框标记常用属性src页而的URLscrolling是否显示滚动条(auto、yes、no)-嵌入式页面标记常用标记src页而的URLscrolling是否显示滚动条(auto、yes、no)width、height宽度、高度4/27/202331超文本标记语言-HTMLSofteem Consultancy Service框架框架4/27/202332超文本标记语言-HTMLSofteem Consultancy Service表单表单一个HTML表单是文档中包含标准内容,标注和叫做控件的特殊元素的部分.控件响应并接受用户输入.用户通常通过输入文字,选择菜单条目等来完成表单,然后提交表单以供处理.提交的表单可以通过电子邮件发送给别人也可以发送给程程序来处理.控件可以是复选框,单选框,标签,菜单等.每个控件可以分配一个名称.当表单被提交时,一些控件(取决于它们的状态)的名称和当前值随表单一起发送.提交的值的自然属性取决于控件(例如:文本框的值是输入的文本).表单是用元素定义的。4/27/202333超文本标记语言-HTMLSofteem Consultancy Service元素元素action=url这个特性指定一来处理提交表单的格式.它可以是一个HTTPURL(提交给程式)或一个电子邮件(MAILTO)URL(邮递这个表单).method=get|post这个特性指明哪种HTTP方法将被用来提交名称/值对给表单处理者.可能的值为:post:使用HTTPPOST方法.POST方法在表单的主干包含名称/值对，无需包含于action特性的URL中.get:.使用HTTPGET方法.GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成.4/27/202334超文本标记语言-HTMLSofteem Consultancy Service元素元素enctype这个特性指明用来把表单提交给服务器时(当method值为post)的互联网媒体形式.这个特性的缺省值是application/x-www-form-urlencoded.值multipart/form-data应当被用于返回的文档中包含提交文件时.name：用于设定表单的名称。onrest和onsubmit是主要针对“reset”按钮和“submit”按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。4/27/202335超文本标记语言-HTMLSofteem Consultancy Service元素元素FORM元素作为控件的容器.它指定了:表单的界面(通过元素内容给出).将用来处理完成和提交表单的程式(action特性).为了使用它们收到的程式必须能够剖析名称/值对.用户数据通过哪种方式送到服务器(method特性).为了处理这个表单字符编码方式必须能够被服务器接受(accept-charset特性).用户代理器可以建议用户的accept-charset特性值和/或有防止用户输入不认识的字符的能力.4/27/202336超文本标记语言-HTMLSofteem Consultancy Service-表单输入标记-下拉列表或列表控件标记(由size属性决定)-列表项标记-多行文本输入标记表单控件表单控件4/27/202337超文本标记语言-HTMLSofteem Consultancy Service表单输入标记表单输入标记type=button普通按钮控件type=reset重置按钮控件type=submit提交按钮控件type=image图像按钮控件type=checkbox复选框控件type=radio单选框控件type=text文本输入控件type=password密码输入控件type=file文件上载控件type=hidden隐藏字段4/27/202338超文本标记语言-HTMLSofteem Consultancy Service表单输入标记表单输入标记value：用于设定输入默认值，即如果用户不输入的话，就采用此默认值；src：是针对type=image的情况来说的，设定图像文件的地址；checked：表示选择框中，此项被默认选中；maxlength：表示在输入单行文本的时候，最大输入字符个数；size：用于设定在输入多行文本时的最大输入字符数，采用width，height方式；onclick：表示在按下输入时调用指定的子程序；onselect：表示当前项被选择时调用指定的子程序。4/27/202339超文本标记语言-HTMLSofteem Consultancy Service列表框标记列表框标记用标记可以在表间中插入一个下拉菜单，它需与标记联用，因为下拉菜单中的每个选项要用标记来定义。标记的语法如下：name：设定下拉式菜单的名称；size：设定菜单框的高度，也就是一次显示几个菜单项，一般取默认值（size=1）；multiple：设定为可以进行多选。4/27/202340超文本标记语言-HTMLSofteem Consultancy Service列表框标记列表框标记请选择您想去的商店:闪客百货商店超级自选第一百货第二百货请在选择完毕后单击确认按钮：4/27/202341超文本标记语言-HTMLSofteem Consultancy Service选项标记选项标记该标记为下拉菜单中一个选项，语法很简单：其中selected：表示当前项被默认选中；value：表示该项对应的值，在该项被中之后，该项的值就会被送到服务器进行处理。4/27/202342超文本标记语言-HTMLSofteem Consultancy Service多行文本输入标记多行文本输入标记这是一个建立多行文本输入框的专用标记，其语法如下：clos：宽度；rows：高度（行数）；wrap：换行控制，off：不自动换行；hard：自动硬回车换行，换行标记一同被传送到服务器中去；soft：自动软回车换行，换行标记不会传送到服务器中去。4/27/202343超文本标记语言-HTMLSofteem Consultancy Service多行文本输入标记多行文本输入标记这是填写的内容了。要不你留下怎么联系？我真的找你请我吃饭哦！呵呵填写错误，单击这里清除重写写完了？按这儿确认：4/27/202344超文本标记语言-HTMLSofteem Consultancy Service捕获异常捕获异常Name:非常滿意滿意尚可不滿意非常不滿意男女狗貓虎龍password:inputtype=resetvalue=清除4/27/202345超文本标记语言-HTMLSofteem Consultancy Service课后练习课后练习用HTML语言设计一张借书登记表单，内容包括序号、书名、借书人、借书日期和备注。指定表格的背景色。要求表头行部分的背景色为蓝色，表格主体部分的背景色为绿色。4/27/202346超文本标记语言-HTML