网页设计-html语言

HTML语言教师：刘抗E-mail：sqlk007@网页设计-html语言全文共46页，当前为第1页。本章要点HTML语言概述HTML语言的基本结构用HTML代码编写网页上的基本元素HTML语言的常用标识网页设计-html语言全文共46页，当前为第2页。2.1初识HTML1．HTML语言简介2．HTML文件基本架构网页设计-html语言全文共46页，当前为第3页。1．HTML语言简介HTMLHTML(HyperTextMarkupLanguage超文本标记语言)是一种建立网页文件的语言，通过对各种标记式的指令、元素、属性、对象等的定义，将影像、声音、图片、文字等连接显示出来。HTML标记由<和>所括住的指令，主要分为单标记指令、双标记指令（由<起始标记>和</结束标记>所构成)。网页设计-html语言全文共46页，当前为第4页。1．HTML语言简介HTML语言的三种形式<标记>，非封闭的类型。很少用，最常用的如换行标记<br>。<标记>对象</标记>，封闭类型。大多数标记都是封闭类型的。封闭类型的标记都是成对出现。<标记属性1=参数1标记属性2=参数2>对象</标记>，封闭类型的扩展形式，后面的各种属性参数可以进一步设置对象在某方面的内容。网页设计-html语言全文共46页，当前为第5页。说明几乎所有的HTML代码都是由上面三种形式组合而成的，标记之间可以相互嵌套，形成更为复杂的语法。网页设计-html语言全文共46页，当前为第6页。1．HTML语言简介HTML文件组成一个完整的HTML文件由head和body两部分组成。head部分包含标题、网页语言等基本信息，还可包含作者信息、网页关键字、网页说明等；body部分其中的内容是网页显示的主要内容，由表格、图片、表单等各种对象组成。网页设计-html语言全文共46页，当前为第7页。1．HTML语言简介说明一可以使用任何文本编辑器打开、浏览、编辑HTML代码，最简单的是Windows自带的记事本。说明二HTML文件编辑完成后以.htm或.html为文件后缀保存，可由浏览器打开显示。说明三习惯上一个网站的首页名称通常为index.htm或index.html。网页设计-html语言全文共46页，当前为第8页。2．HTML文件基本架构HTML文件的基本架构：<HTML>文件开始<HEAD>文件头开始<TITLE>...</TITLE>标题区</HEAD>文件头结束<BODY>文本区开始

......文本区内容</BODY>文本区结束</HTML>文件结束网页的头部网页的主体内容HTML文件标识网页设计-html语言全文共46页，当前为第9页。9.2HTML的简单应用1．编写第一个网页2．注意事项网页设计-html语言全文共46页，当前为第10页。1．编写第一个网页使用记事本编写第一个网页，步骤如下：选择【开始】/【所有程序】/【附件】/【记事本】”命令，打开记事本程序。在记事本中输入HTML代码。保存文件，文件名设为“myfirst.htm”。关闭记事本，回到存盘的文件夹，双击myfirst.htm文件，在InternertExplore浏览器中浏览页面。网页设计-html语言全文共46页，当前为第11页。第一个网页的代码及页面效果<html><head><title>初识HTML语言</title><metahttp-equiv="Content-Type"content=text/html;charset=gb2312></head><body><p>我的第一个HTML文件</p></body></html>网页设计-html语言全文共46页，当前为第12页。2．注意事项“<”、“>”是任何标记的开始和结束。标记与标记之间可以嵌套。在源代码中不区分大小写。任何换行和空格在源代码里面不起作用。HTML标记中可以放置各种属性。可以在源代码中添加注释，注释以“<!--”开始，以“-->”结束。网页设计-html语言全文共46页，当前为第13页。转义字符与特殊字符在HTML语言中，有一些符号由于已被标记或标记的属性所占用，当需要使用这些符号时，就必须使用HTML提供的表示特殊符号的方法来表示这些符号，即使用转义字符（或称字符实体）来表示。网页设计-html语言全文共46页，当前为第14页。特殊字符

