HTML资料大集合.doc

航标网技术部内部资料 HTML教程航标网技术部内部资料（HTML教程）HTML教程概述：HTML概述与基本结构一、HTML的概述 HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作.HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准.用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作（是World Wide Web的缩写，也可简写WEB、中文叫做万维网) 的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术-通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接。直接获取相关的主题。如下所示： 通过HTML可以表现出丰富多彩的设计风格： 图片调用： 文字格式： 文字 通过HTML可以实现页面之间的跳转： 页面跳转：A HREF=文件路径/文件名 通过HTML可以展现多媒体的效果： 声频： 视频：从上面我们可以看到HTML超文本文件时需要用到的一些标签。在HTML中每个用来作标签的符号都是一条命令、它告诉浏览器如何显示文本。这些标签均由符号以及一个字符串组成。而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画、播放声音。这些标签符号用“”来表示。HTML只是一个纯文本文件。创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个WEB浏览器。HTML编辑器是用于生成和保存THML文档的应用程序。WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。二、 HTML的基本结构： 一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置， HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。下面是一个最基本的html文档的代码:11.html - 开始标签 - 一个简单的HTML示例 | 头部标签 - - | 欢迎光临我的主页| | 文件主体 | 这是我第一次做主页 | | | - - 结尾标签在文档的最外层， 文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。事实上，现在常用的Web浏览器都可以自动识别HTML文档，并不要求有 标签，也不对该标签进行任何操作，但是为了使HTML文档能够适应不断变化的Web浏览器，还是应该养成不省略这对标签的良好习惯。 是HTML文档的头部标签, 在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公公属性。若不需头部信息则可省略此标记，良好的习惯是不省略。 和是嵌套在头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。 标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容。 上面的这几对标签在文档中都是唯一的，HEAD标签和BODY标签是嵌套在HTML标签中的。三、HTML的标签与属性: 对于刚刚接触超文本的朋友，遇到的最大的障碍就是一些用“”括起来的句子，我们称它为标签，是用来分割和标签文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档某个部件。属性是标志里的参数的选项， HTML的标签分单标签和成对标签两种。成对标签是由首标签 和尾标签组成的，成对标签的作用域只作用于这对标签中 的文档。单独标签的格式，单独标签在相应的位置插入元素就可以了，大多数标签都有自己的一些属性, 属性要写在始标签内，属性用于进一步改变显示的效果, 各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值;其格式如下： 内容 作为一般的原则，大多数属性值不用加双引号。但是包括空格、号，号等特殊字符的属性值必须加入双引号。为了好的习惯，提倡全部对属性值加双引号。如： 字体设置注意事项：输入始标签时，一定不要在“”与标签名之间输入多余的空格，也不能在中文输入法状态下输入这些标签及属性，否则浏览器将不能正确的识别括号中的标志命令，从而无法正确的显示你的信息。 HTML教程第一章：HTML语言的结构html文件是标准的ASCII文件，它看起来象是加入了许多被称为标注(tag)的特殊字符串的普遍文本文件。从结构上讲，html文件由元素(element)组成，组成html文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”， 即它有起始标记和结尾标记。元素的起始标记叫做起始标注(start tag)，元素结束标记叫做结尾标注(end tag)，在起始标注和结尾标注中向的部分是元素体。 每一个元素都有名称和可选择的属性，元素的名称和属性都在起始标注内标明。 比如体元素(body) demo This is my first html file. 第一行是体元素的起始标注，它标明体元素从此开始。因为所有的标注都具有相同的结构，所以我们将仔细分析这个标注的各个部分，以便读者对标注的写法有一大概了解。 起始标注开始body 元素名称，由于元素和标注一一对应，所以元素名也叫标注名。需要注意的是起始链接链结束。第二行和第三行是body元素的元素体，最后一行是body元素的结尾标注。结尾标注用。从上面的例子中，我们可以看出，一个元素的元素体中可以有另外的元素。(上例中第二行的标题元素和第三行的分段元素。实际上，html文件仅由一个html元素组成， 即文件以开始，以结尾，文件其部分都是 html的元素体。html元素的元素体由两大部分，即头元素.和体元素和一些注释组成。头元素和体元素的元素体又由其它的元素和文本及注释组成。也就是说，一个html文件应具有下面的结构：html文件开始 文件头开始 文件头 文件头结束 文件体开始 文件体 文件体结束 html文件结束需要说明的是，html是一门发展很快的语言，早期的html文件并没有如此严格的结构，因而现在流行的浏览器(如Netscape,Mosaic等)为保持对早期html文件的兼容性,也支持不按上述结构编写的html文件。还需要说明的是，各种浏览器对html元素及其属性的解释也不完全一样，本书中所讲的元素，元素的属性及其输出是以Netscape2.0 浏览器为准的，作者将尽量给出别的浏览器对某一元素的解释。一般来讲，html的元素有下列三种表示方法：1)文件或超文本2)文本成超文本3)第三种写法仅用于一些特殊的元素,比如分段元素P，它仅仅通知www浏览器在此处分段，因而不需要界定作用范围， 所以它没有结尾标注。htlm3.0标准中，也定义了 标注，它用于需要界定作用范围的段落，比如增加对齐方式属性的段落。注意: HTML并非大小写敏感. 和或者是一样的. html文件中，有些元素只能出现在头元素中，绝大多数元素只能出现在体元素中。在头元素中的元素表示的是该html文件的一般信息，比如文件名称，是否可检索等等。这些元素书写的次序是无关紧要的，它只表明该html有还是没有该属性。与此相反，出现在体元素中的元素是次序敏感的，改变元素在html文件中的次序会改变该html文件的输出形式。HTML教程第二章页面布局与文字设计标题 一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：H1第一级标题H2第二级标题H3第三级标题H4第四级标题H5第五级标题H6第六级标题请看下面的例子：标题示例这是一行普通文字H1一级标题H2二级标题H3三级标题H4四级标题H5五级标题H6六级标题显示结果这是一行普通文字 一级标题二级标题三级标题四级标题五级标题六级标题从结果可以看出，每一个标题的字体为黑体字，内容文字前后都插入空行。换行在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上标签。请看下面的例子：无换行示例登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。窗体顶端显示结果登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。换行示例 登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。窗体顶端显示结果登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。窗体底端段落标签为了排列的整齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一个的开始就意味着上一个的结束。 标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。下面，我们用两个例子来说明这个标签的用法。段落标签浣溪沙一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。显示结果 浣溪沙 一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。 无可奈何花落去，似曾相识燕归来。小园香径几徘徊。段落标签登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。显示结果登鹳雀楼 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。水平线段这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。有三个属性：size水平线的宽度width 水平线的长，用占屏幕宽度的百分比或象素值来表示align 水平线的对齐方式，有LEFT RIGHT CENTER三种noshade 线段无阴影属性，为实心线段 我们可以用几个例子来说明这线段的用法：线段粗细的设定线段粗细的设定这是第一条线段，无size设定，取内定值SIZE=1来显示这是第二条线段，SIZE=5这是第三条线段，SIZE=10显示结果这是第一条线段，无size设定，取内定值SIZE=1来显示这是第二条线段，SIZE=5这是第三条线段，SIZE=10线段长度的设定线段长度的设定这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示这是第二条线段，WIDTH=50(点数方式)这是第三条线段，WIDTH=50%(百分比方式)显示结果这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示这是第二条线段，WIDTH=50(点数方式)这是第三条线段，WIDTH=50%(百分比方式)线段排列的设定线段排列的设定这是第一条线段，无ALIGN设定，(取内定值CENTER显示)这是第二条线段，向左对齐这是第三条线段，向右对齐显示结果这是第一条线段，无ALIGN设定，(取内定值CENTER显示)这是第二条线段，向左对齐BR 这是第三条线段，向右对齐无阴影的设定无阴影的设定这是第一条线段，无NOSHADE设定，取内定值阴影效果来显示这是第二条线段，有NOSHADE设定显示结果这是第一条线段，无NOSHADE设定，取内定值阴影效果来显示这是第二条线段，有NOSHADE设定窗体底端文字的大小设置提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为17，其中缺省值为3。我们可以SIZE属性值之前加上“”、“”字符，来指定相对于字号初始值的增量或减量。请看示例：字号大小这是size=7的字体这是size=6的字体这是size=5的字体这是size=4的字体这是size=3的字体这是size=2的字体这是size=1的字体这是size=-1的字体显示结果这是size=7的字体 这是size=6的字体 这是size=5的字体 这是size=4的字体 这是size=3的字体 这是size=2的字体 这是size=1的字体 这是size=-1的字体文字的字体与样式HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。请看例子：字体欢迎光临欢迎光临欢迎光临 欢迎光临Welcom my homepage.Welcom my homepage. 显示结果欢迎光临 欢迎光临 欢迎光临 欢迎光临 Welcom my homepage. Welcom my homepage. 为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：粗体HTML语言斜体HTML语言加下划线HTML语言 打字机字体HTML语言大型字体HTML语言小型字体HTML语言闪烁效果HTML语言 表示强调，一般为斜体HTML语言 表示特别强调，一般为粗体HTML语言 用于引证、举例，一般为斜体HTML语言现在我们用一个实例来看看效果： 字体样式 黑体字 斜体字 加下划线 大型字体 小型字体 闪烁效果WelcomeWelcomeWelcom显示结果黑体字 斜体字 加下划线 大型字体 小型字体 闪烁效果 Welcome Welcome Welcom文字的颜色文字颜色设置格式如下：这里的颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是以下16种颜色名称。 Black = #000000Green = #008000Silver = #C0C0C0Lime = #00FF00Gray = #808080Olive = #808000White = #FFFFFFYellow = #FFFF00Maroon = #800000Navy = #000080Red = #FF0000Blue = #0000FFPurple = #800080Teal = #008080Fuchsia = #FF00FFAqua = #00FFFF请看例子： 文字的颜色 色彩斑斓的世界色彩斑斓的世界 色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界 色彩斑斓的世界色彩斑斓的世界显示结果色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界 色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界位置控制通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下：#leftrightcenter例：位置控制你好!你好!你好!显示结果你好!你好!你好!另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。如：#leftrightcenterH1 ALIGN=#综合示例前面我们所讲是单独使用一个标签的方法，在实际的编写中，许多标签和一些属性是结合起来使用的，比如：文字文字 【例】 字体样式 白居 易白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐代新乐府运动的倡 导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。 白居易出身于小官僚家庭。大约在贞元三年（ 787年）的年初，十六岁的白居易带着自己的诗稿，到 了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字，便很恢谐地说：“长安米贵，居住不易！”及披卷读到赋得古原草送别中的“离离原上草，一岁一枯荣；野火烧不尽，春风吹又生”时， 不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：“能写出这样好的诗句,居下去是不难的，刚才我是同你开开玩笑罢了。”从此，白居易的诗名大振。 白居易生活的时代，主要是建中、元和、长庆时期（公元781-824年）。是唐朝走向衰败的极端苦难动荡的时代。 白居易是继杜甫之后，我国伟大的现实主义诗人。 他的贡献是在总结我国自诗经以来现实主义诗歌创作经验的基础上，建立了现实主义的诗歌理论，掀起了一个波澜壮阔的现实主义的诗歌运动新乐府运动，创作了大量优秀的现实主义诗篇。 显示结果白 居 易 白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐代新乐府运动的倡 导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。 白居易出身于小官僚家庭。大约在贞元三年（ 787年）的年初，十六岁的白居易带着自己的诗稿，到 了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字，便很恢谐地说：“长安米贵，居住不 易！”及披卷读到赋得古原草送别中的“离离原上草，一岁一枯荣；野火烧不尽，春风吹又生” 时， 不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：“能写出这样好的诗句,居下去是不难的，刚才我是同你开开玩笑罢了。”从此，白居易的诗名大振。 白居易生活的时代，主要是建中、元和、长庆时期（公元781-824年）。是唐朝走向衰败的极端苦难动荡的时代。 白居易是继杜甫之后，我国伟大的现实主义诗人。 他的贡献是在总结我国自诗经以来现实主义诗歌创作经验的基础上，建立了现实主义的诗歌理论，掀起了一个波澜壮阔的现实主义的诗歌运动新乐府运动，创作了大量优秀的现实主义诗篇。HTML教程第三章列表无序号列表无序号列表使用的一对标签是，每一个列表项前使用。其结构如下所示：第一项第二项第三项例：无序列表这是一个无序列表：国际互联网提供的服务有：WWW服务文件传输服务电子邮件服务远程登录服务其它服务显示结果这是一个无序列表： 国际互联网提供的服务有： WWW服务 文件传输服务 电子邮件服务 远程登录服务 其它服务 序号列表序号列表和无序号列表的使用方法基本相同，它使用标签，每一个列表项前使用。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：第一项第二项第三项例：有序列表这是一个有序列表：国际互联网提供的服务有：WWW服务文件传输服务电子邮件服务远程登录服务其它服务国际互联网提供的服务有： 1. WWW服务 2. 文件传输服务 3. 电子邮件服务 4. 远程登录服务 5. 其它服务定义性列表定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。在应用中，列表项使用标签标明，说明性文字使用表示。在定义性列表中，还有一个属性是COMPACT,使用这个属性后，说明文字和列表项将显示在同一行。其结构如下所示：第一项 叙述第一项的定义第二项 叙述第二项的定义第三项 叙述第三项的定义例：定义性列表这是一个定义性列表：WWWWWW是全球信息网(World wide web)的缩写，也有人称之为3W、W3、Web。Hyper TextHyper Text是超文本。文件通过超文本，可链结到其它地方的数据文件，取得分散在各地的数据。显示结果这是一个定义性列表： WWW WWW是全球信息网(World wide web)的缩写，也有人称之为3W、W3、Web。 Hyper Text Hyper Text是超文本。文件通过超文本，可链结到其它地方的数据文件，取得分散在各地的数据。 HTML教程第四章table表格表格的基本结构. 定义表格.定义标题 定义表行 定义表头 定义表元(表格的具体数据)以下是一个简单的例子：姓名性别年龄王林男25 显示结果姓名性别年龄王林男25表格的标题 表格标题的位置，可由ALIGN属性来设置，其位置分别由表格上方和表格下方。下面为表格标题位置的设置格式。设置标题位于表格上方： . 设置标题位于表格下方： . 旅游日程 日期9-1111-1313-14 旅游地点青岛黄山杭州 显示结果：旅游日程 日期9-1111-1313-14旅游地点青岛黄山杭州旅游日程 日期9-1111-1313-14 旅游地点青岛黄山杭州 日期9-1111-1313-14旅游地点青岛黄山杭州旅游日程表格尺寸设置 表格的大小一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式：width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。下表是一个长为200像素，宽为100像素的表格。下表是一个长为屏幕的20%，宽为屏幕的10%的表格。边框尺寸设置边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。如： 定货单苹果香蕉葡萄200公斤200公斤100公斤 显示结果为：定货单苹果香蕉葡萄200公斤200公斤100公斤 定货单苹果香蕉葡萄200公斤200公斤100公斤 显示结果：定货单苹果香蕉葡萄200公斤200公斤100公斤 定货单苹果香蕉葡萄200公斤200公斤100公斤 显示结果：定货单苹果香蕉葡萄200公斤200公斤100公斤格间线宽度格与格之间的线为格间线，它的宽度可以使用中的CELLSPACING属性加以调节。格式是：#表示要取用的像素值例： 定货单苹果香蕉葡萄200公斤200公斤100公斤 显示结果为：定货单苹果香蕉葡萄200公斤200公斤100公斤内容与格线之间的宽度我们还可以在中设置CELLPADDING属性，用来规定内容与格线之间的宽度。格式为：#表示要取用的像素值例： 定货单苹果香蕉葡萄200公斤200公斤100公斤 显示结果为：定货单苹果香蕉葡萄200公斤200公斤100公斤表格内文字的对齐/布局表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以ALIGN属性来设置，而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种：居左（left)居右(right)和居中(center)；而上下排列基本上比较常用的有四种：上齐(top)居中(middle)、下齐(bottom)和基线(baseline)。 #=left, center, right #=top，middle，bottom，baseline 左右排列居左居中居右 A B C 显示结果：居左居中居右ABC上下排列 上齐居中 下齐基线 A B CD 显示结果：上齐居中下齐基线ABCD跨多行