第二章网页制作语言HTML案例

网页设计与制作学时：60学时第二章网页制作语言HTML•了解：HTML语言的基本知识•熟练掌握：掌握使用HTML标签建立基本的网页；使用各种对象标签在网页中插入文本、图像、表格、列表、多媒体；使用超链接标签建立绝对路径和相对路径的链接；通过框架的形式建立包含框架的页面。•掌握：熟悉HTML的语法；掌握HTML的基本标签；掌握HTML中的文本、图像、链接、列表、表格、多媒体、框架等标签的使用方法；掌握各个对象标签的属性应用。第一节网页设计语言HTML简介一、HTML简介一、HTML简介•HTML的英文全称是HyperTextMarkupLanguage，直译为超文本标记语言。它是全球广域网上描述网页内容和外观的标准。•最初的HTML语言以文本格式为基础，可以用任何编辑器和文字处理器来为网络创建或转换文本，仅有不多的几个标签。•1993年，NCSA推出了Mosaic，也就是第一个图文浏览器，从此Web开始迅速地发展起来。HTML语言也不断产生新型、功能强大且生动有趣的标签形式，例如background、frame、font和blink等。但是此时，出现了许多不同的HTML版本，而只有设计者和用户共有的HTML部分才可以正确显示。。•到现在为止，HTML已经发展到了比较成熟的HTML4.0版本，在这个版本下的语言中，规范更加统一，浏览器之间的兼容性也更加完善。•除了HTML语言以外，W3C组织在2000年推出了另一种XHTML1.0语言，该语言其实是HTML4.0的升级版本HTML4.01，只是用XHTML1.0来命名。二、HTML文件的编写方法二、HTML文件的编写方法1.手工直接编写可以使用任何文本编辑器来打开并编写HTML文件，如Windows系统中自带的记事本。2.使用可视化软件Microsoft公司的FrontPage、Adobe公司的Dreamweaver等软件均可以创建HTML文档。3.由Web服务器一方实时动态生成这种HTML的创建方法需要由后台的网页程序来实现，如ASP、PHP等。第二节HTML基本标签•每一个HTML文档都由最基本的标签，如文档标签、头部标签和主体标签组成，其代码格式如右：htmlheadtitle页面标题/title/headbody/body/html从上面的标签中可以看到标签都是成对出现，由开始标签标签名和结束标签/标签名组成的，这种成对出现的标签称之为双向标签。除此之外HTML标签还有单向标记，单向标签只有一个标签标签名/，如图像标签img/，水平线hr/等。大部分的HTML标签都是有属性的，在为标签添加属性时，属性要写在标签内，如是双向标签，属性写在开如标签内，各个属性之间不分先后顺序，属性是可选的，如果不写，那就是采用默认属性值，其格式如下：标签名属性1属性2属性3……内容/标签名一、文档标签一、文档标签文档标签html…/html用于标识文档的文档类型为HTML文档。它是在整个HTML文档标签的最外层，文档中所有的标签和文本内容都是包含在html与/html之间的。二、头部标签二、头部标签head是HTML文档的头部标签，在文档中同样是成对出现的，即head和/head。在浏览器窗口中，头部标签所包含的信息不会显示在主窗口中。在head和/head标签之间可以插入其他的一些标签，用于说明文档的标题和整个中相同的一些属性，还可以加入一些文件信息。三、主体标签三、主体标签body是HTML文档的主体标签，body…/body中放置文档的正文，是在浏览器中显示的页面内容，如文字、图片、动画，视频等。body标签常用的属性如下表：属性作用Link设置页面中默认文本超链接的颜色alink设置鼠标单击时文本超链接的颜色vlink设置单击过后的文本超链接的颜色background设置页面的背景图像bgcolor设置页面的背景颜色Topmarginbottommarginleftmarginrightmargin设置页面的上、下、左、右边距Text设置页面中文本的颜色四、页面注释标签四、页面注释标签注释可以包含任何内容，但不会被浏览器解析。因此注释可以起到将过时的代码注释掉，或者在调试程序时暂时屏蔽部分代码的作用。注释标签的用法如下：!--fontcolor=red被注释掉的代码/font--第三节HTML其他标签一、文本相关标签一、文本相关标签（一）标题文字标签标题文字标签hn，是用于设置网页中的标题文字效果，其中n的取值为1~6，被设置的文字会以该标签的默认样式显示，该标签是一个双向标签，成对出现，如h1/h1。htmlheadtitle标题的应用/title/headbodyh1标题一/h1h2标题二/h2h3标题三/h3h4标题四/h4h5标题五/h5h6标题六/h6/body/html预览效果一、文本相关标签（二）段落标签段落标签p…/p用于创建文本的段落格式。htmlheadtitle静夜思/title/headbodycenterh2align=center静夜思/h2hrpalign=left床前明月光，/ppalign=center疑是地上霜，/ppalign=center举头望明月，/ppalign=right低头思故乡。/p/center/body/html预览效果一、文本相关标签（三）预排版标签在制作网页时，有时候希望浏览器显示出的文本保留在代码中编辑时的原始文字排版格式，此时就可以使用预排版标签pre/pre。htmlheadtitle静夜思/title/headbodyh2静夜思/h2pre床前明月光，疑是地上霜，举头望明月，低头思故乡。/pre/body/html预览效果一、文本相关标签（四）换行标签换行标签br/是一个单向标签，不包含任何的内容。br/标签后的内容将显示在下一行。htmlheadtitle静夜思/title/headbodyh2静夜思/h2hr/床前明月光，br/疑是地上霜，br/举头望明月，br/低头思故乡。/body/html预览效果一、文本相关标签（五）文本格式化标签1.粗体标签粗体标签b/b，主要用于粗体显示文字。2.斜体标签斜体标签i/i，主要用于斜体显示文字。3.下标字标签使用下标字标签sub…/sub其主要用于设置下标文字。4.上标字标签上标字标签sup…/sup可以完成，其主要用于设置上标文字。5.HTML中的特殊字符有时需要在页面中显示一些特殊的符号，如版权符号©，注册符号®等，此时依靠键盘是无法输入完成的，在HTML语言中提供了这些符号的输入方式，常用符号如表。代码作用©表示版权符号（©）®表示注册符号（®） 表示半角空格（）"表示双引号（“）&表示“与”运算符（&）<表示“大于”运算符>表示“小于”运算符二、建立超链接二、建立超链接（一）绝对路径与相对路径•绝对路径是指包括服务器协议在内的完整路径，例如，就是一个绝对路径，通常也指外部链接。•相对路径通常用于站点内部文档之间的链接，尤其是要建立链接的两个文档同处同一个文件夹时，当然也可以用文档的相对路径方式建立同其他文件夹下的文档的链接，但需要注意的是文档之间的层次关系。二、建立超链接（二）链接标签当需要在网页中创建超链接时，需要加入a…/a标签，被该标签包含的内容就是一个超链接ahref=”url”target=”_blank”显示的文字/a二、建立超链接（三）链接的创建1.锚点链接锚点链接用于在同一个页面中，不同位置的跳转，或是跳转到其他页面指定的位置。具体方法如下：（1）在需要建立跳转的位置创建锚点，加入如下代码：aname=link1/a“link1”为创建的锚点名称。（2）在需要建立链接的位置，加入如下代码：ahref=#link1点击此处跳转到锚点/a，2.电子邮件链接在HTML中创建邮件链接使用的是邮件属性“mailto:”，属性“href”指向链接的地址。创建邮件链接的格式如下：ahref=mailto:[e-mail]文字链接/a3.空链接在网页中创建空链接，可以链接页面自身。创建空链接只需要在链接地址处输入一个“#”，即可。其格式如下：ahref=”#”空链接/a三、使用图像三、使用图像（一）图像标签在网页中插入图像，使用标签img/，该标签是一个单向标签，使用该标签的相关属性可以对插入的图像进行控制。1.图像源文件属性图像源文件属性src指定要显示的图像文件所在位置。网页中所有的文件在网络上的位置都有一个URL唯一标识。Src属性的参数值就是图像文件的URL，其设置值可以是相对路径，也可以是绝对路径，其格式如下：imgsrc=”图像路径”/2.图像的宽度和高度属性图像的宽度属性width和高度属性height用于指定图像的在浏览器中显示的大小，其属性的单位是“像素”，例如，插入图像的宽和高都为100像素，其代码如下：imgsrc=图像路径width=”100px”height=”100px”/三、使用图像（一）图像标签3.图像的边框属性图像的边框属性border用于为图像添加一个黑色的边框，其边框的宽度默认以像素为单位。例如，为图像添加一个2像素的边框，其代码如下：imgsrc=”图像路径”width=”100px”height=”100px”border=”2px”/三、使用图像（一）图像标签4.图像的排列属性图像和文字之间的对齐方式是通过图像的排列属性align来设置完成的。htmlheadtitle图像/title/headbodyimgsrc=pic.jpgwidth=162height=155align=left/h2路灯/h2p我是一盏灯，是一盏孤独的路灯。/pp我站在城市里不起眼的角落，默默地看着四季的变迁，接受着四季的侵蚀。我不喜欢春天，鸟儿叽叽喳喳的叫声吵得我睡不了觉；我也不爱夏天，炙热的太阳似乎要把我蒸发掉；我最讨厌冬天，厚厚的积雪压得我抬不起头来。在风吹雨打中，我的身体慢慢残破了，眼睛也慢慢开始花了。/pp那是一个满天繁星的夏夜，一个深夜归家的女孩子却温暖了我年久失修的心。“妈，没事，这不是有那盏老路灯的么，我不怕.......”这句话犹如晴天霹雳闪过，我的怨言与不满在这一瞬间通通消失，随之而来的是，幸福。原来，我的存在，一直是那么温暖的角色。虽然我再也不能挺立的的直直的了，也无法发出以前那种耀眼的光芒了，可是我觉得我很幸福。我突然好想春天的鸟儿，夏天的骄阳还有冬天的雪花，我想大声告诉他们，我有多么爱这个世界。/pp我是一盏灯，打我睁开眼，我就站在这，站了一辈子，也照了一辈子。/pp我是一盏灯，是一盏幸福的老灯。/p/body/html预览效果三、使用图像（一）图像标签5.图像的水平间距和垂直间距属性水平间距属性hspace和垂直间距属性vspace用于设置图像与其相临对象的上、下、左、右边缘的距离。htmlheadtitle散文－路灯/title/headbodyimgsrc=1111111.jpgwidth=162height=155hspace=50align=lefth2路灯/h2p我是一盏灯，是一盏孤独的路灯。/pp我站在城市里不起眼的角落