HTML基础知识(2).ppt

1、1,封面,网页制作基础知识 可参考网页： 阳光网页设计网,第六步：如何给文字做链接？ 好了，回顾上一步，我们讲到了文字的一些效果， 今天，我们继续来讲：如何给文字做链接？ 这一步，我暂时不讲路径的知识，因为那相对于你们来说，太难理解了。这步只讲如何做链接，路径的知识后面再讲。 按照前几步学习过的知识，我们来建两个文件，一个命名为：index.htm 另一个命名为：index2.htm 在index.htm文件的BODY标记中输入这段代码：链接到index2.htm 在index2.htm文件的BODY标记中输入这段代码：链接到index.htm 完成了吧，那就打开其中的一个文件，点击那显示的文

2、字，看看是什么效果。 链接到index2.htm 如果把里的href = index2.htm删除了， 那么，代码就成了：链接到index2 呵呵，这段代码跟我们上一步学习的完成一样，只不过是标记换了 链接标记就是 但是，单单一个链接标记是不行的呀，还要指定链接到哪个页面呢，所以：href = index2.htm就出来了 内容,3,链接到index2.htm 这段代码的标记只有一个属性href 我要告诉大家的是，一个标记可以有多个属性的，如： 内容 结构就是这样了，每个属性之间，用空格分开就可以了。 如果要新建一个窗口打开网页，我们可以加入target属性，如： 链接到index2.htm

3、大家可以在原来的代码上加上 target=_blank 这段，再来打开试试 target属性的作用是指定在哪里打开链接，它的值就是_blank 只要指定这个值，就会新建窗口打开了，当然，还有其它的值，看下面： _blank，在新窗口显示目标网页 (我们用的就是这个) _self，在当前窗口显示目标网页 _parent，框架网页中当前整个窗口位置显示目标网页 _top，框架网页中在上部窗口中显示目标网页 好了，这一步的课程就算完成了。 但是，一个页面不可能单单只有文字吧，那样也太单调了。 呵呵，没关系，看完下一步，你的网页就.,第七步：如何在网页中插入图片？ 这几天都没有更新文章，让大家久等了。

4、 上一步我们讲到了如何给文字做链接，这一步，我们来学习一下：如何在网页中插入图片？ 经过上一步的学习，了解到一个标记可以有多个属性，那么，我们来学习这一步就容易多了。 先来看下代码： 明白是什么意思吗？呵呵，要在网页中插入图片，这时我们就要用到img标记了。 先来看看第一个属性src，src属性是指定图片的路径的。 src=images.jpg 这个的意思就是：显示images.jpg这个图片 第二个属性width，指定图片的宽度，单位默认为像素 width=300 这个指定了图片的宽度为300像素 第三个属性height，指定图片的高度，单位默认为像素 height=225 这个指定了图片的

5、高度为225像素 除了这几个属性外，img标记的属性还有很多，我这就不一一解释了，还是那句老话：要学会搜索。 有需要自己上或搜索吧。 这步就这样讲完了，呵呵是不是很简单。下一步，我们来讲一下，如何给图片做链接？ 由于我们在上一步中学过如何给文字做链接，所以，在学习下一步如何给图片做链接时，将是易如反掌。 因为两者都是大同小异的，想知道两者的区别在哪里，请看下一步：如何给图片做链接？,过渡页,结束页,第八步：如何给图片做链接？ 这步来讲讲如何给图片做链接，不知道大家还记不记得第六步的例子，给文字做链接。 其实图片链接，可以说是第六步跟第七步的结合，只要把显示文字的换成显示图片的代码就可以了 下面

