html.docx

上传人:b****5 文档编号:7605334 上传时间:2023-01-25 格式:DOCX 页数:15 大小:169.87KB
下载 相关 举报
html.docx_第1页
第1页 / 共15页
html.docx_第2页
第2页 / 共15页
html.docx_第3页
第3页 / 共15页
html.docx_第4页
第4页 / 共15页
html.docx_第5页
第5页 / 共15页
点击查看更多>>
下载资源
资源描述

html.docx

《html.docx》由会员分享,可在线阅读,更多相关《html.docx(15页珍藏版)》请在冰豆网上搜索。

html.docx

html

html基础教程:

开始学习

在这第一课中,我们简要介绍制作网站所需的工具。

需要哪些工具?

十之八九,你已经拥有所需的全部工具了。

“浏览器(browser)”你有了,它是用于浏览网站的程序。

你现在就是通过浏览器在观看本页面的。

游览器有很多可供选择,最普及的浏览器当属微软(Microsoft)公司的InternetExplorer(俗称“IE”),其他的一些浏览器包括Opera、MozillaFirefox(俗称“火狐狸”或“火狐”)等。

这些浏览器的基本功能都是浏览网页,因此具体使用哪个浏览器是无所谓的。

也许你听说过、甚至用过一些网页制作工具,比如MicrosoftFrontPage、MacromediaDreamweaver、MicrosoftWord等。

现在可以忘掉这些程序了!

它们对你学习网页制作没有什么帮助。

相反,你需要的是一个简易的文本编辑器。

如果你正在使用Windows(微软视窗)操作系统的话,你可以使用它自带的记事本(Notepad)程序。

你可以依次点击“开始菜单→程序→附件”找到该程序。

如果你用的是其他操作系统,那么也有类似的简易文本编辑器可以使用,比如Linux上的Pico或Mac(苹果机)上的SimpleText。

记事本是一个非常简单的文本编辑程序,用它编写程序非常好,因为它不会干涉你所输入的任何内容,给予你完全的控制权。

而许多网页制作工具的问题在于,它们提供了许多标准功能供你选择。

这样的缺点是,你只能按照这些标准功能来制作网页。

所以,这类工具常常不能创建正合你意的网页。

或者,更令人讨厌的是,它们会修改你手工编写的代码。

而使用记事本(Notepad)或其他简易文本编辑器的话,全部代码均由你自己编写。

浏览器和记事本程序(或类似的简易文本编辑器)便是你所需的全部工具,有了它们,你就可以完成本教程,并制作自己的网站了。

我需要连上因特网么?

你无需连上因特网(Internet),浏览本教程和制作网站都可以离线完成。

如果你想要离线阅读本教程,你可以将它打印出来,或者在阅读教程期间断开与因特网的连接。

你可以先在自己的计算机上制作网站,待网站制作完毕再上传到因特网上。

接下来学习什么?

下一课将介绍HTML是什么,然后从第三课开始学习有趣的HTML。

html基础教程:

HTML是什么

这一课将为你简要介绍你的新朋友——HTML。

html是什么?

HTML是浏览器的“母语”。

长话短说,HTML是由一名叫TimBerners-Lee的科学家发明的。

他发明HTML的目的,是为了方便不同大学的科学家们可以更容易地获取彼此的研究文档。

HTML取得了的巨大成功,大大超出了TimBerners-Lee的原本预计。

通过发明HTML,他为我们今天所认识的万维网奠定了基础。

HTML是一门语言,它令我们可以在因特网上展示信息(例如科学研究信息)。

你所看到的网页,是浏览器对HTML进行解释的结果。

要查看一个网页的HTML代码,只需在浏览器菜单栏上点击“查看”,然后选择“源文件”即可。

对于生手来说,HTML代码看似很复杂,不过本教程将帮助你弄清楚它们的含义。

HTML能用来做什么?

如果你要制作网站的话,学习HTML是不可避免的。

即使你用Dreamweaver等工具来制作网站,了解基本的HTML知识也会令你在网站制作过程中倍感轻松,并有利于制作出更好的网站。

好在HTML容易被学会和使用。

通过下面两课的学习,你将学会如何制作自己的第一个网站。

HTML是用来制作网站的。

就这么简单!

好,明白了,那html这四个字母代表什么呢?

HTML是“HyperTextMark-upLanguage(超文本标记语言)”的缩写——其实目前你不必了解这些,不过,为了迁就学习次序,我们就详细解释一下吧。

∙超(Hyper)是相对于线性(linear)来说的。

在很久以前,那时计算机程序还是线形运行的:

