内容

• 脚步
• 第1部分：我如何发现HTML
• 忠告
• 警告
• 你需要什么

HTML（超文本标记语言）是用于构建网页的基本语言。它被创建为一种简单而灵活的编码语言。互联网上几乎每个网站都是使用某种形式的此代码（ColdFusion，XML，XSLT）开发的。 HTML易于掌握，但是如果您对它的全面功能感兴趣，可以继续学习很长时间。为了给您的网站增添色彩和乐趣，一旦您习惯了基本的HTML页面，就可以学习基本的CSS。

脚步

4之1：建立文件

1. 

   打开一个简单的文本编辑器。 NotePad是一个不错的选择，可以免费下载。您可以使用大多数文本编辑器编写HTML，但是具有自动格式设置功能的更复杂的软件可能使组织HTML页面变得困难。
   • 不要使用TextEdit，因为它通常以浏览器可能无法识别为HTML的格式保存文件。
   • 您也可以使用在线HTML编辑器。不建议初学者使用专用的HTML编辑程序。

2. 

   
   
   将文件另存为网页。 在顶部菜单中选择文件→另存为。将文件格式更改为“网页”，“。html”或“ .htm”。将文件保存在容易找到的位置。
   • 这三个选项之间没有区别。

3. 

   在浏览器中打开文件。 双击该文件，它将在您的浏览器中自动打开为空白网页。或者，您可以打开浏览器，例如Firefox或Internet Explorer，然后使用文件→打开文件选择文档。
   • 该网站未在线。仅在您的计算机上可见。

4. 

   
   
   刷新网页并查看所做的更改。 在您的空白文档中键入以下内容： 你好。保存文档。在浏览器中刷新空白网页，您应该会在页面顶部看到粗体的“ Hello”字样。每当您想在本教程中测试新HTML时，请保存.htm文档，然后刷新浏览器窗口以查看HTML的编译方式。
   • 如果您看到““和”''出现在您的浏览器中，该文件未正确用HTML编译。尝试使用其他文本编辑器或其他浏览器。

5. 

   
   
   了解标签。 HTML命令以“标签”编写，这些标签告诉浏览器如何编译和显示网页。它们总是用单引号引起来 ，并且不会像您在上面的示例中使用它们时那样显示在网页上：
   • 是“启动卡”或“开放卡”。在此标签之后写的任何内容都将定义为“粗体”（网页上的粗体）。
   • 是“结束标签”或“结束标签”，您可以通过符号/符号来区分它们。它表示粗体文本的结尾。大多数（不是全部）标签都需要一个结束标签才能起作用，因此请确保包括它。

6. 

   生成您的文档。 删除HTML文档中的所有内容。从下面的文字开始，完全按照原样（减去要点）。此HTML代码告诉浏览器您正在使用哪种类型的HTML，并且所有HTML都将放置在标记内。 和 .

7. 

   添加head（head）和body标签。 HTML文档分为两部分。 “顶部”部分用于特殊信息，例如页面标题。 “正文”部分包含页面的主要内容。将这两个都添加到您的文档，并记住要包含结束标记。新添加的文字为粗体：

8. 

   给页面命名。 头部分中的大多数卡对于初学者来说都不重要。标题标签易于使用，并将确定显示在浏览器窗口名称或浏览器选项卡上的内容。将标题的开始和结束标签放在head标签内，并在这些标签之间写下您喜欢的任何标题：
   广告

第2部分，共4部分：文本格式

1. 

   向您的身体添加文字。 在本节中，我们将仅使用正文标签。其他文本仍将保留在您的文档中，但我们将在本教程中不再赘述，以节省空间。在卡之间写下您想要的任何内容 和 ，它将作为页面上的第一内容显示。例如：
   • 我按照WikiHow指示编写HTML页面。

