内容

• 踩
• 第1部分，共2部分：学习HTML基础知识
• 第2部分，共2部分：学习高级HTML
• 尖端
• 警示语
• 生活必需品

HTML是的缩写。 超文本标记语言，它是代码或 语 用于创建网站。如果您以前从未编程过，它可能看起来很复杂，但是要尝试一下，您需要的是一个简单的文字处理程序和一个Internet浏览器。您可能会从论坛，在线个人资料或wikiHow文章中识别一些HTML。 HTML对使用Internet的任何人都是有用的资源，学习HTML所花费的时间可能比您预期的要少。

踩

第1部分，共2部分：学习HTML基础知识

1. 打开一个HTML文档。 大多数文字处理程序（包括Windows的记事本或Word和Mac的文本编辑器）都可以用于创建HTML文档。打开一个新文档，然后从顶部菜单中选择“文件”→“另存为”，将您的文档另存为网页，或将文件扩展名从“ .doc”，“。rtf”或其他任何内容更改为“ .html”或“ .htm” ”。
   • 现在，您可能会看到一条警告，指出您的文档已从RTF格式（RTF）更改为“纯文本”格式，并且某些格式设置选项和图像未正确保存。您可以忽略此警告； HTML文档不使用这些选项。
   • .html和.htm文件是相同的。两者都有效。
2. 使用浏览器查看您的文档。 保存您的空白文档，将其关闭，然后在保存位置双击该文档以再次打开它。现在，您的文档应该由浏览器打开为空白网页。如果这样不起作用，请将文件的图标拖到浏览器的地址栏中。稍后，如果按照本文中的步骤编辑HTML文档，则将继续返回浏览器查看代码中的更改。
   • 注意：您的网页尚未在线。该页面无法被其他人访问，并且您不需要有效的Internet连接即可对其进行测试。您只需使用浏览器就可以像网站一样“读取” HTML文档。
3. 了解什么是“标签”。 标签在最终网页上不可见，就像普通文本一样。标签告诉您的浏览器如何显示页面和页面上的内容。起始标签包含说明。例如，它可以告诉浏览器以粗体显示文本。需要使用end标签来告知浏览器该指令在何处应用：在此示例中，start标签和end标签之间的所有文本均为粗体。结束标记也放置在括号内，但是第一个括号后面是斜杠。
   • 将起始标签写在方括号中： 这是开始的一天>
   • 将结束标签写在括号中，但在第一个括号后加一个斜杠： /这是结束标签>)
   • 在本文的后面部分阅读如何编写功能标签。在此步骤中，您只需要记住编写标签的方式即可：>和/>。
   • 在其他HTML课程中，标记也称为“元素”，而开始和结束标记之间的文本也称为“元素内容”。
4. 编写您的第一个html>标签。 每个HTML文档都以一个 html>标签并以a结尾 / html>标签。这告诉浏览器，这些标记之间的所有内容均以HTML编写。将这些标签添加到您的文档中：
   • 写 html> 在文档的顶部。
   • 按Enter或返回几次以给自己一些空间，然后写 / html>
   • 记得你 一切 在本文中这两个标记之间。
5. 将head>作为文档的一部分。 在标签html>和/ html>之间，您写了一个 头>开始标签和一个 /头>-end标签。在这些标签之间再次留出一些空间。这些标签之间写的任何内容都不会在网页本身上可见。请尝试以下步骤，看是否可以看到信息的显示位置：
   • 在head>和/ head>标记之间编写： 标题> 和 /标题>
   • 在标签title>和/ title>之间编写： 如何学习HTML（带图片）.
   • 保存该文档并在浏览器中打开它（如果该页面仍处于打开状态，则保存文档并在浏览器中刷新页面）。您在页面顶部地址栏上方看到您刚刚写的内容吗？