当计算机程序执行完一个动作以后,转向下一行,这行结束后,继续下移,依次类推。

但HTML则不同,你可以在任何时候跳转到任何地方。

比方说,你在浏览HTML.net之前,不必先去浏览MSN.com。

∙文本(Text)意味着它是自解释的(self-explanatory)。

∙标记(Markup)指的是你怎么处理文本。

对文本作标记的方式,跟你在文本编辑程序里将文本加粗、或者将一行话设为标题或列表项目类似。

∙语言(Language)。

HTML就是一种语言,它使用了许多英文单词。

在本教程中,你将会学习到XHTML(可扩展超文本标记语言)。

简单地说,它是一种新的、更加结构良好的HTML。

现在,你知道了HTML(和XHTML)代表什么意思,下面我们将开始有关网站制作的学习。

html基础教程:

元素与标签

现在你要学习的是HTML的重要成分——元素(element)。

元素用于结构化html文档,并告知浏览器如何呈现网页。

一般来说,元素由首标签(starttag)、内容(content)和尾标签(endtag)构成。

“标签”是什么?

标签(tag)指示元素的起始与结束。

所有标签都具有相同的格式:

以小于号“<”开头,以大于号“>”结尾。

一般说来,有两种标签——首标签(starttag)(如)和尾标签(endtag)(如)。

它们唯一的区别在于,尾标签多一条斜杠“/。

你通过把内容放在首标签和尾标签之间来对内容进行标记。

HTML主要就是各种各样的元素,所以,学习HTML,就是学习使用各种元素。

可以举些例子么?

没问题。

比如,b元素的作用是,告诉浏览器介于标签之间的文本应以粗体显示。

