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