web前端：从index.html开始
在这篇针对初学Web开发人员的文章中，我们来看看HTML以及如何使用这种标记语言来设置Web开发项目。
那么我们从哪里开始？在一开始的时候！138亿年前，宇宙是在所谓的大爆炸中创造的。
好吧，也许我们不需要那么远。让我们从这个HTML事物的来源开始。
如果您不熟悉HTML，HTML（也称为超文本标记语言）已经出现一段时间了。它是网页结构的标准。它是定义我们的Web（或万维网www）标准的3种技术的一部分。其他2，CSS和JavaScript，我们会在稍后的日子报道。但是这个HTML事物是构建我们的网页或应用程序的基础。这就是您的浏览器知道如何显示您以及屏幕上的位置。
太棒了，所以这4个字母的缩写告诉互联网如何呈现一个页面。浏览器如何读取它？什么是使它如此友好的结构？
标签！
<yes>
HTML使用预定义标签来构建网页。有一些非常重要的标签可供您了解。定义网站结构的前3个是<html>，<head>和<body>。但在此之前，您需要声明的文档类型
<！DOCTYPE html>标记是您打开网页的方式。这应该是第一个。这是浏览器读取的第一行，以了解它实际上是在读取HTML文档。之后的一切都只是结构。
大多数标签需要打开和关闭。结束标签通常由在单词开始处带有反斜杠的标签组成。例如<html> </ html>是HTML的开放和结束标签。这条规则有一些例外，但现在，假设所有标签必须以这种方式打开和关闭。
好吧，让我们来编码。打开一个代码编辑器，如Atom或Notepad ++。我们将从本地开始。
那么，我们需要创建一个网页的第一件事是什么？
没错，文档类型声明！
<！DOCTYPE html>
现在我们使用前面提到的3个标签，HTML，head和body定义基本结构。
<html><head> </head> <body> </body></html>
所以HTML标签告诉浏览器从哪里开始寻找页面的结构。头标记包含关于该页面的所有信息，用户不能直接看到。这些是用于搜索引擎，书签等的东西。您将定义出现在页面选项卡上的页面名称，这就是我们真正能够看到的。您也可以在这里定义参考脚本和文件，我们将在下周了解更多信息。
body标签是所有用户可见的东西。如果您已经看过一些HTML标签（如<h1>或<p>或<a href...>），所有这些都在正文中（一般来说）来定义页面如何显示给用户。出于我们的目的，我们会说这定义了页面的所有结构和格式，但在接下来的几周中，您将看到这将如何改变。
让我们给页面一个标题和一些快速文本，然后我们会看看我们的浏览器。
在开始和结束<head>标签之间，定义一个标题。
< title >我的网页</ title >
在打开和关闭<body>标记之间添加一些文本。目前，我们不会添加标签。只是普通的旧文本。
保存您的文件并将其命名为index.html。
现在，为什么我们要命名我们的文件索引？
因为这是进入域时的默认文件名（除非另有说明 - 稍后会介绍）。让我们快速解析一个URL。因此，在像这样的URL（https://www.sap.com/community.html）中，明确提到了文件名。我们希望显示community.html文件。但是，如果我们从URL中删除community.html，我们将显示哪个页面？应该加载哪个文件？做吧！怎么了？我们被转到https://www.sap.com/index.html。我们将我们的home文件命名为index.html，因为如果没有指定文件名，浏览器会将其解释为index.html。您可以覆盖此重定向，但现在，我们将保留浏览器的默认规则。
所以一旦你保存了你的文件，你可以双击它，它会在你的浏览器中打开。
不是太令人兴奋，但看看标签是如何命名为我们在标题标签中定义的相同的东西？我们的网页上只有我们放在网页上的纯文字？现在我们已经了解了这些标签在屏幕上的呈现方式，让我们对页面进行一些调整。
回到你的编辑器，让我们在body中添加一些格式。
使用<h1>标签添加标题。这些是标题标记，并且标题级别可以从1（*）到6级。级别数越大，标题越不重要，它就是查看它的一种方式。
然后，将纯文本包装在一对<p>标签中。这将把它定义为一个新的段落。这是分解文本的有用标签，因为它为我们的页面添加了自然的新行和间距。
<body><h1>All about Meredith</h1> <p>Here is some text.<p><p>And then I added more that I want to be in a new paragraph. </p></body>
确保保存，然后在浏览器中刷新页面。
如果你想添加链接，这就是<a>标签的来源。<a>标签是锚点。您可以使用它们在页面上跳转（如可能会看到的“跳到底部”，“返回顶部”链接），也可以将它们作为外部参考。让我们建立一个链接到我们的SAP人员配置文件。我们通过标签定义中的href属性定义要去的地方。我将添加名为target的第二个属性，该属性指定在哪里打开新页面。在这种情况下，我希望它成为一个新选项卡，因此我使用_blank。
<ahref="https://people.sap.com/meredith.hassett"target="_blank">Meredith's Profile</a>
保存更改并刷新浏览器。
点击链接。这将通过您的SAP人员配置文件打开一个新页面。
使用HTML进行开发有很多优秀的资源，但现在它不是构建页面或应用程序的标准。在开始构建Web应用程序的一些更加动态的部分之前，我想花一些时间来讨论基本构建块。理解一个页面是如何构建的，然后才能在兔子洞下面走得很远很重要。因此，如果您想了解更多信息，请随时浏览W3School的HTML简介，但这是构建网页的良好基础。