6. 创建一个body>部分。 该初学者文档中的所有其他内容都放在body>部分中，并显示在网页上。 后 标签/头>，但是 在...前面 您编写的标签/ html> 身体> 和 /身体>。我们在本文中进一步讨论的所有内容都放在body标签之间。您现在应该拥有一个看起来像这样的文档（没有项目符号）：
   • html>
   • 头>
   • 标题>学习HTML-WikiHow /标题>
   • /头>
   • 身体>
   • /身体>
   • / html>
7. 添加不同样式的文本。 现在是时候开始编写实际上可以在浏览器中看到的内容了！保存更改并刷新浏览器中的页面后，您在body标签中编写的所有内容都将在浏览器中可见。写 不是 带有标志的东西 和 >因为您的浏览器会将其解释为HTML指令，而不是纯文本。举个例子 你好，世界！ （英语为“ Hello world！”，这是全球标准文本，是使用特定编程语言的任何编程课程中的第一个示例）或其他内容，然后在文本前后放置以下标记，看看会发生什么情况：
   • em>世界您好！/ em> 看起来像斜体文本： 你好，世界！
   • strong>你好，世界！/ strong> 看起来像黑体： 你好，世界！
   • s>世界您好！ 看起来像删除线文本： 你好，世界！
   • sup>世界您好！/ sup> 看起来像上标：
   • 你好，世界！ 看起来像标题： _{你好，世界！}
   • 尝试组合：如何看 em> strong>你好，世界！/ strong> / em> 出去？
8. 将您的文本分为几段。 如果在文档中放置不同的文本行，您将看到所有行都一个接一个地放置。您必须自己编写新行和空白行：
   • p>这是一个单独的部分。
   • 这句话在第一行，这句话在下一行。
     这是我们遇到的第一个不需要结束标签的标签！我们称这样的标签为一 空标签.
   • 创建标题以使各节的名称清晰可见：
     h1>标头/ h1>：可能的最大标头
     h2>标头/ h2> （2级标题）
     h3>标头/ h3> （3级标题）
     h4>标头/ h4> （4级标题）
     h5>标头/ h5> （最小的标题）
9. 了解如何制作列表。 有几种方法可以在网页上创建列表。尝试以下方法以找出最喜欢的方法。请注意，一对标签放置在整个列表周围（例如ul>和/ ul>标签用于无序列表），而另一对标签放置在列表中的每个项目周围，例如li>和/ li> 。
   • 使用以下代码创建项目符号列表：
     ul> li>一个项目/ li> li>另一个项目/ li> li>另一个项目/ li> / ul>
   • 或使用以下代码创建编号列表：
     ol> li>项目1 / li> li>项目2 / li> li>项目3 / li> / ol>
   • 或者下面的代码创建一个所谓的定义列表：
     dl> dt>咖啡/ dt> dd>-热饮/ dd> dt>牛奶/ dt> dd>-冷饮/ dd> / dl>
10. 换行，横线和图像使您的页面更具吸引力。 现在是时候开始向页面添加其他内容了。尝试以下标签（图像必须在线发布，以便您可以使用指向图像的链接）：
    • 插入一行： br> 或者 hr>
    • 插入图片： img src =“ the_url_of_your_image”>
11. 插入指向页面其他位置的链接。 您还可以使用此代码链接到其他页面和网站，但是由于您还没有网站，我们将重点关注“锚点”，这是页面上可以链接到的特定位置：
    • 首先，在您要链接到的页面上的点创建一个带有a>标记的锚点。给您的锚定一个清晰易记的名称：
      
      name =“ Tips”>这是放置锚点的文本。/a>
    • 使用标签href>链接到您的锚点或另一个网页：
      
      a href =“网页的网址或此页面上的锚点名称”>在此处写为链接显示的文本或图像。/a>
    • 要链接到另一个页面上的锚点，请在URL后面添加＃字符，后跟锚点的名称。例如，http：//www.wikihow.com/HTML-leren#Tips将带您直接转到此页面上的“提示”部分。

第2部分，共2部分：学习高级HTML