(这里的“b”是“粗体(bold)”的意思。

例1:

这句话应显示为粗体。

该例在浏览器中将显示如下:

这句话应显示为粗体。

h1、h2、h3、h4、h5及h6元素的作用是显示标题(这里的h是“标题(heading)”的意思)。

其中h1是一级标题,字体最大;h2是二级标题,字体比一级标题略小;而h6是六级标题,它是最后一级标题,字体也最小。

例2:

这是标题

这是子标题

该例在浏览器中将显示如下:

这是标题

这是子标题

首标签和尾标签总是必须的吗?

常言道,凡事均有例外。

在HTML中,也有例外的情况,即有些元素没有尾标签。

这些没有尾标签的元素被称作空元素(emptyelement),它们与具体文本内容无关,比如像下面这个换行标签:


标签中的字母应该大写还是小写?

大多数浏览器不介意标签是大写还是小写,或者混合大小写。

所以、或在浏览器上的显示效果都一样。

但是,正确的写法是采用小写字母来书写标签。

所以,要养成用小写字母书写标签的习惯。

把标签放在哪里?

你应该在HTML文档里书写标签。

一个网站可能包含多个HTML文档。

上网的过程,其实就是打开不同HTML文档的过程。

这一课就到这里。

如果花10分钟时间继续学习下一课的话,你将能够制作自己的第一个网站。

html基础教程:

制作自己的第一个网站

有了从前面几课的基础,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。

如何做呢?

通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。

既然你现在已经在用浏览器阅读本教程了,那么请再打开一个窗口——这样你就可以一边阅读本教程,一边欣赏你的新网页了。

另外,请打开记事本程序(Notepad):

依次选择“开始菜单→程序→附件→记事本”即可。

现在一切就绪了!

然后呢?

我们先从简单的做起吧。

先试着做一个显示如下内容的网页:

“哇!

这是我的第一个网站。

”继续学习,就你就知道这是多么容易了。

HTML简单易学。

浏览器读HTML就跟你读书一样,也是从上往下,从左到右进行的。

所以,HTML文档的开始和结束便对应于网页的头和尾。

你首先要做的是告诉浏览器,你们将采用HTML语言来“对话”。

这是通过标签来实现的(这是容易理解的)。

所以,在做所有其他事之前,先在记事本的第一行敲入“”。

也许你记得前面课程中我们说过,这里的是首标签,在HTML文档结尾处必须有相应的尾标签与之对应。

好的,为了防止最后忘记写这个尾标签,我们现在就输入“”,然后在和之间留些空行,用于书写其余代码。

下面,我们需要为HTML文档写一个“头部(head)”,它提供关于当前文档的信息;然后写一个“主体(body)”,它提供文档的内容。

HTML最重要的就是简单——在这里,我们只需把头部(和)放到主体(和)的前面就行了。

如下所示:

注意我们是如何用换行(用Enter键)与缩进(用Tab键)令代码具有层次感的。

理论上,你如何书写HTML文档,这无关紧要。

但为了便于阅读代码,和保持良好的概貌,我们强烈建议你采用换行与缩进来层次化HTML代码,就像上面的例子一样。

上面这个文档便构成了你的第一个网站——它只包含一个网页,而且内容很单调,可能与你的想象相去甚远,但在一定程度上它仍是一个网站。

你可以将它用作其他HTML文档的基本模版。

不错不错,但我如何添加更多内容?

前面我们学到过,HTML文档有两个部分:

头部(head)和主体(body)。

你在头部(head)提供关于网页的信息,你在主体(body)部分提供网页的具体内容。

比如,如果你要指定HTML文档的网页标题(title)(它将显示在浏览器窗口顶部),你就要在头部(head)提供有关信息。

用title元素来指定网页标题:

即在首标签与尾标签之间写上网页标题:

我的第一个网站

注意,网页标题(title)不是显示在网页里,而是显示在浏览器窗口的标题栏上的。

网页里显示的所有内容都必须放在body元素里。

比如,我们要在网页里显示“哇!

这是我的第一个网站。

”这行文字,它属于主体(body)部分,所以我们在body元素里输入:

哇!

这是我的第一个网站。

标签

里的p是“段落(paragraph)”的意思,也就是一个文本段落。

现在,你的HTML文档应该是这样:

我的第一个网站

哇!

这是我的第一个网站。

搞定!

你已经完成了自己第一个真正的网站(尽管它只包含一个网页)!

接着,你需要将它保存到你的硬盘上,然后在浏览器中打开它:

∙在记事本的“文件”菜单下选择“另存为...”。

∙这时会弹出一个对话框,在“保存类型”右边的下拉菜单里选择“所有文件”。

这一点很重要——否则,它将被保存为文本文档,而不是HTML文档。

∙现在将这个文档保存为“page1.htm”(后缀名“htm”表明它是一个HTML文档。

后缀名用“html”也可以,但我比较习惯使用“htm”,你可以根据自己的喜好选用二者中的任一个)。

将HTML文档保存在硬盘上的哪个文件夹无关紧要——只要你记得保存位置,并能再次找到它就行。

现在打开浏览器:

∙在“文件”菜单下选择“打开”。

∙在弹出的对话框中点击“浏览”按钮。

∙现在,请找到你的HTML文档,然后点击“打开”。

这时,浏览器中应显示“哇!

这是我的第一个网站。

”。

恭喜!

如果你迫切希望自己的杰作能被全世界看到,你可以先去第14课学习一下如何把自己的网页上传到因特网(Internet)上。

如果你不着急的话,那么请继续往下学习。

乐趣才刚刚开始。

html基础教程:

学习更多元素

你有没有独立完成过一些网页?

如果还没有,请看下面的例子:

 

我的网站

 

 

标题

一些文字。

子标题

一些文字。

 

 

看完了,然后呢?

现在要学习七个新元素。

前面学过,你可以通过用把文本括起来,把文本设为粗体;类似地,你可以通过用把文本括起来,把文本设为斜体。

没错,这里的“i”是“斜体(italic)”的意思。

例1:

这句话应显示为斜体

该例在浏览器中将显示如下:

这句话应显示为斜体

同样,你可以用small标签把文本设为小字体:

例2:

这句话应显示为小字体

该例在浏览器中将显示如下:

这句话应显示为小字体

我可以同时应用多个标签吗?

你可以同时应用多个标签,只要你能避免标签交错起来。

最好通过一个例子来说明:

例3:

如果你希望一段文本即是粗体又是斜体,你可以这样做:

既是粗体又是斜体

注意不能这样:

既是粗体又是斜体

二者区别在于:

在前一个例子中,首先打开的标签最后关闭。

这样可以避免混淆。

学习更多元素!

正如第3课中提到的,有些元素是没有尾标签(endtag)的。

这种元素被称作空元素(emptyelement),它们不与特定文本段落相关。

一个例子是
,它的作用是插入一个换行符。

例4:

写一些文字
重起一行再写一些文字

该例在浏览器中将显示如下:

写一些文字

重起一行再写一些文字

注意上面的空元素

它没有尾标签,并且在首标签名称的后面加了空格和斜杠。

 

另一个空元素是


,它的作用是画一条水平线。

这里的“hr”是“水平线(horizontalrule)”的意思。

例5:


该例在浏览器中将显示如下:

--------------------------------------------------------------------------------

HTML中的空元素还包括ul、ol和li,这三个元素用于制作列表。

ul代表“无序列表(unorderedlist)”,它的作用是为每个列表项显示一个粗点。

ol代表“有序列表(orderedlist)”,它的作用是显示每个列表项的序号。

  • 元素把多个列表项组织为一个列表,其中的li代表“列表项(listitem)。

    感觉有些迷糊?

    那么,请看下面的例子:

    例7:

    • 一个列表项
    • 另一个列表项

    该例在浏览器中将显示如下:

    一个列表项

    另一个列表项

    例8:

    1. 第一个列表项
    2. 第二个列表项

    该例在浏览器中将显示如下:

    第一个列表项

    第二个列表项

    哟!

    就这些啊?

    嗯,这一课就学这么多。

    再次重申,请反复实验本课所学的元素,并在制作自己的网页时使用它们。

    斜体

    小字体


    换行


    水平线

      无序列表

          有序列表

          1. 列表项
          2. html基础教程:

            链接

            在这一课,你将学习如何在网页之间做链接。

            如何做链接?

            做链接也是通过元素(element)实现的。

            做链接只需一个元素和一个属性就行了。

            下面是一个例子,它是一个指向的链接:

            例1:

            该例在浏览器中将显示如下:

            这是一个指向的链接

            元素a代表“链接(anchor)”;属性href代表“超文本引用(hypertextreference)”,它用于指定链接指向何处——通常是一个因特网地址或者一个文件名。

            在上例中,属性href的值为“”,这是网站的完整地址,也被称作URL(统一资源定位符)。

            注意,在URL里必须包含“http:

            //”。

            “这是一个指向的链接”是这个链接在浏览器中显示出来的文本。

            记得在元素结尾处写上。

            如何在同一网站的网页之间添加相互链接?

            如果你要在同一网站的不同网页间做链接,那就不必拼写出网页的完整URL。

            举个例子,假如你有两个网页(比如说page1.htm和page2.htm),而且它们被存放在同一个文件夹中,那么你在做链接的时候,只要写出文件名就行了。

            这样,page1.htm到page2.htm的链接将如下所示:

            例2:

            点击这里转到第2页

            如果page2.htm被放在下一级文件夹中(比如“subfolder”),那么链接将是这样:

            例3:

            点击这里转到第2页

            反过来,从page2.htm(在下级文件夹中)到page1.htm的链接将是这样:

            例4:

            转到第1页

            “../”代表当前位置(即该链接所在文件所处的文件夹)的上一级文件夹。

            同理,当前位置的上上级文件夹可用“../../”表示。

            明白其中的规则了吗?

            当然,如果给出完整URL也行。

            如果要在一个网页内做链接怎么办呢?

            你也可以在一个网页的内部做链接——比如在网页开始处提供一个目录,在其中列出指向下面各章的链接。

            这可以通过使用id属性和“#”符号来实现。

            用id属性标出要被指向的元素。

            例如:

            标题1

            然后通过在链接中利用“#”来指向那个元素。

            “#”后面必须紧跟着一个id属性的值,表明链接指向该id属性被定义的地方。

            例如:

            转到标题1

            来看一个例子就明白了:

            例5:

             

            转到标题1

            转到标题2

            标题1

            一些文字。

            标题2

            一些文字。

             

            该例在浏览器中将显示如下(你可以试试看点击这两个链接):

            转到标题1

            转到标题2

            标题1

            一些文字。

            标题2

            一些文字。

            (注:

            id属性必须以字母开头)

            除了网页,链接还能指向什么?

            你还可以为e-mail地址做链接,方法跟为网页做链接差不多:

            例6:

            soft@>给soft@发电子邮件

            该例在浏览器中将显示如下:

            给soft@发电子邮件

            与指向网页的链接的唯一区别在于:

            指向e-mail地址的链接必须以mailto:

            开头,然后紧接着写e-mail地址。

            当点击这个链接的时候,缺省的e-mail程序将新建一封邮件,其中的收件人地址为链接中指定的e-mail地址。

            注意:

            这一功能仅当你的计算机安装了e-mail程序后才起作用。

            试试看吧!

            有其他我需要知道的属性吗?

            创建链接总要用到href属性。

            另外,你也可以在链接上使用title属性:

            例7:

            该例在浏览器中将显示如下:

            title属性用于为该链接输入一个简短描述。

            当你把鼠标光标停留在该链接上(别点击它)时,提示文字“上网站学习HTML”便会出现。

  • 展开阅读全文
    相关资源
    猜你喜欢
    相关搜索

    当前位置:首页 > PPT模板 > 其它模板

    copyright@ 2008-2022 冰豆网网站版权所有

    经营许可证编号:鄂ICP备2022015515号-1