建设网站的基础HTML语言ppt

第4章建设网站的基础：HTML语言《电子商务网站建设与管理》•HTML常用标记4.2•从HTML到XHTML4.4•CSS样式4.3本章内容简介•什么是HTML4.14.1什么是HTML•HTML的全称是HyperTextMarkupLanguage，即“超文本标记语言”，是一种用标记（也可称为标签）来描述网页文档结构和表现形式的语言。•HTML语言并不是一种程序语言，只是包含一些标记的文本文件，这些标记告诉浏览器如何在网页页面上显示文字、表格、图片和超级链接等。•HTML文件可以使用记事本、FrontPage、Dreamweaver等任何文本编辑器编辑，编辑完毕后，保存为.htm或.html文件4.1.1从制作最简单的网页文件说起htmlheadtitle我的第一个网页文件/title/headbodyh2align=center我的主页/h2欢迎光临我的主页。br这是我的第一个网页文件。/body/html如何查看网页文件的源文件？•在IE7、IE6等版本的浏览器中打开网页后，可通过执行【查看】菜单下的【源文件】命令来查看网页的源文件•在IE8中，默认情况下源文件不是记事本打开的，所以不能编辑修改网页的源文件。按F12键或在IE中打开【工具】菜单下的【开发人员工具】命令，在打开的窗口中选择【文件】下面的“自定义查看”选项，选择【记事本】即可。4.1.2HTML文件的基本结构•html•head•文档头部…………•/head•body•文档主体…………•/body•/html头部信息不会显示在浏览器窗口中主体内容显示在浏览器窗口中，即网页的正文内容4.1.2HTML文件的基本结构1．文档头部•在head和/head之间的内容，是文档头部信息。尽管文档头部信息不显示在页面中，但仍然是非常重要的，它会告诉浏览器如何处理文档主体内的内容。headtitle电子商务教学网站/titlemetaname=Keywordscontent=电子商务教学网站metaname=Descriptioncontent=这是一个电子商务专业师生交流的平台metahttp-equiv=Content-Typecontent=text/html;charset=gb2312metahttp-equiv=Refreshcontent=10/head用来设置网页的标题定义关键字定义网页的描述信息说明文件的内容类型和语言编码方式设置网页自动刷新的时间2．文档主体body有很多属性，用来设置网页背景、文字、页边距等。如：bodytext=bluebackground=bg1.gifbgcolor=#ffffffleftmargin=2topmargin=2说明：•text：用以设定文字颜色。•background：设定背景图片的路径。路径可以是绝对路径或相对路径。•bgcolor：设定背景颜色。当设定背景图片时，会失去作用。•leftmargin：只适用于IE浏览器，设定页面左边距，单位为像素。•topmargin：只适用于IE浏览器，设定页面上边距，单位为像素。4.2HTML常用标记4.2.1常用排版标记1．分段标记p/p2．换行标记br3．标题标记hn和/hn4．文字标记font/font5．水平线标记hr例：htmlheadtitle最简单网页示例/title/headbodyh3align=centerHTML语言的学习/h3hrfontsize=6color=blue欢迎光临我的主页。/fontbrpalign=centerb今天我们学习了标记（标签）/b/p这是我做的第一个网页。p大学之道，在明明德，在亲民，在止于至善。知止而后有定，定而后能静，静而后能安，安而后能虑，虑而后能得。物有本末，事有终始，知所先后，则近道矣。/p/body/html浏览器中查看？图片标记img用法：imgsrc=图片文件路径alt=说明width=宽度height=高度border=边框宽度具体属性说明如下。•src：指定图片文件的路径（含文件名），可以是本地计算机的图片文件，也可以是其他图片的一个URL地址。•alt：用于设置图片的说明信息。如果用户浏览器由于某些原因不能正常显示图片，则可在该位置显示文字来替换图片。若图片正常显示，则当鼠标指针置于图片上时也会显示文字。•width：宽度（像素数或百分数）。通常只设为图片的真实大小，以免失真，若需要改变图片大小最好事先使用图片编辑工具。若不设定图片的尺寸，图片将按照其本身的大小显示。•height：设定图片的高度（像素数或百分数）。•border：设定图片边框的宽度。htmlbodyp一幅图像：imgsrc=image/eg_mouse.jpgwidth=128height=128p/body在网页中插入多媒体（1）加入背景音乐。bgsoundsrc=声音文件路径loop=播放次数•要加入的背景声音文件的格式可以是wav、au或mid。•播放次数取-1或Infinite时，声音将一直播放直到关闭该网页为止。（2）加入视频。embedsrc=视频文件路径loop=播放次数autostart=True/False/embed•embed标记可用来插入各种多媒体，格式可以是Wmv、Avi、Midi、Wav、AU、MP3等，文件路径可以是相对路径或绝对路径滚动字幕用法：marqueedirection=left/rightbehavior=滚动方式scrollamount=移动速度scrolldelay=延迟时间width=xheight=y滚动文字（或图片）/marquee•具体属性说明如下。•width：设置字幕的宽，x为像素数或相对于窗口宽的百分比。•height：设置字幕的高，y为像素数。•behavior：值为scroll时，设置文字单向流动；值为slide时，设置流动文字到达边界停止；值为alternate时，设置流动文字到达边界后反向流动。•scrollamount：指定每次移动速度，值越大速度越快。•scrolldelay：移动每步的延时，单位是毫秒，时间越短，速度越快。列表标记创建无序列表，格式如下：•ultype=符号类型•litype=符号类型1第一个列表项•litype=符号类型2第二个列表项•…•/ulhtmlheadtitle无序列表/title/headbodyullitype=circle电子商务项目管理。litype=square电子商务顾问。litype=disc销售人员。/ul/body/html列表标记•创建有序列表。通过带序号的列表可以更清楚地表达信息的顺序。使用ol标记可以建立有序列表，表项的标记仍为li。格式如下：•oltype=符号类型•litype=符号类型1第一个列表项•litype=符号类型2第二个列表项•…•/ol4.2.2超级链接标记•1．超级链接的概念•所谓的超级链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是同一网页上的不同位置，还可以是一个图片、一个电子邮件地址或一个文件。而在一个网页中用来超级链接的对象，可以是文本也可以是一个图片，甚至可以是图片的一部分。4.2.2超级链接标记2．用法ahref=链接目标的路径name=锚点名称target=打开窗口方式链接主体/a说明：（1）href：用来定义超级链接文件的路径，可以是相对路径或绝对路径。（2）target：指定打开超级链接的窗口或框架。取值有以下5种情况。•_blank：在新窗口中打开链接。•_self：在当前窗口打开链接。默认为_self。•_top：在整个浏览器窗口中打开链接。•_parent：在当前窗口的父窗口打开链接。•框架名称：在指定名字的框架中打开链接。4.2.2超级链接标记（1）站内链接。链接到本地站点上的某一文件，例如：ahref=intro.html企业简介/a（2）外部链接。链接到另一个站点的某一文件，例如：ahref=链接到当当网/a（3）锚点链接。链接到当前页面的某一位置，例如：aname=first这里定义了一个锚点/aahref=#first指向同一页中的锚点first/a（4）E-mail链接。链接到一个电子邮箱地址，例如：ahref=mailto:[e-mail]请与我联系/a超级链接应用示例htmlbodypahref=/intro.html本文本/a是一个指向本网站中的一个页面的链接。/pahref=本文本/a是一个指向万维网上的页面的链接。/body/html思考：如何将一个图片设置为超级链接？4.2.3表格标记1．表格•表格是网页设计中常用的元素，有两个常用功能：一是用来显示文字或图片内容；二是用来进行网页布局，使网页更规范、更美观。•表格的标记为table，使用tr标记可将一个表格划分成若干表格行，然后通过td标记将每个行划分成若干列（单元格）。数据内容放在td与/td之间。单元格中的数据信息可以是文字、图片、列表，还可以是嵌套表格。4.2.3表格标记2．语法格式表格的用法如下：tabletrtd表项1/tdtd表项2/tdtd…/tdtd表项n/td/tr……trtd表项1/tdtd表项/tdtd…/tdtd表项n/td/tr/table4.2.3表格标记table属性:•border：定义表格边框的粗细，n取整数，单位是像素。如果省略，则不带边框。•bgcolor：设置背景颜色。•background：设置背景图片。•width：定义表格的宽度，单位可以是绝对的像素数或窗口的百分比。•height：定义表格的高度，单位是像素数。•cellspacing：定义单元格之间的间隙宽度，单位是像素，默认为2。•cellpadding：定义单元格内容与单元格边界之间的距离，单位是像素，默认为2。•colspan和rowspan：可以分别制作跨多行（合并行）和跨多列（合并列）的表格。4.2.3表格标记htmlheadtitle表格的边框属性/title/headbodytableborder=10cellspacing=2cellpadding=3trtd单元格1/tdtd单元格2/td/tr/table/body/htmlhtmlheadtitle表格跨多列属性/title/headbodytableborder=1trthcolspan=3值班人员/th/trtrtd周一/tdtd周二/tdtd周三/td/trtrtd张三/tdtd李四/tdtd王五/td/tr/table/body/html4.2.4用框架进行网页布局•所谓框架网页，是在一个浏览器窗口中同时显示多个不同的HTML文档。利用框架结构可以在页面中同时浏览多个页面，还可以在一个区域中显示所有页面的总索引。通过单击该区域中的超级链接，相关网页就会显示在另一个区域中，非常直观。1．框架的基本结构基本格式如下：htmlframesetframename=框架名src=URLframenam