HTML表示方法--字符实体

ASCII码

<

<

x3C

>

>

x3e

&

&

x26

"

"

x22

空格符

x20

网页设计-html语言全文共46页，当前为第15页。meta标记

meta标记主要有三个作用1>设置动态链接2>动态排列文件3>网页关键字的设置。

网页设计-html语言全文共46页，当前为第16页。动态链接meta标记可以设置一个网页经过一定的时间自动链接到另一个网页或者另一个站点。其格式如下：metahttp-equiv="refresh"content="#;URL=文件名或网址"

其中：http-equiv=refresh是指定为动态链接到别的文件或网址；

content中的#号代表延迟的时间，单位为秒；URL为要动态链接到的文件或网址。例如：<metahttp-equiv="refresh"content="15;url=meta2.htm">网页设计-html语言全文共46页，当前为第17页。动态排列文件可以用meta标记设置一个网页中的文字排版随窗口的大小改变而自动重排文字段落。其格式如下：metahttp-equiv="content-type"content="text/html;charset=GB2312"网页设计-html语言全文共46页，当前为第18页。网页关键词要将自己的主页提交给搜索引擎，就必须用meta标记在主页中加入关键词。其格式如下：metaname="keywords"content="Internet,business,game"

或:metaname="description"content="Internet,business,game"网页设计-html语言全文共46页，当前为第19页。2.3添加各种网页元素2.3.1向页面中添加文字2.3.2设置页面中的标题2.3.3设置页面的背景颜色和背景图片2.3.4在页面中插入图片2.3.5给网页加上声音网页设计-html语言全文共46页，当前为第20页。2.3.1向页面中添加文字（1）将需要添加的文字输入到<body>与</body>标识之间。（2）<pre></pre>是“原样显示文本”的标识。（3）<br>称为行中断标识。<nobr>则使该标记中的内容不会随浏览器窗口宽度大小换行。标识后面的内容另起一行显示。（4）段落标识<p></p>分别放在段首和段尾。<p></p>比<br>多一行空行，也就是空一行，再另起一行显示文本内容。网页设计-html语言全文共46页，当前为第21页。2.3.1向页面中添加文字（5）<font></font>是字体标识，对标识中的文本字体起控制作用，有“size”和“color两个属性：“size”表示字体的大小。“color表示字体的颜色。（6）在文字前后加上<b></b>标识，可以使文字加粗显示。<b></b>为粗体显示标识；<i></i>为斜体显示标识；<u></u>为带下划线显示标识。（7）<center>与</center>是居中显示标识。网页设计-html语言全文共46页，当前为第22页。应用上述标识后的完整程序<html><head><title></title><metahttp-equiv="Content-Type"content=text/html;charset=gb2312></head><body><center><fontsize=6color=red><b>西红柿</b></font><br></center>[名称]西红柿<br>[性味]味酸甘、性微寒。<br>[归经]入心、肺、胃经。<br>[作用]润肺生津、和胃止渴。用于暑热烦渴、咽干、恶心欲吐、厌食、等。<br></body></html>网页设计-html语言全文共46页，当前为第23页。2.3.2设置页面中的标题在<title></title>标识中输入网页的标题文字，并进行相应的设置。说明在Dreamweaver中输入的标题文字实际就是被解析到了<title></title>标识中。网页设计-html语言全文共46页，当前为第24页。2.3.3设置页面的背景颜色和背景图片通过bgcolor属性可设置页面的背景颜色。例如：输入“bgcolor=red”或者“bgcolor=blue”，页面的背景就能按照输入显示成红色或者蓝色。通过background属性可设置页面的背景图片。例如：将光盘的“tomato.gif”图片文件复制到用户站点文件夹下的“\img\1”目录中，进行如下设置：background=img/1/tomato.gif网页设计-html语言全文共46页，当前为第25页。设置网页背景图片应用举例源文件页面效果网页设计-html语言全文共46页，当前为第26页。2.3.4在页面中插入图片在<body>标识之后，文字之前的位置输入代码<imgsrc=img/1/tomato1.jpgalt=西红柿width=150height=112>源文件页面效果网页设计-html语言全文共46页，当前为第27页。2.3.4在页面中插入图片说明“img”表示插入一张图片；“src”属性的值是图片文件的路径；“src=img/1/tomato1.jpg”表示插入的是与本文件在同目录下的“img\1\tomato1.jpg”文件；“alt”后面是图片的说明文字，在浏览器中当鼠标移到图片上时会显示出图片的说明文字；“width”和“height”是图片的宽度和高度信息，单位是像素。网页设计-html语言全文共46页，当前为第28页。（3）“align”是图片的位置属性，在<img>标识中加入“align=left”代码可使图片移到行的最左面，文字移到与图片同一行。将“align”的值设为“right”可使图片出现在行的最右侧。源文件页面效果网页设计-html语言全文共46页，当前为第29页。2.3.5给网页加上声音(背景音乐)将音乐文件“music.mid”复制站点文件夹的相应目录下。在<head>与</head>之间任何位置加入代码<bgsoundsrc="1.mp3">网页设计-html语言全文共46页，当前为第30页。2.3.5给网页加上声音（页面音乐）将音乐文件“music.mid”复制站点文件夹的相应目录下。在<body>与</body>之间任何位置加入代码“<embedsrc=sound/music.midautostart=trueloop=truewidth=100height=100>”。源文件页面效果网页设计-html语言全文共46页，当前为第31页。2.4其他HTML标记一览1．Web页面结构纲要2．链接标识3．列表标识4．格式化标识5．段落类标识6．位置类标记网页设计-html语言全文共46页，当前为第32页。1．Web页面结构纲要<html><head><title>页面标题</title></head><body>……网页主体内容</body></html>网页设计-html语言全文共46页，当前为第33页。2．链接标识外部链接<ahref=目标文件路径>链接文本</a>锚点链接<aname=锚点名称>链接文本</a>电子邮件<ahref＝“mailto:电子邮件地址”>链接文本</a>网页设计-html语言全文共46页，当前为第34页。3．列表标识（1）编号列表<UL><LI>第一项<LI>第二项……</UL>（2）符合列表

