HTML基础知识培训

1、HTML基础知识培训HTML入门HTML英语意思是：Hypertext Marked Language ,即超文本标记语言,是一种用来制 作超文本文档的简单标记语言。用 HTML编写的超文本文档称为 HTML文档，它能独 立于各种操作系统平台（如 UNIX，WINDOWS等）。自1990年以来HTML就一直被 用作 World Wide Web的信息表示语言，用于描述 Homepage的格式设计和它与 WWW 上其它Homepage的连结信息。使用 HTML语言描述的文件，需要通过 WWW浏览器 显示出效果。所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个 文件跳转到另

2、一个文件，与世界各地主机的文件连接。 过HTML可以表现出丰富多彩的设计风格图片调用：文字格式： 文字 通过HTML可以实现页面之间的跳转页面跳转： 超级链接 通过HTML可以展现多媒体的效果音频、视频、动画上面我们在示例超文本特征的同时，采用了一些我们在制作超文本文件时需要用到的一些标签。所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“ ”来表示。HTML的基本结构超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。头部信息文档主体，正文部分其中HTML在最外层，表示这对标记间的内容是HTML文档。我们还会看

3、到一些页面省略HTML标记，因为.html或.htm文件被 Web浏览器默认为是 HTML文档, 但是这种做法是错误的，后面会提到一些错误的做法。HEAD之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。BODY表示正文内容的开始。F面是一个最基本的超文本文档的源代码: 一个简单的 HTML 示例 欢迎光临我的主页vfont size=” 2”这是我第一次做主页，无论怎么样，我都会努力做好!head区的其他设置设置站点作者信息vmeta n ame=author con ten t=lriska ng,小康/设置站点版权信息vmeta name=Copyright cont

4、ent=sina /站点的简要介绍（推荐）vmeta name=description content=新浪房产是专业的房地产网站，致力于为 房地产业界、主力购房人群、装修人群提供各类服务与咨讯。主要栏目有：房产 新闻、楼盘展示、新盘中心、写字楼、商铺、地产圈、家居装修、家居图库、业 主社区论坛等内容。房地产，房产，买房，租房，二手房，家居，装修，物业，房贷，写 字楼/站点的关键词（推荐）vmeta name=keywords content= 房产家居,房地产新闻,建材,装修,写字楼 /二、超文本中的标签在开始正式内容制作之前，我们必须先了解一下 web 标准有关代码的规范。了解 这些规范可

5、以帮助你少走弯路,尽快通过代码校验。1. 单标签 某些标记称为“单标签” ，因为它只需单独使用就能完整地表达意思，这类标记的语法是： 最常用的单标签是 , 它表示换行。2. 双标签 另一类标记称为“双标签” ，它由“始标签”和“尾标签”两部分构成，必须成对 使用，其中始标签告诉 Web 浏览器从此处开始执行该标记所表示的功能，而尾标签告 诉 Web 浏览器在这里结束该功能。始标签前加一个斜杠（/ ）即成为尾标记。这类标记的语法是： 内 容其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字 的显示，就将此段文字放在一 标记中： 第一： 3. 标签属性 许多单标记和双标记的始

6、标记内可以包含一些属性，其语法是：各属性之间无先后次序，属性也可省略（即取默认值），例如单标记 表示在文档当前位置画一条水平线（ horizontal line ），一般是从窗口中当前行的最左端一直画到最右端。带一 些属性：其中 SIZE 属性定义线的粗细， 属性值取整数， 缺为 1；ALIGN 属性表示对齐方式， 可取LEFT （左对齐，缺省值），CENTER （居中），RIGHT （右对齐）；WIDTH 属性定 义线的长度，可取相对值， （由一对 号括起来的百分数，表示相对于充满整个窗口 的百分比） ，也可取绝对值（用整数表示的屏幕像素点的个数，如 WIDTH= ”300”），缺 省值是

7、100% 。其中值得注意的：1 所有的标记都必须要有一个相应的结束标记以前在HTML中，你可以打开许多标签，例如和而不一定写对应的和来关闭它们。但在XHTML中这是不合法的。XHTM要求有严谨的结构，所有标签必 须关闭。如果是单独不成对的标签，在标签最后加一个” /来关闭它。例如:2所有标签的元素和属性的名字都必须使用小写与HTML不一样，XHTMI对大小写是敏感的， 和是不同的标签。XHTML 要求所有的标签和属性的名字都必须使用小写。例如：BODY必须写成。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字 onMouseOver也必须修改成onmouseover。3所

8、有的XML标记都必须合理嵌套同样因为XHTM要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：必须修改为：就是说，一层一层的嵌套必须是严格对称。4所有的属性必须用引号括起来在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如：必须修改为：特殊情况，你需要在属性值里使用双引号，你可以用”，单引号可以使用，例如：四、页面布局与文字设计1.标题一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签,其中n为标题的等HTML总共提供六个等级的标题， n越小，标题字号就越大， 以下列出所有等级的标题： - 第级标题 - 第二级标题 -

9、第三级标题H4 第四级标题H5 第五级标题 - 第八级标题请看下面的例子: 标题示例 这是一行普通文字H1 一级标题 H2 二级标题 H3三级标题H4四级标题H5五级标题H6六级标题2. 换行 在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会 被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上标签。请看下面的例子:无换行示例登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 换行示例 登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更 上一层楼。3. 段落标签为了排列的整齐

10、、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记。标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT 三种。下面，我们用两个例子来说明这个标签的用法。 段落标签 浣溪沙 曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。4. 水平线段这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。有三个属性：tml水平线的宽度weh段落平线的长，e用占屏幕宽度的百分比或象素值来表示 水平线的对齐方式，有LEFT RIGHT CENTER 三种noshade线段无阴影属

