2022年HTML入门教程 2.pdf

《2022年HTML入门教程 2.pdf》由会员分享，可在线阅读，更多相关《2022年HTML入门教程 2.pdf（9页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、HTML 入门教程(一)一、基本标志 1.2.3.4.Html是英文 HyperText Markup Language 的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写 Html 文件。Html 语言使用标志对的方法编写文件，既简单又方便，它通常使用 来表示标志的开始和结束(例如 标志对)，因此在 Html 文档中这样的标志对都必须是成对使用的。在此教程中，我先讲一下Html 的基本标志：1.标志用于 Html 文档的最前边，用来标识H

2、tml 文档的开始。而 标志恰恰相反，它放在 Html 文档的最后边，用来标识 Html 文档的结束，两个标志必须一块使用。2.和 构成 Html 文档的开头部分，在此标志对之间可以使用、等等标志对，这些标志对都是描述Html 文档相关信息的标志对，标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。3.是 Html 文档的主体部分，在此标志对之间可包含、等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。标志中还可以有以下属性：属性用途示例 设置背景颜色。红色背景 设置文本颜色。蓝色文本 设置链接颜色。名师资料总结-精品资料欢迎下载-名

3、师精心整理-第 1 页，共 9 页 -链接为蓝色 设置已使用的链接的颜色。设置正在被击中的链接的颜色。说明:以上各个属性可以结合使用，如。引号内的 rrggbb 是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色，如#ff0000 对应的是红色。此外，还可以使用Html 语言所给定的常量名来表示颜色：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue 和 Teal，如表示 标志对中的文本使用蓝色显示在浏览器的框内。4.使用过浏览器的人可能都会注意到浏览器窗口最

4、上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在 标志对之间加入您要显示的文本即可。注意：标志对只能放在 标志对之间。下面是一个综合的例子，仔细阅读，您便可以了解以上各个标志对在一个Html 文档中的布局或所使用的位置。例 1 Html 文档中基本标志的使用 显示在浏览器最上边蓝色条中的文本 红色背景、蓝色文本 二、格式标志 1.2.3.4.5.6.上一个教程中我们讲了Html 文档的基本标志，但我们还不知道怎样在浏览器中显示文本之类的东西，这正是我们在教程二中将要谈到的。在学习之前，必名师资料总结-精品资料欢迎下载-名师精心整理

5、-第 2 页，共 9 页 -须强调一下，我们这个教程中所讲的格式标志统统都是用于标志对之间的。1.标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外，标志还可以使用 align属性，它用来说明对齐方式，语法是：。Align可以是 Left(左对齐)、Center(居中)和 Right(右对齐)三个值中的任何一个。如表示标志对中的文本使用居中的对齐方式。2.是一个很简单的标志，它没有结束标志，因为它用来创建一个回车换行，这么一说我想您该会使用了吧。在的使用上还有一定的技巧，如果您把 加在标志对的外边，将创建一个大的回车换行，即前边和后边的文本的行与行之间的距离

6、比较大，若放在 的里边则 前边和后边的文本的行与行之间的距离将比较小，您不妨试试看。3.在标志对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。4.用来创建一个普通的列表，用来创建列表中的上层项目，用来创建列表中最下层项目，和 都必须放在 标志对之间。看一下下边的例子您就会明白了：例 2 创建一个普通列表 一个普通列表 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约 此例在浏览器中的显示如下:中国城市北京上海名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 9 页 -广州美国城市华盛顿芝加哥纽约5.标志对用来创建一个标有数字的列表；标志对用来创建一个标有圆点的列表

7、；/li&g 二、格式标志 1.2.3.4.5.6.上一个教程中我们讲了Html 文档的基本标志，但我们还不知道怎样在浏览器中显示文本之类的东西，这正是我们在教程二中将要谈到的。在学习之前，必须强调一下，我们这个教程中所讲的格式标志统统都是用于标志对之间的。1.标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外，标志还可以使用 align属性，它用来说明对齐方式，语法是：。Align可以是 Left(左对齐)、Center(居中)和 Right(右对齐)三个值中的任何一个。如表示标志对中的文本使用居中的对齐方式。2.是一个很简单的标志，它没有结束标志，因为它

8、用来创建一个回车换行，这么一说我想您该会使用了吧。在的使用上还有一定的技巧，如果您把 加在标志对的外边，将创建一个大的回车换行，即前边和后边的文本的行与行之间的距离比较大，若放在 的里边则 前边和后边的文本的行与行之间的距离将比较小，您不妨试试看。3.在标志对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。4.用来创建一个普通的列表，用来创建列表中的上层项目，用来创建列表中最下层项目，和 都必须放在 标志对之间。看一下下边的例子您就会明白了：例 2 创建一个普通列表 一个普通列表 名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 9 页 -中国城市 北京 上海 广州 美国城市

9、 华盛顿 芝加哥 纽约 此例在浏览器中的显示如下:中国城市北京上海广州美国城市华盛顿芝加哥纽约5.标志对用来创建一个标有数字的列表；标志对用来创建一个标有圆点的列表；/li&g t;标志对只能在 或标志对之间使用，此标志对用来创建一个列表项，若 放在之间则每个列表项加上一个数字，若在 之间则每个列表项加上一个圆点。请看下边的例子：例 3 标有数字或圆点的列表 中国城市 北京 上海 广州 名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 9 页 -美国城市 华盛顿 芝加哥 纽约 此例在浏览器中的显示如下:中国城市1.北京2.上海3.广州美国城市华盛顿芝加哥纽约6.标志对用来排版大块H

