Web页面制作基础HTML

网站开发基本过程Web页面制作基础1HTML概述2HTML文本设计3加入多媒体与超级链接4制作表格5制作表单6框架结构1HTML概述1.1什么是HTML文件？HTML是（HyperTextMarkupLanguage，超文本标记语言）的缩写HTML指超文本标签语言。HTML文件是包含一些标签的文本文件。这些标签告诉WEB浏览器如何显示页面。HTML文件必须使用htm或者html作为文件扩展名。HTML文件可以通过简单的文本编辑器来创建。1HTML概述1.2HTML文档的结构包括HEAD、TITLE、BODY三部分，下面是基本结构：htmlhead标题部分/headbody正文部分/body/html1HTML概述1.3HTML标记1．HTML文档标记格式：HTML…/HTML标志文件开始和结尾的标记。2．HTML文件头标记格式：HEAD…/HEAD用于包含文件的基本信息。3．HTML文件主体标记格式：BODY…/BODY文件主体标记。注意：HEAD与BODY为独立的两个部分，不能互相嵌套。1HTML概述大写标签，还是小写的标签？.HTM还是.HTML扩展名？1HTML概述1.4常用HTML编辑工具使用记事本等编辑器在保存文档或者更改文件名时，把文件的扩展名设为.htm或者.html即可，那么这个文件就是一个HTML文档。为了使设计网页更加的方便，很多公司设计了专用的网页编辑器，像Dreamweaver、FrontPage等，是专门用来制作网页的，具有所见即所得的功能。2HTML文本设计2.1设置BODY的属性BODY属性概述：Background设置网页的背景图片bgcolor设置网页的背景颜色Bgproperties设置背景是否随滚动条滚动(fixed)link设置尚未被访问过的超文本链接的颜色vlink已被访问过的超文本链接的颜色2HTML文本设计2.1设置BODY的属性BODY属性概述：Alink设置超文本链接在被单击的瞬间的颜色Leftmargin设置网页左边的空白Topmargin设置网页上方的空白Margingwidth设置网页空白的宽度Marginheight设置网页空白的高度2HTML文本设计2.2段落格式化1.标题标记格式：h1…/h1，h2…/h2…h6…/h6设置各种大小不同标题的标记。2．段落标记格式：p…/p设置段落标记。3．预定格式标记格式：pre…/pre在浏览器中浏览时，按照文档中预先排好的形式显示内容。2HTML文本设计4．分区显示标记格式：div…/div分区显示标记。5．词标记格式：br功能：空白标签,强制换行。格式：hr功能：插入水平线标记。6．注释标记格式：!--注释内容--注释标记。对HTML元素的重新认识每个HTML元素都有一个元素名（比如body、h1、p、br）开始标签是被括号包围的元素名结束标签是被括号包围的斜杠和元素名元素内容位于开始标签和结束标签之间某些HTML元素没有内容某些HTML元素没有结束标签2HTML文本设计2.3建立列表在网页中经常使用的列表分为：有序列表和无序列表。由带有序号标志（如数字、字母等）的表项组成有序列表。否则就为无序列表。1.有序列表格式：oltype=符号类型litype=”符号类型”…/lilitype=”符号类型”…/li…/ol功能：建立有序列表。2HTML文本设计2.无序列表格式：ULtype=”符号类型”LItype=”符号类型”…/LILItype=”符号类型”…/LI…/UL功能：建立无序列表。Type的值：disc、circle、square2HTML文本设计2.4字符格式化1．字体设置标记格式：FONT…/FONT功能：设置字体格式标记。size=size：设置文字的大小，默认的数值为3。face=fontstyle：设置字体，如宋体、黑体、隶书等。color=colorvalue：设置文字的颜色。2HTML文本设计2．其他标记其他标记格式功能U…/U给字符加下划线S…/S给字符上加删除线B…/B给字符加粗I…/I将字符设置成斜体BLINK…/BLINK标记使得其中的文字产生闪烁的效果3加入多媒体与超级链接3.1加入图像、视频、动画格式：IMG/空标签功能：在网页中加入图像、视频、动画等。1．插入图像图像在网页设计中是必不可少的，所以用户应掌握在网页中操作图像的方法。3加入多媒体与超级链接标记属性功能src=URL通过URL给出图像来源的位置，不可缺省width=size设置图像宽度height=size设置图像高度alt=txt设置在图像未载入前图片位置显示的文字border=size设置图像边框，缺省为0align=alignstyle设置对齐方式。取值为：top，middle，bottom，aleft，righthspace=size设置图片左右边沿空白vspace=size设置图片上下边沿空白3加入多媒体与超级链接2．插入视频使用IMG插入视频或动画时，含有的属性如下表：标记属性功能dynsrc=URL设置多媒体来源位置loop=size设置视频播放的次数loopdelay=time设置两次播放的间隔时间start=value指定何时开始播放视频文件3加入多媒体与超级链接3.2加入超级链接格式：A…/A功能：在当前页和其他内容间建立超链接。标记属性功能href=URL给定链接目标的位置target=frametarget设置显示链接目标的框架4制作表格4.1建立表格TABLECAPTION…/CAPTIONTRTH…/THTH…/THTH…/TH/TRTRTD…/TDTD…/TDTD…/TD/TR…/TABLE4制作表格4.1建立表格创建表格是规划页面最常用的方法。格式：TABLE…/TABLE功能：创建表格进行页面设计。在浏览器中显示时，表格的整体外观由TABLE标记的属性决定。4制作表格标记属性功能border=size设置表格边框大小width=size设置表格的宽度height=size设置表格的高度cellspacing=size设置单元格间距cellpadding=size设置单元格的填充距background=URL设置表格背景图片bgcolor=colorvalue设置表格背景色align=alignstyle设置对齐方式cols=size设置表格的列数4制作表格4.2定制表格TABLE只是空表格，还需要定义行和单元格。格式：TR…/TR功能：定义表格的一行。标记属性功能bg=colorvalue设置行背景颜色align=alignstyle设置行对齐方式left,center,rightvalign=valignstyle设置单元格垂直对齐方式top,middle,bottom4制作表格4.2定制表格格式：TD…/TD功能：定义表格中的单元格。标记属性功能bg=colorvalue设置单元格背景颜色align=alignstyle设置对齐方式valign=valignstyle设置单元格垂直对齐方式rowspan=num设置单元格所占的行数colspan=num设置单元格所占的列数width=size设置单元格宽度height=size设置单元格高度4制作表格4.2定制表格格式：CAPTION…/CAPTION功能：定义表格标题，显示在表格上方。5制作表单5.1表单的结构格式：FORM…/FORM定义表单。标记属性功能action=URL设置处理表单的程序method=postmethod设置发送表单的HTTP方法enctype=contenttype设置发送表单的内容属性onsubmit=script设置被发送事件target=frametarget设置显示表单内容的窗口accept-charset=cdata设置可支持的字符列表5制作表单5.2FORM中常用的标记1．输入域（1）单行输入域INPUT属性说明Text文字域Password密码域File文件域Checkbox复选框Radio单选框Button普通按钮Submit提交按钮Reset重置按钮Hidden隐藏域Image图像域(图像提交按钮)5制作表单（2）多行输入域标记textarea标记属性功能name=cdata设置FORM提交的输入信息的名称rows=num设置文本域的行数cols=num设置文本域的列数5制作表单2．按钮格式：BUTTON…/BOTTON功能：定义按钮。标记属性功能name=cdata设置已发送表单的关键字。value=cdata设置已发送表单的值。type=buttontype设置按钮的类型。5制作表单3．选择域格式：SELECTOPTION选项一OPTION选项二…/SELECT功能：定义选择栏。6框架结构2.6.1框架结构的文件格式htmlhead…/head注意：在老版本的浏览器frameset可能不支持框架结构。frameset…frame…/frameset/HTML在文档中若使用了frameset,就不应该有body标记6框架结构2.6.2框架结构标记的使用格式：FRAMESET…/FRAMESET标记属性功能rows=size设置多重框架的高度cols=size设置多重框架的宽度onload=script设置框架被载入的事件onunload=script设置框架被卸载的事件6框架结构2.6.3FRAME标记标记属性功能src=URL设置要链接到的HTML文件name=framename表示子窗口的名字marginwidth=size用来控制显示内容和窗口左右边界的距离，默认为1marginheight=size用来控制显示内容和窗口上下边界的距离，默认为1scrolling=scrollingstyle指定子窗口是否使用滚动条，有YES/NO/AUTO三个值，默认AUTO，根据窗口内容决定是否有滚动条noresize使用该属性后，指定窗口不能调整窗口大小6框架结构TARGET属性三种常见的用法：1．用于A标记AHREF=“…”TARGET=“WINDOW_NAME”2．用于BASE标记BASETARGET=“WINDOW_NAME”3．用于FORM标记FROMACTION=“…”TARGET=“WINDOW_NAME”7动态标记marquee.../marquee方向direction=##=left,rightmarqueedirection=left啦啦啦，我从右向左移！/marqueePmarqueedirection=right啦啦啦，我从左向右移！/marquee