深圳博客技术论坛 » 【编程讨论学习】 » 『HTML/CSS技术』 » HTML初级教程（转自52CSS）

1/2页12 跳转到页查看:10471

HTML初级教程（转自52CSS）

萨拉哈

组别:管理员
性别:
积分:2271
帖子:2117

2007-08-29 11:27 | 只看楼主 树型| 收藏| 小中大 1^#

HTML初级教程（转自52CSS）

1、简介及入门 ──一开始你所需要做的和创作你的第一个HTML文件

2、标签、属性和元素──构成HTML的要素

3、title文档标题 ──页面的标题

4、段落──用段落构建你的内容

5、标题h1~h6 ──6个等级的标题

6、列表──定义有序或无序的列表

7、链接──把东西链接起来

8、图象──添加一点不是文本的东西

9、表格table ──使用表格式的数据

10、表单form ──文本框和其他由用户输入的构件

11、综合应用 ──把上面所有的要素堆积起来

萨拉哈最后编辑于 2007-08-29 11:50:08

你的选择是做或者不做，但是不做就永远没有机会。

TOP

萨拉哈

组别:管理员
性别:
积分:2271
帖子:2117

2007-08-29 11:29 | 只看楼主 树型| 收藏| 小中大 2^#

1、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:\html\myfirstpage.html”，或者在Linux中，“/home/myname/html/myfirstpage.html”）。

哇噻，看见了吗？你的第一个网页。怎不令人兴奋呢！所有的过程只是键入几个单词而已。

注意

引用:

Example Source Code

我们上述的只是使用最基本的文本编辑器，如记事本，vi，但你可能更愿意使用专门的网页制作软件如Macromedia Dreamweaver或者 Microsoft Frontpage。

然而你使用这些软件时你得十分小心，尤其是，如果你是初学者，这些软件会给你的网页带来不必要的或者不标准的代码（甚至是垃圾代码——译者注）。

你要是真想严肃认真地学习HTML，你应该读完本站提供给你的整个教程，以便你至少能对网页设计到底是怎么一回事儿有一个基本的了解。

上面提到的网页制作软件永远不会给你整个网页编写的控制权，除非你手工编写代码。

萨拉哈最后编辑于 2007-08-29 11:52:46

你的选择是做或者不做，但是不做就永远没有机会。

TOP

萨拉哈

组别:管理员
性别:
积分:2271
帖子:2117

2007-08-29 11:35 | 只看楼主 树型| 收藏| 小中大 3^#

标签、属性和元素──构成HTML的要素

尽管HTML的基础是纯文本，但我们还是需要多一些东西才能使纯文本文件变成合法的HTML文件。

标签

HTML基本的构成包含标签，标签围绕着内容，赋予内容某些意义。

按照下面改进你的文件：

引用:

