实验十四HTML页面的分析与设计

实验十四HTML页面的分析与设计（8学时）【目的】掌握静态HTML页面的分析方法，了解HTML语言的特点，掌握HTML语言的基本结构，学会简单HTML页面的编写。【考核要求】掌握HTML语言的基本内容，熟练使用常用标签（标题、段落、文字格式、背景图片、超链接等），每位同学需独立完成一个HTML网页作品。【内容】1、了解HTML语言的基本结构（1）HTML/HTML：此对标签用于标记一个页面的开始和结束。（2）HEAD/HEAD：此对标签用于标记头部，主要用于对页面中使用的字符集、脚本语言、页面的标题、背景音乐、样式表单等进行说明和设置。此标签内还可以嵌套TITLE/TITLE标签，用于显示网页标题。（3）BODY/BODY：此对标签用于标记一个页面输出显示的开始和结束。该标签内包含Web页面的具体内容（文字、图形、图像、超链接等各种HTML对象）。（4）举例代码：HTMLHEADTITLE我的第一个Web页面/TITLE/HEADBODY这是一个说明网页基本构成的HTML文档./BODY/HTML页面效果：2、掌握文字风格设置（1）字体标记FONT是一个带有属性的标记，通过其属性可以设置文本的字体、字号和颜色等。标记格式：FONTFACE=字体SIZE=字号COLOR=颜色值……/FONT说明：①字体默认为宋体。②字号可以取1到7之间的值，1号字最小，7号字最大，默认值为3。③颜色值可以是以#号开头的6位十六进制值，也可是HTML预定义的色彩名。④代码举例：HTMLHEADTITLEFONT标记示例/TITLE/HEADBODYFONT系统默认(3号黑色宋体,缺省FACE、SIZE和COLOR属性时)/FONTFONTSIZE=1COLOR=red1号红色宋体字/FONTFONTFACE=隶书SIZE=2COLOR=#00ff002号绿色隶书字/FONTFONTFACE=楷体_GB2312SIZE=3COLOR=#0000ff3号蓝色楷字/FONTFONTFACE=黑体SIZE=+1COLOR=#ffff004号黄色黑体字/FONTFONTFACE=华文行楷SIZE=+25号黑色行楷/FONTFONTFACE=华文彩云SIZE=6COLOR=#8080006号橄榄色彩云字/FONTFONTFACE=幼圆SIZE=7COLOR=gray7号灰色幼圆字/FONT/BODY/HTML页面效果：（2）标题字标记标记格式：HiALIGN=对齐方式……/Hi说明：①i=1，2，…，6。即标题字共分6级，分别用H1至H6表示，H1标记的字最大，H6标记的字最小。②ALIGN属性的对齐方式可以是left(左对齐)、center(居中对齐)、right(右对齐)、justify(两端对齐)四种中的某一种。③代码举例：HTMLHEADTITLE标题字标记示例/TITLE/HEADBODYH1ALIGN=leftH1号字/H1H3ALIGN=centerH3号字/H3H5ALIGN=rightH5号字/H5/BODY/HTML页面效果：（3）文字辅助变化标记B/B：文字加粗I/I：文字倾斜U/U：文字下划线SUB/SUB：标记字下错半行SUP/SUP：标记字上错半行代码举例：HTMLHEADTITLE文字变化标记示例/TITLE/HEADBODYFONTSIZE=4BB标记使字加粗/BII标记使字倾斜/IUU标记在字下加线/USUBSUB标记使字下错半行/SUBSUPSUP标记使字上错半行/SUP/FONT/BODY/HTML页面效果：（4）划线标记标记格式：HRSIZE=线条粗细WIDTH=线条长度COLOR=线条颜色说明：①该标记的作用是画一条水平线，线的粗细和长度通过SIZE和WIDTH的值来设置。②SIZE和WIDTH的取值是一个整数，单位可以是px(像素)、pt(磅)、cm(厘米)。③代码举例：HTMLHEADTITLE文字变化标记示例/TITLE/HEADBODYH2ALIGN=center文字的变化1HRSIZE=2WIDTH=140COLOR=Blue/H2H4ALIGN=left文字的变化2HRSIZE=5WIDTH=260COLOR=Red/H4/BODY/HTML页面效果：（5）特殊字符标记3、掌握段落控制标记方法（1）换行标记BR，单边标记，不成对出现。（2）段落标记标记格式：PALIGN=对齐方式……/P说明：①P和/P就嵌套在BODY与/BODY之间。②段落标记不仅具有换行的作用，而且还要在新行前面插入一个空行。③代码举例：HTMLHEADTITLE段落标记与属性/TITLE/HEADBODYfontsize=10静夜思李白/frontBRPALIGN=center床前明月光/PPALIGN=center疑是地上霜/PPALIGN=center举头望明月/PPALIGN=center低头思故乡/P/BODY/HTML页面效果：（3）块标记1DIV块标记格式：DIVALIGN=对齐方式STYLE=CSS样式……/DIV说明：①将位于该标记间的文本作为一节，从而使本节的文本使用一致的格式。②该标记中的ALIGN属性是个可选属性，用于确定DIV标记块中的文字对齐方式。2SPAN块标记。格式：SPANSTYLE=CSS样式……/SPAN说明：SPAN中的样式只作用到有文字的部分。3代码举例：HTMLHEADTITLESPAN和DIV标记/TITLE/HEADBODYspanstyle=BACKGROUND:#f0f000学有所成/spanDIVstyle=BACKGROUND:red学有所成/DIV/BODY/HTML页面效果：4、掌握超链接标记（1）A标记标记格式：AHREF=文件名或URLTARGET=目标窗口链接文本/A说明：①HREF属性用来指明所要链接文件的路径、名称或网络地址。②TARGET属性用来指出打开被链接网页的窗口。③代码举例：HTMLHEADTITLE超级链接示例/TITLE/HEADBODYPAHREF=点击这里转到中国教育科研网/ABR/PPAHREF=..\picture\约塞米蒂山谷.jpg点击这里在当前窗口显示图片/ABRAHREF=..\picture\mickey.gifTARGET=_blank点击这里在另一窗口显示图片/A/PPAHREF=..\music\csc40gz.avi点击这里看视频/A/PPAHREF=..\music\美人鱼.mp3点击这里在当前窗口听MP3音乐/ABR/PANAME=产品H2本网站提供的产品/H2DIVALIGN=center电视机BR电冰箱BR手  机BR计算机BR软  件BR汽  车BR还有许多/DIV/A/BODY/HTML页面效果：（2）图片链接标记格式：IMGSRC=URLALIGN=对齐方式WIDTH=xHEIGHT=yALT=信息说明：①SRC属性指明资源文件的路径和名称或URL。②ALIGN属性用来指明紧接在图像后面的文字的排列方式。③代码举例：HTMLHEADTITLEIMG标记示例/TITLE/HEADBODYIMGSRC=..\Picture\鹳雀楼.jpgALIGN=middleWIDTH=120HEIGHT=140ALT=鹳雀楼/IMG用IMG标记链接图片!BR注意ALIGN属性和ALT属性/BODY/HTML页面效果：（3）BODY标记的常用属性5、掌握表格标记方法（1）标记方法表格定义标记：TABLE……/TABLE表行定义标记：TR……/TR表头单元格定义标记：TH……/TH单元格定义标记：TD……/TD（2）代码举例：HTMLHEADTITLE表格示例/TITLE/HEADBODYTABLETRTH序号/THTH产品名称/THTH生产厂/THTH单价/TH/TRTRTD1/TDTD电视机/TDTDTCL/TDTD2800元/TD/TRTRTD2/TDTD电冰箱/TDTD美的/TDTD3600元/TD/TR/TABLE/BODY/HTML页面效果：（3）表格常用属性代码举例：HTMLHEADTITLE表格示例/TITLE/HEADBODYTABLEBORDER=1BORDERCOLOR=RedCELLSPACING=2TRTH序号/THTH产品名称/THTH生产厂/THTH单价/TH/TRTRTD1/TDTD电视机/TDTDTCL/TDTD2800元/TD/TRTRTD2/TDTD电冰箱/TDTD美的/TDTD3600元/TD/TR/TABLE/BODY/HTML网页效果：（4）单元格常用属性6、掌握表单标记（1）表单标记格式：FORMACTION=数据送往的地址METHOD=数据传送方式表单输入元素/FORM（2）INPUT标记格式：INPUTTYPE=控件类型NAME=数据对象名称……说明：①控件类型可以是文本框、口令、复选框、单选按钮、图像、提交按钮、重置按钮等。②代码举例：HTMLHEADTITLE表单设计示例1/TITLE/HEADBODY为了让我们更好地为您服务，请填写下面的表单BRFORMACTION=server1.jspMETHOD=POST请输入您的姓名：INPUTTYPE=textNAME=姓名BR请输入您的密码：INPUTTYPE=passwordNAME=密码P您的性别：BR男INPUTTYPE=radioNAME=性别  女INPUTTYPE=radioNAME=性别checked  保密INPUTTYPE=radioNAME=性别/PP请选择您喜欢的水果：BRINPUTTYPE=checkboxNAME=水果checked苹果  INPUTTYPE=checkboxNAME=水果橘子  INPUTTYPE=checkboxNAME=水果香蕉BRINPUTTYPE=checkboxNAME=水果checked桃子  INPUTTYPE=checkboxNAME=水果李子  INPUTTYPE=checkboxNAME=水果杏子/PPALIGN=centerINPUTTYPE=submitVALUE=提交INPUTTYPE=resetVALUE=重填/P/FORM/BODY