10、tml 段落，也用于格式化表，此标志对的用法与 标志对非常相似，同样有align对齐方式属性，读者可以自己试试看。三、文本标志 1.2.,3.4.5.上一个教程中我们已经讲了如何在浏览器中输出文本，以及文本输出的格式，这个教程中我们将谈一谈文本输出的字体，如斜体、黑体字、下加一划线等等。在本教程的最后给出了一个文本标志的综合示例，希望读者能认真阅读。1.标志对用来对文本进行预处理操作。2.,名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 9 页 -Html语言提供了一系列对文本中的标题进行操作的标志对：,，即一共有六对标题的标志对。是最大的标题，而则是最小的标题，也即是标志中h

11、后面的数字越大标题文本就越小。如果您的Html 文档中需要输出标题文本的话，便可以使用这六对标题标志对中的任何一对。3.经常使用 WORD 的人对这三对标志对一定很快就能掌握。用来使文本以黑体字的形式输出；用来使文本以斜体字的形式输出；用来使文本以下加一划线的形式输出。后边将会有一个综合的例子，所以此处就不再作详细讲解了。4.这些标志对的用法和上边的一样，差别只是在于输出的文本字体不太一样而已。用来输出打字机风格字体的文本；用来输出引用方式的字体，通常是斜体；用来输出需要强调的文本(通常是斜体加黑体)；则用来输出加重文本(通常也是斜体加黑体)。这些标志对的示例也将在后边综合的例子中出现。5.是

12、一对很有用的标志对，它可以对输出文本的字体大小、颜色进行随意地改变，这些改变主要是通过对它的两个属性size 和 color 的控制来实现的。size 属性用来改变字体的大小，它可以取值：-1、1 和+1；而 color 属性则用来改变文本的颜色，颜色的取值是我们在教程一中讲过的十六进制RGB 颜色码或 Html 语言给定的颜色常量名。具体用法请看下边综合的例子。例 4 文本标志的综合示例最大的标题使用 h3 的标题最大的标题黑体字文本名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 9 页 -斜体字文本下加一划线文本打字机风格的文本引用方式的文本强调的文本加重的文本color=r

13、edsize取值“+1”、color取值“red”时的文本本例在浏览器中显示的结果如下：最大的标题使用 h3 的标题最大的标题黑体字文本斜体字文本下加一划线文本打字机风格的文本引用方式的文本强调的文本加重的文本size 取值“+1”、color取值“red”时的文本四、图像标志名师资料总结-精品资料欢迎下载-名师精心整理-第 8 页，共 9 页 -1.2.再简单朴素的网页如果只有文字而没有图像的话将失去许多活力，图像在网页制作中是非常重要的一个方面，Html 语言也专门提供了标志来处理图像的输出。1.标志并不是真正地把图像给加入到Html 文档中，而是将标志对的src 属性赋值，这个值是图形文

14、件的文件名，当然包括路径，这个路径可以是相对路径，也可以是网址。实际上就是通过路径将图形文件嵌入到您的文档中。您可能并不知道什么是相对路径，我现在就来讲一讲相对路径。所谓相对路径是指您所要链接或嵌入到当前 Html 文档的文件与当前文件的相对位置所形成的路径。假如您的Html 文件与图形文件(文件名假设是 logo.gif)在同一个目录下，则可以将代码写成 src=logo.gif；假如您的图形文件放在当前的Html 文档所在目录的一个子目录(子目录名假设是images)下，则代码应为src=images/logo.gif；假如您的图形文件放在当前的Html 文档所在目录的上层目录(目录名假设

15、是home)下，则相对路径就必须是准网址了，即用“./”表示您的网站，然后在后边紧跟文件在您的网站中的路径，假设home是您的网站下的一个目录，则代码应为src=./home/logo.gif，若 home是您的网站下的目录king 下边的一个子目录，则代码应该变为了。现在您对相对路径应该有所了解了吧！必须强调一下，src 属性在标志中是必须赋值的，是标志中不可缺少的一部分。除此之外，标志还有 alt、align、border、width 和 height 属性。align是图像的对齐方式，在前边的教程中已经讲了很多了，这里就不再提了。border 属性是图像的边框，可以取大于或者等于0 的整

16、数，默认单位是像素。width 和 Height 属性是图像的宽和高，默认单位也是象素。alt 属性是当鼠标移动到图像上时显示的文本。2.标志是在 Html 文档中加入一条水平线，它可以直接使用，具有size、color、width 和 noshade属性。size 是设置水平线的厚度，而 width 是设定水平线的宽度，默认单位是像素。想必大家对 color属性已经很熟悉了，在此就不再用多讲。noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线(不加入此属性水平线将有阴影)。下面是本教程的一个综合例子。例 5 图像标志举例target=_blankhttp:/ alt=网 页 制作 WIDTH=468 HEIGHT=60 border=0 名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 9 页 -