解析 HTML 网站架构规范

2025/3/28

向全栈工程师迈进!

一、网页基本的组成部分

网页的外观多种多样,但是除了全屏视频或游戏,或艺术作品页面,或只是结构不当的页面以外,都倾向于使用类似的标准组件。

1.1页眉

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

1.2导航栏

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

1.3 主内容

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

1.4 页脚

横跨页面底部的狭长区域。和标题一样,页脚放置公共信息(比如版权声明或联系方式)的,一般使用较小字体,且通常为次要内容。还可以通过提供快速访问链接来进行

一个比较典型的web网页布局如下:

二、区域段的专用标签

为了实现语义化标记,在HTML中提供了明确的区域段的专用标记,如下

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

三、编写一个较为规范的网页

视觉效果并不是一切,敬畏语义!全球约9.4亿人存在视力问题。

html 复制代码
<!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>
            <li><a href="#">音乐</a></li>
            <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>

四、其他规范

4.1 标记联系方式

html 复制代码
<address>
  <p>
    Chris Mills<br />
    Manchester<br />
    The Grim North<br />
    UK
  </p>

  <ul>
    <li>Tel: 01234 567 890</li>
    <li>Email: [email protected]</li>
  </ul>
</address>

4.2 上标和下标

  • <sub> 下标
  • <sup> 上标
html 复制代码
<p>我的生日是在 2021 年 5 月 25 日(译者注:英文原文为 25<sup>th</sup>)</p>
<p>
  咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。
</p>
<p>如果 x<sup>2</sup> 的值为 9,那么 x 的值必为 3 或 -3。</p>

4.3 标记时间和日期

html 复制代码
<time datetime="2016-01-20">2016 年 1 月 20 日</time>

为什么需要这样做?因为世界上有许多种书写日期的格式,上边的日期可能被写成:

  • 20 January 2016
  • 20th January 2016
  • Jan 20 2016
  • 20/06/16
  • 等等

但是这些不同的格式不容易被电脑识别------假如你想自动抓取页面上所有事件的日期并将它们插入到日历中,<time>元素允许你附上清晰的、可被机器识别的时间或日期来实现这种需求

标准如下:

html 复制代码
<!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含时间,小时和分钟数 -->
<time datetime="19:30">19:30</time>
<!-- 还可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和时间 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有时区偏移值的日期时间 -->
<time datetime="2016-01-20T19:30+01:00"
  >7.30pm, 20 January 2016 is 8.30pm in France</time
>
<!-- 提及特定周 -->
<time datetime="2016-W04">The fourth week of 2016</time>

慢下来,慢下来,慢下来,慢下来 ......

2025/3/28 12:02

相关推荐
摇滚侠几秒前
Vue3 其它API toRow和markRow
前端·javascript
難釋懷1 分钟前
JavaScript基础-history 对象
开发语言·前端·javascript
beibeibeiooo4 分钟前
【CSS3】04-标准流 + 浮动 + flex布局
前端·html·css3
拉不动的猪11 分钟前
刷刷题47(react常规面试题2)
前端·javascript·面试
浪遏18 分钟前
场景题:大文件上传 ?| 过总字节一面😱
前端·javascript·面试
计算机毕设定制辅导-无忧学长20 分钟前
HTML 与 JavaScript 交互:学习进程中的新跨越(一)
javascript·html·交互
Bigger40 分钟前
Tauri(十八)——如何开发 Tauri 插件
前端·rust·app
355984268550551 小时前
医保服务平台 Webpack逆向
前端·webpack·node.js
zrhsmile2 小时前
Vue从入门到荒废-单向绑定
javascript·vue.js·ecmascript
百锦再2 小时前
React编程的核心概念:发布-订阅模型、背压与异步非阻塞
前端·javascript·react.js·前端框架·json·ecmascript·html5