人机交互与界面设计_第3章new

《人机交互与界面设计》第3章HTML2020/3/11《人机交互与界面设计》内容3.1HTML文档结构3.2HTML基本标记3.3表格3.4表单3.5框架2020/3/12《人机交互与界面设计》3超文本标记语言HTML•超文本标记语言HTML（HypertextMarkupLanguage）是在万维网上建立超文本文件的语言，它是万维网的核心计算机语言。•创建Web站点页面时，可使用HTML语言向组成Web站点的各个Web页面放置文本、图形、图像、动画、音频、视频信息等内容，以及按钮和超链接等可以进行交互的内容。•HTML是一种文本标记语言，而非编程语言。HTML文件是普通文本文件，与平台无关，可用任何文本编辑器进行编辑，文件扩展名为.htm或.html。2020/3/13《人机交互与界面设计》3超文本标记语言HTML3.1HTML文档结构•该网页以表格作为页面的总布局方式•页面设计中使用了常用的HTML标记•包括：表格、表单、文字显示控制、加入图片、超链接、水平线、换行、分段、设置页面背景图片等。【例3-1】“《人机交互与界面设计》课程网站”主页面。2020/3/14《人机交互与界面设计》3超文本标记语言HTML3.1HTML文档结构【例3-1】“《人机交互与界面设计》课程网站”主页面。•HTML文档是一个文本文件。•HTML文档中包含HTML标记和属性形式的指令，标记用一对中间包含若干字符表示，通常成对出现，部分标记非成对出现。•标记如：html……/htmlbr/。属性如：width=120•HTML标记大小写不敏感。推荐使用小写，并始终为属性值加引号。•标记名告诉浏览器标记的用途，属性名为浏览器提供执行标记命令所需的附加信息。•例如：fontsize=7color=redface=隶书《人机交互与界面设计》课程网站/font•HTML属性总是以名称/值对的形式出现。属性总是在HTML元素的开始标签中规定。2020/3/15《人机交互与界面设计》3超文本标记语言HTML3.1HTML文档结构•HTML文档的基本构成：htmlhead文档头部分/headbody文档的主体部分/body/html62020/3/1《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记•基本的HTML标记分为：1）头部标记2）体部标记2020/3/17《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记1）头部标记•head，/headHTML文件头部起始和结束标记。•title，/titleHTML文件的标题，是显示于浏览器标题栏的字符串。•style，/styleCSS样式定义。•meta该标记位于head与title标记之间，提供用户不可见的信息。其中，meta属性通常用来为搜索引擎定义页面主题以及页面刷新等信息。2020/3/18《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记1）头部标记•meta的三种主要属性•name属性：meta名字，描述网页，与content属性配合使用。•http-equiv属性：说明content属性内容的类别。•content属性：定义页面内容，一些特殊内容要与http-equiv属性配合使用。2020/3/19《人机交互与界面设计》2超文本标记语言HTML3.2HTML基本标记1）头部标记•name与content属性配合使用的部分含义：•name=keywords：content为搜索引擎提供的关键字列表。•name=description：content为页面的描述信息，字数不多于150。•name=author：content为作者信息。•name=copyright：content为版权信息。2020/3/110《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记1）头部标记•http-equiv与content属性配合使用的部分含义：•http-equiv=content-type：content为页面使用的字符集。•http-equiv=content-language：content为页面语言。•http-equiv=refresh：content为页面刷新的时间以及跳转的网址。•http-equiv=expires：content为网页在缓存中过期的时间。一旦网页过期，就必须重新下载。2020/3/111《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记1）头部标记•例子：•metaname=keywordscontent=news,flood//设定关键词为news，flood•metaname=descriptioncontent=洪涝灾害新闻//设定网页描述为“洪涝灾害新闻”•metahttp-equiv=content-typecontent=text/html;charset=gb2312//设定网页使用的字符集为GB2312（汉字国标码）2020/3/112《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记1）头部标记•例子：•metahttp-equiv=content-languagecontent=zh-CN//设定网页使用的语言•metahttp-equiv=expirescontent=Aug,30,201000:00:00GMT//设定网页过期的日期为2010-8-302020/3/113《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记2）体部标记•基本的体部标记包括：–body–文字显示和段落控制标记–设置图像和超链接–列表和预定义格式标记等2020/3/114《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记（1）body和/body标记表明HTML文件体部的开始和结束，body标记属性及含义：属性名取值含义默认值bgcolor颜色值页面背景颜色#fffffftext颜色值文字的颜色#000000link颜色值待链接的超链接对象的颜色alink颜色值链接中的活动超链对象的颜色。当链接被点击时，链接处于活动状态vlink颜色值已链接的超链接对象的颜色background图像文件名页面的背景图像无topmargin整数页面显示区距窗口上边框的距离，以像素点为单位0leftmargin整数页面显示区距窗口左边框的距离，以像素点为单位02020/3/115《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记HTML中两种颜色值的表示方法：①RGB值表示。用颜色的十六进制RGB值表示，形如#rrggbb。如#ff0000，表示红色，#0000ff表示蓝色。②英文单词表示。如red表示红色，blue表示蓝色。2020/3/116《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记（2）文字显示和段落控制标记文字显示属性主要有字体、字号、颜色，段落控制显示对象的分段。常用的文字显示和段落控制标记如下：标记名含义font,/font以属性face、size、color控制字体、字号、字颜色的显示特性（HTML5中已取消）i,/i斜体b,/b粗体u,/u加下划线sub,/sub下标sup,/sup上标big/big大字体2020/3/117行内元素《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记（2）文字显示和段落控制标记文字显示属性主要有字体、字号、颜色，段落控制显示对象的分段。常用的文字显示和段落控制标记如下：标记名含义small,/small小字体h1—h6标题格式，数字越大，显示的标题字越小。（为成对标记）p,/p分段标记，属性有align：left—左对齐；center—居中对齐；right—右对齐div,/div块容器标记，其中的内容是一个独立段落hr/分隔线，属性有：width（线的宽度）、color（线的颜色）center,/center居中显示（HTML5中已取消）br/强制换行标记，为非成对标记2020/3/118《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记（2）文字显示和段落控制标记转义序列：• ；空格•<小于（）•>大于（）•&与号（&）•"双引号（）•例：如果显示ab，在HTML文件中应书写为：a<b2020/3/119《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记【例3-2】一个包含文字显示和段落控制标记的HTML文件示例。bodytext=#ff2222centerh1一级标题/h1/centerhrwidth=90%color=greenfontface=黑体size=7color=#0000ff这是黑体，大小为7号字，蓝色/fontbr/p这是一个段落br/i这是斜体/ib这是粗体/bu这是下划线字体/ubig这是大字体/bigsmall这是小字体/small这是下标字体sub1/sub这是上标字体sup2/supbr/fontface=宋体size=6color=#cc8888ibu这些标记还可以混合使用/u/b/i/font/pp这是另一个段落br/    以下是转义序列:<小于号；>大于号；&与号；"双引号；例如:a>b/p/body2020/3/120《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记（3）图像标记以下几种图像格式可以被浏览器解释：GIF格式（.gif文件）、X位图格式（.xbm文件）、JPEG格式（.jpg、.jpeg文件）和PNG格式（PortableNetworkGraphics）2020/3/121《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记（3）图像标记（img）img标记的属性包括：①src——指明图像文件的地址。该属性值必须指明。值可以是一个本地文件名或一个URL形式，如。②border——指明图像边框的粗细，值为整数。若为0，表示无边框；值越大，边框越粗。③width——图像宽度，值为整数，单位为屏幕像素点数。若不指出该属性值，则浏览器默认按图像的实际尺寸显示。④height——图像高度，值为整数，单位为屏幕像素点数。若不指出该属性值，则浏览器默认按图像的实际尺寸显示。⑤alt——若设置了该属性值，则当鼠标移至该图像区域时，将以一个小标签显示该属性值。此外，若图像无法显示时，则使用该属性值代替。2020/3/122《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记（3）图像标记（img）2020/3/123【例3-3】图像标记示例htmlheadtitle图像标记例子/title/headbodytext=redbgcolor=#ffccaacenterh1美景赏析/h1imgsrc=3.jpgheight=500weight=500alt=桃源仙谷美景/center/body/html《人机交互与界面设计》3超文本标记语言HTML3.2HTML基本标记（4）超链接标记（a.../a）•一个超链接可指向另一个Web页，它由两部分组成：本页面中可被触发的超链接文本或图像；超链接被触发后要链接到的URL信息。•超链接标记的格式如下：ahref=U