html教程Word下载.docx
- 文档编号:17147106
- 上传时间:2022-11-28
- 格式:DOCX
- 页数:38
- 大小:709.24KB
html教程Word下载.docx
《html教程Word下载.docx》由会员分享,可在线阅读,更多相关《html教程Word下载.docx(38页珍藏版)》请在冰豆网上搜索。
∙超(Hyper)是相对于线性(linear)来说的。
在很久以前,那时计算机程序还是线形运行的:
当计算机程序执行完一个动作以后,转向下一行,这行结束后,继续下移,依次类推。
但HTML则不同,你可以在任何时候跳转到任何地方。
比方说,你在浏览HTML.net之前,不必先去浏览MSN.com。
∙文本(Text)意味着它是自解释的(self-explanatory)。
∙标记(Markup)指的是你怎么处理文本。
对文本作标记的方式,跟你在文本编辑程序里将文本加粗、或者将一行话设为标题或列表项目类似。
∙语言(Language)。
HTML就是一种语言,它使用了许多英文单词。
在本教程中,你将会学习到XHTML(可扩展超文本标记语言)。
简单地说,它是一种新的、更加结构良好的HTML。
第3课:
元素与标签
现在你要学习的是HTML的重要成分——元素(element)。
元素用于结构化HTML文档,并告知浏览器如何呈现网页。
一般来说,元素由首标签(starttag)、内容(content)和尾标签(endtag)构成。
“标签”是什么?
标签(tag)指示元素的起始与结束。
所有标签都具有相同的格式:
以小于号“<
”开头,以大于号“>
”结尾。
一般说来,有两种标签——首标签(starttag)(如<
html>
)和尾标签(endtag)(如<
/html>
)。
它们唯一的区别在于,尾标签多一条斜杠“/。
你通过把内容放在首标签和尾标签之间来对内容进行标记。
HTML主要就是各种各样的元素,所以,学习HTML,就是学习使用各种元素。
可以举些例子么?
没问题。
比如,b元素的作用是,告诉浏览器介于标签<
b>
和<
/b>
之间的文本应以粗体显示。
(这里的“b”是“粗体(bold)”的意思。
)
例1:
<
这句话应显示为粗体。
该例在浏览器中将显示如下:
h1、h2、h3、h4、h5及h6元素的作用是显示标题(这里的h是“标题(heading)”的意思)。
其中h1是一级标题,字体最大;
h2是二级标题,字体比一级标题略小;
而h6是六级标题,它是最后一级标题,字体也最小。
例2:
h1>
这是标题<
/h1>
h2>
这是子标题<
/h2>
首标签和尾标签总是必须的吗?
常言道,凡事均有例外。
在HTML中,也有例外的情况,即有些元素没有尾标签。
这些没有尾标签的元素被称作空元素(emptyelement),它们与具体文本内容无关,比如像下面这个换行标签:
br/>
。
标签中的字母应该大写还是小写?
大多数浏览器不介意标签是大写还是小写,或者混合大小写。
所以<
HTML>
、<
或<
HtMl>
在浏览器上的显示效果都一样。
但是,正确的写法是采用小写字母来书写标签。
所以,要养成用小写字母书写标签的习惯。
把标签放在哪里?
你应该在HTML文档里书写标签。
一个网站可能包含多个HTML文档。
上网的过程,其实就是打开不同HTML文档的过程。
第4课:
制作自己的第一个网站
如何做呢?
通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。
既然你现在已经在用浏览器阅读本教程了,那么请再打开一个窗口——这样你就可以一边阅读本教程,一边欣赏你的新网页了。
另外,请打开记事本程序(Notepad):
依次选择“开始菜单→程序→附件→记事本”即可。
然后呢?
我们先从简单的做起吧。
先试着做一个显示如下内容的网页:
“哇!
这是我的第一个网站。
”继续学习,就你就知道这是多么容易了。
HTML简单易学。
浏览器读HTML就跟你读书一样,也是从上往下,从左到右进行的。
所以,HTML文档的开始和结束便对应于网页的头和尾。
你首先要做的是告诉浏览器,你们将采用HTML语言来“对话”。
这是通过<
标签来实现的(这是容易理解的)。
所以,在做所有其他事之前,先在记事本的第一行敲入“<
”。
也许你记得前面课程中我们说过,这里的<
是首标签,在HTML文档结尾处必须有相应的尾标签与之对应。
好的,为了防止最后忘记写这个尾标签,我们现在就输入“<
”,然后在<
之间留些空行,用于书写其余代码。
下面,我们需要为HTML文档写一个“头部(head)”,它提供关于当前文档的信息;
然后写一个“主体(body)”,它提供文档的内容。
HTML最重要的就是简单——在这里,我们只需把头部(<
head>
/head>
)放到主体(<
body>
/body>
)的前面就行了。
如下所示:
注意我们是如何用换行(用Enter键)与缩进(用Tab键)令代码具有层次感的。
理论上,你如何书写HTML文档,这无关紧要。
但为了便于阅读代码,和保持良好的概貌,我们强烈建议你采用换行与缩进来层次化HTML代码,就像上面的例子一样。
上面这个文档便构成了你的第一个网站——它只包含一个网页,而且内容很单调,可能与你的想象相去甚远,但在一定程度上它仍是一个网站。
你可以将它用作其他HTML文档的基本模版。
不错不错,但我如何添加更多内容?
前面我们学到过,HTML文档有两个部分:
头部(head)和主体(body)。
你在头部(head)提供关于网页的信息,你在主体(body)部分提供网页的具体内容。
比如,如果你要指定HTML文档的网页标题(title)(它将显示在浏览器窗口顶部),你就要在头部(head)提供有关信息。
用title元素来指定网页标题:
即在首标签<
title>
与尾标签<
/title>
之间写上网页标题:
注意,网页标题(title)不是显示在网页里,而是显示在浏览器窗口的标题栏上的。
网页里显示的所有内容都必须放在body元素里。
比如,我们要在网页里显示“哇!
”这行文字,它属于主体(body)部分,所以我们在body元素里输入:
标签<
p>
里的p是“段落(paragraph)”的意思,也就是一个文本段落。
现在,你的HTML文档应该是这样:
搞定!
你已经完成了自己第一个真正的网站(尽管它只包含一个网页)!
接着,你需要将它保存到你的硬盘上,然后在浏览器中打开它:
∙在记事本的“文件”菜单下选择“另存为...”。
∙这时会弹出一个对话框,在“保存类型”右边的下拉菜单里选择“所有文件”。
这一点很重要——否则,它将被保存为文本文档,而不是HTML文档。
∙现在将这个文档保存为“page1.htm”(后缀名“htm”表明它是一个HTML文档。
后缀名用“html”也可以,但我比较习惯使用“htm”,你可以根据自己的喜好选用二者中的任一个)。
将HTML文档保存在硬盘上的哪个文件夹无关紧要——只要你记得保存位置,并能再次找到它就行。
现在打开浏览器:
∙在“文件”菜单下选择“打开”。
∙在弹出的对话框中点击“浏览”按钮。
∙现在,请找到你的HTML文档,然后点击“打开”。
这时,浏览器中应显示“哇!
恭喜!
如果你迫切希望自己的杰作能被全世界看到,你可以先去第14课学习一下如何把自己的网页上传到因特网(Internet)上。
如果你不着急的话,那么请继续往下学习。
乐趣才刚刚开始。
第5课:
到目前为止学到了些什么?
始终以上一课中的基本模版为起点制作新网页:
网页标题(title)写在head(头部)里:
网页标题写在这里<
注意,网页标题将显示在浏览器窗口的标题栏上:
网页标题(title)尤其重要,因为搜索引擎(比如Google)要用它来索引网页,并显示在搜索结果里。
网页的实际内容写在body(主体部分)里。
你已经掌握一些最重要的元素了:
记住,学习HTML要反复尝试才行。
别担心,即时出错也不会损坏你的计算机或因特网。
所以,可以放心继续操练——这是获取经验的最好办法。
学会这些就可以成为高手了吗?
要成为一名网页制作高手,仅学习本教程是不够的。
因为本教程只涉及HTML成分的基本用法——要成为高手,你必须灵活运用这些成分才行。
那么,要独自面对困难,并学会自立了。
或许如此,不过也未必。
试试看,把已经学过的内容操练一下吧。
下面做什么?
自己尝试创建一些网页。
比如:
做一个网页,为它设置网页标题(title),并写一些标题(heading)、文本、子标题等。
刚开始,你可以通过查阅本教程来帮助你制作网页。
但是后面,你要试着离开本教程自己独立完成。
第6课:
学习更多元素
你有没有独立完成过一些网页?
如果还没有,请看下面的例子:
现在要学习七个新元素。
前面学过,你可以通过用<
把文本括起来,把文本设为粗体;
类似地,你可以通过用<
i>
/i>
把文本括起来,把文本设为斜体。
没错,这里的“i”是“斜体(italic)”的意思。
同样,你可以用small标签把文本设为小字体:
我可以同时应用多个标签吗?
你可以同时应用多个标签,只要你能避免标签交错起来。
最好通过一个例子来说明:
例3:
如果你希望一段文本即是粗体又是斜体,你可以这样做:
注意不能这样:
二者区别在于:
在前一个例子中,首先打开的标签最后关闭。
这样可以避免混淆。
学习更多元素!
正如第3课中提到的,有些元素是没有尾标签(endtag)的。
这种元素被称作空元素(emptyelement),它们不与特定文本段落相关。
一个例子是<
,它的作用是插入一个换行符。
例4:
注意上面的空元素<
:
它没有尾标签,并且在首标签名称的后面加了空格和斜杠。
另一个空元素是<
hr/>
,它的作用是画一条水平线。
这里的“hr”是“水平线(horizontalrule)”的意思。
例5:
HTML中的空元素还包括ul、ol和li,这三个元素用于制作列表。
ul代表“无序列表(unorderedlist)”,它的作用是为每个列表项显示一个粗点。
ol代表“有序列表(orderedlist)”,它的作用是显示每个列表项的序号。
用<
li>
元素把多个列表项组织为一个列表,其中的li代表“列表项(listitem)。
感觉有些迷糊?
那么,请看下面的例子:
例7:
例8:
嗯,这一课就学这么多。
再次重申,请反复实验本课所学的元素,并在制作自己的网页时使用它们。
第7课:
属性
许多元素都可以设置属性。
属性是什么?
也许你还记得,HTML通过标签告诉浏览器如何展示网页(比如<
告诉浏览器显示一个换行)。
你可以为某些元素附加一些信息,这些附加信息被称为属性(attribute)。
h2style="
background-color:
#ff0000;
"
>
我跟HTML的友谊<
属性应写在元素的首标签上。
具体写法是:
属性名称(attributename)后紧跟一个等号(“=”),后面写上用双引号括起来的属性值(attributevalue)。
对于style属性的值,可以用分号(“;
”)来分隔多个样式指令。
这个后面会介绍。
这里涉及什么知识点?
属性有许多,我们首先学习的是style属性,它用于为网页设定样式,比如设置背景颜色等。
<
<
bodystyle="
该例将在浏览器中显示一个全是红色的页面——自己动手试试看。
稍后我们会详细讲解颜色设置的原理。
注意,一些元素和属性的名称采用的是美式拼写,比如color(而不是colour)。
请留意本教程中元素与属性名称的拼写,千万不要写错——否则浏览器将无法理解你的代码。
而且,别忘了用双引号把属性值(attributevalue)括起来。
为什么上面那个页面全是红的?
在上例中,我们将网页的背景颜色设置为“#ff0000”,这个十六进制代码(HEX)代表红色。
每个颜色都有其对应的十六进制代码。
下面是一些例子:
白色:
#ffffff
黑色:
#000000
红色:
#ff0000
兰色:
#0000ff
绿色:
#00ff00
黄色:
#ffff00
十六进制代码由“#”打头,后面跟六位数字或字母。
由于这样的十六进制代码太多,不便记住哪个代码对应哪个特定颜色。
除此以外,对于一些最常用的颜色(比如白色、黑色、红色、兰色、绿色及黄色等),你还可以使用它们的英语名称。
red;
关于颜色就讲这么多了。
让我们继续学习属性。
哪些元素可以使用属性?
不同元素使用不同的属性。
有些元素(比如body等)被添加属性的机会比较大,而有些元素(比如br等)则较小、甚至不会被添加属性。
HTML里有很多元素,同样也有很多属性。
有些属性仅用于个别元素,有些属性可用于很多元素。
反之亦然:
有些元素只能使用个别属性,有些元素可以使用较多的属性。
听起来这也许很令人困惑,不过一旦你熟悉了各个属性,就会感到很简单,并觉得它们很有用处。
本教程将介绍大多数重要属性。
一个元素包括哪些部分?
一般来说,一个元素包括一个首标签(starttag)、零或多个属性(attribute)、一些内容和一个尾标签(endtag)。
就这么简单,参见下图。
第8课:
链接
在这一课,你将学习如何在网页之间做链接。
如何做链接?
做链接也是通过元素(element)实现的。
做链接只需一个元素和一个属性就行了。
下面是一个例子,它是一个指向HTML.net的链接:
ahref="
元素a代表“链接(anchor)”;
属性href代表“超文本引用(hypertextreference)”,它用于指定链接指向何处——通常是一个因特网地址或者一个文件名。
在上例中,属性href的值为“”,这是HTML.net网站的完整地址,也被称作URL(统一资源定位符)。
注意,在URL里必须包含“http:
//”。
“这是一个指向HTML.net的链接”是这个链接在浏览器中显示出来的文本。
记得在元素结尾处写上<
/a>
如何在同一网站的网页之间添加相互链接?
如果你要在同一网站的不同网页间做链接,那就不必拼写出网页的完整URL。
举个例子,假如你有两个网页(比如说page1.htm和page2.htm),而且它们被存放在同一个文件夹中,那么你在做链接的时候,只要写出文件名就行了。
这样,page1.htm到page2.htm的链接将如下所示:
page2.htm"
点击这里转到第2页<
如果page2.htm被放在下一级文件夹中(比如“subfolder”),那么链接将是这样:
subfolder/page2.htm"
反过来,从page2.htm(在下级文件夹中)到page1.htm的链接将是这样:
../page1.htm"
转到第1页<
“../”代表当前位置(即该链接所在文件所处的文件夹)的上一级文件夹。
同理,当前位置的上上级文件夹可用“../../”表示。
明白其中的规则了吗?
当然,如果给出完整URL也行。
如果要在一个网页内做链接怎么办呢?
你也可以在一个网页的内部做链接——比如在网页开始处提供一个目录,在其中列出指向下面各章的链接。
这可以通过使用id属性和“#”符号来实现。
用id属性标出要被指向的元素。
例如:
h1id="
heading1"
标题1<
然后通过在链接中利用“#”来指向那个元素。
“#”后面必须紧跟着一个id属性的值,表明链接指向该id属性被定义的地方。
#heading1"
转到标题1<
来看一个例子就明白了:
/p>
#heading2"
转到标题2<
一些文字。
heading2"
标题2<
该例在浏览器中将显示如下(你可以试试看点击这两个链接):
(注:
id属性必须以字母开头)
除了网页,链接还能指向什么?
你还可以为e-mail地址做链接,方法跟为网页做链接差不多:
例6:
mailto:
nobody@"
给nobody@发电子邮件<
与指向网页的链接的唯一区别在于:
指向e-mail地址的链接必须以mailto:
开头,然后紧接着写e-mail地址。
当点击这个链接的时候,缺省的e-mail程序将新建一封邮件,其中的收件人地址为链接中指定的e-mail地址。
注意:
这一功能仅当你的计算机安装了e-mail程序后才起作用。
试试看吧!
有其他我需要知道的属性吗?
创建链接总要用到href属性。
另外,你也可以在链接上使用title属性:
title="
上HTML.net网站学习HTML"
HTML.net<
title属性用于为该链接输入一个简短描述。
当你把鼠标光标停留在该链接上(别点击它)时,提示文字“上HTML.net网站学习HTML”便会出现。
第9课:
图像
假如能把影歌两栖传奇人物DavidHasselhoff的图像放到自己的网页上,那就太好了。
也许是有点难度,但其实也不难,一个元素就可以搞定:
imgsrc="
david.jpg"
alt="
David"
/>
你要做的只是:
首先告诉浏览器你要插入一张图片(img),接着给出这张图片的存放位置(src,代表“来源(source)”)就行了。
准备好图片了吗?
img元素没有尾标签,它与<
一样,不与特定的文本相关。
“david.jpg”是要插入的图片的文件名,其中的“jpg”表明图片类型。
就像后缀名“htm”代表文件是HTML文档一样,后缀名“jpg”表明文件是一个图片文件。
有三种类型的图片文件可被插入网页中:
∙GIF(GraphicsInterchangeFormat,图形交换格式)
∙JPG或JPEG(JointPhotographicExpertsGroup,联合图像专家组)
∙PNG(PortableNetworkGraphics,可移植网络图像)
一般来说,GIF是图形和图画的最佳格式,而JPEG格式则更适合存放照片。
原因有二:
第一,GIF格式只支持256色,而JPEG格式支持数百万色;
第二,GIF格式擅长于压缩简单图像,而JPEG则更适于压缩复杂图像。
压缩率越高,图像文件就越小,页面加载速度就越快。
也许你也有同感,包含太多无用内容的网页是很不受欢迎的。
过去,GIF和JPEG是两大主要的图像格式,但是最近PNG格式也开始流行起来(主要是在取代GIF格式)。
PNG格式拥有许多JPEG与GIF的共同优点:
支持数百万色,且压缩效果好。
图片从何处获得?
要制作自己的图像,需要有一个图像编辑程序。
图像编辑程序是从事美观的网页制作所需的重要工具之一。
不幸的是Windows或其他操作系统都没有自带比较好的图片编辑程序。
所以,也许你得买一个PaintShopPro、PhotoShop或者M
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html 教程