网页设计 Dreamweaver教案第三章

第三章HTML语言本章要点HTML结构文本格式标记超链接标记表格标记表单标记HTML文件是标记的ASCII文件，它是由标记元素,字母和文字组成的纯文本文件.它可以用任何一种文字编辑器编辑,如记事本,写字板和Word等，并以扩展名为.htm,.html的文件形式存储。HTML标记一般用一对尖括号””括起来，以示区别.可以使用HTML语言直接编写网页文件并在浏览器中浏览。使用任何网页编辑软件制作网页文件,都以HTML文件的形式存储.任何一种网页制作软件都有它的优点和特色,也会存在不足之处,可以使用HTML语言来进行修改和完善.3.1HTML文件结构HTML的标记元素有下列三种表示方法:元素名元素名文件或超文本/元素名元素名属性名=“属性值”…文本或超文本/元素名如:p分段标记HLalign=“center”标题标记hlFONTSize=16color=“red”字体标记/FONT3.1.1HTML文件结构下面是一个简单的网页的HTML文件的结构htmlheadtitle一个简单的网页/title/headbodypalign=“center”我的个人网页/p/body/htmlhtml---HTML文件开始标记head---文件头开始标记,文件头/head---文件头结束标记body---文件体开始标记,文件体,HTML文件的正文写在这里/body---文件体结束标记/html---HTML文件结束标记3.1.2标题标记TITLE/TITLETITLE元素是文件头中唯一一个必须出现的元素,它也只能出现在文件头中。格式:Title文件题目/Title功能:设置在浏览器标题栏中显示的文件标题例:headTitle我的个人主页/Title/head说明:在浏览器标题栏中显示”我的个人主页”.3.1.3主体标记body/body格式:body[text|link|alink|vlink|background|bgcolor]页面元素/body功能:设置文字色彩和链接对象色彩，设置页面的背景色彩和图象(见chap3_1.htm).说明:Bgcolor---背景色彩Background---背景图象Text---可链接文字Link---可链接文字的色彩Alink---正被单击的可链接文字的色彩Vlink---已经点击过的可链接文字的色彩#=rrggbb色彩是用十六进制的红-绿-蓝值来表示.十六进制的数码有:0.1.2..3.4.5.6.7.8.9.A.B.C.D.E.F设置背景图象的格式:bodybackground=“image-url”其中“image-url”是背景图象的文件地址.例如:bodybackground=“back-ground.gif”text=“#00ff00”body背景用图片平铺,文字用黄色显示例如:bodybgcolor=ff0000大红背景色3.2文本格式标记3.2.1标题字体标记hn/hn(见chap3_2.htm)功能:标题元素有六种,分别为h1,h2….h6,用于表示文章中的各种题目。标题号越小,字体越大.一般情况下,一律黑体.说明:hn可以有对齐属性;align=#,#分别表示left标题居左,center标题居中,right标题居右.hn---/hn这些标记显示黑体字.hn---/hn这些标记自动插入一个空行,不必用p标记再加空行.因此在一行中无法使用不同大小的字体.例如:h2align=center手机价格表/h23.2.2字体大小标记font/font格式:fontsize=#1color=#2.../font#1=1,2,3,4,5,6,7or+#,-#功能:设置字体的大小和颜色(见chap3_3.htm)说明:HTML有7种字号,1号最小，7号最大,默认字号为3.字体颜色:字体颜色用fontcolor=#指定#可以是6位十六进制数,分别指定红，绿，蓝的值,也可以是以上16种颜色之一.例如:fontsize=5今天天气真好!/font3.2.3字体风格标记biu格式:b/bi/iu/u功能:设置字体的风格(见chap3_4.htm).说明:b---黑体,i---斜体,u---下划线例如:b今天天气真好!/bi今天天气真好!/iu今天天气真好!/u3.2.4段落标记p/p与换行标记br1.段落标记p格式:palign=left|center|right功能:换行并空一行(见chap3_5.htm)2.换行标记br格式:bralign=left|center|right功能:仅换行不空行3.2.5列表标记(list)列表用于列举事实,常用的列表有两种格式,即无序列表,有序列表.1.无序列表(ul)格式:ul,li…/ul功能:创建一个无序的列表(见chap3_6.htm).说明:无序列表用ul开始，每一个列表条目用li引导,最后是/ul,注意列表条目不需要结尾链接签/li.输出时每一列表条目缩进,并且以黑点标示.例如:ullitodaylitomorrow/ul2.有序列表ol格式:ol,li…/ol功能:创建一个有序的列表(见chap3_7.htm).说明:和无序列表相比,只是在输出列表条目用数字标示,下面是一个例子及其输出.例如:ollitodaylitomorrow/ol3.2.6水平线标记hr和分行标记br1.水平线标记hr格式:hrsize=#width=#color=#align=#功能:插入一条水平线(见chap3_8.htm).说明:size=#width=#color=#align=#,#代表的数值分别表示水平线的宽度，长度，颜色和对齐方式;width=#代表水平线的长宽,可以指定绝对线长(单位像素),也可以指定横线长度占窗口宽度的百分比.例如:hrwidth=50,hrwidth=50%color=#-------水平线的颜色align=#-------水平线的位置.例如:palign=“center”插入红色的水平线,线长占80%,线宽为8个像素点.hrwidth=“80%”size=8color=red2.分行标记br格式:br功能:br表示在此处分行.3.禁止分行标记nobr格式:nobr……/nobr功能:禁止分行，其中的内容在一行内显示不了，则超出部分被裁掉.3.2.7转义字符与特殊字符HTML中、和&有特殊含义,(前两个字符用于标记符,&用于转义),不能直接使用。使用这3个字符时,应使用它们的转义序列.&的转义序列为&s或&的转义序列为<<的转义序列为>>前者为字符转义序列,后者为数字转义序列。例如<font>显示为font若直接写为font则被认为是一个链接签.3.3图象标记image3.3.1图象的基本格式格式:imgsrc=“image-url”imgsrc=“image-urd”alt=“text”功能:插入图象(见chap3_9.htm).说明:image-url是图象文件的url,alt属性表示当鼠标指向图形在图象位置显示的文字.例如:imgsrc=“star.jpg”alt=“这里是三星手机图象”width=“115”height=“240”格式:imgalign=##=top,middle,bottom功能:设置图象与文本的对齐方式说明:图象在窗口中会占据一块空间,在图象的左右可能会有空白,不加说明时,浏览器将随后的文本显示在这些空白中，显示的位置由align属性指定.用align=left,right时,图象是一个浮动图象，比如align=left,图象必须挨着左边框,它把原来占据该块空白的文本”挤走”,或挤到右边，或挤到它上下.例如:imgsrc=urlalign=topMyface!imgsrc=urlalign=middleMyface!imgsrc=urlalign=bottomMyface!3.3.2图象与文本的间距格式:imgsrc=urlalign=#vspace=#hspace=#功能:设置图象与文本之间的间距说明:文本与图象的间距用vspace=#hspace=#,#用整数表示，单位是像素,前者指定纵向间距,后者指向横向间距.例如:imgsrc=urlalign=leftvspace=10hspace=20Myface!brItisalwaysbrSmilingbrHahaha…br3.3.3图象的边框格式:imgborder=#功能:设置图象的边框线的粗细说明:当#=0时无边框例如:imgsr=urlborder=153.4超链接标记a/a一个超文本链接标记由两部分组成.一部分是被指向的目标，它可以是同一文件的另一部分,也可以是世界另一端的一个文件,还可以是动画或音乐;另一部分是指向目标的链接指针.3.4.1链接指针1.字符串作为链接指针格式:ahref=“url”字符串/a(见chap3_10.htm).功能:在HTML文件中用链接指针指向一个目标说明:href属性中的统一资源定位器url是被指向的目标,随后的”字符串”在HTML文件中充当指针的角色,它一般显示为兰色.当读者用鼠标点这个字符串时,浏览器就会将url处的资源显示在屏幕上.例如:ahref=“”网易/a2.图象链接指针(见chap3_11.htm)格式:ahref=“url”imgsrc=“url”/a功能:图象也可以作为链接指针说明:”imgsrc=“url”是图象元素,它表明显示url代表的图象文件.上例中用imgsrc=“url”取代了链接指针中的text位置.例如:ahref=“”搜狐imgsrc=“1.jpg”3.4.2被指向的目标(1)链接到本机另一个页面ahref=“f:/asp/filename.htm”链接到另一页面/a(2)链接到另一台机器的web页面ahref=“”搜狐/a(3)链接到同一页面的另一段落,方法如下:必须先做一个”锚”标记:aname=“第一章”第一章/a再做链接:ahref=#”第一章”从这里可以链接到第一章处(4)链接到不同文件的另一段落,方法如下:必须先做一个”锚”标记:aname=“第一章”第一章/a再做链接:ahref=f:\asp\2-2.htm#“第一章”从这里可以链接到第一章处3.5表格标记table/table格式:table表格开始captionalign=#…/caption表格标题;th/th表格栏(字段名)标题tr/tr定义表行td/td定义表格单元数据/table表格结束3.5.1表格定义标记格式:tableborder=#cellspacing=#width=#or%…/table功能:table/table说明:border=#------设置表格边框线尺寸cellspacing=#-------设置表格单元间隙width=#or%--------设置表格宽度,#表示表格宽度数值,%表示表格占屏幕的百分比.tablealign=cent