11、性，为实心线段登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。线段粗细的设定这是第一条线段，无 size设定，取内定值 SIZE=1来显示 这是第二条线段，SIZE=5这是第三条线段，SIZE=105. 文字的大小设置提供设置字号大小的是 FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置 字号大小，而 SIZE属性的有效值范围为 1 7,其中缺省值为 3。我们可以SIZE属性值之 前加上“ + ”、“ ”字符，来指定相对于字号初始值的增量或减量。请看示例： 字号大小 这是 size=7 的字体 这是 size=6 的字体 这是 size=5 的字体 这是 size=4

12、 的字体 font size= -1 ”这是 size=-1 的字体 6. 文字的字体与样式HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。请看例子: 字体 欢迎光临 欢迎光临 欢迎光临 欢迎光临 Welcom my homepage.Welcom my homepage. 为了让文字富有变化，或者为了着意强调某一部分， HTML 提供了一些标签产生这些效果， 现将常用的标签列举如下： 粗体 斜体 加下划线 打字机字体 大型字体 小型字体 闪烁

13、效果 表示强调，一般为斜体 表示特别强调，一般为粗体 用于引证、举例，一般为斜体 7. 文字的颜色文字颜色设置格式如下：font color= color_value ”这里的颜色值可以是一个十六进制数（用“#”作为前缀 ），也可以是以下 16 种颜色名称。lack = ”#000000liver = M#C0C0C0HGreen = #008000ime = #00FF00ray = “就眈 080”Olive = #808000lute 十FFFFFFellow = #FFFF00laroon = #800000Navy = #000080Red = #: VBlue = #0000FFP

14、urple = 8000801Teal = #0080807uchsia = F#FFOOFFMAqua = #00FFFF五、列表LIST1.无序号列表无序号列表使用的一对标签是，每一个列表项使用 。其结构如下所示： 第一项 第二项 第三项例： 无序列表 这是一个无序列表：国际互联网提供的服务有：WWW 服务 文件传输服务电子邮件服务远程登录服务其它服务2. 序号列表序号列表和无序号列表的使用方法基本相同，它使用标签，每一个列表项使用 。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示： 第一项 第二项 第三项3. 定义性列表定义性列表可以用来给每一个列表项再加上一段说明性文字，说明

15、独立于列表项另起一行显示。在应用中，列表项使用标签标明，说明性文字使用表示。在定 义性列表中，还有一个属性是COMPACT,使用这个属性后，说明文字和列表项将显示在同一行。其结构如下所示： 第一项 叙述第一项的定义第二项 叙述第二项的定义 第三项 叙述第三项的定义 六、表格1.表格的基本结构.定义表格.定义标题定义表行定义表头定义表元（表格的具体数据）基本表格的例子： 表格标题&n bsp;&n bsp;&n bsp;&n bsp;2. 表格的标题表格标题的位置，可由 ALIGN属性来设置，其位置分别由表格上方和表格下方。 下面为表格标题位置的设置格式。设置标题位于表格上方： . 设置标题位于

16、表格下方： . 3. 表格的大小一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式：table width= n1 height= ”2 ”width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。4. 边框尺寸设置边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。5. 格间宽度格与格之间的线为格间线，它的宽度可以使用中的CELLSPACING属性加以调节。格式是：#表示要取用的像素值格间宽度如下

17、图中的绿色区域：疋货单華君苜r冗萄200-顾公斤五公齐I6.内容与格线之间的宽度 我们还可以在中设置CELLPADDING属性，用来规定内容与格线之间的 宽度。格式为：TABLE CELLPADDING= ”#表示要取用的像素值内容与格线之间的宽度如下图中的红色区域：定货単i香蕉i200公斤| 200公斤I7. 表格内文字的对齐怖局表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以ALIGN 属性来设置，而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种：居左(left)、居右(right)和居中(center);而上下排列基本上比较常用的有四种：上齐(top)

18、、居中(middle)、下齐(bottom)。#=left, cen ter, righttr valign=” #” #=top， middle， bottomtd valign=” #”示例：表格标题 水平居中 水平居右 水平居左 垂直顶端 垂直居中 垂直底端 表格标题木平居中爭居有水羊居左垂直顶端垂直居中唾:直底端8. 跨多行、多列的表元要创建跨多行、 多列的表元，只需在或中加入ROWSPAN或COLSPAN 属性，这两个属性的值，表明了表元中要跨越的行或列的个数。跨多列的表元 td colspa n=” ”colspan表示跨越的列数，例如 colspan=2表示这一格的宽度为两个列的

19、宽度。跨多行的表元 th rowspa n= ” rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个行的高度。跨多列的表元table border 值班人员 星期一 星期二 星期三 李强 张明 王平 值班人员 星期一星期二星期三 蒔I张明ii王平跨多行的表元table border 值班人员 星期一 星期二 星期三 李强 张明 王平 星斯二區甫三星期三值班人取|李暹张明.圧乎.也可以对任何一行、一个表元使用背景色。table bgcolor=”或 Table colorTD color表格的颜色在表格中，既可以对整个表格填入底色, 表格的背景色彩 行的背景色彩 表元的背景色彩颜色叠加层次如下图：七、文件之间的链接超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页 面、图象或者服务器。一个链接的基本格式如下： w3c 标签表示一个链接的开始，表示链接的结束； 属性“ href”定义了这个链接所指的地方，即URL地址;target 链接打开的地址的目标窗口，可能的取值：_blank 在新窗口打开此链接。_self在本窗口打开此链接(本页刷新) 。_parent 在父框架窗口打开此链接。_top在最外层框架窗口打开此链接。八、多媒体效果超文本之所以在很短的时间内如此广