初学者指南：构建HTML5 / CSS3网页

本文是我们的“ HTML5 / CSS3教程系列”的一部分 -致力于帮助您成为更好的设计师和/或开发人员。 单击此处查看同一系列的更多文章。

HTML5和CSS3在短短两年内席卷了整个网络。在他们出现之前，Web设计人员创建网页的方式已经发生了许多改变，随着它们的出现，出现了一系列令人敬畏的支持，例如替代媒体，XML样式标签和渐进式输入属性，这些使Web设计人员能够实现梦想动画等功能。

尽管大多数开发人员似乎展示了潜在而又复杂的演示，但是HTML5 / CSS3并不是真正的火箭科学，我将引导您完成轻松的过程，以构建标准HTML5 / CSS3网页，其中包含全面而深入的解释和建议。诸如学习资源和免费HTML5模板之类的奖金可供您使用，因此趁此机会开始您HTML5之旅！

HTML4和HTML5之间的变化

您可能想知道为什么切换到HTML5甚至更重要。有很多原因，但是主要是因为您将像其他设计师一样使用全球Internet标准 。这样，您将在网上找到更多支持，并且您的网站将在不断改进的现代浏览器中正确呈现 。

初学者指南：构建HTML5 / CSS3网页 （图片来源： W3C ）

在表面上很难发现HTML4和HTML5之间的比较。通过查看新HTML5草案，您可以看到特色元素和更正的错误处理过程。浏览器开发人员特别喜欢用于呈现默认网页的新规范。

HTML5的更多功能是我们现代网络浏览器的转换。有了这些新的规范，整个Web现已被视为可用于HTML（尤其是HTML5），CSS和JavaScript的应用程序平台 。此外，该系统通过设置所有浏览器都应遵循的通用标准，优雅地在Web设计师和开发人员之间建立和谐的关系 。

另外，已经创建了许多元素来代表新时代的数字媒体 。其中包括<video>和<audio> ，它们对于多媒体支持非常有用。在某些浏览器中，您可以直接使用HTML完成表单验证。当然，由于许多软件开发人员尚未认识到这些功能，因此仍然非常需要jQuery。如果您想要标签列表，请查看此W3Schools表以了解有关它们的更多信息。

裸HTML5骨架

我发现了解任何主题的最简单方法就是直接研究它 。因此，我将为网页构建一个非常基本HTML5框架模板。我包括了一些较新的元素，希望稍后再进行归类。

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>Our First HTML5 Page</title>
  <meta name="description" content="Welcome to my basic template.">
  <link rel="stylesheet" href="css/style.css?v=1">
</head>

<body>
    <div id="wrapper">
    	<header>
            <h1>Welcome, one and all!</h1>
            
            <nav>
            	<ul>
                    <li><a rel="external" href="#">Home</a></li>
                    <li><a rel="external" href="#">About us</a></li>
                    <li><a rel="external" href="#">Contacts</a></li>
                </ul>
            </nav>
        </header>
        
        <div id="core" class="clearfix">
            <section id="left">
            	<p>some content here.</p>
            </section>
            
            <section id="right">
                <p>but some here as well!</p>
            </section>
        </div>
        
        <footer>
            <p>Some copyright and legal notices here. Maybe use the © symbol a bit.</p>
        </footer>
    </div>

</body>
</html>

立即，这与标准HTML4网页并没有太大区别。您可能会注意到，我们不需要再包含任何自动关闭标签 。这确实是个好消息，因为它将节省大量开发项目时间。

对于那些不知道的人，在XHTML草案中有许多标记为self-closes的元素。这些将在“大于”运算符之前以正斜杠结尾，以表示您不需要在其他位置包含另一个结束标记。例如，要创建元关键字标签，您可以使用<meta name="keywords" content="HTML5,CSS3,JavaScript" />而无需在其他地方结束</meta> 。

此规则仍适用于HTML5。但是现在您甚至不需要多余的正斜杠 ！尽管允许您继续使用XHTML / XML标准，但<meta name="keywords" content="HTML5,CSS3,JavaScript">完全有效。对于所有符合标准的浏览器，这两个元素将呈现相同的方式。

定义我们的页面区域

