PART2 HTML语言

1PART2HTML语言介绍学习导航：1.HTML语言的基础知识2.HTML的常用标记3.网页基本元素之文本4.网页基本元素之多媒体5.网页基本元素之超链接6.表格7.框架1.网页设计的内功——HTML（超文本标记语言）1.1理解什么是HTML语言HTML语言的定义：HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是描述网页的一种语言，也是目前网络上应用最为广泛的语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。理解：什么是超链接？什么是超文本？扩展知识：搜索引擎的原理首先是用蜘蛛（Spider）进行全网搜索，自动抓取网页；然后将抓取的网页进行索引，同时也会记录与检索有关的属性，中文搜索引擎中还需要首先对中文进行分词；最后，接受用户查询请求，检索索引文件并按照各种参数进行复杂的计算，产生结果并返回给用户。比如：百度、谷歌。百度和谷歌的排名区别：超链分析技术和PageRank技术2理解：什么是标记语言扩展知识：搜索引擎的原理置标（markup）这个词来源自传统出版业的“标记”一个手稿，也就是在原稿的边缘加注一些符号来指示打印上的要求。长久以来，这个工作都是由专门的人（markupmen）以及校对人来进行，对原稿标志出使用什么样的字体，字型以及字号，然后再将原稿交给其他人进行手工的排版工作。超文本标记语言的也是同样的道理，通过标记来描述网页上所显示的文字、图片、多媒体等信息。31.2HTML语言的基本结构HTML…………………………………………………根控制标记HEAD…………………………………………………头控制标记TITLETHISISMYFIRSTWEBPAGE!/TITLE…设置浏览器的窗口标题/HEADBODY…………………………………………………页面可见内容HELLO,THISISMYFIRSTWEBPAGE!BODY/HTML实训练习1：利用记事本工具编写一个显示“Helloworld！”的网页文件。1.3HTML控制标记的格式标记名称：单一型，无设置值。如换行标记：br标记名称属性=”属性值”：单一型，有设置值。如：hrwidth=”80”；bgsoundsrc=bgmusic.mp3（head之间）标记名称…/标记名称：对称型，无设置值。如：TITLE/TITLE标记名称属性=”属性值”…/标记名称：对称型，有设置值。如：BODYBGCOLOR=”RED”/BODDY实训练习2：给“Helloworld！”网页加上背景颜色和背景音乐，并重新审视此网页文件所使用标记的格式。42.HTML语言的常用标记（1）Title标签用来定义网页的标题。（2）meta标签meta下的属性：属性名称：name属性值：authordescriptionkeywordsgeneratorrevisedothersContent属性值：“字符串”例如：metaname=”author”content=”renjiajia”metaname=”description”content=”thisismyfirstpage!”metaname=”keywords”content=”webpage,design,renjiajia”metaname=”generator”content=”Dreamweaver”metaname=”revised”content=”HTML4.01”metaname=”othors”content=”thisismyfirstpage!thanks”metahttp-equiv=”content-type”content=”text/thml;charset=gb2312”说明网页的文档类型及语言类型扩展：了解搜索引擎的基本原理，思考搜索引擎营销。（3）br换行（4）p段落。格式：palign=”排列方式”…/p属性名称：align，属性值：left、center、right（5）hr水平直线属性名称：size，属性值：像素（绝对设置）、百分比（相对设置）属性名称：width，属性值：像素（绝对设置）、百分比（相对设置）（6）标题文字设置格式：h1…/h1h2…/h2h3…/h3h4…/h4属性名称：align，属性值：left、center、right5（7）实体字符控制标记b/b加粗i/i斜体s/s删除u/u下划线del/del删除strong/strongem/em（8）body标记符Bgcolor、text（文字颜色）实训练习3：利用记事本工具逐一尝试相关的标记，尽可能做到熟练使用。63.网页基本元素之文本3.1网页的组成网页主要由三部分组成：文本、多媒体和超链接1.文本就是网页的中的内容文字，可以是任何语言2.多媒体会让我们的网站变得生动，很多网站甚至将整体的页面当作一张美丽的图片，甚至是一个Flash，例如：SKII等，常见的图片格式：JPG、BMP、GIF、PNG（近两年在Macromedia的推广中被广泛采用）；常见的多媒体格式就是Flash或者在网页中嵌入一些相应的视频。这些都会增加网站的信息量和与用户的互动性。访问网站：、超链接，网站内部与网站之间进行链接和沟通的方式。例如：北大商业评论普通文本的插入实践项目4：根据下图所示，制作相应的网页。补充知识：介绍pre/pre与p/p标签的区别。73.3排列清单的输入排列清单控制标记可以创建一般的列表、编号列表或者加重号列表，以及定义列表。还可以在一种列表中嵌套另一种列表。对于概况因特网上的内容，列表是非常常用的。（1）无序清单无序清单列表代码：ultype=circle/dise/squareli客服部/lili销售部/lili营销部/lili财务部/li/ul（2）有序清单8有序清单列表代码：oltype=1/a/A/i/I(分别表示123；abc；ABC；i，ii，iii；I，II，III)li客服部/lili销售部/lili营销部/lili财务部/li/ol（3）列表嵌套思考&练习：如何在无序清单中嵌套有序清单？实训项目5：分别尝试在无序清单中嵌套有序清单、在有序清单中嵌套无序清单（以学校部门、企业组织结构为例）。实训项目6：分析网页文件2.html的组成，并模仿制作。（4）叙述式清单叙述式清单是一种特殊类型的列表，这种列表用于提供术语，并且术语后面跟上简短的文本定义或描述。定义列表包含在dl元素中，dl元素中包含交替出现的dt和dd元素。dt元素的内容是即将定义的术语，dd元素中包含前面dt元素内容的定义。叙述式清单代码：dldtimgsrc=images/icon_print.gifwidth=16height=16alt=dt//dtddAlistofbulletpoints./ddddAlistofbulletpoints./dd/dl9dtOrderedList/dtddAnorderedlistofpoints,suchasaumberedsetofsteps./dd实训项目7：将一个附带图片的叙述式清单放在上述的嵌套清单中。（5）文本滚动特效文本滚动也成为走马灯，即让文本在屏幕中左右上下或者来回运动显示。在页面中通常需要滚动显示一些信息或者信息标题，起到吸引用户注意力的作用。文本滚动特效代码：bodytext=bluemarqueebehavior=scrolldirection=leftwidth=800height=30loop=2scrolldelay=5scrollamount=5onmouseover=this.stop()onmouseout=this.start()本小节的主要内容是学习文本滚动特效/marquee/body代码说明：marquee/marquee滚动标记的开始结束标记Behavior设置文档滚动的方式：Alternate来回滚动；scroll向一个方向滚动；slide文字到字幕边框时停止运动Loop设置滚动的次数，n代表数值，-1代表无限次Directions设置文本滚动的方向，down指由上往下、left指由右往左、right指由左往右、up指由下往上Width、height指文本运动范围的高度和宽度Scrolldelay文本滚动的延迟时间，数值越小停留时间越短，滚动越流畅Scrollamount文本滚动的速度，数值越大速度越快10Onmouseover（）、onmouseout（）指鼠标放上去的事件实训项目8：制作一个含有文本滚动特效的网页。实训项目9：文字可以滚动显示，图片、视频、超链接、清单是否也可以滚动显示？尝试制作一个无序清单的滚动显示。实训项目10：校园网首页的右下角有一个新闻滚动的效果，请思考如何制作，如下图。实训项目11：了解Dreamweaver的基本操作。在Dreamweaver软件中输入文本、列表、嵌套列表。扩展练习：不间断滚动代码114.网页基本元素之多媒体4.1图片（1）插入单个图像文件imgsrc=”url”width=”30”height=”30”alt=”tupian”align=”left/right/top/middle/bottom”hspace=”垂直上下两端与物件的距离”vspace=”垂直上下两端与物件的距离”注意：图片名称的中英文问题实训项目12：使用文本文件编辑网页，将我的文档文件夹中的系统图片插入到网页中，同时在页面中输入一些文字，设置图片和文字之间的距离为10像素，设置文字环绕图片。（练习文字和图片的混合排版）扩展：相对路径与绝对路径1.绝对路径：提供完整的URL（Uniform/UniversalResourceLocator被翻译成统一资源定位或者网址），在链接到其他服务器的网页上时使用，包括：实用的协议、文档所在文件夹的上级各文件夹，如：相对链接：描述源端点到目标端点之间的相对位置，本地链接时经常采用。源端点和目标端点在同一个目录下：直接写文档名。如：在站点的根目录下面拷贝一张图片1.jpg，在网页中插入该图片时就直接引用该文件的名称就可以，例如：imgsrc=”1.jpg”/img目标端点在当前目录的子级目录中：目录名/文档名。例如，在站点的image文件夹中拷贝一张图片，此时的插入该图片的路径名称就是：imgsrc=”image/1.jpg”/img实训项目13：练习在不同情况下图片的插入。（2）设置整个网页的背景图片在网页制作的过程中，很多美观的网页都会将页面的背景设置成淡淡的图片12以增加效果。具体制作的核心代码如下：bodybackground=”url”实训项目14：在网上寻找合适的网页背景图片，然后插入到页面中。（3）在Dreamweaver中练习鼠标经过图像实训项目15：利用Photoshop处理图片后制作图片翻转特效。4.2声音及视频（1）将本地的多媒体文件插入到网页中网页就是一个多媒体的集合，如何把丰富的音频、视频文件插入到网页中embedsrc=sound/secret.mp3autostart=true/embedembedsrc=flash/star06.swfautostart=t