除了定义页面的各个部分(如“段落”或“图像”)外，HTML还有许多块级元素用于定义网站的区域(如“标题”、“导航菜单”、“主内容列”)。本文将探讨如何规划一个基本的网站结构，并编写HTML来表示这个结构。
先决条件：
基本的HTML熟悉性，如开始使用HTML。HTML文本格式，如HTML文本基础。超链接是如何工作的，如创建超链接.
目标：
了解如何使用语义标记构造文档，以及如何计算出一个简单网站的结构。
文件的基本部分
网页可能和将来看起来会很不一样，但它们都倾向于共享类似的标准组件，除非页面显示的是全屏视频或游戏，是某种艺术项目的一部分，或者只是结构糟糕：
标题：
通常是顶部的一条大条，上面有一个大标题，一个标志，也许还有一个标语。这通常保持不变，从一个网页到另一个网页。
导航栏：
指向网站主要部分的链接；通常由菜单按钮、链接或选项卡表示。像标题一样，这个内容通常在一个网页到另一个网页之间保持一致–在你的网站上有不一致的导航只会导致困惑，沮丧的用户。许多web设计人员认为导航栏是标题的一部分，而不是单独的组件，但这并不是必需的；事实上，有些人还认为将两者分开是更好的选择。可达性，因为屏幕阅读器可以更好地阅读这两个功能，如果它们是分开的。
主要内容：
中心的一个大区域，包含一个特定网页的大部分独特内容，例如，你想看的视频，你正在读的主要故事，或者你想看的地图，或者新闻标题等等。这是网站的一个部分，每个页面肯定会有所不同！
侧边栏：
一些外围信息、链接、引号、广告等等。通常，这与主要内容中包含的内容(例如，在新闻文章页上，边栏可能包含作者的个人信息，或相关文章的链接)有关联，但也有一些情况下，您会发现一些重复的元素，如辅助导航系统。
页脚：
横过页面底部的一条条条，通常包含细打印、版权通知或联系信息。这是一个放置公共信息的地方(比如标题)，但通常，该信息并不是网站本身的重要信息或次要信息。页脚有时也用于SEO目的，提供快速访问流行内容的链接。
“典型网站”的结构如下所示：
用于构造内容的HTML
上面显示的简单示例并不好看，但是对于演示一个典型的网站布局示例来说，它是非常好的。有些网站有更多的专栏，有些则要复杂得多，但你明白了。使用正确的css，您可以使用几乎所有的元素围绕不同的部分，并使它看起来像您想要的，但正如前面讨论的，我们需要尊重语义和为正确的工作使用正确的元素.
这是因为视觉并不能讲述整个故事。我们使用颜色和字体大小来吸引有视力的用户注意到内容中最有用的部分，比如导航菜单和相关链接，但是视力受损的人呢？比如，他们可能不觉得“粉色”和“大字体”这样的概念非常有用？
注色盲代表周围占世界人口的4%换句话说，大约每12名男性中就有1名是色盲，每200名女性中有1名是色盲。盲人和视障者约占世界人口的4-5%(2012年有世界上有2.85亿这样的人，而总人口是约70亿).
在HTML代码中，您可以根据它们的功能-您可以使用表示上述内容部分的元素，并且辅助技术(如屏幕阅读器)可以识别这些元素，并帮助执行“查找主导航”或“查找主要内容”等任务。正如我们在前面提到的，有一些不为正确的作业使用正确的元素结构和语义的后果.
为了实现这样的语义标记，HTML提供了专门的标记，您可以使用这些标记来表示这样的部分，例如：
标题：<头>.
导航栏：
<！DOCTYPE html>
<头> <元 字符集="乌特夫-8"><标题>我的书名</标题>
<链接 href="Https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300 Sonsie+One" 雷尔="样式表" 类型="文本/CSS">
<链接 雷尔="样式表" href="Style.css">
<！--以下三行是使HTML 5语义元素在旧版本的InternetExplorer中工作的修正-->
<！->>n<script src=“https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js”></script>n<！[endif]->>
</头>
<体体>
<！–这是我们网站所有页面上使用的主标题->
<标头>
<H1>标头</H1>
</标头>
<NAV>
<UL>
<李><一个 href="#">家</一个></李>
<李><一个 href="#">我们队</一个></李>
<李><一个 href="#">项目</一个></李>
<李><一个 href="#">接触</一个></李>
</UL>
<！--搜索表单是另一种浏览网站的常用非线性方法。->
<形式>
<输入 类型="搜索" 名字="Q" 占位符="搜索查询">
<输入 类型="提交" 价值="去!">
</形式>
</NAV>
<！--这是我们网页的主要内容->
<主>
<！--它包含一篇文章-->
<文章>
<氢>文章标题</氢>
<P>同坐，圣洁，长生不老。一张白纸黑字的书。设置相同的坐姿。[医]锥状韧带为拟黄连木，为向日葵，为中华绒螯蟹，为中华绒螯蟹提供了一种新的研究方法。Donec和mollis dolor.这是一种很好的选择，也是很好的选择。[医][医]丁香，[医][[NS]][[NS]。</P>
<H3>分节</H3>
<P>图书馆有一辆汽车，它是一名非托管人。同坐，圣洁，长生不老。Aenean ut妊娠率高。乌贼，一只半裂的，正在撒尿的小鱼。</P>
<P>Pelientesque拍卖人Nisi id Magna在矢状突的后果。库拉比图尔达皮巴斯，埃尼姆坐在同样的地方，以消除仇恨的NIST不允许的饮食。在乌尔纳尺骨中有大量的自由。这是一种很好的方法。</P>
<H3>另一分段</H3>
<P>[医]马列苏阿达罗布麻(Malesuada arcu rhonus.)附子、鼻窦炎、鼻炎等。在金银花中。产于海口的玻璃体毛竹。</P>
<P>[医]野黄花发酵半个月。Nunc.diam velit.水母(Maecenas conallis ullamcorper.)库拉比图尔人，半舌人，矢状体炎，尼西白浆草，是流苏。</P>
</文章>
<！--旁边的内容也可以嵌套在主内容中->
<撇开>
<氢>相关</氢>
<UL>
<李><一个 href="#">哦，我喜欢在海边</一个></李>
<李><一个 href="#">哦，我喜欢在海边</一个></李>
<李><一个 href="#">虽然在英格兰北部</一个></李>
<李><一个 href="#">雨从来没有停过</一个></李>
<李><一个 href="#">哦好吧.。</一个></李>
</UL>
</撇开>
</主>
<！-这是我们网站所有页面的主要页脚->
<页脚>
<P>2050年版权归任何人所有。所有权利都被推翻了。</P>
</页脚>
</体体>
花点时间看看代码并理解它--代码中的注释也会帮助您理解它。在本文中，我们并不要求您做很多其他事情，因为理解文档布局的关键是编写一个良好的HTML结构，然后使用CSS进行布局。我们将等待这一点，直到您开始将CSS布局作为CSS主题的一部分来研究。更详细的HTML布局元素
详细了解所有HTML分段元素的总体含义是很好的–随着您开始获得更多Web开发经验，这是您将逐步进行的工作。通过阅读我们的HTML元素引用。现在，您应该尝试理解以下主要定义：
是一个内联的非语义元素，只有当您想不出一个更好的语义文本元素来包装您的内容，或者不想添加任何特定的意义时，才应该使用它。例如：
国王醉醺醺地走回他的房间，01：00，当他摇摇晃晃地进门时，啤酒对他毫无帮助。<跨距 班级="编者-注释">[编者注：在这段时间内，灯光应调低]
警告：div使用起来非常方便，所以很容易使用太多。因为它们没有语义值，所以它们只是混乱了HTML代码。注意，只有在没有更好的语义解决方案时才使用它们，尽量将它们的使用量降到最低，否则您将很难更新和维护您的文档。
断线和水平规则
您将偶尔使用并希望了解的两个元素是
和
:
在段落中创建行间隔；在需要一系列固定的短行(例如在邮政地址或诗歌中)的情况下，这是强制使用刚性结构的唯一方法。例如：
从前有个人叫奥戴尔<溴>喜欢写HTML的人<溴>但是他的结构很糟糕，他的语义学很糟糕。<溴>他的标记读得不太好。
没有元素，这一段将以一行的形式呈现(正如我们在前面所说的，HTML忽略大多数空格)；与
元素中，标记呈现如下所示：
元素在文档中创建一个横向规则，该规则表示文本中的主题更改(例如主题或场景的更改)。从视觉上看，它就像一条水平线。例如：
罗恩被掠夺式的兽类逼到了墙角。害怕，但决心保护他的朋友，他举起魔杖，准备战斗，希望他的求救电话已经通过。
<人力资源>与此同时，哈利坐在家里，盯着他的皇室声明，思考下一部衍生剧什么时候出来，这时一封充满魔力的求救信从他的窗户飞了出来，落在他的大腿上。他含糊不清地读着，叹了口气，“那就回去工作吧”，他沉思着。
会这样呈现：规划一个简单的网站
一旦你计划好了一个简单网页的结构，下一个合乎逻辑的步骤就是试图找出你想要在整个网站上放什么内容，你需要什么页面，以及它们应该如何安排和链接到彼此，以获得尽可能好的用户体验。这叫做信息体系结构。在一个大的，复杂的网站，很多规划可以进入这个过程，但对于一个简单的网站只有几页，这可以相当简单，而且有趣！
请记住，您将有一些元素是大多数(如果不是全部)页面共有的-比如导航菜单和页脚内容。例如，如果你的网站是为一家企业服务的，那么在每一页的页脚上都有你的联系信息是个好主意。记下你想要的每一页共有的内容。
接下来，画一个粗略的草图，你可能希望每一页的结构看起来像(它可能看起来像我们上面的简单网站)。注意每个街区将会是什么。
现在，头脑风暴所有其他(并不是每一页共同)的内容，你想在你的网站上-写下一个大名单。
接下来，尝试将所有这些内容项目分组排序，让您了解哪些部分可能在不同的页面上共同存在。这非常类似于一种称为卡片分类.
现在，尝试绘制一个粗略的站点地图–为您的站点上的每个页面创建一个气泡，并绘制线条以显示页面之间的典型工作流。主页可能位于中心，并链接到大多数(如果不是全部的话)；一个小站点中的大多数页面应该可以从主导航中获得，尽管也有例外。您还可能希望包括关于如何呈现事物的说明。
主动学习：创建自己的站点地图
尝试为您自己创建的网站进行上述练习。你想做什么网站？
注：：把你的工作放在某个地方，你以后可能需要它。
测试你的技能！
您已经完成了本文的结尾，但是您还记得最重要的信息吗？您可以在模块的末尾找到测试这些技能的详细评估；请参见构造内容页。我们建议首先阅读本系列的下一篇文章，而不仅仅是跳过它！
摘要
此时，您应该对如何构造网页/站点有更好的了解。在本模块的最后一篇文章中，我们将研究如何调试HTML。
扫一扫
410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
