HTML简介【文档和网站结构】

举报
学海无涯yc 发表于 2022/06/17 09:06:06 2022/06/17
【摘要】 前言 文档的基本部分 用于构建内容的 HTML 主动学习：探索我们示例的代码 更详细地介绍 HTML 布局元素 非语义包装器 换行符和水平线 ：换行符元素 ：主题中断元素 规划一个简单的网站 主动学习：创建自己的站点地图 总结 前言除了定义页面的各个部分（例如“段落”或“图像”）之外，HTML还拥有许多用于定义网站区域的块级元素（例如“标题”，“导航菜单”，“主要内容列”）。本文探讨了如何...

前言

除了定义页面的各个部分（例如“段落”或“图像”）之外，HTML还拥有许多用于定义网站区域的块级元素（例如“标题”，“导航菜单”，“主要内容列”）。本文探讨了如何规划一个基本的网站结构，并编写HTML来表示这个结构。

先决条件： 基本的 HTML 熟悉程度，如 HTML 入门中所述。HTML 文本格式设置，如 HTML 文本基础知识中所述。超链接的工作原理，如创建超链接]中所述。
目的： 了解如何使用语义标记构建文档，以及如何确定简单网站的结构。

文档的基本部分

网页可以而且看起来会彼此大不相同，但它们都倾向于共享类似的标准组件，除非页面显示全屏视频或游戏，是某种艺术项目的一部分，或者只是结构不良：

  • 页眉：

    通常是顶部的一个大条带，上面有一个大标题，徽标，也许还有一个标语。这通常从一个网页到另一个网页保持不变。

  • 导航栏：

    链接到网站的主要部分;通常由菜单按钮、链接或选项卡表示。与标题一样，此内容通常从一个网页到另一个网页保持一致 - 在您的网站上出现不一致的导航只会导致用户感到困惑，沮丧。许多网页设计师认为导航栏是标题的一部分，而不是单个组件，但这不是必需的;事实上，有些人还认为，将两者分开对于可访问性更好，因为如果这两个功能是分开的，屏幕阅读器可以更好地阅读这两个功能。

  • 事由：

    中心有一个大区域，其中包含给定网页的大部分独特内容，例如，要观看的视频、正在阅读的主要故事、要查看的地图或新闻标题等。这是网站的一个部分，肯定会因页面而异！

  • 侧 栏：

    一些外围信息，链接，报价，广告等。通常，这与主要内容中包含的内容有关（例如，在新闻文章页面上，侧边栏可能包含作者的简历或指向相关文章的链接），但在某些情况下，您会发现一些重复出现的元素，例如辅助导航系统。

  • 页脚：

    页面底部的条带，通常包含细则、版权声明或联系信息。这是一个放置常见信息（如标题）的地方，但通常，这些信息对网站本身并不重要或次要。页脚有时也用于SEO目的，通过提供快速访问热门内容的链接。

一个“典型的网站”可以像这样构建：

一个简单的网站结构示例，具有主标题，导航菜单，主要内容，侧边栏和页脚。

用于构建内容的 HTML

上面显示的简单示例并不漂亮，但对于说明典型的网站布局示例来说，它完全没问题。有些网站有更多的专栏，有些网站要复杂得多，但你明白了。使用正确的CSS，你几乎可以使用任何元素来包裹不同的部分，让它看起来像你想要的那样，但如前所述，我们需要尊重语义并为正确的工作使用正确的元素。

这是因为视觉效果并不能说明全部情况。我们使用颜色和字体大小来吸引视力正常的用户注意内容中最有用的部分，例如导航菜单和相关链接，但是例如视障人士呢，他们可能不会发现“粉红色”和“大字体”等概念非常有用？

注意：大约8%的男性和0.5%的女性是色盲;或者，换句话说，大约每12名男性中有1名，每200名女性中约有1名。盲人和视障者约占世界人口的4-5%（2012年世界上有2.85亿这样的人，而总人口约为70亿）。

