• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 网页设计 » HTML » 正文

如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分）

ngkoma • 2年前 (2022-07-29) • HTML

在本系列中，您将学习如何使用最新的网页设计技术（html5 和 css3）创建网站。本系列面向那些对网页设计知识完全为零的人。

本系列也有：

  1. 网页设计初学者指南：第 1 部分

  2. 网页设计初学者指南：第 2 部分

  3. 网页设计初学者指南：第 3 部分

现代网络浏览器

由于我们将使用最新的标准（html5 和 CSS3）创建我们的网页，我们需要一个能够理解最新网络技术的现代网络浏览器。

IE8 以下的微软 Internet Explorer 浏览器版本根本无法解决问题。如果您使用的是 IE7 或更低版本，请下载以下 Web 浏览器之一。

如果您已经在使用其他网络浏览器，请检查它是否符合以下最低要求以获得最佳性能。

  • 火狐 3+

  • 谷歌浏览器

  • 苹果浏览器 4+

  • 歌剧 10+

  • 微软 Internet Explorer 8

“为什么我需要某个浏览器？” 你可能会问。好吧，由于 HTML5 相对较新，旧的浏览器不了解如何正确读取代码并将其转换为网页。

文本编辑器

HTML 文件只是带有 .html 扩展名的文本文件，因此您不需要像 Dreamweaver 这样的专业或昂贵的软件来创建它们。事实上，您的计算机预装了可以编写网页的软件——Windows 上的“记事本”或 mac 上的“TextEdit”（在“纯文本模式”下）。

虽然预装在您计算机上的软件可以，但远非最佳。如果您使用的是 Windows，我建议您下载Notepad++或 Mac 上的TextWrangler。这两个程序都是完全免费的，并提供了许多对 Web 开发人员有用的功能，例如语法突出显示、选项卡式文件编辑和行号。

对于 Mac 用户，我强烈建议购买TextMate、Coda或Espresso。Windows 用户，试试E-TextEditor。


如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分） 第1张

如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分） 第2张


HTML 简介

互联网上的每个网站都是用超文本标记语言 (HTML) 编写的。多年来，随着网络变得更加主流，并且网站发现自己需要新功能，HTML 语言已经发展和扩展。

HTML 语言由万维网联盟(W3C) 维护，目前最新的规范是 HTML 5，它为该语言添加了许多新功能，并有助于为更具交互性和功能丰富的网页铺平道路.

一个简单的 HTML 页面如下所示：

<!doctype html>

<html>

  <head>

    <title>Hello, World!</title>

  </head>

  <body>

    <p>Hello, and welcome to my website.</p>

  </body>

</html>

上面的代码在网络浏览器中打开时将创建以下网站：


如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分） 第3张


HTML 是一种非常容易学习的语言。您只是在您的内容中插入“标签”，这些标签概述了每一位内容应如何在网络浏览器中显示。

例如，您可以将标签插入到您希望新文本段落开始的页面中，使文本成为文档中的标题，插入图像，链接到您网站上的其他页面或 Internet 上的其他地方等。

HTML 标签包裹在 < > 尖括号内。查看前面的示例，您会看到每个“标签”都是一对。我们在顶部有 <html>，在底部有 </html>。

<html> 通知网络浏览器标签对内的所有内容都是 HTML 代码。</html> 标签告诉浏览器 HTML 内容已经结束。最后一个标签中的“斜线”表示这是“结束”标签。

注意： <!doctype html> 行必须包含在任何 HTML5 的顶部，才能被视为“有效”代码。这一行告诉网络浏览器页面其余部分的文档类型——换句话说，文档标记在哪个版本的 HTML 中，以便浏览器可以正确呈现它。

紧随其后的 <head> ... </head> 部分是您放置有关网页的信息的地方，这些信息不会显示在主页本身中，但会为浏览器保存有关您的页面的元数据。

在 <head> 部分中，我们有文本“Hello, World!” 包裹在 <title> ... </title> 标签内。

<title> 字面上包含当前网页的标题，Web 浏览器使用它来命名窗口/选项卡：


如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分） 第4张


在 <head> 部分之后，我们有 <body>。这是放置您网页的实际内容的位置。在正文中，我们有一个 <p> 标签，里面有一些欢迎文字。

<p> 标记页面上的段落。例如：

<p>Once upon a time in a land far, far away there lived a princess who lived happily ever after.</p>

<p>The End.</p>

标记两段文字。如果我们要在浏览器中查看它，我们将看到以下内容：


如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分） 第5张


