精品!html语言入门.doc

Html 入门这份HTML初级教程假设你没有任何HTML和CSS的知识背景。学习基本的HTML十分容易，只要你能从头到尾按照每一步骤来实践。最后我们会将每一步综合起来，以便我们继续学习CSS初级指南。需要记住的是，HTML和CSS是关于内容(HTML)和表现(CSS)的一切。HTML不过是有精美结构的内容罢了，是我们将要在下一步学习的CSS则是用来格式化内容的。或许你已经留神过其他的HTML的教程，你可能会发现它们提及一些HTMLDog没有的东西。这是因为许多方法已经过时，不符合标准或者只是平白的坏实践。从一开始就在脑海中形成“走对的路”的思想最终可以帮助你掌握得更好。绝大部分的HTML要素并不比你电脑上的其他要素要难只不过是一大堆归类的文件放置在一大堆的文件夹里面而已。HTML文件与简单的文本文件无异，所以开始编辑HTML你只需要一个简单的文本编辑器。记事本就是一个例子（在Windows里可以从程序-附件的菜单中找到，如果你使用的是Linux，恭喜你，无论是控制台或者桌面环境，你都有更多更好的选择，比如控制台的vi以及各种vi变种，GNOME的Gedit，KDE的kate等等译者注）。在你的文本编辑器键入以下内容：Example Source Code 这是我的第一个网页现在建立一个“HTML”的文件夹，然后以“myfirstpage.html”（文件后缀“.html”必须明确指定一些文本编辑器，像记事本，否则会自动把文件保存为“.txt”文件）的文件名保存起来。展示HTML文件的最终效果，不需要连接到网络。打开Internet Explorer，或者其他网页浏览器（Firefox现在已经是一个潮流，下载一个吧！对你制作网页十分有用译者注），在地址栏你浏览网站时键入地址的地方，键入你刚才保存文件路径（比如，“C:htmlmyfirstpage.html”，或者在Linux中，“/home/myname/html/myfirstpage.html”）。哇噻，看见了吗？你的第一个网页。怎不令人兴奋呢！所有的过程只是键入几个单词而已。注意Example Source Code 我们上述的只是使用最基本的文本编辑器，如记事本，vi，但你可能更愿意使用专门的网页制作软件如Macromedia Dreamweaver或者 Microsoft Frontpage。然而你使用这些软件时你得十分小心，尤其是，如果你是初学者，这些软件会给你的网页带来不必要的或者不标准的代码（甚至是垃圾代码译者注）。你要是真想严肃认真地学习HTML，你应该读完本站提供给你的整个教程，以便你至少能对网页设计到底是怎么一回事儿有一个基本的了解。上面提到的网页制作软件永远不会给你整个网页编写的控制权，除非你手工编写代码。标签、属性和元素构成HTML的要素 尽管HTML的基础是纯文本，但我们还是需要多一些东西才能使纯文本文件变成合法的HTML文件。标签HTML基本的构成包含标签，标签围绕着内容，赋予内容某些意义。按照下面改进你的文件：Example Source Code 这是我的第一个网页保存文件，回到浏览器界面和选择“刷新”（这会重新装载网页）。网页的外观没有任何改变，HTML的目的是表达内容，而不是表达表现，这个例子现在已经定义了网页一定的基本元素。第一行以!DOCTYPE.开始是为了让浏览器知道你到底要做什么。你可能还不知道自己在做什么，但接受它很重要。如果你不这样做，浏览器将用“quirks”（奇怪的）模式来表现你的网页。现在还不必担心，当然你需要了解或者学习的话可以看看 HTML高级教成的 进一步学习“文档类型”。当前，只需要记住把这一行放在文件的顶端就可以了。言归正传，是隔开其他内容的起始标签，它告诉浏览器，位于自己与闭合标签之间的就是是HTML文档。在和之间的是这个文档展示在浏览器上的主要内容。闭合标签和关闭他们各自的标签。所有的HTML标签都要关闭。尽管老版本的HTML允许某些标签不关闭，但最新的标准要求所有的标签都要关闭。无论如何，闭合标签是一个好习惯。并不是所有的标签都像一样关闭，有的标签不用绕在内容外面，它们是自关闭的。比如断行的的标签是这样的：。呆会我们还有这方面的例子。你所需要记住的是，所有的标签都必须关闭，以及，大部分的内容都在标签之间，他们的格式是这样的：起始标签 - 内容 - 闭合标签。属性标签可以有属性，包含额外的信息。属性一般出现在开放标签中，它们的值总是在引号中。就像这样：Margarine。呆会我们会讲解带属性的标签。元素除了标记元素的开始与结束，标签不愿再多做些什么。元素是构建网页的bits。你可能会说，比如，在和之间的是主体元素，又如，和是标签，而Rumple Stiltskin则是标题元素。所有的HTML网页都应该有文档标题。给你的文档增加一个标题，按照下面改变你的代码：Example Source Code 我的第一个网页我的第一个网页 你可以看到，我们已经增加从标签和标签开始的两个新元素（看看他们是怎么关闭的）。头元素（从起始标签到闭合标签之间的内容）出现在主体元素（从起始标签到闭合标签之间的内容）之前，包含将在主体元素信息之前装载的信息。这些信息不会出现在浏览器窗口中。随着我们进一步学习，你会看到更多能够插入头元素的其它元素，但最重要的还是标题元素。如果你从浏览器查看这个网页（像前面一样已经保存和刷新），你可以看到“这是我的第一个网页”出现在浏览器窗口的标题栏。你键入的位于标题（title）标签的文本已经变成了这个文档的标题，惊奇吧？假设把这个网页增添到你的收藏夹或者书签，你会看到标题也会出现在这里。现在你的HTML文档已经有了基本的框架，你可以来“胡搞”一阵子其他内容了 :)回到记事本，按照下面增加新行：Example Source Code 我的第一个网页这是我的第一个网页 多令人激动接着用浏览器查看一下。你可能期望你的页面展示出像所你键入得一样格式，分为两行，但是你会看到：Example Source Code 这是我的第一个网页多令人激动这是因为浏览器不会关注你的代码是怎么写的，也丝毫不关心空格（就算你键入“这是我的第一个网页 多令人激动”，结果还是是一样的）。要文本以不同的行来显示，你必须明确地指出。按照下面改进你的代码：Example Source Code 这是我的第一个网页多令人激动p标签代表paragraph，即段落。查看结果，这两行终究以两行来显示。HTML文档的内容应该跟书籍或者文章一样，在适当的地方应该划分段落。强调在段落中你可以用em标签和strong标签来强调突出文本。它们都做几乎相同的事，尽管传统上浏览器会以斜体来显示em，以粗体来显示strong。Example Source Code 是的， 那个 就是 我要说的。 多令人激动 换行换行标签可以用来打断成两行，像下面：Example Source Code 这是我的第一个网页 多令人激动 但是，这个方法已经严重被滥用来划分段落，它不应该使用在预计分段的两段文本中。（是什么结构，该用什么标签就用什么标签，不是为断行而分段或者为分段而断行译者注）（因为没有任何东西在换行标签之间，所以没有闭合标签，它是用“/”在br后自闭合的。）p段落标签是格式化文本的开始。HTML标签有专门的标签处理你页面上的标题。它们是h1，h2，h3，h4，h5和h6，象封建社会一样，h1就是万能的君主而h6就是最底层的百姓。按照下面改进你的代码：Example Source Code 我的第一个网页我的第一个网页这是什么用HTML组合起来的简单网页目的学习HTML 注意，h1标签在一个页面只能使用一次假定它是这个页面的主标题，是不应该使用多次的（相当于一篇文章的题目，你可以有一个副题目，但你不会使用两个并列的题目吧？译者注）。但是，h2到h6可以如你所需任意使用多次，但它们应依设计意图，该按顺序使用。比如，h4应该是h3的子标题，h3应该是h2的子标题，以此类推。有三种类型的列表：无序、有序和定义列表。首先我们来学习前两种，在HTML中级指南中学习定义列表。为你的代码增加以下东西：Example Source Code 我的第一个网页我的第一个网页这是什么用HTML组合起来的简单网页目的学习HTML显摆，炫耀因为我已经爱上了我的电脑，我想给她点HTML爱情调料。 在浏览器中查看，你会看到有项目符号（比如方块）的列表。把ul改成ol后项目符号会变成编号，字母的或者数字的。列表里当然可以包含列表，形成有等级层次的嵌套列表。用下面的代码代替：Example Source Code 学习HTML 显摆，炫耀 向老板向朋友向我的小猫给我脑中多嘴的小鸭子因为我已经爱上了我的电脑，我想给她点HTML爱情调料。Ay vwah lah。列表里面包含着列表。你可以在这里包含更多的列表，还可以在那里包含更多的列表，等等等等。现在你已经创建了一个独立的网页，所有的都显得不错。使因特网显得特别的，是因为它把所有东西都连接起来了。HTML中的H和T代表HyperText，即超文本，表示着一个由连接文本所构成的系统。锚标签a用来定义一个连接，但是还是需要为锚标签增添其他的东西连接目标。为你的代码增加以下东西：Example Source Code 我的第一个网页我的第一个网页这是什么用HTML组合起来的简单网页目的学习HTML在哪里寻找教程Google 连接的目标用href属性来定义。连接可以是绝对的，比如，也可以是相对的，相对于当前页面来说。所以，假设你有另外一个HTML文档“flyingmoss.html”，其中一行代码可以写成The miracle of moss in flight ，诸如此类。连接不仅可以连接到其他的HTML文档，也可以连接到页面上的其他文件。连接还可以转到页面的其他部分。你可以给几乎所有的标签增加id属性，比如Moss，然后连接到它，像是这样做：Go to moss，点击这个连接会直接滚动到带有这个id的元素。注意Example Source Code a标签允许你为连接打开新窗口，而不是取代当前窗口，初听起来似乎是一个不错的主意，因为它不会让用户离开你的页面。但是，有很多理由证明，你不应该这样做。从易用性的观点来看，这种方法破坏导航。最常用的导航工具是浏览器上的“后退”，打开新窗口使这个功能失去了作用。更广泛地，还是从易用的观点来看，用户不需要到处都是弹出的新窗口。如果用户需要打开新窗口，他们有权利（是的，有权利。不要强行干涉别人意志，不是很好吗？在一般情况下，建议你尽量不要使用新窗口译者注）让自己来控制。都是文本的话看起来让人感到乏味和无聊，自然，网页不应该仅仅是文本而已（呵呵，对于一些技术性的文档，我想，文本就已经严重足够了译者注），它是多媒体的，最常见的形式就是图像。图像标签img用来为HTML添加图像，像下面这样改进你的代码：Example Source Code src属性告诉浏览器图像的地址。就像a标签一样，它可以是绝对的，如示范所示，但更多时候它是相对的。比如，你拥有自己的图像且已经另存为alienpie.jpg放置在images文件夹下，代码可以这样写img src=images/alienpie.jpg.长度属性width和高度属性height是必需的（Zeldman的“恶名昭著”的Designing with Web Standards（中文版网站重构应用Web标准进行设计已经出版，推荐翻译者之一的著名设计师ajie的网站网页设计师，你要是没有访问过，赶紧去，保准你收获不小！）中说，width和height不是必须的，这可以节省带宽。平时做网页我也不喜欢用这两个属性。译者注），因为浏览器在下载过程中能够计算出图像占据的空间，否则浏览器可能会产生一个页面的跳跃，因为事先并不知道图像要占用多少空间，以致于破坏页面布局。alt属性表示可替代的描述。这是为不能或者不选择图像显示的客户端着想（比如终端浏览器lynx，不能显示图片，但可显示alt中的文本。最坏的情况是，你写错了图片的文件名或者路径，即使在图形浏览器中图片显示不出，但仍可显示出alt中的文本，不会让访问者造成不必要的误解。什么情况下我们都推荐你，一定记得使用alt。译者注）。在最新版本的HTML版本中，这是不可缺少的属性。注意Example Source Code 给网页创做图像虽然不是本站的主题，但我们还是有一些对你有用的东西要说。经常被用到的图像格式是GIF和JPEG。他们都是压缩过的格式，有各自十分不同的用途。GIF图像不超过256色，但可以保持原有图像的色彩。色数越低，图像文件就越小。GIF应该用在有纯质颜色的图像上。JPEG使用十分精确的算法来压缩图像，对原图像有些微的改变。压缩程度越低，图像文件越大，从而图像更清晰。JPEG应该使用在要逼真描绘的诸如摄影的图像上。网页设计初学者需要处理的文件可能就是图像文件了，忽视图像过大是初学者常犯的错误。网页下载应该尽可能快，想想看，一个使用少于7kb每秒的Modem联网的人要用多少时间来下载你的整个页面。你必须在图像质量和图像文件大小之间作出选择。许多现代的图像处理软件允许用最佳方式压缩图像，但同样是一个冒险，或者产生错误。译者有话说：显然，现在还没有谁推荐PNG格式的图像，可能只因为IE对其糟糕的支持。GIF到目前为止还没有解决专利问题，使用它还是得冒侵权之危险。PNG很有潜力，同样也具有透明能力，色数也不止GIF的可怜的256色而已，却具有JPEG的高清晰、高保真度，这也是我，以个人的立场向你推荐的原因。请参考GIF还是PNG。漫步万维网世界，有多少HTML表格被用来布局页面，还一度被滥用。我们会在 CSS高级教程中学习怎样不用表格布局页面。表格的正确用处应该是，展示表格式的数据。有很多标签可以用在表格中，在初级指南中教授表格是如何工作的确实是一件比较困难的事情，没有关系，我们一步一步来，先来看一个例子。例子什么时候都是学习的好方法。把下面的代码拷贝到你文档的主体(与中），我们就可以明细每个标签是任何工作的了。Example Source Code Row 1, cell 1Row 1, cell 2Row 1, cell 3Row 2, cell 1Row 2, cell 2Row 2, cell 3Row 3, cell 1Row 3, cell 2Row 3, cell 3Row 4, cell 1Row 4, cell 2Row 4, cell 3table元素定义标签；tr元素定义表格中的一行；td元素定义数据单元格，这必须包含在tr标签内，如上所示。假设一个3x4的表格，包含12个单元，这就需要4个tr元素来定义行数和3个td元素在各行，总共有12个td元素。表单可以用来在网页中发送数据，特别是经常被用在联系表单用户输入信息然后发送到Email中。表单本身是没有什么用的。这需要编一个程序来处理输入表单中的数据。这也超出了本站指南的范围。如果使用网络服务器来放置HTML，你能够自助地找到一些简单的教程，开发一个服务器端的程序使一个发送到Email的表单工作。实际用在HTML中的标签有form、 input、 textarea、 select和option。表单标签form定义的表单里头，必须有行为属性action，它告诉表单当提交的时候将内容发往何处。可选的方法属性method告诉表单数据将怎样发送，有get（默认的）和post两个值。常用到的是设置post值，它可以隐藏信息（get的信息会暴露在URL中）。所以一个表单元素看起来是这样子的：Example Source Code input标签是表单世界中的“老大”。有10种形式，概括如下：是标准的文本框。它可以有一个值属性value，用来设置文本框里的默认文本。 像文本框一样，但是会以星号代替用户所输入的实际字符。 是复选框，用户可以快速的选择或者不选一个条目。它可以有一个预选属性checked，像这样的格式. 与复选框相似，但是用户只可在一个组中选择一个单选按钮。它也有一个预选属性checked，使用方法跟复选框一样。 是展示你电脑上的文件的一个区域，就像你在一个软件中打开或者保存一个文档一样。 是一个被点击后提交表单的按钮。你可以用值属性value来控制按钮上显示的文本（下面的button和reset类型也可以这样，稍后介绍），如下： . 以图像代替按钮文本，src属性是必须的，像img标签一样。 是一个如果没有其他代码的话什么都不做的按钮。