我们的大多数新代码都不会太令人震惊。我们的文档类型比以往任何时候都简单有趣 ， 不需要过多的身体属性 ，并且标题中的信息已明确标记。继续，我想将您的注意力集中在我们的<body>标记内的内容上。这包括所有主页的结构。我故意使用了一些不错HTML5标签来表示如何将它们包含在自己的作品中。

首先，您会看到整个页面都封装在div标签中 。我已经用wrapper的ID进行了标记，这意味着它会包裹我们整个网站的内容。这对于在屏幕上设置最大宽度或位置内容很有用 。接下来，我将页面分为3个核心元素-一个<header> ，一个核心<div>和一个简短的<footer> 。在我的自定义标题区域内，我添加了页面标题的简化显示，并使用<nav>标记作为包装的导航项。

现在，对于ID为core的<div> ，我应用了一个辅助clearfix 。此功能使我们可以在其中自由浮动2列，并且不会遇到任何内容掉落或奇怪的现象。没错，在内部放置了两个<section>标签，分别包含我们的主要内容区域和侧边栏。我们将使用CSS样式使它们分开。

同样，安静的页脚标记可很好地在页面之间区分此内容。我在里面放了一个庄严的段落，其中可能包含一些版权和所有权信息。但是您很可能希望包含更多内容，例如页面的辅助链接。

创意CSS3向导

为了完成这个基本的模板布局，我们可以使用一些CSS样式。在基本HTML5模板中，我添加了一个外部CSS样式表，以便我们可以将代码区域分开。从长远来看，当您的页面和样式开始在不同页面上运行时，这将消除很多混乱 。

初学者指南：构建HTML5 / CSS3网页 （图片来源： W3C ）

因此，我并没有花很多时间在CSS上，但足以展示出一些简洁的效果。首先，我使用了一些border-radius设置来构建非常酷的导航链接悬停效果。您可以在模板代码中针对相同的效果，只需将以下行添加到CSS文档中即可。

nav {
	display: block;
	margin-bottom: 10px;
}
nav ul {
	list-style: none;
	font-size: 14px;
}
nav ul li {
	display: inline;
}
nav ul li a {
	display: block;
	float: left;
	padding: 3px 6px;
	color: #575c7d;
	text-decoration: none;
	font-weight: bold;
}
nav ul li a:hover {
	background: #deff90;
	color: #485e0f;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 3px 6px;
	margin: 0;
	text-decoration: none;
}

另一个简洁的效果是clearfix样式 。这不是CSS3的全新概念，但对于构建符合标准的网页很重要。通常，当您希望将内容彼此浮动时，会遇到错误的定位故障。这是由于偏移量边距和浮动内容的绝对宽度设置错误引起的。

这个概念似乎有些混乱，我在下面添加了一些代码来提供帮助。基本上，我们以两个<section>元素为目标， #left和#right对应于页面的一侧。我已将每个像素设置为一定的宽度并向左浮动，因此它们将彼此紧挨着堆叠。由于我们的容器div#core包含clearfix类，因此这意味着所有内部内容都可以自由移动，然后自动清除多余的空间。

/* page core */
div#core {
	display: block;
	clear: both;
	margin-bottom: 20px;
}
section#left {
	width: 550px;
	float: left;
	margin: 0 15px;
}
section#right {
	float: left;
	width: 300px;
}

 
/* clearfix */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}

这些代码很容易上手。它们也与我们之前构建HTML5模板代码有关，因此这是简单的做法。但是，当涉及到真正的Web迷时，您将研究更多CSS3功能。

鲜为人知CSS3语法

要构建完整HTML5 / CSS3网页，您将开始使用一些更复杂的样式表。许多设计人员都知道速记代码（例如font: property ），因为这些甚至在CSS2之前都是标准。

但是CSS3中有一些新属性，许多设计人员并未考虑。其中许多不仅是为了美观，还包括动画效果。以下是简短列表，解释了您可能考虑使用的一些属性。如果您感到迷茫，请尝试使用Google搜寻语法示例。