在 HTML 代码中，您可以根据内容部分的功能对其进行标记 — 您可以使用明确表示上述内容部分的元素，屏幕阅读器等辅助技术可以识别这些元素并帮助完成“查找主导航”或“查找主要内容”等任务。正如我们在课程前面提到的，没有为正确的工作使用正确的元素结构和语义会产生许多后果。

为了实现这样的语义标记，HTML提供了专用的标签，您可以使用这些标签来表示这些部分，例如：

主动学习：探索我们示例的代码

我们上面看到的示例由以下代码表示（您也可以在我们的 GitHub 存储库中找到该示例）。我们希望你查看上面的示例，然后查看下面的列表，了解哪些部分构成了视觉对象的哪个部分。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>My page title</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">

    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- Here is our main header that is used across all the pages of our website -->

    <header>
      <h1>Header</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Our team</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

       <!-- A Search form is another common non-linear way to navigate through a website. -->

       <form>
         <input type="search" name="q" placeholder="Search query">
         <input type="submit" value="Go!">
       </form>
     </nav>

    <!-- Here is our page's main content -->
    <main>

      <!-- It contains an article -->
      <article>
        <h2>Article heading</h2>

        <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>

        <h3>Subsection</h3>

        <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>

        <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>

        <h3>Another subsection</h3>

        <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>

        <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>
      </article>

      <!-- the aside content can also be nested within the main content -->
      <aside>
        <h2>Related</h2>

        <ul>
          <li><a href="#">Oh I do like to be beside the seaside</a></li>
          <li><a href="#">Oh I do like to be beside the sea</a></li>
          <li><a href="#">Although in the North of England</a></li>
          <li><a href="#">It never stops raining</a></li>
          <li><a href="#">Oh well...</a></li>
        </ul>
      </aside>

    </main>

    <!-- And here is our main footer that is used across all the pages of our website -->

    <footer>
      <p>©Copyright 2050 by nobody. All rights reversed.</p>
    </footer>

  </body>
</html>

复制到剪贴板

花一些时间查看代码并理解它 - 代码中的注释也应该帮助你理解它。在本文中，我们并不要求您做太多其他事情，因为理解文档布局的关键是编写一个合理的HTML结构，然后使用CSS进行布局。我们将等待此时间，直到您开始将 CSS 布局作为 CSS 主题的一部分进行研究。

更详细地介绍 HTML 布局元素

详细了解所有HTML分区元素的整体含义是很好的 - 这是随着您开始获得更多Web开发经验而逐渐处理的事情。目前，这些是您应该尝试理解的主要定义：

可以单击上述每个元素以阅读“HTML元素参考”部分中的相应文章，从而提供有关每个元素的更多详细信息。

非语义包装器

有时，您会遇到这样一种情况，即找不到理想的语义元素来将某些项目组合在一起或包装某些内容。有时，您可能只想将一组元素组合在一起，以将它们作为具有某些CSS或JavaScript的单个实体来影响它们。对于此类情况，HTML 提供了](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div)和[元素。最好将它们与合适的类属性一起使用，以便为它们提供某种标签，以便可以轻松定位它们。

``是一个内联非语义元素，只有在您想不出更好的语义文本元素来包装内容或不想添加任何特定含义时才应使用它。例如：

<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
play, the lights should be down low]</span>.</p>

复制到剪贴板

在这种情况下，编辑的注释应该只是为戏剧导演提供额外的指导;它不应该有额外的语义意义。对于视力正常的用户，CSS可能会用于将注释与正文稍微拉开距离。

是一个块级非语义元素，只有在您想不出更好的语义块元素使用或不想添加任何特定含义时才应使用它。例如，想象一个购物车小部件，您可以选择在电子商务网站上的任何时间点拉出它： 
<div class="shopping-cart">
  <h2>Shopping cart</h2>
  <ul>
    <li>
      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
      <img src="../products/3333-0985/thumb.png" alt="Silver earrings">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Total cost: $237.89</p>
</div>

复制到剪贴板

这并不是真正的 ，因为它不一定与页面的主要内容相关（您希望它可以从任何地方查看）。它甚至没有特别保证使用 ，因为它不是页面主要内容的一部分。所以在这种情况下，a很好。我们添加了一个标题作为路标，以帮助屏幕阅读器用户找到它。<aside>``<section>``<div>