<OL><LI>第一个符号

<LI>第二个符号

……</OL>网页设计-html语言全文共46页，当前为第35页。4．格式化标识粗体：<B>要显示为粗体的文本</B>斜体：<I>要显示为斜体的文本</I>下划线：<U>要显示为带下划线的文本</U>预格式化：<PRE>定义好的文本</PRE>上标字：^{要显示为上标的文本}下标字：_{要显示为下标的文本}网页设计-html语言全文共46页，当前为第36页。5．段落类标识新段落：<P></P>水平线：<HR>换行符：<BR>网页设计-html语言全文共46页，当前为第37页。6．位置类标记居中显示<center>要居中显示的文本</center>居左显示<palign=center>要居左显示的文本</p>居右显示<palign=right>要居右显示的文本</p>网页设计-html语言全文共46页，当前为第38页。2.5使用Dreamweaver编写HTML代码2.5.1

Dreamweaver中的HTML源码编辑窗口2.5.2使用代码窗口的快捷菜单2.5.3代码片断面板网页设计-html语言全文共46页，当前为第39页。2.5.1

Dreamweaver中的HTML源码编辑窗口Dreamweaver有两种源代码编辑窗口的显示方式。单击【代码】按钮，则在整个窗体显示代码窗口；单击【拆分】按钮，就会使窗体分为上下两个界面，上部是代码窗口，下部是设计窗口。启动Dreamweaver后，单击编辑状态切换按钮，即可启动源代码的编辑窗口，如图所示。网页设计-html语言全文共46页，当前为第40页。2.5.2使用代码窗口的快捷菜单在HTML源代码编辑器的窗口中，单击鼠标右键，可以打开一个快捷菜单。该菜单允许用户进行文本的