html教程.docx
《html教程.docx》由会员分享，可在线阅读，更多相关《html教程.docx（22页珍藏版）》请在冰豆网上搜索。
html教程
『HTML里面的注释』
在程序设计中我们经常需要对所写的程序代码进行注释，以增加程序的可读性，在html中同样可以有注释，注
释对于较为复杂的html文件非常有用，它能让你快速的检查错误和在修改时快速定位。
html的注视格式如下：
--注释内容-->
该注释可以放置在任何html标记之间，但不能放置在标记内部。
比如你可以如下所示进行注释：
这是我的第一个html文件--网页主题内容开始-->
我今天下定决心开始学习html，学不成功誓不罢休。
现在我用html标识来显示具体内容。
网页的具体内容放置于该处。
--网页主题内容结束-->
『段落文本标识』
段落文本标识
前面已经介绍了几个标识，对于WEB页面的排版我们也讲了行中断标识
，但仅仅靠行中断标识来进行页面的
排版显然太费劲，也显得力不从心。
实际上我们更多时候需要浏览器进行自动排版，即象WORD中书写文字一样
，当超过一定的宽度就自动换行，这样写出来的HTML文档才简洁美观。
现在要讲到的就是网页设计人员经常用到的段落文本标识，它是一个双向标识，即有结束标识
。
它
能实现文本的自动换行，并且两个段落之间会自动留出空行，使页面爽心悦目。
下面就让我们来看看段落文本
标识吧:
这是我的第一个html文件我今天下定决心开始学习html，学不成功誓不罢休。
现在我用html标识来显示具体内容。
现在我正在学习使用段落文本标识，具体效果怎样还不知道，所以用这段代码看看如何。
网页的具体内容放置于该处。
另外该标识有一个用于控制内部文字对齐方式的属性align="left||center||right"，取值left表示左对齐，
center表示居中对齐，right则表示右对齐。
如果将原来的
标识内写上右对齐属性即写成
除去
标记外，还有其他的段落标记吗？
当然有！
大家都知道英文“headline”是什么意思吧，一般报纸的大标题就可以称为“headline”――头版头
条。
HTML中也为网页中的标题显示制定了标记：
从
到分别用文字的大小来表示标题内容的重要性，以黑体显示，的字体最大，表示最重要，
的字体最小，表示最不重要，如：
欢迎光临我的主页
欢迎光临我的主页
欢迎光临我的主页
欢迎光临我的主页
欢迎光临我的主页
欢迎光临我的主页
需要说明的是，在一个HTML文档中并不是第一次该标识就使用
，而应视你需要的标题文字大小选用相应的
标记。
『文本修饰标记』
前面我们讲解了段落文本标识，标题文字标识等。
但一直没有讲到怎样美化文字。
今天我会告诉你如何格式化
文本，包括改变字体、颜色，如何在网页中插入图片等等。
在一些HTML形式的聊天室里，支持插入HTML语言，那你就可以在聊天室里使用不同的颜色的字体和朋友交谈，
在聊天室里插入图片等等，当然也可以捣乱啦，待会儿你就明白是怎么回事了。
还要提醒大家的是：
你一定发现了，HTML的标记都是固定的，如果你把标记打错了一个字母，或使用了未规定
的标记，浏览器对这些不能识别的标记是不理睬的，要注意哦。
英文“Font”是字体的意思，你一定知道吧，它也是HTML处理字体的主要标记：
，
可以用来定义字的字体（Face）、大小（Size）和颜色（Color），也就是它的三个参数。
Size属性有1到7个等级，1级最小，7级的字体最大，默认的字体大小是3号字（大约相当于Word里的5号字，16
个象素），你可以使用“Size=?
”定义字体的大小，如：
你好！
这是1号字的效果
你好！
这是2号字的效果
你好！
这是3号字的效果
你好！
这是4号字的效果
你好！
这是5号字的效果
你好！
这是6号字的效果
你好！
这是7号字的效果
结果如下所示。
也可以使用相对与上级元素的相对大小，也就是说在前一个字体的大小基础上调整大小，比如有下面这样一个
网页：
你好！
欢迎访问我的HomePage！
效果如下。
首先定义的字体大小是3号字，然后后面又有一个Font标记，其中“Size=+2”表示在3号字的基础上加2，“你
好?
币簿桶?
号字显示了，同样的，你也可以用“-”代表比原字体小多少，当字体大小的数值大于或小于字体规
定的两端时，最小字体按1号字处理，最大的字体则按7号字处理。
Face属性规定的是字体的名称，如中文字体的“宋体”、“楷体”、“隶书”等等，你可以在写字板和Word等
字处理软件中找到当前系统中安装的字体名称，比如下面的代码：
宋体
隶书（系统中没有隶书则用宋体）
方正彩云繁体
文鼎古印体繁
效果如下：
你可能已经想到了，这些字体在我的系统里是有的，但是在别人的电脑上没有这种字体怎么办？
那浏览器就会
使用Windows系统默认的字体代替，虽然使用某些方法（如样式单，我们以后会讲）可以在下下载字体，但是由
于中文字体文件都比较大（一般都有几兆），而英文字体一般只有几十K，这个方法就不那么实用了。
所以大家在使用字体的时候一定要考虑到在别人的浏览器上的效果是怎样的，毕竟你的网页是做给别人看的。
至于Color属性，我们在讲Body标记的背景颜色时就提到过，它可以用浏览器承认的颜色名称和十六进制数值表
示（如或）.
注意字体的颜色一定鲜明，并且和底色配合，否则你想象一下白色背景和灰色的字或是蓝色的背景红色的字有
多么的难看刺眼。
关于字体还有很多其他的标记，要记住，它们都是容器型的，要关门：
用粗体显示文本
用斜体显示文本
以下划线显示文本
以删除线显示文本
下标元素，使该标记内的文本比其他文本位置低
上标元素，使该标记内的文本比其他文本位置高
如下页面将解释这些文本标记的用处：
这是一个粗体字的例子。
这是一个斜体字的例子。
知道下划线是什么样子了吗？
删除线就是这个样子啦。
下标元素使字体下沉。
上标元素使字体上升。
效果如下。
哈哈，就是这么容易！
聪明的读者一定明白了HTML语言为什么可以完成各种内容形态丰富多采的网页，不错，
虽然每个标记的作用各不相同，但是当它们互相嵌套的时候，奇迹发生了！
你现在也知道怎样在聊天室里改变自己的字体了吧，你只需要把HTML语言一条一条打到发言的框框里就可以了
，当然鄙人从前总是用这些法子捣乱，譬如一次把字体改成和背景色一样的白色，害得聊天室里20多号人狂发
Message，浏览器的滚动条一劲的下移大家就是什么也看不见（读者：
什么！
！
就是你干的！
？
害得我那天……
扁他！
）。
大家学会了今天的知识就不会让我这样的网络“残渣”得逞了，并且现在的聊天室一般都关掉了HTML功能，要
不然我还有其他利害的招数，用Javascript做个死循环，重复发送信息等等，唉现在都不管用了，不好玩，干
脆不去聊天了。
下一次我会再为你解决为HTML中插入图象的问题，继续来哦。
┎════┰═══╱╲
║滄海橫流┃劍試﹎◣╱
║﹎﹎﹎﹎┃﹎﹎天下║
║何懼成敗┃方顯英雄║≒
║﹎起伏﹎┃﹎本色║
┖════┸════oоО══☆⒛o7.1.08
『超链接标识』
超链接标识
今天要给大家讲的是网页中最有价值的东东“链接”，互联网的博大精深就在于奇妙的链接，它可以把你从地
球的一端引向任何地方，顺着一个链接找下去，你得到的将是整个世界，这还不伟大吗？
实际上链接的形式及其简单，也许你不相信就是这么一个简单的标记，当然用起来还不仅仅是这样，且听我
慢慢道来：
链接标记中最重要的属性：
Href，看清楚了可不是Here，它是一个必选属性，也就是说必须书写的。
表示要
链接到的地方。
这里要解释一点的是网络上的协议问题，也许你经常听到http、FTP等名称，它们是什么意思呢，实际上它们就
是网络上的各种协议，HTTP协议是用于传输HTML文件的协议：
超文本传输协议，而"FTP"是指文件传输协议，我
们平时说的登录FTP服务器就是它了，还有Telnet指远程登录协议，如果你经常逛中国高校的bbs，你肯定用过
它。
要记住不同的协议是不同的，它告诉浏览器去链接哪部分服务器，所以即使是和
ftp:
//的含义也是完全不同的，得到的结果也不同，而Href参数没有默认的协议，所以你必须
声明协议，而不能写成首都在线。
现在我们可以创建一个最简单的链接：
首都在线
需要说明的是这是绝对链接，Href也可以使用相对链接，假定我们现在在
可以用下面的代码：
关于我
它表示的URL等价于"
http;//就已经获得了协议即路径了所以你就不要画蛇添足写成//about.htm">关
于我了。
相对路径中可以用../表示上级目录，/表示根目录，路径名/文件名表示下级路径。
比如：
软件下载表示在当前目录的rjxz子目录中的rjxz.htm文件
相对路径有一个好处，就是当你的整个网站路径变化时，无须更改链接，还是用上面的例子，假如现在我们的
路径位于,那么就等价与href="
时更改链接的麻烦。
如果要链接到FTP服务器上也很容易"ftp:
//
有的朋友可能会问：
那怎么用链接打开E-mail程序呢？
非常简单，把协议换成"mailto:
"，如：
href="mailto:
marsz@">给我来信，这样点击该链接的话系统就会大开默认的E-mail程序进行处理
，另一个和它相似的协议是"newsgroup:
"，它将打开默认的信息组程序，用法和打开E-mail类似。
上面的连接汇集如下：
链接标识
首都在线
//
oumy@">我的信箱
">北大bbs
一个链接可以是文字也可以是图片，也可以是文字和图片的混合体。
我要提醒大家的是有时候你会发现键入代
码却没有作用，这是怎么回事呢？
回去检查你敲的有没有问题吧，很可能是一个疏忽造成了错误，其中一个比
较多的错误是标记中的代码使用了全角标点，在你看来全角的冒号和半角的冒号可能没有什么区别，但是计算
机会认为它们之间完全不同呢。
有时候我们需要在打开一个链接的时候让浏览器自动打开一个新窗口，特别是在给朋友做友情链接的时候，你
总不希望访客一溜烟的都跑到别人的家里，这时新开一个窗口即方便了别人又便宜了自己，一举两得。
怎么做
呢？
这里需要讲道的另一个参数"Target"，它有4个参数，但是我今天只讲其中的两个，剩下的以后告诉你
。
如果要打开新窗口浏览链接页面，请把Target的值设为"_blank"，注意不能少了那个下划线，如：
网络时空
这样点击改链接就会在新窗口中打开朋友的网页。
如果要在当前窗口中打开页面，则应该将target的属性值设为_self。
该值也是浏览器的默认值，所以也可以不
写。
另外，如果你想让整个页面中的所有链接标识都具有target=_blank属性，而在每一个标识中都加上
target=_blank是不是太麻烦了点？
那么我告诉你一个简单的方法，在
标识之中加上target=_blank>就搞定了。
即使页面中的某一两个链接需要在当前窗口打开，那么只要将链接加上
target=_self属性即可。
比如下面的代码：
链接标识
首都在线
搜狐
中国人
网络时空
还有一个属性href，用法同target。
如果将标识的href属性声明为某个地址
，那么网页中原来的所有相对路径（假设某个链接为）,就会变成绝对路
径:
举例如下：
base标识
首页
电脑技巧
专业简介
效果如下：
链接标记除去可以链接到外部的文件外，还可以在网页的内部建立链接称为锚点（anchor），它是一个自动定
位系统，需要先定义一个锚点，然后再让另一个链接指向这个锚点，这样当点击这个链接时，浏览器就会自动
滚动从而把屏幕定位于锚点所在的位置，还是让我们看一个例子：
--定义锚点-->
现在我们做一个定义锚点的实验。
该处设置锚点
当点击下面的链接时浏览器会滚动到当前位置。
--定义链接-->
到锚点处
你明白了吗？
先定义锚点，使用参数name，然后在后面的链接中定义链接就搞定了，注意加上#号哦！
上面代码
中的
--……-->表示注释作用，是为查看代码方便而设的，浏览器将略过这些信息。
锚点也可以和普通的链接混合使用，假定已有一个文件"about.htm"，其中定义了一个锚点叫做"here"，那么就
可以使用下面的代码：
Clickhere
这样浏览器就会先下载这个网页，然后在定位到锚点所在的位置，一切OK了吧？
『插入图片标识』
插入图片标识
有些人总觉得制作主页是件很高深的事情，其实这在于你对主页的要求，象微软的主页无论是结构、内容还是
内部的技术都是很多人劳动的结晶，非个人单枪匹马可比。
但是说白了，微软的主页又有什么了不起？
如果你完全了解了HTML、样式单、脚本技术和ActiveX技术，就会发
现不过也就是这样，不会复杂到哪里。
做主页最需要的还是精力，有一点点主页知识，一点点审美能力，配合
网页的主题，经过不断的努力就能做出一个受欢迎的好主页。
我说的都是真的，而现在我教给大家的就是建造
主页的最基础的知识，随后我们会渐渐深入，你会发现制作主页是多么的有趣，你可以在上面随意发表自己的
见解看法，Internet就是这样。
现在的网上可以看到很多精美的主页，其实他们很多是靠图片来装饰的，比如说圆角的表格就是在表格四周加
上和背景色相同的小图片实现的。
网页中的图片实际上是调用，就是在浏览器中指明图片的存放位置，图片的尺寸，这样浏览器就可以在网页中
显示该图片了。
在主流浏览器中现在普遍支持的图片格式有很多，比如“bmp、tiff、gif、jepg、pgn”等等，但运用的最多的
还是Gif格式和JEPG格式，Gif格式有很多好处，比如它可以在网页中提供动画，可以使用透明图象，可以在网
页中隔行交叉显示。
和256色的Gif图象相比JEPG格式是24位真彩的，它比较适合于在网上发布照片和高质量的图片，而这两种格式
的一个共同特点就是体积小，也是它们适合在网络中使用的原因（还有一种格式PGN，它本来是想把GIF和JEPG
的优点融合在一起，但是当它推出的时候以上两种格式已经成了人们心中的标准，所以PGN格式也就没有流行起
来）。
现在国内的网络带宽还很窄，专线和ISDN用户很少，大部分的人还是使用拨号上网，所以尽量减小网页中图形
的体积，就是减少了浏览者所要花费的时间，大家一定要记住这点！
网页一定要小，保持快速的下载也是一个
站点受不受欢迎的关键。
关于制作网页图片的获得还要靠大家平时的积累，浏览别人的主页时看到好的图片就及时保存下来，方法是在
IE中在图片上点右键，选择菜单“图片另存为”或“背景另存为”，在NC中也类似，在图片上点击右键选择菜
单“Saveimageas”或“Savebackgroundas”。
有些图片是有版权的，只要你不把人家站上的专用图片移植到自己的站上就行，因为我们的站点一般是非商业
化的个人站点，即使你侵犯了别人的版权，也没有什么制裁的手段，不过“公道自在人心”，网上舆论的威力
也是不容轻视的，我奉劝大家还是不要触犯众怒。
我要警告大家的是千万不要在网上发布不健康的黄色图片，这是会受到国家法律制裁的！
好关于图片的话题我说了这么多，还是让我们回过头来看看，怎样在网页中插入图片吧。
![]()
标记是在网页中插入图片的唯一标记。
“SRC”参数表示插入图片的名称和路径，如相对路径
“../pic1.gif”表示位于上级目录的“pic1.gif”文件，或绝对路径
“src=”samp.gif”>……”。
另一个参数是“ALT”，它是对图片的文字说明，当你把鼠标放在图片上稍作停留的话，ALT参数的值就会以浮
动的形式显示出来，另外它对于为提高浏览速度而关闭了图片下载的用户也有说明的作用。
如“src="samp.gif"alt="InternetExplorer5.0">”。
“Width”和“Height”标记表示图片长和宽的象素值，当没有指定这两个参数时，图片将以原始大小显示，指
定了长和宽后图片的面积就以指定值为准，图片按照既定的尺寸扩展或缩?
Ｈ纭?
lt;imgsrc="samp.gif"
alt="InternetExplorer5.0"width=200height=80>width=150height=150>”。
“Border”属性表示图象的边框粗细程度，如“”，默认值“Border”为“0
”。
“Align”属性我们已经接触过了，它表示图片的对齐方式，但是在这里它又和段落的对齐方式有所差别，如果
未指定图片的对齐方式，在段落中它将占一个行的位置，这样如果图片远大于字体大小时非常难看，我们可以
给它一个“Align”属性，当“Align”为Left的时候，图片靠到最左方，周围的文字在其右侧环绕，当为Right
时，文字在其右边环绕，如：
“
……（中间内容省略）……”samp.gif”align=right>……
”。
『表格标识』
表格标识
说到表格，可能大家在头脑中首先浮现出的是一个行列整齐的工整的方块组合。
实际上表格在网页中通常是看
不见边框的，其作用并不是用来填写如财务管理或是其他的数据，它被应用于网页中最多的还是对网页内容的
布局。
大家仔细想一想，运用我们前面学到的所有知识是否能够做到使两列文字分成两栏并排显示？
恐怕不能吧，不
过运用表
展开阅读全文
相关搜索