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

在本系列的最后一部分中，我们将向我们的网站添加一个新页面，我们将在其中试验一些 html 元素，并扩展我们的 css 知识。

本系列也有：

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

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

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

准备

我们将向我们的网站添加一个新页面，我们将使用它作为沙箱来测试不同的 HTML 元素并学习使用 CSS 设置它们的样式。我们将此页面称为“html-elements.html”，因此我们需要做的第一件事是在导航菜单中添加指向该页面的链接。

在“html-from-scratch.html”文件中，找到导航 (<nav>) 部分：

<nav>   <ul>     

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

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

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

</ul> </nav>

并将中间链接（Nettuts）替换为“html-elements.html”文件的链接；将链接文本设置为“元素”：

<li><a href="html-elements.html">Elements</a></li>

现在，复制“my-first-webpage.html”文件并将其命名为“html-elements.html”。

突出显示当前页面

在新的 HTML 文件中，删除 <section> 标记之间的所有内容以从页面中删除所有主要内容。我们将很快填写新内容。首先，我们需要在导航中区分我们当前所在的页面，因为现在每个链接看起来都相同，这会导致各种可用性问题。

为了将指向当前页面的链接与其他链接区分开来，我们将向包含指向当前页面的链接的 <li> 添加一个“current”类。
因此，在“my-first-webpage.html”页面上，将第一个链接更改为：

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

并在“html-elements.html”上将中间链接更改为：

<li class="current"><a href="html-elements.html">Elements</a></li>

这允许我们使用“nav .current a”来定位当前页面的链接。在 CSS 文件中，找到以下样式：

nav a:hover {   text-decoration: underline; }

将选择器更改为：

nav a:hover, nav .current a {

您可以使用选择器定位多个元素，方法是用逗号 (,) 分隔每个元素。现在，如果您在浏览器中查看每个网页，相应的链接应该带有下划线。

文本元素

在新页面的 <section> 内，粘贴以下内容。它包含一些新的 HTML 元素：

<h2>Text Elements</h2> <p>   

Pellentesque habitant morbi tristique <strong>senectus et netus</strong>   

et <em>malesuada fames ac</em> turpis egestas.   

<q>Vestibulum tortor quam, feugiat vitae, ultricies eget</q>   

<cite>Dan Harper, 2012</cite>.<br />   

Donec eu libero sit amet quam egestas semper. Aenean   

<a href="http://example.com">ultricies mi vitae</a>    

est. Mauris placerat eleifend leo. </p>

忽略文本本身，它只是自 1500 年代以来在印刷行业中使用的Lorem Ipsum占位符文本。

在第 3 行，我们有<strong>标签，它默认在浏览器中使文本变为粗体。使用 strong 使某些内容在文本中脱颖而出。旧版本的 HTML 使用<b>标签；然而，这已被弃用。坚持<strong>。

第 4 行引入了<em> ，它通过将其设置为斜体来强调文本。使用它可以使文本突出 - 但不如 <strong> 那么多。旧版本的 HTML 使用<i>标签；然而，就像 <b> 一样，这已经被弃用了。

在下一行中，我们演示了<q>，它在您的文本中标记了一个小引号。它会自动将其中的文本用“ ”引号括起来。

<cite>与 <q> 标记相关，应用于在文本中添加引文以引用。

大行情

我们已经看到了如何使用 <q> 标记在文本中插入小引号，但 HTML 还为较大的引号提供了<blockquote>，就像 Nettuts+ 上的这个

这就是<blockquote>在 Nettuts+ 上的样子

在前面的文本之后将以下内容添加到新的 HTML 中：

<h2>Large Quotes</h2> <blockquote>   

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames.</p>   

<p><cite>Joe Bloggs, 2010</cite></p> </blockquote>  

<p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>

在这里，您可以看到我们在 <blockquote> 中包含了段落。我们也可以使用里面的 <cite> 标签来添加引用。

将以下 CSS 样式添加到样式表以设置块引用的样式：

blockquote {   border-left: 2px solid #999;   margin-left: 30px;   padding-left: 10px; }

在块引用的左侧添加小边框已成为最近的普遍趋势。

列表

<h4>Header Level 4</h4> <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>  <ol>   

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

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

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

在这里，您可以看到无序列表 (<ul>) 和有序列表 (<ol>) 的使用。

您可以使用list-style-type CSS 属性更改项目符号的样式。例如，我们可以将用于有序列表的项目符号从十进制数字更改为罗马数字，如下所示：

section ol li {   list-style-type: lower-roman; }

在“部分”的“有序列表”中定位“列表项”。

不喜欢无序列表上使用的传统圆形项目符号？一个正方形怎么样：

section ul li {   list-style-type: square; }

有关您可以使用的所有不同样式，请参阅W3Schools 的此页面。

表

您可能已经阅读到您不应该在您的网站中使用表格。这严格来说是指使用表格来创建网站的布局，因为我们现在使用 CSS 来创建布局。
表格只能用于表格数据。

要标记表格，请使用 <table> 标记。然后使用 <tr> 标记创建表中的每一行。然后，每一行可以是两种类型的单元格之一：

1. 标记列中顶部单元格的标题单元格；

2. 包含正常数据的标准单元格。

创建表

首先将以下代码添加到您的页面：

<table>   <tr>    

 <th>Column #1</th>     

<th>Column #2</th>     

<th>Column #3</th>   

</tr> </table>

你可以在这里看到我们创建了一个新表，只有一行。然后，该行包含三个标有“Column #1”到“Column #3”的标题单元格。
让我们在表格中添加一些内容——在结束 </table> 标记之前添加以下内容：

<tr>   <td>Lorem ipsum</td>   

<td>Dolor sit amet</td>   

<td>Consectetuer al</td> </tr>  <tr>   

<td>Adipiscing elit</td>   

<td>Habitant morbi</td>   

<td>Tristique senectus</td> </tr>  

<tr>   <td>Lorem ipsum</td>   

<td>Dolor sit amet</td>   

<td>Consectetuer al</td> </tr>  

<tr>   <td>Adipiscing elit</td>   

<td>Habitant morbi</td>   

<td>Tristique senectus</td> </tr>

给桌子造型

好吧，内容就在那里，它绝对是一张桌子，但让我们为其添加一些风格。
首先，我们希望表格占据其容器的整个宽度。我们还需要删除表格中的边框，以便正确设置行和单元格的样式。将以下内容添加到您的 CSS 文件中：

table {   border-collapse: collapse;   width: 100%; }

现在让我们通过将它们的背景颜色设置为深灰色并将文本颜色设置为白色来突出标题单元格：

th {   background-color: #222;   color: #fff; }

为每个单元格添加一个小填充，以及一个边框，以帮助使用以下内容分隔每个单元格：

th, td {   border: 1px solid #444;   padding: 5px; }

最后，我们将在表格中添加一些斑马纹（交替的行背景颜色）：

tr:nth-child(even) {   

background-color: #fdfdfd; }  

tr:nth-child(odd) {   

background-color: #f1f1f1; }

在这里，我们使用新的 CSS3 :nth-child(odd)和:nth-child(even)选择器来定位每个偶数行和每个奇数行。

概括

到目前为止，您应该对如何使用 HTML 标记简单的网页有了扎实的基础，并了解如何使用 CSS 来定位和设置页面上的特定 HTML 元素。