如何构建一个HTML页面

今天你吸猫了么
232 阅读6分钟

How To Structure An HTML Page

构造一个HTML页面是一个使用基本的HTML标签的练习，以便在HTML标记中提供结构和插入内容。有些HTML标签有特定的用途，如图像标签，但大多数HTML标签是用来结构页面和描述它们周围的内容的。在本教程中，我们将看一看何时以及如何使用这些基本的HTML元素来成功地结构我们的网页。

创建HTML文件

在你开始编写HTML代码之前，你需要创建一个或多个HTML文件来保存这些标记。HTML文件需要有某些元素来声明该文件是有效的HTML文件。我们用来向网络浏览器表明这个文件将包含HTML标记的方法是，指定一个这样的声明。

<!DOCTYPE html>

这应该是一个HTML文件的第一行。这样做是为了让网络浏览器知道应该期待什么类型的文件。目前，几乎所有的浏览器和网站都在使用的HTML版本是HTML5。请注意，你不需要在声明中明确说明5的版本。只要包括<！DOCTYPE html>就足够了。

除了声明被正确设置外，HTML文件还应该以.html为扩展名结束。让我们通过创建一个名为index.html的具有正确扩展名和doctype的文件来创建一个新的HTML文件。

index.html

<!DOCTYPE html>
元素 --------

为了开始向HTML文件添加实际的HTML标记，在指定了doctype之后，你必须做的下一件事就是使用 标签。总是有一个开头的标签和一个结尾的标签。这告诉网络浏览器，这些标签内的任何内容都将被解释为有效的HTML标记。

index.html

<!DOCTYPE html>
<html>

</html>

<头>元素

HTML文档中的标签很重要，因为它是指定当前页面的元数据的地方。这种元数据是不一定能在网页上看到的信息，但对搜索引擎、社会图表等来说，它将包含有价值的信息。

你可能在网页的区域包含的第一条信息是标签。在这个标签里面，我们可以给页面指定一个标题。

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Hello HTML!</title>
</head>
</html>

html title tag

如何链接到其他网页

锚标签（）使网页设计师能够链接到本地和远程网页。href属性代表超链接参考，用于链接到一个路径，或一个文件所在的地址（无论它是在你的计算机上还是在其他地方）。提供给href属性的路径通常是URL。这个例子链接到Bing搜索引擎。

<!DOCTYPE html>
<html>
<head>
    <title>Hello HTML!</title>
</head>
<body>
<!--link to bing.com-->
<a href="https://www.bing.com">Bing</a>
</body>
</html>

hyperlink to bing search engine

microsoft bing internet search engine

在新窗口中打开链接

上面的链接将用户重定向到目标网站，都在同一个浏览器窗口中。用户仍然可以通过使用浏览器中的返回按钮返回到原来的网页。如果你喜欢在一个新的窗口中完全打开一个链接，那么你可以使用标签的目标属性。通过设置目标属性的值为_blank，链接将在一个新窗口中打开。

<!DOCTYPE html>
<html>
<head>
    <title>Hello HTML!</title>
</head>
<body>
<!--link to bing.com-->
<a target="_blank" href="https://www.bing.com" rel="noopener">Bing</a>
</body>
</html>

相对链接

除了链接到外部网页外，你还想链接到网站的内部网页。让我们设想一下，我们有一个page_two.html文件，与index.html位于同一目录下。使用相对路径很容易将这两个页面链接在一起。让我们看看是怎么做的。

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Hello HTML!</title>
</head>
<body>
<p>Go to <a href="page_two.html">page two</a></p>
</body>
</html>

page_two.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page Two</title>
</head>
<body>
<p>This is page two</p>
<p>Go back to <a href="/index.html">the homepage</a></p>
</body>
</html>

relative html link 1

anchor html tag relative link

用图片链接

锚标签当然可以包住文本，但也可以用来包住图像。这样，你就可以用图像作为元素，让用户点击后进入一个新页面。

<a href="https://bing.com"><img src="/images/bing.png" /></a>

use image for anchor link

链接到id属性

HTML中另一个有用的链接机制是能够在同一HTML页面中直接链接到id属性。这一点很有用，如果你有一些长篇的内容，而你想让用户能够快速跳转到页面的各个部分。这可以使用超链接到页面上的特定id属性的链接来实现。让我们看一个例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Linking In HTML</title>
</head>
<body>
<div id="top">
    <ul>
        <li><a href="#section-one">Section One</a></li>
        <li><a href="#section-two">Section Two</a></li>
    </ul>
</div>
<div id="section-one">
    <h1>Section One</h1>
    <p>This is section one. You might have lots of information here in section one. If you would like to jump right to
        this point in the page you can easily click the Section One link at the top of the page.</p>
</div>
<div id="section-two">
    <h1>Section Two</h1>
    <p>This is section two. You might have lots of information here in section two. If you would like to jump right to
        this point in the page you can easily click the Section Two link at the top of the page.</p>
    <p>If you would like to jump right to the top of the page you can click <a href="#top">top</a></p>
</div>
</body>
</html>

留白和缩进

HTML并不关心页面标记中的空白处。你可以有一大串的HTML，它仍然可以在浏览器中正常呈现。你也可以让元素的间距不均匀，只要开头和结尾的标签正确，页面上的渲染就会很好。然而，这并不能给开发者带来良好的体验。好的是，在所有流行的代码编辑器中都有一些工具，可以将HTML格式化为一个非常令人愉快和容易阅读的布局。

不太好

<!DOCTYPE html>
<html>
<body><h1>Whitespace</h1><p> Whitespace and indentation make html documents easier to read</p></body>
</html>

更好

<!DOCTYPE html>
<html>
  <body>
      <h1>Whitespace</h1>
      <p>
        Whitespace and indentation make html documents easier to ready
      </p>
  </body>
</html>

HTML注释

所有的编程语言都提供了在代码中插入注释的方法，这样开发人员就可以根据自己的喜好来记录特征和功能。HTML不是一种编程语言，但它仍然提供了一种在标记中使用注释的方法，使代码更容易理解。注释以<！-开始，以->结束。中间的任何字符都会被浏览器忽略。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Linking In HTML</title>
</head>
<body>
<div id="top">
<!-- Navigation Area -->
    <ul>
        <li><a href="#section-one">Section One</a></li>
        <li><a href="#section-two">Section Two</a></li>
    </ul>
</div>

在你的代码中加入注释，对于帮助你（和其他人）理解你的代码是非常有用的，如果你决定以后再来审查它。注释允许你试验新的代码，而不必删除旧的代码。如果你想尝试一个新的设计，只是在页面的一部分，你可以把那个区域注释出来，然后在它的地方放上活的代码进行测试。

如何构建一个HTML页面摘要

avatar
文章
阅读
粉丝