**警告：**Divs使用起来非常方便，很容易过度使用它们。由于它们没有语义价值，它们只会使您的HTML代码混乱。请注意，只有在没有更好的语义解决方案时才使用它们，并尝试将其使用率降至最低，否则您将很难更新和维护文档。

换行符和水平线

您偶尔使用并想知道的两个元素是](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br)和[。


：换行符元素

<br>在段落中创建换行符;这是在您想要一系列固定短行的情况下强制使用刚性结构的唯一方法，例如在邮政地址或诗歌中。例如：

<p>There once was a man named O'Dell<br>
Who loved to write HTML<br>
But his structure was bad, his semantics were sad<br>
and his markup didn't read very well.</p>

如果没有这些元素，段落将只呈现在一长行中（正如我们之前在课程中所说的那样，HTML忽略了大多数空格）;使用代码中的元素，标记呈现如下：<br>``<br>

：主题中断元素

<hr>元素在文档中创建一条水平线，用于表示文本中的专题更改（如主题或场景的更改）。从视觉上看，它就像一条水平线。例如：

<p>Ron was backed into a corner by the marauding
   netherbeasts. Scared, but determined to protect his friends, he raised his
   wand and prepared to do battle, hoping that his distress call had made it through.</p>
<hr>
<p>Meanwhile, Harry was sitting at home, staring at his royalty statement
  and pondering when the next spin off series would come out, when an enchanted
  distress letter flew through his window and landed in his lap. He read it
  hazily and sighed; "better get back to work then", he mused.</p>

复制到剪贴板

将呈现如下：

规划一个简单的网站

一旦你规划了一个简单的网页的结构，下一个合乎逻辑的步骤是尝试找出你想要放在整个网站上的内容，你需要什么页面，以及它们应该如何排列并相互链接，以获得最佳的用户体验。这称为信息体系结构。在一个大型，复杂的网站中，大量的规划可以进入这个过程，但是对于一个只有几页的简单网站来说，这可能相当简单，而且很有趣！

  1. 请记住，您将拥有一些大多数（如果不是全部）页面通用的元素，例如导航菜单和页脚内容。例如，如果您的网站是为企业制作的，则最好在每个页面的页脚中提供您的联系信息。记下您希望每个页面共有的内容。旅游网站在每个页面上的共同特征：标题和徽标，联系方式，版权，条款和条件，语言选择器，可访问性政策
  2. 接下来，粗略地绘制一下您可能希望每个页面的结构是什么样子的（它可能看起来像我们上面的简单网站）。注意每个块将是什么。示例网站结构的简单图表，包括页眉、主要内容区域、两个可选侧边栏和页脚
  3. 现在，集思广益，收集你想在网站上拥有的所有其他（不是每个页面都常见的）内容 - 写下一个大列表。我们可以在旅游网站上放置的所有功能的长列表，从搜索到特别优惠和国家/地区特定信息
  4. Next, try to sort all these content items into groups, to give you an idea of what parts might live together on different pages. This is very similar to a technique called Card sorting.假日网站上应显示的项目分为 5 个类别：搜索、特价、国家/地区特定信息、搜索结果和购买商品
  5. 现在尝试草绘一个粗略的站点地图 - 为网站上的每个页面设置一个气泡，并绘制线条以显示页面之间的典型工作流程。主页可能位于中心，并链接到大多数（如果不是全部）其他主页;小型网站中的大多数页面都应该可以从主导航中获得，尽管有例外。您可能还希望包含有关如何呈现内容的注释。显示主页、国家/地区页面、搜索结果、特价页面、结帐和购买页面的网站地图

主动学习：创建自己的站点地图

尝试对自己创建的网站执行上述练习。您想制作一个网站的内容吗？

**注意：**将您的工作保存在某个地方;您以后可能需要它。

总结

在这一点上，您应该对如何构建网页/网站有更好的了解。

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
HTML 网站
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入