Example Source Code [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
这是我的第一个网页
</body>
</html>

保存文件，回到浏览器界面和选择“刷新”（这会重新装载网页）。

网页的外观没有任何改变，HTML的目的是表达内容，而不是表达表现，这个例子现在已经定义了网页一定的基本元素。

第一行以<!DOCTYPE..开始是为了让浏览器知道你到底要做什么。你可能还不知道自己在做什么，但接受它很重要。如果你不这样做，浏览器将用“quirks”（奇怪的）模式来表现你的网页。现在还不必担心，当然你需要了解或者学习的话可以看看 HTML高级教成的进一步学习“文档类型”。当前，只需要记住把这一行放在文件的顶端就可以了。

言归正传，<html>是隔开其他内容的起始标签，它告诉浏览器，位于自己与闭合标签</html>之间的就是是HTML文档。在<body>和</body>之间的是这个文档展示在浏览器上的主要内容。

闭合标签

</body>和</html>关闭他们各自的标签。所有的HTML标签都要关闭。尽管老版本的HTML允许某些标签不关闭，但最新的标准要求所有的标签都要关闭。无论如何，闭合标签是一个好习惯。

并不是所有的标签都像<html></html>一样关闭，有的标签不用绕在内容外面，它们是自关闭的。比如断行的的标签是这样的：<br />。呆会我们还有这方面的例子。你所需要记住的是，所有的标签都必须关闭，以及，大部分的内容都在标签之间，他们的格式是这样的：起始标签 - 内容 - 闭合标签。

属性

标签可以有属性，包含额外的信息。属性一般出现在开放标签中，它们的值总是在引号中。就像这样：<tag attribute="value">Margarine</tag>。呆会我们会讲解带属性的标签。

元素

除了标记元素的开始与结束，标签不愿再多做些什么。元素是构建网页的bits。你可能会说，比如，在<body>和</body>之间的是主体元素，又如，<title>和</title>是标签，而<title>Rumple Stiltskin</title>则是标题元素。

你的选择是做或者不做，但是不做就永远没有机会。

TOP

萨拉哈

组别:管理员
性别:
积分:2271
帖子:2117

2007-08-29 11:38 | 只看楼主 树型| 收藏| 小中大 4^#

HTML初级教程 title文档标题

所有的HTML网页都应该有文档标题。

给你的文档增加一个标题，按照下面改变你的代码：

引用:

你可以看到，我们已经增加从<head>标签和<title>标签开始的两个新元素（看看他们是怎么关闭的）。

头元素（从起始标签<head>到闭合标签</head>之间的内容）出现在主体元素（从起始标签<body>到闭合标签</body>之间的内容）之前，包含将在主体元素信息之前装载的信息。这些信息不会出现在浏览器窗口中。

随着我们进一步学习，你会看到更多能够插入头元素的其它元素，但最重要的还是标题元素。

如果你从浏览器查看这个网页（像前面一样已经保存和刷新），你可以看到“这是我的第一个网页”出现在浏览器窗口的标题栏。你键入的位于标题（title）标签的文本已经变成了这个文档的标题，惊奇吧？假设把这个网页增添到你的收藏夹或者书签，你会看到标题也会出现在这里。

你的选择是做或者不做，但是不做就永远没有机会。

TOP

萨拉哈

组别:管理员
性别:
积分:2271
帖子:2117

2007-08-29 11:39 | 只看楼主 树型| 收藏| 小中大 5^#

HTML初级教程段落

现在你的HTML文档已经有了基本的框架，你可以来“胡搞”一阵子其他内容了

回到记事本，按照下面增加新行：

引用:

接着用浏览器查看一下。

你可能期望你的页面展示出像所你键入得一样格式，分为两行，但是你会看到：

引用:

Example Source Code [www.52css.com]
这是我的第一个网页多令人激动

这是因为浏览器不会关注你的代码是怎么写的，也丝毫不关心空格（就算你键入“这是我的第一个网页多令人激动”，结果还是是一样的）。

要文本以不同的行来显示，你必须明确地指出。

按照下面改进你的代码：

引用:

Example Source Code [www.52css.com]
<p>这是我的第一个网页</p>
<p>多令人激动</p>

p标签代表paragraph，即段落。

查看结果，这两行终究以两行来显示。

HTML文档的内容应该跟书籍或者文章一样，在适当的地方应该划分段落。

强调

在段落中你可以用em标签和strong标签来强调突出文本。它们都做几乎相同的事，尽管传统上浏览器会以斜体来显示em，以粗体来显示strong。

引用:

Example Source Code [www.52css.com]
<p>是的，那个 <em>就是</em> 我要说的。 <strong>多</strong>令人激动</p>

换行

换行标签可以用来打断成两行，像下面：

引用:

Example Source Code [www.52css.com]
这是我的第一个网页<br /> 多令人激动

但是，这个方法已经严重被滥用来划分段落，它不应该使用在预计分段的两段文本中。（是什么结构，该用什么标签就用什么标签，不是为断行而分段或者为分段而断行——译者注）

（因为没有任何东西在换行标签之间，所以没有闭合标签，它是用“/”在br后自闭合的。）

你的选择是做或者不做，但是不做就永远没有机会。

TOP

萨拉哈

组别:管理员
性别:
积分:2271
帖子:2117

2007-08-29 11:40 | 只看楼主 树型| 收藏| 小中大 6^#

HTML初级教程标题h1~h6Author

p段落标签是格式化文本的开始。

HTML标签有专门的标签处理你页面上的标题。

它们是h1，h2，h3，h4，h5和h6，象封建社会一样，h1就是万能的君主而h6就是最底层的百姓。

按照下面改进你的代码：

引用:

Example Source Code [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>我的第一个网页</h1>
<h2>这是什么</h2>
<p>用HTML组合起来的简单网页</p>
<h2>目的</h2>
<p>学习HTML</p>
</body>
</html>

注意，h1标签在一个页面只能使用一次——假定它是这个页面的主标题，是不应该使用多次的（相当于一篇文章的题目，你可以有一个副题目，但你不会使用两个并列的题目吧？——译者注）。

但是，h2到h6可以如你所需任意使用多次，但它们应依设计意图，该按顺序使用。比如，h4应该是h3的子标题，h3应该是h2的子标题，以此类推。

你的选择是做或者不做，但是不做就永远没有机会。

TOP

萨拉哈

组别:管理员
性别:
积分:2271
帖子:2117

2007-08-29 11:41 | 只看楼主 树型| 收藏| 小中大 7^#

HTML初级教程列表

有三种类型的列表：无序、有序和定义列表。首先我们来学习前两种，在HTML中级指南中学习定义列表。

为你的代码增加以下东西：

引用:

在浏览器中查看，你会看到有项目符号（比如方块）的列表。把ul改成ol后项目符号会变成编号，字母的或者数字的。

列表里当然可以包含列表，形成有等级层次的嵌套列表。

用下面的代码代替：

引用:

Example Source Code [www.52css.com]
<ul>
<li>学习HTML</li>
<li> 显摆，炫耀
<ol>
<li>向老板</li>
<li>向朋友</li>
<li>向我的小猫</li>
<li>给我脑中多嘴的小鸭子</li>
</ol></li>
<li>因为我已经爱上了我的电脑，我想给她点HTML爱情调料。</li>
</ul>

Ay vwah lah。列表里面包含着列表。你可以在这里包含更多的列表，还可以在那里包含更多的列表，等等等等。

你的选择是做或者不做，但是不做就永远没有机会。

TOP

萨拉哈

组别:管理员
性别:
积分:2271
帖子:2117

2007-08-29 11:42 | 只看楼主 树型| 收藏| 小中大 8^#

HTML初级教程链接

现在你已经创建了一个独立的网页，所有的都显得不错。使因特网显得特别的，是因为它把所有东西都连接起来了。

HTML中的H和T代表HyperText，即超文本，表示着一个由连接文本所构成的系统。

锚标签a用来定义一个连接，但是还是需要为锚标签增添其他的东西──连接目标。

为你的代码增加以下东西：

引用:

连接的目标用href属性来定义。连接可以是绝对的，比如http://www.htmldog.com，也可以是相对的，相对于当前页面来说。

所以，假设你有另外一个HTML文档“flyingmoss.html”，其中一行代码可以写成<a href="flyingmoss.html">The miracle of moss in flight</a> ，诸如此类。

连接不仅可以连接到其他的HTML文档，也可以连接到页面上的其他文件。

连接还可以转到页面的其他部分。你可以给几乎所有的标签增加id属性，比如<h2 id="moss">Moss</h2>，然后连接到它，像是这样做：<a href="#moss">Go to moss</a>，点击这个连接会直接滚动到带有这个id的元素。

注意

引用:

Example Source Code [www.52css.com]
a标签允许你为连接打开新窗口，而不是取代当前窗口，初听起来似乎是一个不错的主意，因为它不会让用户离开你的页面。

但是，有很多理由证明，你不应该这样做。

从易用性的观点来看，这种方法破坏导航。最常用的导航工具是浏览器上的“后退”，打开新窗口使这个功能失去了作用。

更广泛地，还是从易用的观点来看，用户不需要到处都是弹出的新窗口。如果用户需要打开新窗口，他们有权利（是的，有权利。不要强行干涉别人意志，不是很好吗？在一般情况下，建议你尽量不要使用新窗口——译者注）让自己来控制。

你的选择是做或者不做，但是不做就永远没有机会。

TOP

萨拉哈

组别:管理员
性别:
积分:2271
帖子:2117

2007-08-29 11:42 | 只看楼主 树型| 收藏| 小中大 9^#

HTML初级教程图像

都是文本的话看起来让人感到乏味和无聊，自然，网页不应该仅仅是文本而已（呵呵，对于一些技术性的文档，我想，文本就已经严重足够了——译者注），它是多媒体的，最常见的形式就是图像。

图像标签img用来为HTML添加图像，像下面这样改进你的代码：

引用:

Example Source Code [www.52css.com]
<img src="http://www.yourdomain.com/logo.gif" width="88" height="31" alt="mysite logo" />

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 [www.52css.com]
给网页创做图像虽然不是本站的主题，但我们还是有一些对你有用的东西要说。
经常被用到的图像格式是GIF和JPEG。他们都是压缩过的格式，有各自十分不同的用途。
GIF图像不超过256色，但可以保持原有图像的色彩。色数越低，图像文件就越小。
GIF应该用在有纯质颜色的图像上。
JPEG使用十分精确的算法来压缩图像，对原图像有些微的改变。压缩程度越低，图像文件越大，从而图像更清晰。
JPEG应该使用在要逼真描绘的诸如摄影的图像上。
网页设计初学者需要处理的文件可能就是图像文件了，忽视图像过大是初学者常犯的错误。网页下载应该尽可能快，想想看，一个使用少于7kb每秒的Modem联网的人要用多少时间来下载你的整个页面。
你必须在图像质量和图像文件大小之间作出选择。许多现代的图像处理软件允许用最佳方式压缩图像，但同样是一个冒险，或者产生错误。
译者有话说：显然，现在还没有谁推荐PNG格式的图像，可能只因为IE对其糟糕的支持。GIF到目前为止还没有解决专利问题，使用它还是得冒侵权之危险。PNG很有潜力，同样也具有透明能力，色数也不止GIF的可怜的256色而已，却具有JPEG的高清晰、高保真度，这也是我，以个人的立场向你推荐的原因。
请参考GIF还是PNG。

你的选择是做或者不做，但是不做就永远没有机会。

TOP

萨拉哈

组别:管理员
性别:
积分:2271
帖子:2117

2007-08-29 11:43 | 只看楼主 树型| 收藏| 小中大 10^#

HTML初级教程表格table

漫步万维网世界，有多少HTML表格被用来布局页面，还一度被滥用。我们会在 CSS高级教程中学习怎样不用表格布局页面。表格的正确用处应该是，展示表格式的数据。

有很多标签可以用在表格中，在初级指南中教授表格是如何工作的确实是一件比较困难的事情，没有关系，我们一步一步来，先来看一个例子。例子什么时候都是学习的好方法。

把下面的代码拷贝到你文档的主体(<body>与</body>中），我们就可以明细每个标签是任何工作的了。

引用:

Example Source Code [www.52css.com]
<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>

table元素定义标签；tr元素定义表格中的一行；td元素定义数据单元格，这必须包含在tr标签内，如上所示。

假设一个3x4的表格，包含12个单元，这就需要4个tr元素来定义行数和3个td元素在各行，总共有12个td元素。

你的选择是做或者不做，但是不做就永远没有机会。

TOP

<<上一主题|下一主题>>

1/2页12 跳转到页

HTML初级教程（转自52CSS）

HTML初级教程（转自52CSS）

1、HTML初级教程 简介及入门

标签、属性和元素──构成HTML的要素

HTML初级教程 title文档标题

HTML初级教程 段落

HTML初级教程 标题h1~h6Author

HTML初级教程 列表

HTML初级教程 链接

HTML初级教程 图像

HTML初级教程 表格table

1、HTML初级教程简介及入门

HTML初级教程段落

HTML初级教程标题h1~h6Author

HTML初级教程列表

HTML初级教程链接

HTML初级教程图像

HTML初级教程表格table