《物联网工程综合实践二讲：HTML技术》由会员分享，可在线阅读，更多相关《物联网工程综合实践二讲：HTML技术（50页珍藏版）》请在金锄头文库上搜索。
1、物联网工程综合实践物联网工程综合实践第二讲：第二讲：HTMLHTML技术技术物联网工程综合实践物联网工程综合实践课程建设小组课程建设小组北京大学北京大学二零一一年二零一一年 HTMLHTML常用标记简介常用标记简介文件标记文件标记排版标记排版标记文字格式标记文字格式标记列表标记列表标记图像标记图像标记链接标记链接标记表格标记表格标记框架标记框架标记表单标记表单标记其它标记其它标记（一）文件标记（一）文件标记文件类型声明文件类型声明让浏览器知道这是让浏览器知道这是 HTML 文件文件定义文件的属性定义文件的属性定义文件标题，标题显示于浏览顶端定义文件标题，标题显示于浏览顶端定义整个文件主体的显示
2、属性定义整个文件主体的显示属性文件体信息包括在文件体信息包括在标签对中标签对中（一）文件标记（一）文件标记文件主体标记文件主体标记标记标记定义整个文件主体的属性定义整个文件主体的属性的属性可以分为三类：的属性可以分为三类：背景属性：背景属性：BGCOLOR 背景色背景色 BACKGROUND 背景图案背景图案 BGPROPERTIES 背景不随前景滚动背景不随前景滚动(fixed)文字属性：文字属性：TEXT正文文字颜色正文文字颜色 LINK链接文字颜色链接文字颜色 ALINK活动链接文字颜色活动链接文字颜色 VLINK已访问链接文字颜色已访问链接文字颜色留白属性留白属性 LEFTMARGIN
3、 页面左侧的留白距离页面左侧的留白距离 TOPMARGIN 页面顶部的留白距离页面顶部的留白距离（一）文件标记（一）文件标记简单的简单的HTML例子例子<欢迎光临花卉主页欢迎光临花卉主页>-哲哲 理理 莲莲 魂魂-搜索引擎：搜索引擎：Google（二）排版标记（二）排版标记标题格式标记标题格式标记n：1-6 align属性：属性：left、center、right 此为一级标题此为一级标题 此为二级标题此为二级标题 此为三级标题此为三级标题 此为四级标题此为四级标题 此为五级标题此为五级标题 此为六级标题此为六级标题 此为正常文本此为正常文本（二）排版标记（二）排版标记强制换行标记
4、强制换行标记HTML无法用多个回车、空格、无法用多个回车、空格、Tab键来调键来调整文档段落的格式，可用整文档段落的格式，可用HTML的标记来强的标记来强制换行、分段。制换行、分段。这里的两行这里的两行 显示的是两行吗？显示的是两行吗？换行要用换行要用<br>标记。标记。此标记此标记 不产生不产生 空行。空行。（二）排版标记（二）排版标记段落格式标记段落格式标记设置段落标记设置段落标记属性：属性：align 这个段落这个段落左对齐左对齐 这个段落在中间这个段落在中间 这个段落在右边这个段落在右边（二）排版标记（二）排版标记预排格式标记预
5、排格式标记 文房四宝文房四宝 中国书法的工具和材料基本上是由笔、墨、纸、砚中国书法的工具和材料基本上是由笔、墨、纸、砚来构成的，人们通常把它们称为来构成的，人们通常把它们称为文房四宝文房四宝。这大致是说它们是文人书房中必备的四件宝贝。因这大致是说它们是文人书房中必备的四件宝贝。因为中国古代文人基本上都是或能书，或能画，或既能为中国古代文人基本上都是或能书，或能画，或既能书又能画的，是离不开笔墨纸砚这四件宝贝的。书又能画的，是离不开笔墨纸砚这四件宝贝的。（二）排版标记（二）排版标记分区显示标记分区显示标记版式设计时常用版式设计时常用定义一个信息块的属性定义一个信息块的属性定义一个信息块的大小、位
6、置和显定义一个信息块的大小、位置和显示样式示样式（二）排版标记（二）排版标记水平线标记水平线标记属性：属性：align、size(2pix)、width、noshade （二）排版标记（二）排版标记 欢迎光临花卉主页欢迎光临花卉主页 -诗意荷花诗意荷花-记得绿罗裙、珍珠缀相思记得绿罗裙、珍珠缀相思 雨下着，荷叶上的雨流动着、滚落着。光雨下着，荷叶上的雨流动着、滚落着。光的折射使叶边的水珠晶莹剔透，娇翠欲滴的折射使叶边的水珠晶莹剔透，娇翠欲滴 （三）文字格式标记（三）文字格式标记文字格式标记文字格式标记属性属性size:取值取值1-7，取，取1时最小，时最小，缺省为缺省为3face、color
7、这是一号宋体红色字这是一号宋体红色字 这是三号黑体蓝色字这是三号黑体蓝色字 这是五号隶书黑色字这是五号隶书黑色字（三）文字格式标记（三）文字格式标记字型标记字型标记<b>加粗字体加粗字体<i>斜体斜体<u>带下划线带下划线 下下 标标<sub>1 上标上标<sup>2<strike>带删除线带删除线<big>大字体大字体<small>小字体小字体（四）列表标记（四）列表标记三种列表：三种列表：无序列表：无序列表：有序列表：有序列表：.定义列表：定义列表：无序列表和有序列表的列表项都用无序列表和有序列
8、表的列表项都用 标记标记（四）列表标记（四）列表标记无序列表标记无序列表标记 第一列表项第一列表项 第二列表项第二列表项 第三列表项第三列表项 （四）列表标记（四）列表标记有序列表标记有序列表标记 第一列表项第一列表项 第二列表项第二列表项 第三列表项第三列表项 第一列表项第一列表项 第二列表项第二列表项 第三列表项第三列表项 （四）列表标记（四）列表标记定义列表标记定义列表标记 第一项列表第一项列表 其定义是其定义是 第二项列表第二项列表 其定义是其定义是 第三项列表第三项列表 其定义是其定义是 （五）图像标记（五）图像标记图象标记图象标记浏览器通常支持浏览器通常支持GIF和和JPEG格式的
9、文件格式的文件属性：属性：alt、src、height、width、border、align、hspace、vspace（五）图像标记（五）图像标记属性属性说说 明明alt=alt=在不能显示图片时的替换文本或在浏览在不能显示图片时的替换文本或在浏览器中鼠标停留在图片上时显示的文本器中鼠标停留在图片上时显示的文本src=src=指向图形文件（指向图形文件（URLURL）height=nheight=n指定图片显示时的高度（象素数）指定图片显示时的高度（象素数）width=n width=n 指定图片显示时的宽度（象素数）指定图片显示时的宽度（象素数）border=nborder=n指定图片边框
10、宽度（象素数）指定图片边框宽度（象素数）align=align=指定图片对齐方式：指定图片对齐方式：top(top(图象的顶部与文图象的顶部与文本对齐本对齐)、middlemiddle、bottombottom、leftleft、right(right(图图象居屏幕右象居屏幕右)hspace=nhspace=n图像左右的空白图像左右的空白(与左右文本的距离与左右文本的距离)vspace=nvspace=n图像上下的空白距离图像上下的空白距离20 图象顶部和文本对齐图象顶部和文本对齐 图象中部和文本对齐图象中部和文本对齐 图象底部和文本对齐图象底部和文本对齐 图象在屏幕左边图象在屏幕左边 图象在
11、屏幕右边图象在屏幕右边 图象的修饰图象的修饰 （六）链接标记（六）链接标记建立超链接建立超链接超链接的实现方法：超链接的实现方法：某个某个文本串文本串和其他网页的地址（和其他网页的地址（URL）联系在一）联系在一起起某幅某幅图像图像和其他网页的地址（和其他网页的地址（URL）联系在一起）联系在一起（六）链接标记（六）链接标记超链接包括：超链接包括：同一文件中的链接同一文件中的链接同一文件不同部分的链接同一文件不同部分的链接不同文件间的链接不同文件间的链接 本地机器中文件链接本地机器中文件链接链接到其他文件链接到其他文件链接到其他文件的某处链接到其他文件的某处其他其他Web服务器上文件链接服务器
12、上文件链接（六）链接标记（六）链接标记链接标记链接标记属性：属性：href=“指定超级链接指向的目标文件的相对或绝对位置指定超级链接指向的目标文件的相对或绝对位置（URL）name=“给当前文档中的一个位置取名（书签），便于长给当前文档中的一个位置取名（书签），便于长文档的快速定位文档的快速定位target=“指定链接的文档在哪个框架或窗口中显示指定链接的文档在哪个框架或窗口中显示title=“在浏览器中鼠标指向链接时显示的提示文本在浏览器中鼠标指向链接时显示的提示文本（六）链接标记（六）链接标记href属性属性绝对绝对URL包含标识包含标识Internet上的文件所要的全部信上的文件所要的全
13、部信息息 相对相对URL：当前网页为当前网页为web1.htmmywebsub.htmimagesweb1.htmweb2.htmtx.gifsubweba.htm（六）链接标记（六）链接标记name属性属性使用使用name属性可以在一个较长的文档中建立命属性可以在一个较长的文档中建立命名的位置点，相当于书签。位置点的名称称为书名的位置点，相当于书签。位置点的名称称为书签名或锚名。签名或锚名。例如：例如：定义书签：定义书签：使用网络打印机使用网络打印机如果是在同一文档中跳转，则直接用如下链接：如果是在同一文档中跳转，则直接用如下链接：其他网页中链接：其他网页中链接：（六）链接标记（六）链接标记
14、target属性属性target属性设定链接要显示的窗口。可选值属性设定链接要显示的窗口。可选值为：为：target=“_blank”或或 target=“new”打开新的浏览窗口。打开新的浏览窗口。target=“_parent”在父窗口或框架集中打开。在父窗口或框架集中打开。target=“_self”在当前窗口中打开。在当前窗口中打开。target=“_top”将框架中的超链接，显示在没有框架的窗口中。将框架中的超链接，显示在没有框架的窗口中。（六）链接标记（六）链接标记超链接的实现方法超链接的实现方法文本超链接文本超链接Google电子邮件超链接电子邮件超链接有和我们联系有和我们联系图
15、象超链接图象超链接（六）链接标记（六）链接标记超链接分为：超链接分为：同一文件中的链接同一文件中的链接(同一文件不同部分的链接同一文件不同部分的链接)热点热点不同文件间的链接不同文件间的链接 本地机器中文件链接本地机器中文件链接链接到其他文件链接到其他文件热点热点链接到其他文件的某处链接到其他文件的某处热点热点其他其他Web服务器上文件链接服务器上文件链接（七）表格标记（七）表格标记表格标记表格标记 表格声明表格声明 表格标题表格标题 表格行表格行 表格标头表格标头 表格单元格表格单元格表格举例表格举例 功课表功课表 星期一星期一 星期二星期二 星期三星期三 星期四星期四 星期五星期五 数学数
16、学 物理物理 化学化学 英语英语 数学数学 .rowspan和和colspan属性属性合并单元格合并单元格演示实例：演示实例：html-9-4-1.htm 1 4 5 6 7 8 9 11 （八）框架标记（八）框架标记框架布局框架布局框架是一种将浏览器窗口划分为功能独立的框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。多个区域的常用方法。框架集定义框架中每个区域的大小、位置、框架集定义框架中每个区域的大小、位置、名称和初始网页。名称和初始网页。框架集是一种特殊网页，定义整体框架布局，框架集是一种特殊网页，定义整体框架布局，不提供实际内容。每个框架区域的内容由普不提供实际内容。每个框架区域的内容由普通网页提供。通网页提供。一个框架区域中的超链接指向的网页可以显一个框架区域中的超链接指向的网页可以显示在另一个框架区域中示在另一个框架区域中。此网页使用了框架，但您的浏览器不支持框架。此网页使用了框架，但您的浏览器不支持框架。（九）表单标记（九）表单标记表单表单用于实现网页浏览器与服务器之间信息交互用于实现网页浏览器与服务器之间信息交互的一种页面元素。的一种页面元素。常用的表单元素有