你可能想知道为什么我们需要这些 <p> 和 </p> 标签来显示一个段落。好吧，如果我们没有，并且像这样编写网页：

Once upon a time in a land far, far away there lived a princess who lived happily ever after.

The End.

该页面在浏览器中将如下所示：


如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分） 第6张


如您所见，浏览器会忽略我们在文件中所做的任何格式设置。我们可以如下编写示例网页，它会在浏览器中显示相同的内容：

<!doctype html><html><head><title>Hello, World!</title></head><body><p>Hello, and welcome to my website</p></body></html>

浏览器只对 HTML 标签告诉它做什么感兴趣。它将忽略您在文档中包含的任何空格（额外的空格、制表符、新行等）


创建一个简单的网页


如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分） 第7张


现在您了解了 HTML 的基础知识，让我们制作我们的第一个网页！上图是这个页面最终的样子。

在您计算机的某处创建一个新文件夹并将其命名为“html-from-scratch”。使用您喜欢的文本编辑器，创建一个新的空白文件并将其作为“my-first-webpage.html”保存在此文件夹中。

在文件中输入以下内容：

<!doctype html>

<html>

  <head>

    <title>HTML From Scratch</title>

  </head>

  <body>

    <!-- content goes here -->

  </body>

</html>

以上是一个基本的 HTML 5 文件布局。我们在第一行声明了文档类型，打开了 <html> 和 <head> 标签，并将“HTML From Scratch”设置为页面标题。然后我们关闭头部并打开身体。

在第 7 行，我们包含了一条评论。使用注释在您的代码中留下额外的信息，这些信息不会显示在您的网页中。通过将文本包装在 <!-- 和 --> 标签中来标记评论。

最后，我们关闭打开的 body 和 html 标签以完成文档。

标题

从源代码中删除 <!-- content goes here --> 行并输入以下内容：

<header>

  <h1>HTML From Scratch</h1>

</header>

<header> 标签是 HTML5 中引入的一个新元素，用于标记和构建网页的“标题”部分。标题是网页的顶部，通常是网站名称所在的位置。

在 HTML5 之前，我们使用 <div id="header"> 和 </div>（或类似的东西），但我不会详细介绍旧的 HTML 规范，因为我们正在学习最新的标准。

重要提示： <header> 不能与 <head> 混淆。它们都是完全不同的标签。

在我们的标题中，我们包含一个 <h1> 标记。H1 用于标记您页面上的主标题（在这种情况下，是我们网站的名称）。HTML 包含从 1 到 6 的标题标签，其中 <h1> 是页面上最大、最重要的标题，一直到 <h6>。


如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分） 第8张


导航

接下来，我们将标记网站的导航菜单。在结束 </header> 之后，输入以下内容：

<nav>

  <ul>

    <li>Home</li>

    <li>Nettuts</li>

    <li>Google</li>

  </ul>

</nav>

这段代码可能看起来有点吓人，但让我们分解一下。上面的块标记了一个导航区域（<nav>），其中包含一个无序列表（<ul>）和三个列表项（<li>）。

<nav> 是一个新的 HTML5 元素，用于标记网站上的导航区域。这通常用于保存您网站的主导航菜单，但是由于我们现在只创建一个网页，因此我们将只创建一个指向 Nettuts 和 Google 的链接。<ul> 创建一个项目符号列表，每个 <li> 项（列表项）是列表中的一个新项目符号。

保存您的文件，然后在您的网络浏览器中打开“my-first-webpage.html”。你应该看到这个：


如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分） 第9张


如您所见，<title> 标签工作正常，<h1> 标签在页面顶部显示一个大标题，并且我们的项目符号导航列表正确显示。

您可能会注意到我们现在的导航列表存在一个问题：这些项目不是超链接，因此它们不可点击。要解决此问题，请将三个列表项 (<li>) 更改为：

<li>

  <a href="my-first-webpage.html">Home</a>

</li>

<li>

  <a href="https://code.tutsplus. com">Nettuts</a>

</li>

<li>

  <a href="http://www.google.com">Google</a>

</li>

在我们的每个 <li> 列表项中，我们已经将文本变成了超链接。<a> 标签创建一个锚点——一个指向您网站上另一个页面或 Internet 上另一个位置的超链接。

为了使锚标签实际链接到某个地方，我们在“href”参数中为其提供了链接地址。参数进入开始标签 (<a href="">...</a>)。

在我们的网页上，“主页”链接指向当前页面（“my-first-webpage.html”），“Nettuts”指向 Nettuts（https://code.tutsplus. com），“Google”链接指向到，你猜对了，谷歌。