2. 

   为文本添加标题。 使用标题标签来组织您的页面，这些标题指示浏览器以较大的字体显示它们之间的文本。搜索引擎和其他工具也使用这些标签来确定您的网站以及网站的组织方式。
   是最大的标题，您可以创建较小的标题，直到
   。在您的页面上尝试一下：
   • 欢迎来到我的网站。

   • 我按照WikiHow指示编写HTML页面。

   • 我今天的目标：

   • 完成的目标：

   • 了解如何使用标题。

   • 未完成的目标：

   • 了解更多文本格式化标签。

3. 

   了解更多文本格式化标签。 您已经看到了“ strong”标记，但是还有许多其他方式可以格式化文本。尝试使用这些标签，或对同一文本字符串一次使用多个标签。请记住在后面添加结束标签！
   • 重要文本，在浏览器中以粗体显示。
   • 强调的文本，在浏览器中以斜体显示。
   • 文字比平时要小。如果在标题中使用，此文本将自动调整大小。
   • 文本不再相关，以短划线显示。
   • 文本的插入时间要晚于其他文档，并带有下划线。

4. 

   整理页面上的文字。 您可能已经注意到，按“ enter”键不足以使文本显示在另一行上。这些标记可以帮助您创建段落和换行符，或以其他方式排列文本：

   • 此标记是“段落”的缩写，它将所有这些标记之间的所有文本保留在一个段落中，并将其与上方和下方的文本分开。

   • 
     该标签将产生换行符。不要在其上添加结束标签，因为它不会干扰任何其他内容。在诗歌或地址行（而不是段落）中使用此标签。

   • 如果您需要非常精确地显示文本，则此标签将其中的文本设置为固定宽度的字体（每个字母具有相同的宽度），并允许您创建间隔您可以根据需要对空白和换行符进行常规编辑，而不要使用标签。

   • 此标记定义了引用来源的文本的类型。

     您可以稍后使用 举证.

5. 

   添加不可见的字幕文本。 注释标记不会显示在网页上。它们使您可以将自己注释到HTML文档中，而不会影响内容。 不要添加结束标签。
   • 单独使用而没有结束标签的卡称为“空标签”。

6. 

   将它们结合在一起。 记住这些标签的最佳方法是在您的网站上使用它们。这是到目前为止所学步骤中使用卡片的示例。尝试预测它们在浏览器中的显示方式，然后将其复制到您的文档中并查找。
   • 欢迎来到我的网站。

   • 希望您喜欢此页面！

     我只为你做的

   • 第1部分：我如何发现HTML

   • 我已经学习过HTML 一 二小时，所以现在我是专家。
   广告

4的第3部分：添加链接和图像

1. 

   了解属性。 标签可以在其中写入称为属性的其他信息。这些属性由标签本身内的其他单词表示，形式为 属性名称=“特定值“。例如，任何HTML标记都可以具有title属性：

   • 引言段落在这里。

     将标题“简介”作为标题，当您将鼠标悬停在网页上的该段落上时会出现。

2. 

   链接到其他网站。 卡的使用 创建到任何其他网页的超链接。插入网页的URL以使用href属性链接到。这是一个链接到您正在阅读的网页的示例：
   • 您网站的访问者可以单击此文本来跟随链接。

3. 

   向标签添加id属性。 任何HTML标记都可以使用的另一个属性是“ id”元素。在任何卡中写 id =“ vidu” 或使用任何不包含空格的名称。它不会产生任何可见的效果，但是我们将在下一步中使用它。
   • 例如，将以下内容添加到您的文档中：

     本段用作描述id属性如何工作的示例。

4. 

   链接到具有特定ID的元素。 现在我们可以使用超链接标记， ，以链接到同一页面上的另一个位置。我们将使用＃符号，而不是我们要链接的id值，而不是URL。例如， 该文本将链接到ID为“ vidu”的文本。
   • 所有HTML值均区分大小写。 “ #VIDU”和“ #vidu”都将链接到同一位置。
   • 如果您的页面足够短，无法一次显示整个页面，那么在浏览器中单击链接时，您可能不会注意到有任何事情发生。调整窗口大小，直到出现滚动条，然后重试。