6、我们来看一下代码： 链接到index2.htm 这是第六步的文字链接代码。显示的文字是“链接到index2.htm” 我们只要把“链接到index2.htm”这段换成第七步的那段代码，就成了图片链接了，看代码： 也就是说，只要把标记放中标记之间，就有了链接的功能。 文字链接跟图片链接所不同的只是： 原来显示文字的地方，我们用来显示图片了。就这样简单 除了文字链接跟图片链接外，还有锚链接，邮件链接等等我就不一一讲了想了解的可以上网查资料不明的也可以问我 学习到这里，不知道大家有没有注意到，所有显示的图片，文字都是不成形不成样的 呵呵，放心吧，接下来我们会讲到页面的排版标记的 下步我们来学习一下页

7、面的知识：如何为网页添加背景?,6,第九步：如何为网页添加背景? 真是不好意思，这么久才更新第九步，呵，不多说了，看正文 这步我们来讲一下如何添加网页背景，几乎所有的网页中，都有背景，这个在网页制作中，是最常用到的！ 要添加网页的背景，得用CSS样式来完成了，看代码： 下面对代码进行解释: 头标记，这个说明用的是css样式，所有CSS代码都必须放在里面，结束标记是 body 这是一个标签，body就是定义body标记里面的内容，标签可以有多个属性，属性跟值都 必须包含在 大括号之间 background-image: url(bj.jpg); 背景图片属性，bj.jpg是图片的路径 backg

8、round-repeat: no-repeat; 这个标记是用来设置背景图片要怎显示 ，红色部分是值，值分别为：no-repeat为不重复 repeat为重复 repeat-x为横向重复 repeat-y为纵向重复 background-color: #333333; 这个是设置背景色的，红色部分是颜色代码 最后讲一下,在CSS样式外面加上这个HTML注释的作用是：如果CSS样式不正确，可以防止错误显示 这步就讲到这，单单有了图片还不行，再来点美妙的音乐就太好了，呵呵，请看下步：如何添加背景音乐？,第十步：如何添加背景音乐？ 添加背景音乐，其实很简单，看下面代码： 只要把这段代码，放在head

9、标记之间，就可以播放背景音乐了 用bgsound标记来实现背景音乐的播放 src属性的值就是背景音乐的地址，可以是绝对路径，可以是相对路径 loop属性是设置播放次数的loop=3 这样播放三次就停止播放了如果要无限循环播放，可以把loop的值设置 为-1 我这里只是讲了两个主要的属性，bgsound标记还有其它属性的，我就不讲了 有兴趣知道的同志们，可以自己上网搜索.（插入背景的方法不仅仅是这个，这个是最简单的） 好了，要说到排版，下步才是真真正正的排版：什么是表格？,8,第十一步：什么是表格？ 表格，在网页布局中最常用的，制作网页的第一步就是页面布局，所以，我们有必要学习表格的知识！ 现在

10、，我们来讲一下表格的结构以及相关的属性！ 下面看代码一： 这里输入表格的内容 上面是一个一行一列的表格。是表格标记，表示表格中的行，表示表格中的列。 那么，要写一个一行三列的表格，又该怎么样呢？ 看代码二： 这是第1行的第1列 这是第1行的第2列 这是第1行的第3列 表格的结构是这样的，标记包含标记，标记包含标记，标记表示列，在上面代码中，包含着三个标记，那就是一行三列了 现在我们再来看看，三行一列的表格又是什么样的.,9,过渡页,代码三： 这里是第1行的第1列 这里是第2行的第1列 这里是第3行的第1列 不要被这些乱七八糟的标记弄糊涂了，大家仔细看下，上面的代码跟代码一的有什么不同？ 代码一的是一行一列，代码三的是三个一行一列 那么，三行三列又是怎么样的呢？,10, 第2行第1列 第2行第2列 第2行第3列 , 第3行第1列 第3行第2列 第3行第3列 ,看代码四: 第1行第1列 第1行第2列 第1行第3列 把代码二的跟代码三的结合起来，就是三行三列了，大家认真比较一下! 现在了解一下表格的属性： width=150 宽度 border=100 高度 （这两个属性大家应该很熟悉吧