1. 了解属性。 属性放置在标签内，用于对开始标签和结束标签之间的“元素内容”进行其他调整。他们从不孤单。它们以以下方式编写： 名称=“值”. 名称 代表属性的名称（例如，“颜色”），并且 价值 描述这种特殊情况（例如“红色”）。
   • 如果您仔细阅读了本文的前一部分，那么您已经遇到了属性。 img>标记使用属性 src，锚点使用属性 名称 和链接使用属性 href。你可以告诉他们所有的大小 ___='___’ 跟随。
2. 试用HTML表。 要制作表格或图形，您需要几个标签：
   • 从整个表格周围的表格标签（英语中的“表格”）开始：表> /表>
   • 在每行的内容周围放置标签： tr>
   • 将列标题放在第一行中： th>
   • 将单元格放在连续的行中： td>
   • 这是所有这些如何结合在一起的一个示例：
     
     table> tr> th>第1列：月/ th> th>第2列：省钱/ th> / tr> tr> td> 1月/ td> td>€100 / td> / tr> / table>
3. 了解头部部分中使用的其他标签。 您已经学习了标签head>，将其放置在每个文档的开头。除了title>标记外，head部分中可能还有其他标记：
   • 元标记用于创建 元数据 关于网页。搜索引擎使用此数据对网页进行分类。为了使您的页面对搜索引擎可见，您可以放置​​一个或多个meta标签（不必使用end标签），每个标签必须恰好包含一个name属性和content属性，例如：meta name =“ description” content =“ put here说明“>;或meta name =“ keywords” content =“在此处编写关键字列表，始终用逗号分隔”>
   • link>标签用于将其他文件链接到页面。这些页面通常用于将CSS样式表与HTML页面相关联，这些页面是用不同类型的代码构造的，并用于确定页面的整体样式。
   • script>标签用于将javascript文件与HTML页面相关联。如果用户在页面上执行某些操作，则Javascript允许页面更改。
4. 播放现有页面中的HTML。 查看网页的源代码是扩展HTML知识的好方法。右键单击页面，然后选择“查看源代码”，“显示页面源代码”或类似内容。找出您不知道的特定标签是什么，或者在线搜索答案。
   • 您无法编辑其他人的网站，但是您可以将HTML代码复制到自己的文档中，然后进行操作以查看有哪些不同的调整。注意：由于许多网站使用CSS样式表，因此您可能看不到许多颜色或其他样式。
5. 通过阅读更多深入的文章来了解HTML。 互联网上有许多资源可以掌握更多HTML标记，例如W3Schools或Codecademy。还有很多HTML书籍，但是请确保您使用的是最新版本，因为HTML标准不时更改。熟练掌握HTML之后，可以使用CSS来更好地控制网页的设计和样式。之后，下一步通常是javascript。

尖端

• 在Internet上找到一个简单的网页，然后开始弄乱代码可能会很有用。尝试移动一些文本，更改字体，更改图像，无论您想要什么！
• 您可以使用笔记本写下代码，这样一来，即使您暂时不记得它，也可以依靠它。您也可以打印此页面并保留以供参考。
• 如今，网站上越来越多地使用XML和RSS。该代码可能无法用肉眼看到，特别是在源代码中查看时，但是该功能可能很有用。
• HTML中使用的标签不区分大小写，但是默认设置是使用小写字母（就像我们在本文中所做的那样）。强烈建议为标签添加小写字母，也为了与XHTML兼容。

警示语

• 一些标签已不再使用，并已由其他相同的标签代替，但通常提供更多选项。
• 如果要确保页面符合HTML标准，请访问W3网站以根据当前标准测试代码。许多标签已过时，并已被在现代浏览器中更有效的标签所取代。

生活必需品

• 文字处理程序，例如记事本（Windows）或文本编辑器（Mac）。
• 一张纸或笔记本（可选的)
• 专为编写HTML而设计的程序，例如Windows的Notepad ++或Mac的TextWrangler（可选的)