5. 

   添加照片。 卡 是一个空标签，表示不需要结束标签。使用属性添加浏览器显示图像所需的所有信息。这是一个显示WikiHow徽标的示例，后面带有每个属性的描述：
   • 
   • 物产 src =“” 告诉浏览器照片在哪里。 （请注意，从其他人的站点发布照片被认为是不适当的-当页面不再处于活动状态时，照片将消失。）
   • 物产 样式=“” 它可以做很多事情，但最重要的是，它用于以像素为单位设置图像的宽度和高度。 （您也可以使用单独的属性width =“”和height =“”，但是如果使用CSS，这可能会导致奇怪的尺寸调整问题。）
   • 物产 alt =“” 是图像的简要说明，如果图像加载失败，用户将看到该图像。这被认为是必需条件，因为它用于盲人网站访问者的屏幕阅读器。
   广告

第4部分（共4部分）：了解更多添加和在线获取网站

1. 

   确认您的HTML。 HTML验证检查代码中的错误。如果您的网站显示不正确，验证可以帮助您找到导致问题的错误。通过确定代码在显示时看起来还不错，它还可以教会您更多有关HTML的知识，但是由于HTML标准中的新更新，因此不再建议使用。使用无效的HTML不会使您的网站无用，但可能会导致问题或在其他浏览器上显示不稳定。
   • 尝试从W3C获得免费的在线验证服务，或在线搜索其他HTML 5验证工具。

2. 

   了解更多标签和属性。 还有许多其他HTML标记和属性，还有很多学习它们的地方：
   • 尝试w3schools和HTML Dog以获得更多教程和完整的标签列表。
   • 找到您喜欢的外观的网页，然后使用浏览器的“查看页面源代码”功能自己获取HTML代码。将其复制到您的文档中并研究其工作方式。
   • 阅读其他文章，了解如何在HTML中创建表，使用元标记来增加被搜索引擎发现的机会或使用除法。在页面上设置一个区域）和跨度（用于指定文本元素的样式）以帮助通过CSS进行样式设置。

3. 

   使您的网站在线。 选择一种服务来托管您的网站，然后您可以将任意数量的HTML页面上传到您的个人Web域。为此，您将需要使用FTP上传软件，但是许多网络租赁服务也提供此服务。
   • 链接到直接在您网站上的页面或图像时，您将需要使用完整地址。例如，如果您的域名是www.chuyengiahtmlsieudang.com，则 文字在这些标签中 将会链接到“ www.chuyengiahtmlsieudang.com/nhatky/thuhai.html”

4. 

   使用CSS添加样式。 如果您的HTML页面看起来有些单调，请尝试学习CSS的基础知识以添加颜色，不同的字体，并更好地控制元素的放置位置。将CSS“样式表”链接到HTML页面将使您可以快速进行重大更改，从而动态调整给定标记中所有文本的样式。您可以在此处稍微介绍一下基本格式设置层，也可以深入研究HTML Dog的CSS教程中的更详细的教程。

5. 

   将JavaScript添加到您的网站。 JavaScript是一种编程语言，用于向HTML页面添加很多功能。 JavaScript命令插入在开始和结束标记之间 ，可用于添加交互式按钮，计算数学问题等。在w3c示例中找到更多信息。广告

忠告

• 本教程中使用的doctype声明（使用的文档类型声明）是“宽松的HTML 4.0.1过渡”（HTML 4.0.1不是紧密过渡），一种简单的格式。供新手使用。用 （），而不是让浏览器以严格的HTML 5格式进行编译，这是推荐的（虽然不那么常用）标准样式。

警告

• HTML的目的是使内容保持全局格式。它无法控制您网站的呈现方式，例如背景色和元素的确切位置。尽管仍有标签可以执行此操作，但最好使用CSS创建一个可控性和一致性更高的网站。

你需要什么

• 一个简单的文本编辑器，例如NotePad或TextEdit
• Web浏览器，例如Internet Explorer或Mozilla Firefox
• （可选）HTML编辑器，例如Adobe Dreamweaver，Aptana Studio或Microsoft Expression Web