如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分） 第10张



主要内容

在 </header> 标记之后，输入以下内容：

<section>

  <p>This is the main content for my website.<br />

  Here is some stuff about me:</p>

 

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>

</section>

<section> 标签也是 HTML5 中的新标签（我们曾经使用类似 <div id="content"> 的标签），它实际上是在网页上创建内容的“部分”。在这种情况下，我们使用 <section> 来标记我们的内容所在页面的主要部分。

在里面，我们有两个包含随机文本的段落。请注意，在第一段中，我们有一个 <br /> 标签。这是一个换行符；换句话说，它后面的文本将显示在新行上，但在同一段落中。

<br /> 标签很特别，因为它没有结束标签。相反，结束正斜杠 ('/') 包含在标记的末尾。这是因为换行符不包含任何内容，它的存在纯粹是为了美观，否则我们会写 <br></br> 这有点毫无意义。

其他几个标签也是自关闭的，例如 <img /> 和 <hr />，我们稍后会看到。


如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分） 第11张


图片

在您的“html-from-scratch”文件夹中，创建一个名为“images”的新文件夹。将下面的图像保存到该文件夹中（右键单击，将图像另存为）：


如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分） 第12张


现在，回到网站的主要内容中，在结束 </section> 标记之前，输入以下内容以在我们的页面上插入图像：

<img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/076_beginnerWebDesign/part1/images/envato-stock.jpg" alt="Envato Stock Image" />

<img /> 标签和锚标签一样，是自动关闭的，并且接受它的大部分内容作为开始标签中的参数。

src="..." 代表“源”（图像的路径）。图像可以存储在 Internet 上的其他地方，或者与网页一起存储在本地。在这里，我们设置了标签来显示我们保存在图像目录中的图像。

alt="..." 包含将在图像加载失败时显示的“替代文本”。您通常会在此处简要描述图像。

现在看一下页面。图像应显示：


如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分） 第13张


侧边栏

接下来，让我们标记网页的侧边栏。在结束 </section> 标记后输入以下内容：

<aside>

  <hr /><h2>Sidebar</h2>

  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas:</p>

  <ul>

    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>

    <li>Aliquam tincidunt mauris eu risus.</li>

    <li>Vestibulum auctor dapibus neque.</li>

  </ul>

</aside>

<aside> 是一个 HTML5 标记，用于标记网页中除主要内容之外的部分，例如侧边栏，其中包含的信息内容不如页面的主要部分重要。

在我们的侧边栏中，我们有一个名为“侧边栏”的第三级标题 (H3)，一个包含一些随机占位符文本的段落，然后是一个包含 3 个项目的无序列表。

看看你的页面，你应该会在我们放置在 <section> 标记中的内容的正下方看到上面的内容。不要担心侧边栏实际上还不是侧边栏，这就是 HTML 的设计方式。稍后会详细介绍。


如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分） 第14张


页脚

在我们网站的最底部的页脚中，我们将包含一个小的版权声明。一些网站将其页脚和其他详细信息（例如站点地图）更进一步。

<footer>

  <p>

    Copyright &copy; Your Name 2010.<br />

    Part of a tutorial for <a href="https://code.tutsplus. com">Nettuts+</a>.

  </p>

</footer>

<footer> 也是 HTML5 中引入的一个新标签。您现在可能已经掌握了窍门，并且应该注意到我们在页脚中包含了一个段落，其中包含我们的版权声明和换行符，然后是返回 Nettuts 的链接。

注意：请参阅“©” 在我们的页脚？那是一个 HTML 实体。该实体在浏览器中呈现时将显示版权符号 (©)。

在 Wikipedia 上阅读有关 HTML 字符实体的更多信息。


如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分） 第15张


在第 2 部分

本系列的第一部分到此结束。在短短的时间里，你已经完成了很多！您已经学习了许多基本的 HTML 标记，并手工编写了您的第一个网页。

在下一部分中，我们将学习如何使用 HTML 的犯罪***——CSS——让网页看起来更漂亮，并将上面没有样式的基本页面变成我们的最终产品：


如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分） 第7张



文章目录
  • 本系列也有：
  • 现代网络浏览器
  • 文本编辑器
  • HTML 简介
  • 创建一个简单的网页
  • 标题
  • 导航
  • 主要内容
  • 图片
  • 侧边栏
  • 页脚
  • 在第 2 部分

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：如何使用HTML5和CSS3创建网站（网页设计初学者指南：第1部分）
    文章地址：https://www.weixiaolive.com/en/index.php/post/9485c91e.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云