box-shadow ：为页面元素添加整洁的阴影效果。您将获得4个参数，用于设置左/右，上/下，阴影模糊和颜色的位置。请注意，框阴影不视为原始宽度/高度的额外空间。
text-shadow ：在页面文本后面创建漂亮的阴影。有了正确的效果，您的信件可能会在页面上弹出。
border-radius ：圆角花了很长时间才成为公认的标准。几年前，许多Web 2.0设计师都在制作背景图像，以适应CSS的圆角。但是，使用CSS3 border-radius可以操纵任何元素上每个边界的曲线。
opacity ：看起来像一个简单的属性，很多设计师都没有考虑。不透明度要求单个数字输入范围为0到1.0（0％– 100％）。此效果作为悬停动画效果很好。
@font-face ：一些复杂CSS样式和排版的另一个漂亮示例。现在，Web设计人员可以通过将其定义为CSS文档中的变量来使用自己的自定义字体。
box-sizing ：默认情况下，box-sizing将所有元素设置为content-box 。这意味着宽度，填充和边框都包含在最大宽度中。但是将其设置为border-box您可以定义最大宽度（例如20px），并且添加的填充/边框将自身包括在内，从而消除了对象内部的空间。一旦掌握了它的机智，这是一个了不起的财产。

这些属性都有其优点和缺点。我不建议尝试将它们全部塞入您的网页。但是实践会给您清晰的思路 ，使您轻松进入更多的网站。

属性选择器是值得一提的又一核心语法。使用CSS3，您现在可以基于HTML属性 （例如type，href，title） 定义样式 ，甚至可以提供特定的值。因此，例如，我们可以使用具有定义的title属性的链接作为目标，并为其提供一组背景图标。

ul li[title^="ico"] {
	background: url('my-icon.gif');
}

如果您注意到我在等号之前加入了插入符号 。这是一个运算符， 用于定义所有带有前缀ico的列表项 。或者，您可以将加号（^）替换为美元符号（$），以定位标题的后缀区域。这样，CSS3知道要添加背景图像，您可以在其中将标题设置为“ first ico”或“ book ico”。如果您有兴趣，请阅读更多有关属性选择器的信息。

放在一起

简单性是HTML5和CSS3网页的核心。 Web开发人员正试图在更少的时间和更少的压力下构建具有高度创意的网站。 HTML5中的新功能为此提供了很大的回旋余地。从长远来看，使用一些新CSS3选择器和属性将为您带来优势。

初学者指南：构建HTML5 / CSS3网页 （图片来源： W3C ）

但是，您也应该考虑最终用户 。在启动网站公开之后，构建网页的过程最终结束。您的目标是通过易于访问的信息来吸引观众 ，不仅是人类读者，而且是搜索引擎搜寻器和索引机器人 。语义已经有了很大的发展，包括了新HTML5布局元素，从而一致地拆分了页面布局。与所有现代Web浏览器一致，构造一个小的导航和页脚部分从未如此简单。

一旦您习惯了构建HTML5网页，就可能会开始研究页面动画。即使使用JavaScript和AJAX产生很小的影响，也可以大大改善用户体验和网站性能 。尽管这不是本文讨论范围的一部分，但如果有时间，我还是建议您使用jQuery 。开源库令人震惊，并允许在HTML5页面元素之上进行快速原型制作。

其他资源

全世界的Blogger一直在讨论HTML5和CSS3的新趋势，并向公众共享资源。时间在变化，网络社区也在与时俱进。您应该考虑一些利基领域，以研究和建立一个小的兴趣。

以下是您可能喜欢的一些其他列表，文章和教程。我已经自由地将列表分为HTML5和CSS3资源。根据您正在寻找的内容，这里应该为每个人提供一些主题。还可以享受免费HTML主题的简短画廊，这些主题可在线下载！

HTML5

CSS3

翻译自: https://www.hongkiat.com/blog/building-html5-css-webpages/

初学者指南：构建HTML5 / CSS3网页

HTML4和HTML5之间的变化

裸HTML5骨架

定义我们的页面区域

创意CSS3向导

鲜为人知CSS3语法

放在一起

其他资源

奖励：HTML5模板和主题

设计公司

HTML5 / CSS3主题

洋子

灰色

初学者指南：构建HTML5 / CSS3网页

HTML4和HTML5之间的变化

裸HTML5骨架

定义我们的页面区域

创意CSS3向导

鲜为人知CSS3语法

放在一起

其他资源

奖励：HTML5模板和主题

设计公司

HTML5 / CSS3主题

洋子

灰色

相关推荐