搜索
12•参考书√[1]赵丰年.网页制作教程（修订本）.人民邮电出版,2003√[2]张红军，刘育楠等.动态网页制作精粹.清华大学出版社[3]陈语林，梁建成等.网页制作与设计教程.中国水利水电出版社，2003[4]席一凡，刘培奇.动态网页设计教程.西安电子科技大学出版.3（一）网页设计基本语言HTML•HTML是网页制作的一种规范，一种标准。几乎所有的网页都是以HTML格式书写的，它通过标记符简单易学、各种标注规格化、平台无关来标记网页的各个部分。可以说，HTML是影响网页内容显示格式的标记符集合，浏览器根据标记符决定网页的实际显示效果。•特点：•典型的标记语言，不受用户平台的限制，将文本、声音、图像、视频、发送邮件等各种网页元素巧妙地连接在一起，且通过超链接实现互访。•优点：•性4HTML文档的基本结构htmlheadtitle文档标题/title/headbodyHTML文档的正文部分/body/html1.所有的标记符都用尖括号括起来2.单向标记符（如br、hr）双向标记符3.基本标记符（一般成对出现）html和/html文档的起止点head和/head首部标记body和/body正文标记4.标记符的属性5.html标记符不区分大小写6.常用标记符文档的起点标记文档的终点标记5标记符的属性•对其作用的内容进行更详细的控制•不区分大小写fontsize=“3”color=“green”本行文字将以4号字体显示/fontreturn6出现在首部标记中的标记符1.title和/title定义网页的标题•htmlheadtitle我的个人主页/title/headbody请看浏览器的标题栏。/body/html例chap2-1.htm72.meta标记符（说明与Web页有关的信息）•常用属性：•name=“”指定特性名，主要用于描述网页•content=“”指定特性值•http-equiv=“”指定HTTP响应名称，常用于替换name属性•如：metaname=“generator”content=“MicrosoftFrontPage5.0”说明编辑工具metaname=“keywords”content=“…”说明网页关键词metaname=“description”content=“…”主页描述metahttp-equiv=“Content-Type”content=“text/html;charset=gb2312”说明所用语言及文字…metahttp-equiv=“Content-Script-Type”content=“text/javascript”设置客户端行内程序的语言为JavaScriptmetahttp-equiv=“Content-Style-Type”content=“text/css”设置行内样式的样式语言为CSS81.自动转到另一页面：htmlheadtitlemeta示例/titlemetahttp-equiv=refreshcontent=10;URL=chap2-1.htm/headbodymeta示例/body/htmlmeta常用功能例chap2-2.htm93.bgsound标记符（指定网页的背景音乐）•bgsoundsrc=“canyon.mid”loop=“1”•src:标记音乐源文件loop：重复次数•背景音乐的文件格式可以是：.wav、.mid或.mp3，多数情况为.mid格式。10body常用属性1.设置页面背景颜色bodybgcolor=“yellow”2.设置页面背景图像(例chap2-2.htm)bodybackground=“背景图案地址”3.设置背景图像水印效果bodybackgroud=“图案地址”bgproperties=“fixed”4.设置文字和超链接的颜色bodytext=“”link=“”vlink=“”alink=“”11颜色名称与十六进制对照表black000000green008000silver(银色)C0C0C0lime(浅绿色)00FF00gray(灰色)808080olive(橄榄色)808000whileFFFFFFyellowFFFF00maroon(栗色)800000navy(藏青色)000080redFF0000blue0000FFpurple(紫色)800080teal(深青色)008080fuchsia(紫红色)FF00FFaqua(水绿色)00FFFF12注释标记符•添加注释是任何程序开发工作必须遵守的规范之一。目的：增强可读性，便于维护。•!--注释部分--或comment被浏览器忽视。•引用块标记符blockquote…/blockquote•指定一组在显示上与众不同的文本（取决于浏览器：文本左右都会缩进，or文本为斜体）•原样显示文本标记（预格式化标记符）•pre（忽略一切空格和回车）13显示特殊字符字母编码代表"“<>&& 不换行空格14•文本格式•文本分段•段落标记符p、换行标记符br、水平线标记符hr•标题标记符h1、h2、…、h6•段落对齐标记符center、div、align属性•控制文本的显示效果•字体控制标记符、特殊样式标记符、滚动文字效果•列表格式•有序列表•无序列表•混和嵌套列表常用标记符1.列表项12.列表项23.列表项3列表项1列表项2列表项31.列表项1•子项1•子项22.列表项2多个br可产生多个空行，但多个p不能；以br换行比用p换行的行距要小。15•图像与超链接•表格与框架•表单与特殊对象16•属性：1）align=left|center|right2）size=“N”：指定水平线的粗细程度，以像素为单位，默认值为23）width=“N”：指定水平线的长度，可以是像素单位，也可以是水平线占浏览器窗口宽度的缩放比，如hrwidth=“80%”4）noshade：指定无阴影的水平线5）color=“…”：指定水平线颜色，如hrcolor=“yellow”size=4水平线标记符hrreturn17•h1…/h1、h2…/h2、…、h6…/h6•h1…/h1字体最大，h6…/h6字体最小•属性：1）align=left|center|right2）dir：指定标题文字的方向•例chap2-3.htmh1align=center此为1级标题/h1h2align=center此为2级标题/h2h3align=center此为3级标题/h3h4align=center此为4级标题/h4h5align=center此为5级标题/h5h6align=center此为6级标题/h6标题标记符18段落对齐设置•使用align属性，其值可为：left|center|right|justify如palign=center本段文字将局中放置/p•div标记符（必须与align等属性联合使用）•用于排版大块的HTML段落。位于div…/div中的多段文本被认为是一节，可为它们设置一致的对齐格式。•center标记符•将需要居中的文本置于center和/center之间•格式嵌套：同一段内容设置多个不同的格式•原则：如果所设置的格式是相容的，则取叠加后的效果；如果是冲突的，则取最近样式符的修饰效果。19div应用举例chap2-5.htmbodydivalign=centerh1浣溪沙h4晏殊hrwidth=400p一曲新词酒一杯，p去年天气旧池台，p夕阳西下几时回？p无可奈何花落去，p似层相识燕归来，p小园香径独徘徊。/div/body20htmlheadtitle格式嵌套练习/title/headbodydivalign=right该行使用了div定义的“右”对齐方式palign=centerbu该行不但对齐方式改变，且格式也独树一帜/u/b/p该行依旧使用div定义的“右”对齐方式/div该行使用了默认的“左”对齐方式/body/html格式嵌套示例chap2-4.htmreturn21字体控制标记符font•常用属性：1)size：字体大小，1～7，默认为3。可用+1、-2等来指定相对于默认字体的位置。如fontsize=4人杰地灵/font或fontsize=-1人杰地灵/font//字体大小为2号2）color：文字颜色，默认为黑色“#000000”，使用颜色名称或RGB的十六进制值。如fontcolor=“red”人杰地灵/font或fontcolor=“#FF0000”人杰地灵/font3）face：字体样式，默认的中文字体为“宋体”，英文字体为“TimesNewRoman”。为确保浏览器能够找到匹配的字体，face中最好指定多个字体。如fontsize=1face=“华文彩云,宋体”color=“Blue”人杰地灵/font22特殊样式标记符标记符范例功能说明BBold/B粗体IItalic/I斜体UUnderLine/U下划线SStrike/S删除字bigBIG/big大写体smallsmall/small小写体HSUB2/SUBO如H2O下标XSUP3/SUP如X上标TTt/TT固定宽度字体（打印机风格的字体）strikeStrike/strike删除字323特殊样式标记符（续）标记符范例功能说明EM强调斜体/EM强调某些字词，常为斜体strong强调粗体/strong强调某些字词，常为粗体DFNDefinition/DFN表示定义了的术语，常为黑体or斜体citeCitation/cite表示文本属性引用，常为斜体codeCode/code表示程序代码文字，常为固定宽度KBDKeyBoard/KBD表示键盘输入文字，常为固定宽度sampsample/samp表示文本样本，常为固定宽度VARVariable/VAR表示变量，常为斜体abbr如HTTP/abbr表示缩写文字24滚动文字标记符marquee•实现Web中文字的滚动效果，让您的网页更具有动态魅力。是HTML语言的高级技术运用元素。•常用属性：•direction指定文字的滚动方向，可取right|left|up|down•behavior指定文字的滚动方式。可取scroll（环绕滚动）、slide（滚动一次）、alternate（来回滚动）。其中，scroll是behavior的默认值。•loop指定文字滚动的循环次数。当loop=-1或loop=infinite时，则表明文字滚动是无限循环。25•scrolldelay文字滚动的间隔时间，单位“毫秒”。•scrollamount文字滚动间的步进像素间距•align滚动文字如何与周围对象对齐。top（对齐上方）、middle（对齐中部）、bottom（对齐下方）三个值。•width和height滚动区域的宽度和高度•bgcolor滚动字幕区的背景颜色•hspace和vspcae滚动字幕四周水平和垂直间距例chap2-6.htm滚动速度26marquee应用举例chap2-6.htmbodydivalign=centerh1春晓h4孟浩然hrmarqueeheight=80width=200di