HTML 编辑器
使用 Notepad 或 TextEdit 来编写 HTML
可以使用专业的 HTML 编辑器来编辑 HTML:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
不过,我们同事推荐使用文本编辑器来学习 HTML,比如 Notepad (PC) 或 TextEdit (Mac)。我们相信,使用一款简单的文本编辑器是学习 HTML 的好方法。
通过记事本,依照以下四步来创建您的第一张网页。
步骤一:启动记事本
如何启动记事本:
开始
所有程序
附件
记事本
步骤二:用记事本来编辑 HTML
在记事本中键入 HTML 代码:
步骤三:保存 HTML
在记事本的文件菜单选择“另存为”。
当您保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别,完全根据您的喜好。
在一个容易记忆的文件夹中保存这个文件,比如 w3school。
步骤四:在浏览器中运行这个 HTML 文件
启动您的浏览器,然后选择“文件”菜单的“打开文件”命令,或者直接在文件夹中双击您的 HTML 文件。
结果应该类似这样:
HTML CSS
通过使用 HTML4.0,所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表。
实例
本例演示如何使用添加到
部分的样式信息对 HTML 进行格式化。本例演示如何使用样式属性做一个没有下划线的链接。本例演示如何 标签链接到一个外部样式表。如何使用样式
当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:
外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过
body {background-color: red}
p {margin-left: 20px}
内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
This is a paragraph
访问我们的 CSS 教程,学习更多有关样式的知识。
标签
描述
定义样式定义。
定义资源引用。
定义文档中的节或区域(块级)。
定义文档中的行内的小块或区域。
规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
定义基准字体。不赞成使用。请使用样式。
对文本进行水平居中。不赞成使用。请使用样式。
HTML 链接
HTML 使用超级链接与网络上的另一个文档相连。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
实例
本例演示如何在 HTML 文档中创建链接。本例演示如何使用图像作为链接。
HTML 超链接(链接)
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
我们通过使用 标签在 HTML 中创建链接。
有两种使用 标签的方式:
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
HTML 链接语法
链接的 HTML 代码很简单。它类似这样:Link text
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
点击这个超链接会把用户带到 W3School 的首页。
提示:"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
HTML 链接 - target 属性
使用 Target 属性,你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档:Visit W3School!
HTML 链接 - name 属性
name 属性规定锚(anchor)的名称。
name 属性用于创建 HTML 内部的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。
当使用命名锚(named anchors)时,我们可以创建直接跳至页面中某个节的链接,这样使用者就无需不停的滚动页面来寻找他们需要的信息。
命名锚的语法:Text to be displayed
提示:锚的名称可以是任何你喜欢的名字。
实例
HTML 文档内部的已命名的锚:Useful Tips Section
然后,我们创建指向相同文档中“有用的提示”部分的链接:Visit the Useful Tips Section
或者,创建从另一个页面指向该文档中“有用的提示”部分的链接:
Visit the Useful Tips Section
在上面的代码中,我们将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个命名锚了。
具体效果:有用的提示
注释:请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3school.com.cn/html/"。
提示:命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚,然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科,您会发现其中几乎每个词条都采用这样的导航方式。
提示:假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。
本例演示如何在新窗口打开一个页面,这样的话访问者就无需离开你的站点了。本例演示如何使用链接跳转至文档的另一个部分本例演示如何跳出框架,假如你的页面被固定在框架之内。本例演示如何如何链接到一个邮件。(本例在安装邮件客户端程序后才能工作。)本例演示更加复杂的邮件链接。
HTML 链接标签
标签
描述
定义锚。
HTML 图像
通过使用 HTML,可以在文档中显示图像。
实例
本例演示如何在网页中显示图像。本例演示如何将其他文件夹或服务器的图片显示到网页中。
图像标签()和源属性(Src)
在 HTML 中,图像由 标签定义。
是空标签,意思是说,它只包含属性,并且没有闭合标签。
要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。
定义图像的语法是:
URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中,那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。
替换文本属性(Alt)
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
基本的注意事项 - 有用的提示:
假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。
本例演示如何向 HTML 页面添加背景图片。本例演示如何在文字中排列图像。本例演示如何使图片浮动至段落的左边或右边。本例演示如何将图片调整到不同的尺寸。本例演示如何为图片显示替换文本。在浏览器无法载入图像时,替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。本例演示如何将图像作为一个链接使用。本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。本例显示如何把一幅普通的图像设置为图像映射。
图像标签
标签
描述
定义图像。
定义图像地图。
定义图像地图中的可点击区域。
HTML 表格
你可以使用 HTML 创建表格。
实例
这个例子演示如何在 HTML 文档中创建表格。本例演示各种类型的表格边框。
表格
表格由
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
在浏览器显示如下: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 表格和边框属性 如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。 使用边框属性来显示一个带有边框的表格
表格的表头 表格的表头使用 | 标签进行定义。
在浏览器显示如下: Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 表格中的空单元格 在大多数浏览器中,没有内容的表格单元显示得不太好。
在浏览器显示如下: row 1, cell 1 row 1, cell 2 row 2, cell 1 注意:这个空的单元格的边框没有被显示出来。(不过 Mozilla Firefox 可以将整个边框显示出来。) 为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。
在浏览器中显示如下: row 1, cell 1 row 1, cell 2 row 2, cell 1 基本的注意事项 - 有用的提示: |
---|
本例演示一个没有边框的表格。本例演示如何显示表格表头。本例展示如何使用 " " 处理没有内容的单元格。本例演示一个带标题 (caption) 的表格本例演示如何定义跨行或跨列的表格单元格。本例演示如何显示在不同的元素内显示元素。本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。本例演示如何使用 Cell spacing 增加单元格之间的距离。本例演示如何向表格添加背景。本例演示如何向一个或者更多表格单元添加背景。本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。本例演示如何使用 "frame" 属性来控制围绕表格的边框。
表格标签
表格
描述
定义表格的表头。
定义表格的行。
定义表格单元。
定义表格的页眉。
定义表格的主体。
定义表格的页脚。
定义用于表格列的属性。
HTML 支持有序、无序和定义列表
实例
本例演示无序列表。本例演示有序列表。
无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于
- 标签。每个列表项始于
- 。
- Coffee
- Milk
浏览器显示如下:
Coffee
Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于
- 标签。每个列表项始于
- 标签。
- Coffee
- Milk
浏览器显示如下:
Coffee
Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以
-
开始。每个自定义列表项的定义以
-
开始。
-
Coffee
- Black hot drink Milk
- White cold drink
浏览器显示如下:
CoffeeBlack hot drinkMilkWhite cold drink
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
本例演示一个无序列表。本例演示不同类型的有序列表。本例演示如何嵌套列表。本例演示更复杂的嵌套列表。本例演示一个定义列表。
列表标签
标签
描述
定义有序列表。
定义无序列表。
定义列表项。
定义定义列表。
定义定义项目。
定义定义的描述。
已废弃。使用
- 代替它。
已废弃。使用
- 代替它。