物联网工程综合实践第二讲：HTML技术.ppt

物联网工程综合实践第二讲：HTML技术,物联网工程综合实践课程建设小组北京大学二零一一年,HTML常用标记简介,文件标记排版标记文字格式标记列表标记图像标记链接标记表格标记框架标记表单标记其它标记,（一）文件标记,文件类型声明让浏览器知道这是HTML文件定义文件的属性定义文件标题，标题显示于浏览顶端定义整个文件主体的显示属性文件体信息包括在标签对中,（一）文件标记,文件主体标记标记定义整个文件主体的属性的属性可以分为三类：背景属性：BGCOLOR背景色BACKGROUND背景图案BGPROPERTIES背景不随前景滚动(fixed)文字属性：TEXT正文文字颜色LINK链接文字颜色ALINK活动链接文字颜色VLINK已访问链接文字颜色留白属性LEFTMARGIN页面左侧的留白距离TOPMARGIN页面顶部的留白距离,（一）文件标记,简单的HTML例子-哲理莲魂-搜索引擎：Google,（二）排版标记,标题格式标记n：1-6align属性：left、center、right,此为一级标题此为二级标题此为三级标题此为四级标题此为五级标题此为六级标题此为正常文本,（二）排版标记,强制换行标记HTML无法用多个回车、空格、Tab键来调整文档段落的格式，可用HTML的标记来强制换行、分段。,这里的两行显示的是两行吗？换行要用空行。,（二）排版标记,段落格式标记设置段落标记属性：align,这个段落左对齐这个段落在中间这个段落在右边,（二）排版标记,预排格式标记,文房四宝中国书法的工具和材料基本上是由笔、墨、纸、砚来构成的，人们通常把它们称为文房四宝。这大致是说它们是文人书房中必备的四件宝贝。因为中国古代文人基本上都是或能书，或能画，或既能书又能画的，是离不开笔墨纸砚这四件宝贝的。,（二）排版标记,分区显示标记版式设计时常用定义一个信息块的属性定义一个信息块的大小、位置和显示样式,（二）排版标记,水平线标记属性：align、size(2pix)、width、noshade,（二）排版标记,欢迎光临花卉主页-诗意荷花-记得绿罗裙、珍珠缀相思雨下着，荷叶上的雨流动着、滚落着。光的折射使叶边的水珠晶莹剔透，娇翠欲滴,（三）文字格式标记,文字格式标记属性size:取值1-7，取1时最小，缺省为3face、color,这是一号宋体红色字这是三号黑体蓝色字这是五号隶书黑色字,（三）文字格式标记,字型标记,小字体,（四）列表标记,三种列表：无序列表：有序列表：.定义列表：无序列表和有序列表的列表项都用标记,（四）列表标记,无序列表标记,第一列表项第二列表项第三列表项,（四）列表标记,有序列表标记,第一列表项第二列表项第三列表项第一列表项第二列表项第三列表项,（四）列表标记,定义列表标记,第一项列表其定义是第二项列表其定义是第三项列表其定义是,（五）图像标记,图象标记浏览器通常支持GIF和JPEG格式的文件属性：alt、src、height、width、border、align、hspace、vspace,20,（五）图像标记,图象顶部和文本对齐图象中部和文本对齐图象底部和文本对齐图象在屏幕左边图象在屏幕右边图象的修饰,（六）链接标记,建立超链接超链接的实现方法：某个文本串和其他网页的地址（URL）联系在一起某幅图像和其他网页的地址（URL）联系在一起,（六）链接标记,超链接包括：同一文件中的链接同一文件不同部分的链接不同文件间的链接本地机器中文件链接链接到其他文件链接到其他文件的某处其他Web服务器上文件链接,（六）链接标记,链接标记属性：href=“指定超级链接指向的目标文件的相对或绝对位置（URL）name=“给当前文档中的一个位置取名（书签），便于长文档的快速定位target=“指定链接的文档在哪个框架或窗口中显示title=“在浏览器中鼠标指向链接时显示的提示文本,（六）链接标记,href属性绝对URL包含标识Internet上的文件所要的全部信息相对URL：当前网页为web1.htm,（六）链接标记,name属性使用name属性可以在一个较长的文档中建立命名的位置点，相当于书签。位置点的名称称为书签名或锚名。例如：定义书签：使用网络打印机如果是在同一文档中跳转，则直接用如下链接：其他网页中链接：,（六）链接标记,target属性target属性设定链接要显示的窗口。可选值为：target=“_blank”或target=“new”打开新的浏览窗口。target=“_parent”在父窗口或框架集中打开。target=“_self”在当前窗口中打开。target=“_top”将框架中的超链接，显示在没有框架的窗口中。,（六）链接标记,超链接的实现方法文本超链接Google电子邮件超链接有和我们联系图象超链接,（六）链接标记,超链接分为：同一文件中的链接(同一文件不同部分的链接)热点不同文件间的链接本地机器中文件链接链接到其他文件热点链接到其他文件的某处热点其他Web服务器上文件链接,（七）表格标记,表格标记表格声明表格标题表格行表格标头表格单元格,表格举例,功课表星期一星期二星期三星期四星期五数学物理化学英语数学.,rowspan和colspan属性合并单元格演示实例：html-9-4-1.htm,145678911,（八）框架标记,框架布局框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。框架集定义框架中每个区域的大小、位置、名称和初始网页。框架集是一种特殊网页，定义整体框架布局，不提供实际内容。每个框架区域的内容由普通网页提供。一个框架区域中的超链接指向的网页可以显示在另一个框架区域中。,此网页使用了框架，但您的浏览器不支持框架。,（九）表单标记,表单用于实现网页浏览器与服务器之间信息交互的一种页面元素。常用的表单元素有：文本框、口令框、单选按钮、复选框、文件选择框（浏览）、按钮、下拉列表框、多行文本框等。表单中必须有一个元素作为“提交”按钮。,（九）表单标记,表单标记格式表单开始标记设置单行文本输入框、口令框、单选按钮、复选框、文件选择框、按钮等设置下拉菜单列出用户可选的项目设置多行文本框,（九）表单标记,之间可以使用除以外的任何HTML标记标记的属性action=“url”写明这个表单提交后需要执行的驻留在Web服务器上的程序名（包括路径）method说明发送给服务器时使用的方式POST：允许传送大量资料GET：只接受低于1K的资料,（九）表单标记,标记的属性rows说明多行文本框的行数cols说明多行文本框的列数name,（九）表单标记,标记的属性type说明信息的类型TEXT：单行文本框PASSWORD：密码文本框(显示*)RADIO：单选按钮CHECKBOX：复选框FILE：调出选择文件的窗口SUBMIT：传送按钮RESET：重置按钮,（九）表单标记,typeIMAGE：图片按钮(取代submit、reset按钮，漂亮)BUTTOM：一般按钮(常配合JavaScrip作为其启动按钮)HIDDEN：产生一个不显示的窗口,name输入信息的名字value输入信息的默认值size如type=“text”时表示窗口的大小maxlength如type=“text”时表示输入信息能够接受的最大字符数checked指明某个选项是默认预选的(type=checkbox|radio),（九）表单标记,（九）表单标记,标记的属性multiple指明菜单中可列出多个选项size其后的数字指明在菜单中显示的项数name标记的属性selected说明此项被选中,（九）表单标记,实例：,（十）其它标记,标记TheMETAelementcanbeusedtoincludename/valuepairsdescribingpropertiesofthedocument,suchasauthor,expirydate,alistofkeywordsetc.TheNAMEattributespecifiesthepropertynamewhiletheCONTENTattributespecifiesthepropertyvalue.e.g.,（十）其它标记,e.g.TheHTTP-EQUIVattributecanbeusedinplaceoftheNAMEattributeandhasaspecialsignificancewhendocumentsareretrievedviatheHypertextTransferProtocol(HTTP).HTTPserversmayusethepropertynamespecifiedbytheHTTP-EQUIVattributetocreateanRFC822styleheaderintheHTTPresponse.ThiscantbeusedtosetcertainHTTPheadersthough,seetheHTTPspecificationfordetails.willresultintheHTTPheader:Expires:Tue,20Aug199614:25:27GMTThiscanbeusedbycachestodeterminewhentofetchafreshcopyoftheassociated