HTML 文档与网站架构

作者: LXEP | 来源:发表于2020-12-23 16:54 被阅读0次

HTML 文档与网站架构
HTML文档于网站架构
HTML基础7--文档与网站架构
网站架构变迁
2019-01-16
大型网站技术架构（二）模式
Node构建Web服务器
Android学习路线
Xcode 自动生产HTML项目文档
Web前端概述、HTML、CSS选择器

HTML不仅能够定义网页的单独部分（例如“段落”或“图片”），还可以使用块级元素（例如“标题栏”、“导航菜单”、“主内容列”）来定义网站中的复合区域。

文档的基本组成部分

页眉

通常横跨于整个页面顶部有一个大标题或一个标志。这是网站的主要一般信息，通常存在于所有网页。

导航栏

指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的，因为屏幕阅读器可以更清晰地分辨二者。

主内容

中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。

侧边栏

一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。

页脚

一个“典型的网站”可能会这样布局：

博客园

用于构建内容的HTML

以上示例足以说明网站的典型布局方式，一些站点拥有更多列，其中一些远比这复杂。通过合适的CSS，你可以使用相当多种的任意页面元素来环绕在不同的页面区域来做成你想要的样子，但像前面讲的，我们敬畏语义，做到正确选用元素。

这是因为视觉效果并不是一切。我们可以修改最重要内容（例如导航菜单和相关链接）的颜色、字体大小来吸引用户的注意，但是这对视障人士是无效的。

注：全球色盲患者比例为 4%，换句话说，每 12 名男性就有一位色盲，每 200 名女性就有一位色盲。全盲和视障人士约占世界人口（约 70 亿）的 13％（2015年全球约有 9.4 亿人口存在视力问题）。

HTML代码中可根据功能来为区段添加标记。可使用元素来无歧义地表示上文所讲的内容区段，屏幕阅读器等辅助技术可以识别这些元素，并帮助执行“找到主导航”或“找到主内容”等任务。

为了实现语义化标记，HTML提供了明确这些区段的专用标签，例如：

<header>：页眉
<nav>：导航栏
<main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section>和<div>等元素表示
<aside>：侧边栏，经常嵌套在<main>中。
<footer>：页脚

试一试

研究以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>二次元俱乐部</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>

  <body>
    <header> <!-- 本站所有网页的统一主标题 -->
      <h1>聆听电子天籁之音</h1>
    </header>
    
    <nav> <!-- 本站统一的导航栏 -->
      <ul>
        <li><a href="#">主页</a></li>
        <!-- 共n个导航栏项目，省略…… -->
      </ul>

      <form> <!-- 搜索栏是站点内导航的一个非线性的方式。 -->
        <input type="search" name="q" placeholder="要搜索的内容">
        <input type="submit" value="搜索">
      </form>
    </nav>
    
    <main> <!-- 网页主体内容 -->
      <article>
        <!-- 此处包含一个 article（一篇文章），内容略…… -->
      </article>
      
      <aside> <!-- 侧边栏在主内容右侧 -->
        <h2>相关链接</h2>
        <ul>
          <li><a href="#">这是一个超链接</a></li>
          <!-- 侧边栏有n个超链接，略略略…… -->
        </ul>
      </aside>
    </main>
    
    <footer> <!-- 本站所有网页的统一页脚 -->
      <p>© 2050 某某保留所有权利</p>
    </footer>
  </body>
</html>

请花一些时间来阅读，其中的注释应该能够帮助你理解这些代码。现在能够理解上面的代码就可以，因为编写一套正确的 HTML 结构是理解文档布局的前提，布局工作就交给 CSS 吧。

HTML布局元素细节

理解所有HTML区段元素具体含义是很有益处的，这一点将随着个人web开发经验的逐渐丰富日趋显现。现在，你只需要理解以下主要元素的意义：

<main>存放每个页面独有的内容。每个页面上只能用一次<main>，且直接位于<body>中。最好不要把它嵌套在其它元素中。
<article>包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）
<section>与<article>类似，但<section>更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般最佳用法是：以标题作为开头，也可以把一篇文章<article>分成若干部分并分别置于不同的<section>中，也可以把一个区段<section>分成若干部分并分别置于不同的<article>中，取决于上下文。
<aside>包含一些间接信息（术语条目、作者简介、相关链接，等等）
<header>是简介形式的内容。如果它是<body>的子元素，那么就是网站的全局页眉。如果它是<article>或<section>的子元素，那么它是这些部分特有的页眉
<nav>包含页面主导航功能。其中不应包含二级链接等内容。
<footer>包含了页面的页脚部分

无语义元素

有时你可能只想将一组元素作为一个单独的实体来修饰来响应单一的用CSS或JavaScript。为了应对这样的情况，HTML提供了<div>和<span>元素。应配合使用class属性提供一些标签，使这些元素易于查询。

<span>是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时使用。例如：

<p>国王喝得酩酊大醉，在凌晨 1 点时才回到自己的房间，踉跄地走过门口。
<span class="editor-note">[编辑批注：此刻舞台灯光应变暗]</span>.
</p>

这里，“编辑批注”仅仅是对舞台剧导演提供额外的指引；没有具体的语义。

<div>是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时使用。例如，一个电商页面上有一个一直显示的购物车组件。

<div class="shopping-cart">
  <h2>购物车</h2>
  <ul>
    <li>
      <p><a href=""><strong>银耳环</strong></a>：$99.95.</p>
      <img src="../products/3333-0985/" alt="Silver earrings">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>售价：$237.89</p>
</div>

这里不应该使用<aside>，因为它和主内容并没有必要的联系。甚至不能使用<section>，因为它也不是页面上主内容的一部分。所以在这种情况下就应使用<div>。

�注意：<div>非常便利但容易被滥用。由于它们没有语义值，会使得HTML代码变得混乱。要小心使用，只有在没有更好的语义方案的时候才选择它，而且要尽可能少用，否则文档的升级和维护工作会非常困难。

换行与水平分割线

有时会用到<br>和<hr>两个元素。

<br>可在段落中进行换行；<br>是唯一能够生成多个短行结构（例如诗歌或邮寄地址）的元素。比如：

<p>从前有个人叫小高<br>
他说写 HTML 感觉最好<br>
但他写的代码结构语义一团糟<br>
他写的标签谁也懂不了。</p>

没有 <br> 元素，这段会直接显示在长长的一行中（如前文所讲，HTML会忽略大部分空格）；使用 <br> 元素，才使得诗看上去像诗：

br元素

<hr>元素在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）。一般就是一条水平的直线。例如：

<p>原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。</p>
<hr>
<p>却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”</p>