2024年3月4日发(作者：)
HTML 基础知识培训
一、 HTML入门
HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World
Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage
的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。
所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。
过HTML可以表现出丰富多彩的设计风格
图片调用：
文字格式：文字
通过HTML可以实现页面之间的跳转
页面跳转：超级链接
通过HTML可以展现多媒体的效果
音频、视频、动画
上面我们在示例超文本特征的同时，采用了一些我们在制作超文本文件时需要用到的一些标签。所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名 属性=”值”>”来表示。
二、 HTML的基本结构
超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。
头 部 信 息
文 档 主 体， 正 文 部 分
其中在最外层，表示这对标记间的内容是HTML文档。我们还会看到一些页面省略标记，因为.html 或.htm 文件被Web浏览器默认为是HTML文档,但是这种做法是错误的，后面会提到一些错误的做法。
之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。表示正文内容的开始。
下面是一个最基本的超文本文档的源代码：
< html
>
一个简单的HTML示例</ title > </p><p style="text-indent: 2em;";></ head > </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";><body> </p><p style="text-indent: 2em;";>< center > </p><p style="text-indent: 2em;";><h3>欢迎光临我的主页</ h3> </p><p style="text-indent: 2em;";><br /> </p><p style="text-indent: 2em;";><hr /> </p><p style="text-indent: 2em;";><font size=”2”> </p><p style="text-indent: 2em;";> 这是我第一次做主页，无论怎么样，我都会努力做好！ </p><p style="text-indent: 2em;";></font> </p><p style="text-indent: 2em;";></center> </p><p style="text-indent: 2em;";></ body > </p><p style="text-indent: 2em;";></html> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>head区的其他设置 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>设置站点作者信息 </p><p style="text-indent: 2em;";><meta name="author" content="Iriskang,小康" /> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>设置站点版权信息 </p><p style="text-indent: 2em;";><meta name="Copyright" content="sina " /> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>站点的简要介绍(推荐) </p><p style="text-indent: 2em;";><meta name="description" content="新浪房产是专业的房地产网站，致力于为房地产业界、主力购房人群、装修人群提供各类服务与咨讯。主要栏目有：房产新闻、楼盘展示、新盘中心、写字楼、商铺、地产圈、家居装修、家居图库、业主社区论坛等内容。房地产,房产,买房,租房,二手房,家居,装修,物业,房贷,写字楼" /> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>站点的关键词(推荐) </p><p style="text-indent: 2em;";><meta name="keywords" content="房产家居,房地产新闻,建材,装修,写字楼" </p><p style="text-indent: 2em;";>/> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>三、 超文本中的标签 </p><p style="text-indent: 2em;";>在开始正式内容制作之前，我们必须先了解一下web标准有关代码的规范。了解这些规范可以帮助你少走弯路,尽快通过代码校验。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>1. 单标签 </p><p style="text-indent: 2em;";>某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是： </p><p style="text-indent: 2em;";> <标签名称 /> </p><p style="text-indent: 2em;";>最常用的单标签是<br />, 它表示换行。 </p><p style="text-indent: 2em;";>2. 双标签 </p><p style="text-indent: 2em;";>另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";><标签> 内 容</标签> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一<EM> </EM>标记中： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";><EM>第一：</EM> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>3. 标签属性 </p><p style="text-indent: 2em;";>许多单标记和双标记的始标记内可以包含一些属性， 其语法是： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";><标签名字 属性1=”值” 属性2=”值” 属性3=”值” … ></标签名字> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>各属性之间无先后次序，属性也可省略（即取默认值），例如单标记<HR />表示在文档当前位置画一条 </p><p style="text-indent: 2em;";>水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。带一些属性： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> <HR SIZE=”3 “ ALIGN=”LEFT” WIDTH="75%" /> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线</p><p style="text-indent: 2em;";>的长度，可取相对值，（由一对 " " 号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=”300”），缺省值是"100%"。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>其中值得注意的： </p><p style="text-indent: 2em;";>1所有的标记都必须要有一个相应的结束标记 </p><p style="text-indent: 2em;";>以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和< </p><p style="text-indent: 2em;";>/li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个" /"来关闭它。 </p><p style="text-indent: 2em;";>例如:<br /> </p><p style="text-indent: 2em;";>2所有标签的元素和属性的名字都必须使用小写 </p><p style="text-indent: 2em;";>与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性 的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。 </p><p style="text-indent: 2em;";>3 所有的XML标记都必须合理嵌套 </p><p style="text-indent: 2em;";>同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码： </p><p style="text-indent: 2em;";><p><b></p></b> </p><p style="text-indent: 2em;";>必须修改为： </p><p style="text-indent: 2em;";><p><b></b></p> </p><p style="text-indent: 2em;";>就是说，一层一层的嵌套必须是严格对称。 </p><p style="text-indent: 2em;";>4 所有的属性必须用引号""括起来 </p><p style="text-indent: 2em;";>在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如: </p><p style="text-indent: 2em;";><height=80> </p><p style="text-indent: 2em;";>必须修改为： </p><p style="text-indent: 2em;";><height="80"> </p><p style="text-indent: 2em;";>特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如： </p><p style="text-indent: 2em;";><alt="say'hello'"> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>四、 页面布局与文字设计 </p><p style="text-indent: 2em;";>1. 标题 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<Hn>,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>〈H1>…</H1> 第一级标题 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>〈H2>…</H2> 第二级标题 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>〈H3>…</H3> 第三级标题 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>〈H4>…</H4> 第四级标题 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>〈H5>…</H5> 第五级标题 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>〈H6>…</H6> 第六级标题 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>请看下面的例子： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";><html> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";><head> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";><title>标题示例
这是一行普通文字
〈H1>一级标题
〈H2>二级标题
〈H3>三级标题
〈H4>四级标题
〈H5>五级标题
〈H6>六级标题
2. 换行
在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上
标签。
请看下面的例子：
无换行示例
登鹳雀楼 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
换行示例
登鹳雀楼
白日依山尽，
黄河入海流。
欲穷千里目，
更上一层楼。
3. 段落标签
为了排列的整齐、清晰，文字段落之间，我们常用
来做标记。文件段落的开始由
来标记，段落的结束由
来标记。
标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。
下面，我们用两个例子来说明这个标签的用法。
段落标签
浣溪沙
一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。
无可奈何花落去，似曾相识燕归来。小园香径几徘徊。
4. 水平线段
这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。
有三
段落标签
个属性：
size 水平线的宽度
width 水平线的长，用占屏幕宽度的百分比或象素值来表示
align 水平线的对齐方式，有LEFT RIGHT CENTER三种
noshade 线段无阴影属性，为实心线段
线段粗细的设定
这是第一条线段，无size设定，取内定值SIZE=1来显示
这是第二条线段，SIZE=5
这是第三条线段，SIZE=10
5. 文字的大小设置
提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为1－7，其中缺省值为3。我们可以SIZE属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。
请看示例：
字号大小
这是size=7的字体
这是size=6的字体
这是size=5的字体
这是size=4的字体
这是size=-1的字体
6. 文字的字体与样式
提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的
任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。
请看例子：
字体
欢迎光临
欢迎光临
欢迎光临
欢迎光临
Welcom my homepage.
Welcom my homepage.
为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：
粗体
斜体
加下划线
打字机字体
大型字体
小型字体
表示强调，一般为斜体
表示特别强调，一般为粗体
用于引证、举例，一般为斜体
7. 文字的颜色
文字颜色设置格式如下：
…
这里的颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是以下16种颜色名称。
Black = "#000000"
Lime = "#00FF00"
White = "#FFFFFF"Navy = "#000080"Purple = "#800080"Aqua = "#00FFFF"
Green = "#008000"
Gray = "#808080"Yellow = "#FFFF00"
Silver = "#C0C0C0"
Olive = "#808000"
Maroon = "#800000"
Red = "#FF0000"Teal = "#008080"Blue = "#0000FF"
Fuchsia = "#FF00FF"
五、 列表LIST
1. 无序号列表
无序号列表使用的一对标签是
，每一个列表项使用
。其结构如下所示：
例：
无序列表
这是一个无序列表：
第一项
第二项
第三项
3. 定义性列表
定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。在应用中，列表项使用标签
标明，说明性文字使用表示。在定义性列表中，还有一个属性是COMPACT,使用这个属性后，说明文字和列表项将显示在同一行。其结构如下所示：
- 第一项
- 叙述第一项的定义
- 第二项
- 叙述第二项的定义
- 第三项
- 叙述第三项的定义
六、 表格
1. 表格的基本结构
定义表格
... 定义标题
定义表行
定义表头 | 定义表元(表格的具体数据) 基本表格的例子： 表格的标题表格标题的位置，可由ALIGN属性来设置，其位置分别由表格上方和表格下方。下面为表格标题位置的设置格式。 设置标题位于表格上方： ... 设置标题位于表格下方： ... 3. 表格的大小 一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式： width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。 4. 边框尺寸设置 边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。 5. 格间宽度 格与格之间的线为格间线，它的宽度可以使用 中的CELLSPACING属性加以调节。格式是： #表示要取用的像素值 格间宽度如下图中的绿色区域： 6. 内容与格线之间的宽度 我们还可以在 中设置CELLPADDING属性，用来规定内容与格线之间的宽度。格式为： #表示要取用的像素值 内容与格线之间的宽度如下图中的红色区域： 7. 表格内文字的对齐/布局 表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以ALIGN属性来设置，而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种：居左（left)、居右(right)和居中 (center)；而上下排列基本上比较常用的有四种：上齐(top)、居中(middle)、下齐(bottom)。 | #=left, center, right | | | #=top，middle，bottom | 示例： 表格标题 | 水平居中 | 水平居右 | 水平居左 | | 垂直顶端 | 垂直居中 | 垂直底端 | 8. 跨多行、多列的表元 要创建跨多行、多列的表元，只需在 | 或 | 中加入ROWSPAN或COLSPAN属性，这两个属性的值，表明了表元中要跨越的行或列的个数。 跨多列的表元 | | colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。 跨多行的表元 | | rowspan所要表示的意义是指跨越的行数，例如rowspan=”2” 就表示这一格跨越表格两个行的高度。 跨多列的表元 跨多行的表元 表格的颜色 在表格中，既可以对整个表格填入底色，也可以对任何一行、一个表元使用背景色。 表格的背景色彩 行的背景色彩 表元的背景色彩 或 | 颜色叠加层次如下图： 七、 文件之间的链接 超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个链接的基本格式如下： w3c 标签表示一个链接的开始，表示链接的结束； 属性“href”定义了这个链接所指的地方，即URL地址； target 链接打开的地址的目标窗口，可能的取值： "_blank" 在新窗口打开此链接。 "_self" 在本窗口打开此链接（本页刷新）。 "_parent" 在父框架窗口打开此链接。 "_top" 在最外层框架窗口打开此链接。 八、 多媒体效果 超文本之所以在很短的时间内如此广泛的受到人们的青睐，很重要的一个原因时它能支持多媒体的特性，如图象、声音、动画等。这一部分，我们先来学习在一个页面中如何插入图象。 1. 插入图形 超文本支持的图象格式一般有X Bitmap(XBM)、GIF、JPEG三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。 插入图象的标签是![]() ，其格式为： SRC属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。 例： IMG还有两个属性是HEIGHT和WIDTH，分别表示图形的高和宽。通过这两个属性，可以改变图形的大小，如果没有设置，图形按原大显示： 例： 2. 播放音乐、视频 利用各种媒体播放软件为浏览器提供的插件，可以实现在页面上进行多媒体文件的播放，由于使用的播放器不同，嵌入的代码也不同，具体可以参考播放软件的开发文档。例如最常用的Windows Media Player的一段嵌入代码。 九、 总结 对于HTML的学习，一定要经常练习，并阅读一定量的代码，才能达到熟练使用的程度。可以借助Dreamweaver等软件，进行HTML的学习。
本文标签：
属性标签表示表格使用
| | |
发表评论