实验一 网页设计

实验一网页设计一、实验目的熟悉超文本描述语言HTML。熟悉常用网页标记，并能熟练掌握。二、超文本描述语言HTMLHTML文件一般由三部分组成：标记单一标记（hr）成对标记(html…/html)文字、图像等资料提供给浏览者查看的内容。统一资源定位器URL三、标记使被标记的内容产生所需的各种效果。格式标记属性1=属性值1属性2=属性值2…受标记影响的内容/标记注意大小写没有限制；对同一段内容可以用多个标记共同作用；不是所有标记均有属性（换行标记就没有属性）；标记、属性的顺序没有特别要求。四、常用标记一个简单的实例HTMLHEADTITLE一个简单的HTML示例/TITLE/HEADBODYCENTERH3欢迎光临我的主页/H3/BODY/HTML1、文件结构的格式标记文档标记html……/html文件头标记head……/head文件标题标记title……/title文件主体标记body……/body2、标题文字标记设置不同大小的标题，使文章条理更清晰。格式Hnalign=对齐方式标题文字/Hn注意对齐方式：left、center、right；属性n的取值范围：1——6（1最大，6最小）；标记默认字体为宋体。bodyH1一级标题/H1H2二级标题/H2H4algin=center四级标题/H4/body3、段落标记注释标记!--注释内容--强制换行标记BR强制换段标记P水平线HRalignsizewidthcolornoshade(单标记)对齐粗细长度颜色平面显示bodyH1一级标题/H1新闻BR学习窗口PHRalign=centersize=8width=320(60%)color=red(#CD061F)noshade……………………………………………………/body4、文字标记FONTsize=数字face=字体名color=颜色被设置的文字/FONTbodyfontsize=4face=隶书color=red红色的隶书/fontSize的取值范围是1——7（1最小，7最大）字型设计加粗B…/B斜体I…/I带下划线U…/U标准打印机字体TI…/TI带删除线STRIKE…/STRIKE下标SUB…/SUB上标SUP…/SUP大字体文本BIG…/BIG小字体文本SMALL…/SMALL5、超级链接锚点标记格式Ahref=“地址”name=“字符串”target=“打开窗口方式”热点/A注意地址：目标资源的有效地址。字符串：当前网页链接时使用的目标有效地址。打开窗口方式：_blank(开新浏览器窗口)_parent(链接内容显示在父框架窗口)_self(链接内容显示在当前窗口)1)、链接到同一目录中的网页文件Ahref=“目标文件名.html”热点文本/AHTMLHEADTITLE一个简单的HTML示例/TITLE/HEADBODYCENTERH3Ahref=ex3.html欢迎光临我的主页/A/H3/BODY/HTML2)、链接到下级目录中的网页Ahref=“子目录名/目标文件名.html”热点文件/AHTMLHEADTITLE一个简单的HTML示例/TITLE/HEADBODYCENTERH3Ahref=“bbb/ex3.html欢迎光临我的主页/A/H3/BODY/HTML3)、链接到上级目录中的网页Ahref=“../目标文件名.html”热点文件/AHTMLHEADTITLE一个简单的HTML示例/TITLE/HEADBODYCENTERH3Ahref=“../ex3.html欢迎光临我的主页/A/H3/BODY/HTML4)、链接到同级目录中的网页Ahref=“../子目录名/目标文件名.html”热点文字/AHTMLHEADTITLE一个简单的HTML示例/TITLE/HEADBODYCENTERH3Ahref=“../ccc/ex3.html欢迎光临我的主页/A/H3/BODY/HTML5)、指向本页中的链接Ahref=“#记号名”热点文字/ABODYH2align=centerfontcolor=blue学生之家/font/H2Ahref=#news新闻/A    Ahref=#study学习窗口/A    Ahref=#health健康信箱/A    Ahref=#talking聊天室/APAname=news/A新闻BR......................................BRBRBRBRAname=study/A学习窗口BR......................................BRBRBRBR/BODY6、图片加入网页中的图片常用格式为GIF和JPEG。设置网页的背景使用BODY标记设计背景。1）设置背景色BODYbgcolor=“颜色值（英文名或十六进制值）”2）以图片作为背景BODYbackground=“路径/图片文件名”HTMLHEADTITLE一个简单的HTML示例/TITLE/HEADBODYbgcolor=“blue”(background=aaa.gif)CENTERH3Ahref=ex3.html欢迎光临我的主页/A/H3/BODY/HTML图片标记使用图片标记，可以把一幅图片加入到网页中。用图片标记可以设置图片的替代文本、尺寸、布局的属性。格式IMGsrc=“路径/图片文件名”alt=“简单说明”width=“图片的宽度”height=“图片的高度”border=“边框宽度”hspace=“水平方向空白”vspace=“垂直方向空白”align=“对齐方式”说明alt属性：在浏览器尚未完全读入图片时，在图片位置显示的文字。宽度/高度：像素值或百分数。HTMLHEADTITLE一个简单的HTML示例/TITLE/HEADBODYH1align=center信息理论与编码教材/H1IMGsrc=book.jpg原始大小IMGsrc=book.jpgwidth=18%height=40%/BODY/HTML设置图片布局需要IMG和CENTER、P等标记一起设置。对齐方式Palign=…IMGsrc=“图片文件名”/P（特殊：CENTERIMGsrc=“图片文件名”）图片与文本间的关系1）图片与文本之间的空白(hspace、vspace)2）align属性top文本与图片的顶部对齐middle文本与图片的中央对齐bottom文本与图片的底部对齐3）文本环绕图片借助align属性进行设置left图片居左，文本在图片的右边right图片居右，文本在图片的左边取消文本环绕BRclear=left或right或all4）图片作为超链接格式：Ahref=“链接的文件名”IMGsrc=“图片文件名”/A7、表格表格标记TABLEborder=nalign=……/TABLE行标记TR(单标记)表项标记TD…/TD标头标记TH…/TH在浏览器中显示时，TH标记的文字按粗体显示，TD标记的文字按正常字体显示。表格标题标记captionalgin=……/captionHTMLHEADTITLE学生成绩表/TITLE/HEADBODYtableborder=3TRTH学号/THTH姓名/THTH数学/THTH英语/THTRTD0001/TDTD张三/TDTD85/TDTD70/TDTRTD0002/TDTD李四/TDTD95/TDTD90/TD/table/BODY/HTML跨多行、多列的表项借助TD、TH标记的colspan和rowspan属性。TDcolspan=n表项/TDTDrowspan=n表项/TDTHcolspan=nrowspan=n表项/TH8、表单使用表单可以在网页中实现交互操作。表单标记FORM…/FORMINPUT(单标记)FORM属性action表单处理方式，一般为网址或E-mail地址methord表单数据的传送方向，get(获得)/post(送出)INPUR属性type指定加入表单项目的类型(text、password、heckbox...)name该表项的控制名，主要在处理表单时起作用。size单行文本区域的宽度。maxlength允许输入的最大字符数目。HTMLHEADTITLE表单实例/TITLE/HEADBODYCENTERH3个人资料/H3/CENTERFORM姓名：INPUTtype=textname=姓名BR密码：INPUTtype=passwordname=密码BRINPUTtype=submitvalue=发送INPUTtype=resetvalue=重置/BODY/HTML复选框和单选框属性名checkbox(复选框)radio(单选框)例：性别：INPUTtype=radioname=“性别”value=“男”checked男INPUTtype=radioname=“性别”value=“女”女BR特长：INPUTtype=checkboxname=“特长”value=“足球”足球INPUTtype=checkboxname=“特长”value=“篮球”篮球9、框架在同一浏览器窗口中显示多个相互隔离的HTML页的结构，每个区域显示一个HTML文件。标记FRAMESET…/FRAMESET、FRAME(单标记)说明所有框架标记需要放在一个总起的HTML文件中，这个文件只记录该框架如何划分，不显示任何资料，所以用FREAMESET标记取代BODY标记。划分出来的每一个框体分别由一个FRAME标记标示，必须在FRAMESET范围中使用。FRAMESET标记属性rows设定横向分割的框架的数目cols设定纵向分割的框架的数目border设定边框的宽度bordercolor设定边框的颜色frameborder设定有/无边框framespacing设置各窗口间的空白FRAME标记属性src表示该框架对应的源文件name制定框架名border设定边框的宽度bordercolor设定边框的颜色frameborder设定有/无边框marginwidth设置框架内容与左右边框的空白marginheight