除了定义页面的各个部分（例如“段落”或“图像”）之外，HTML还拥有许多用于定义网站区域的块级元素（例如“标题”，“导航”菜单“，”主要内容栏“。）本文探讨如何规划基本网站结构，并编写HTML来表示这种结构。
1、基本部分
网页可以并且看起来会彼此截然不同，但它们都倾向于共享类似的标准组件，除非页面显示全屏视频或游戏，是某种艺术项目的一部分，或者只是结构糟糕：
- 头
- 通常顶部有一个大条带，带有大标题和/或徽标。这是关于网站的主要常见信息通常从一个网页停留到另一个网页的地方。
- 导航栏
- 链接到网站的主要部分; 通常由菜单按钮，链接或标签表示。与标题一样，此内容通常在一个网页上保持一致 - 在您的网站上导航不一致只会导致混淆，沮丧的用户。许多网页设计师认为导航栏是标题的一部分而不是单个组件，但这不是必需的; 事实上，有些人还认为，将两者分开是更好的可访问性，因为屏幕阅读器可以更好地阅读这两个功能，如果它们是分开的。
- 主要内容
- 中心的一个大区域，包含给定网页的大部分独特内容，例如您要观看的视频，您正在阅读的主要故事，您想要查看的地图，或新闻标题等这是网站的一部分，绝对会因页面而异！
- 侧边栏
- 一些外围信息，链接，引用，广告等。通常这与主要内容中包含的内容相关（例如，在新闻文章页面上，侧边栏可能包含作者的简历或相关文章的链接）但有还有一些情况，你会发现一些重复的元素，如辅助导航系统。
- 页脚
- 页面底部的条带，通常包含精细打印，版权声明或联系信息。这是一个放置公共信息（如标题）的地方，但通常这些信息对网站本身并不重要或次要。页脚有时也用于搜索引擎优化目的，通过提供快速访问流行内容的链接。
一个“典型的网站”可以这样布置：
2、用于构造内容的HTML 编辑
在HTML代码中，您可以根据其功能标记内容的各个部分- 可以使用明确表示上述内容部分的元素，并且屏幕阅读器等辅助技术可以识别这些元素并帮助完成诸如“查找主导航”之类的任务“，或”找到主要内容。“ 正如我们在本课程前面提到的那样，对于正确的工作，不使用正确的元素结构和语义会产生许多后果。
为了实现这种语义标记，HTML提供了可用于表示此类部分的专用标记，例如：
- 标题：
<header>。 - 导航栏：
<nav>。 - 主要内容是：
<main>与由代表的各种内容的小节<article>，<section>和<div>元件。 - 侧边栏：
<aside>; 经常放在里面<main>。 - 页脚：
<footer>。
2.1 主动学习：探索我们的例子的代码
我们上面看到的示例由以下代码表示（您也可以在我们的GitHub存储库中找到该示例）。我们希望您查看上面的示例，然后查看下面的列表，看看哪些部分组成了视觉的哪个部分。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 6 <title>My page title</title> 7 <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"> 8 <link rel="stylesheet" href="style.css"> 9 10 <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer--> 11 <!--[if lt IE 9]> 12 <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> 13 <![endif]--> 14 </head> 15 16 <body> 17 <!-- Here is our main header that is used across all the pages of our website --> 18 19 <header> 20 <h1>Header</h1> 21 </header> 22 23 <nav> 24 <ul> 25 <li><a href="#">Home</a></li> 26 <li><a href="#">Our team</a></li> 27 <li><a href="#">Projects</a></li> 28 <li><a href="#">Contact</a></li> 29 </ul> 30 31 <!-- A Search form is another commmon non-linear way to navigate through a website. --> 32 33 <form> 34 <input type="search" name="q" placeholder="Search query"> 35 <input type="submit" value="Go!"> 36 </form> 37 </nav> 38 39 <!-- Here is our page‘s main content --> 40 <main> 41 42 <!-- It contains an article --> 43 <article> 44 <h2>Article heading</h2> 45 46 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> 47 48 <h3>subsection</h3> 49 50 <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p> 51 52 <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p> 53 54 <h3>Another subsection</h3> 55 56 <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> 57 58 <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p> 59 </article> 60 61 <!-- the aside content can also be nested within the main content --> 62 <aside> 63 <h2>Related</h2> 64 65 <ul> 66 <li><a href="#">Oh I do like to be beside the seaside</a></li> 67 <li><a href="#">Oh I do like to be beside the sea</a></li> 68 <li><a href="#">Although in the North of England</a></li> 69 <li><a href="#">It never stops raining</a></li> 70 <li><a href="#">Oh well...</a></li> 71 </ul> 72 </aside> 73 74 </main> 75 76 <!-- And here is our main footer that is used across all the pages of our website --> 77 78 <footer> 79 <p>?Copyright 2050 by nobody. All rights reversed.</p> 80 </footer> 81 82 </body> 83 </html>
输出结果：
原文地址：https://www.cnblogs.com/zyjhandsome/p/9774780.html
时间： 2024-10-10 01:44:39