HTML语言dreamweaver入门HTML语言基础.ppt
HTML语言dreamweaver入门HTML语言基础,第三章 HTML语言,HTML语言dreamweaver入门HTML语言基础,HTML语言基础,HTML是：Hypertext Marked Language，即超文本标记语言，是一种用来编写超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。超文本标记语言是创建网页时使用的语言。,HTML语言dreamweaver入门HTML语言基础,自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。,HTML语言dreamweaver入门HTML语言基础,现在虽然有各种各样的网页编辑工具可以快速地制作出一个网页。掌握了HTML语言的语法规则后，可以脱离其他工具而对网页编辑工具编辑的网页源代码进行控制和修改。,HTML语言dreamweaver入门HTML语言基础,HTML语言内容丰富，从功能上大体可分为：文本设置、列表建立、文本属性制定、超链接、图片和多媒体插入、对象、表格、表单的操作，以及框架的建立。,HTML语言dreamweaver入门HTML语言基础,和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。 用文本编辑器就可以编写HTML文件。,HTML语言dreamweaver入门HTML语言基础,HTML文件被浏览器所解释后就是网页。网页（Web page）由标记（tag）和文本组成。标记是一些规则，规定了一种结构，允许众多不同的浏览器在几乎所有计算机平台上显示文档。,HTML语言dreamweaver入门HTML语言基础,标记,标记：HTML中用来标识网页元素的类型、格式和外观的文本字符串。 如head， body ， table等 基本模式为： 输出内容,HTML语言dreamweaver入门HTML语言基础,标记,标记用符号“”括起来。 “”之间是标记元素名及其参数。参数的具体内容及格式由元素及其相应功能而定。少数元素没有参数。标记有单标记和双标记两类。凡是单个出现的就是单标记。凡是成对出现的就是双标记。标记元素不区分大小写。,HTML语言dreamweaver入门HTML语言基础,属性,许多单标记和双标记的始标记内可以包含一些属性， 其语法是： 各属性之间无先后次序，属性也可省略（即取默认值）例如单标记表示在文档当前位置画一条水平线，一般是从窗口中当前行的最左端一直画到最右端。带一些属性： ,HTML语言dreamweaver入门HTML语言基础,常用标记,HTML标记 大部分网页文件都是以标记开始的，在文件的结尾处又以结束 Head标记 HEAD标记之间是HTML文档的头部，用来标明当前文档的有关信息 在HEAD标记之间，使用频率最高的标记是TITLE，它用于定义显示在浏览器标题栏的文档标题。Body标记 网页的主体是“”标记对作用的范围,HTML语言dreamweaver入门HTML语言基础,一般HTML文档都必须包含HTML、HEAD、BODY这三种元素。在最外层， 表示这对标记间的内容是HTML文 档。 之间包括文档的头部信息，如文档总标题等。 标记， 表示正文内容的开始。,HTML语言dreamweaver入门HTML语言基础,超文本文档分文档头和文档体两部分，超文本文档的基本结构。文 档 头文 档 主 体注意：与为独立的两个部分，不能互相嵌套。,HTML语言dreamweaver入门HTML语言基础,标记中的基本内容：,HTML头部信息里包含关于所在网页的信息。头部信息里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。,HTML语言dreamweaver入门HTML语言基础,标记中的基本内容：,1标题它不显示在HTML网页正文里，显示在浏览器窗口的标题栏里。 2信息:用来描述网页的有关信息。在服务器和客户之间传达隐含信息。其中最重要的设置：HTTP-EQUIV ：设置或者获取content中的内容，并把内容添加入HTTP的响应头中。Content:META信息的内容。,HTML语言dreamweaver入门HTML语言基础,用以说明主页制作所使用的文字以及语言。在文件头和中插入代码：指定了当前文档所使用的字符编码为gb2312，也就是中文简体字符。,HTML语言dreamweaver入门HTML语言基础,利用meta中的Refresh你还可以实现自动跳转页面的功能。示例代码：,HTML语言dreamweaver入门HTML语言基础,meta标签的一个很重要的功能就是设置关键字，来帮助你的主页被各大搜索引擎登录，提高网站访问量。,HTML语言dreamweaver入门HTML语言基础,标记中的基本内容：,标签中的内容都是在浏览器中可以被看到的内容。除内使用的标签以外的其他HTML语言标签都属于的内容。我们在后续的课程当中主要围绕标签里面的内容来详细讲解。,HTML语言dreamweaver入门HTML语言基础,设置的属性,background -背景图片bgcolor“RRGGBB” - 背景色彩 text - 非可链接文字的色彩举例：,Body.html,HTML语言dreamweaver入门HTML语言基础,设置的属性,link - 可链接文字的色彩 alink - 正被点击的可链接文字的色彩vlink - 已经点击(访问)过的可链接文字的色彩Leftmargin -页面左边的空白 topmargin -页面上方的空白,Body_link.html,HTML语言dreamweaver入门HTML语言基础, 水平线段,这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。 #=象素值 #=象素值 #=left, right # RRGGBB,Hr.html,HTML语言dreamweaver入门HTML语言基础,标题标记,格式：，设置各种大小不同标题的标记。一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签,其中n为标题的等级。HTML总共提供六个等级的标题，n越小，标题字号就越大,HTML语言dreamweaver入门HTML语言基础,标题标记举例,标题示例这是一行普通文字一级标题二级标题三级标题四级标题五级标题六级标题,HTML语言dreamweaver入门HTML语言基础,段落标记,格式：设置段落标记。 段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记。 注意：是可以省略的，因为下一个的开始就意味着上一个的结束。,HTML语言dreamweaver入门HTML语言基础,段落标记举例,段落标签浣溪沙一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。,HTML语言dreamweaver入门HTML语言基础,转行标记,格式：强制文字转行。 在dreamweaver中可用Shift+Enter输入。 关闭文字转行格式：,HTML语言dreamweaver入门HTML语言基础,注释标记,格式：注释内容不显示在网页。浏览器是忽略注释的，你不会在HTML正文中看到你的注释。,HTML语言dreamweaver入门HTML语言基础,换行标记示例,换行示例登鹳雀楼白日依山尽， 黄河入海流。欲穷千里目， 更上一层楼。,HTML语言dreamweaver入门HTML语言基础,字体设置标记,格式：功能：设置字体格式标记。标记提供了几种属性 ：size：设置文字的大小。face：设置字体。color：设置文字的颜色。,HTML语言dreamweaver入门HTML语言基础,字体大小示例,字号大小这是size=7的字体这是size=6的字体这是size=5的字体这是size=4的字体这是size=3的字体这是size=2的字体这是size=1的字体这是size=-1的字体,HTML语言dreamweaver入门HTML语言基础,文字的字体与样式,字体欢迎光临欢迎光临欢迎光临 欢迎光临Welcom my homepage.Welcom my homepage. ,HTML语言dreamweaver入门HTML语言基础,文字颜色示例, 文字的颜色 色彩斑斓的世界色彩斑斓的世界 色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界 色彩斑斓的世界色彩斑斓的世界,HTML语言dreamweaver入门HTML语言基础,预排版标记PRE,格式：为了方便直接显示一些有空格和换行的文本，提供PRE标签让系统直接按文本方式显示。,HTML语言dreamweaver入门HTML语言基础,re标记示例,re标记aaa bbbbccccddd ffffaaa bbbbccccddd ffff,HTML语言dreamweaver入门HTML语言基础,居中标记,格式：对整段文字直接用居中标记。,HTML语言dreamweaver入门HTML语言基础,文字效果标记,HTML语言dreamweaver入门HTML语言基础,特殊字符,HTML引入了自己的格式，一些字符有了特殊的含义，所以这些字符不能直接显示，采用转义方式来显示，一般格式如下：就是用&开头，分号结束，中间是字符的名字。详细见下表在dreamweaver中，菜单“插入” HTML “特殊字符”命令，在弹出的子菜单中选择要插入的特殊符号。,HTML语言dreamweaver入门HTML语言基础,特殊字符,HTML语言dreamweaver入门HTML语言基础,HTML有2种路径的写法：相对路径和绝对路径。 绝对路径(absolute path)指带域名的文件的完整路径。相对路径(Relative Path)./表示源文件所在目录的上一级目录 引用下级目录的文件，直接写下级目录文件的路径即可。,HTML语言dreamweaver入门HTML语言基础,超级链接,超级链接是从一个网页指向另一个目的端的链接。它可以有效而又清晰地组织网页并让访问者方便的浏览相关的信息。超链接分为两种。一种是相对链接，它指向当前网页所在的文件夹，不包括URL中的协议和计算机地址。另一种是绝对链接，它必须包括详细的URL协议和文件夹。 超级链接的目的端通常是另一个网页。但也可以是图片、E-Mail地址、Office文档、书签甚至一个程序。网页制作中，常用用不同的颜色来区分用过和没有使用过的超级链接。,HTML语言dreamweaver入门HTML语言基础,A标记,可以指向任何一个文件源：一个HTML网页，一个图片，一个影视文件等。用法如下：链接的显示文字 链接到email地址联系新浪,HTML语言dreamweaver入门HTML语言基础,加入超级链接格式：,HTML语言dreamweaver入门HTML语言基础,A标记,超链接名称,HTML语言dreamweaver入门HTML语言基础,添加超级链接菜单“插入” “超级链接”添加E-Mail链接菜单“插入” “电子邮件链接”,HTML语言dreamweaver入门HTML语言基础,图形按钮,图形按钮就是使用者通过在图形上单击，就能连接到某个地址上去。很简单，我们只要调用一下前面的知识就可以完成了。其基本格式如下：例： ,HTML语言dreamweaver入门HTML语言基础,插入图形,超文本之所以在很短的时间内如此广泛的受到人们的青睐，很重要的一个原因时它能支持多媒体的特性，如图象、声音、动画等。这一部分，我们先来学习在一个页面中如何插入图象。,HTML语言dreamweaver入门HTML语言基础,插入图象的标签是，其格式为：SRC属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。,HTML语言dreamweaver入门HTML语言基础,例： IMG还有两个属性是HEIGHT和WIDTH，分别表示图形的高和宽。通过这两个属性，可以改变图形的大小，如果没有设置，图形按原大显示：例：,HTML语言dreamweaver入门HTML语言基础,播放音乐,HTML除了可以插入图形之外，还可以播放音乐和视频等。用浏览器可以播放的音乐格式有：MIDI音乐、WAV音乐、AU格式。另外在利用网络下载的各种音乐格式中，MP3是压缩率最高，音质最好的文件格式。,HTML语言dreamweaver入门HTML语言基础,点播音乐,将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了，这样做的方法很简单：乐曲名例如： 播放一段MIDI音乐：MIDI音乐,HTML语言dreamweaver入门HTML语言基础,自动载入音乐,前面，我们是借助链接来实现网上播放音乐这一功能的，我们还可以让音乐自动载入，你可以让它出现控制面板或当背景音乐来使用。基本语法：,HTML语言dreamweaver入门HTML语言基础,IE中的背景音乐,另外，还有一种插入背景音乐格式，不过只有在IE浏览器中才可以听到。 #=循环数 例：,HTML语言dreamweaver入门HTML语言基础,制作表格,建立表格创建表格是规划页面最常用的方法。格式：功能：创建表格进行页面设计。 在浏览器中显示时，表格的整体外观由标记的属性决定 。,HTML语言dreamweaver入门HTML语言基础,表格基本格式, ,Table.html,HTML语言dreamweaver入门HTML语言基础,属性,HTML语言dreamweaver入门HTML语言基础,标签属性,HTML语言dreamweaver入门HTML语言基础,属性,HTML语言dreamweaver入门HTML语言基础,特殊效果表格,HTML语言dreamweaver入门HTML语言基础,设置单元格之间的特效,rules参数是对表格的内部边框作显示控制。 rules=none：表示不加内部边框；rules=rows：表示只显示水平方向的边框； rules=cols：表示只显示垂直方向上的边框；rules=all：则是显示所有方向上的边框，这也是默认值；,HTML语言dreamweaver入门HTML语言基础,设置表格外边框特效,frame=void：表示不加外边框；frame=above：表示显示上边的外边框；frame=below：表示显示下边的外边框；frame=lhs ：表示显示左边的外边框；frame=rls ：表示显示右边的外边框；frame=hsides：表示显示上下外边框；frame=vsides：表示显示左右外边框；frame=box 则表示显示所有外边框。,HTML语言dreamweaver入门HTML语言基础,单线表格更上一 层 楼 欲穷千 里 目 黄河 入 海 流 白日依 山 尽 登 黄 鹤 楼 ,HTML语言dreamweaver入门HTML语言基础,加入图像,图像在网页设计中是必不可少的，所以用户应掌握在网页中操作图像的方法。最基本的语法如下： 功能：在网页中加入图像。在HTML里面插入图片。,HTML语言dreamweaver入门HTML语言基础,img,HTML语言dreamweaver入门HTML语言基础, src图象的 URLalt在浏览器尚未完全读入图象时，在图象位置显示的文字。,HTML语言dreamweaver入门HTML语言基础,HTML有三种列表形式：排序列表(Ordered List)；不排序列表(Unordered List)；定义列表(Definition List)。,HTML语言dreamweaver入门HTML语言基础,无序号列表,无序号列表使用的一对标签是，每一个列表项前使用。其结构如下所示：第一项第二项第三项,HTML语言dreamweaver入门HTML语言基础,无序号列表,无序列表这是一个无序列表：国际互联网提供的服务有：WWW服务文件传输服务电子邮件服务远程登录服务其它服务,HTML语言dreamweaver入门HTML语言基础,序号列表,序号列表和无序号列表的使用方法基本相同，它使用标签，每一个列表项前使用。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：第一项第二项第三项,HTML语言dreamweaver入门HTML语言基础,序号列表,有序列表这是一个有序列表：国际互联网提供的服务有：WWW服务文件传输服务电子邮件服务远程登录服务其它服务,HTML语言dreamweaver入门HTML语言基础,定义性列表,定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。在应用中，列表项使用标签标明，说明性文字使用表示。在定义性列表中，还有一个属性是COMPACT,使用这个属性后，说明文字和列表项将显示在同一行。其结构如下所示：第一项 叙述第一项的定义第二项 叙述第二项的定义第三项 叙述第三项的定义,
