解析 HTML 网站架构规范

news2025/4/1 7:20:38

2025/3/28 

向全栈工程师迈进!

一、网页基本的组成部分 

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

1.1页眉

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

1.2导航栏

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

1.3 主内容

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

1.4 页脚

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

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

二、区域段的专用标签 

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

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

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

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

<!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 标记联系方式

<address>
  <p>
    Chris Mills<br />
    Manchester<br />
    The Grim North<br />
    UK
  </p>

  <ul>
    <li>Tel: 01234 567 890</li>
    <li>Email: me@grim-north.co.uk</li>
  </ul>
</address>

4.2 上标和下标

  • <sub> 下标
  • <sup> 上标
<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 标记时间和日期

<time datetime="2016-01-20">2016 年 1 月 20 日</time>

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

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

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

标准如下:

<!-- 标准简单日期 -->
<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 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2324551.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Kubernetes》》K8S》》Deployment 、Pod、Rs 、部署 nginx

Deployment deployment文档说明 kubectl get rs,deployment,pods 删除pod 、deployment 、service # 如果只删除pod&#xff0c;deployment会自动重建&#xff0c;所以应该先删除deployment。 # 下面演示的是删除所有deployment&#xff0c;可以指定只删除某个 # 删除所有…

链表(C++)

这是本人第二次学习链表&#xff0c;第一次学习链表是在大一上的C语言课上&#xff0c;首次接触&#xff0c;感到有些难&#xff1b;第二次是在大一下学习数据结构时&#xff08;就是这次&#xff09;&#xff0c;使用C再次理解链表。同时&#xff0c;这也是开启数据结构学习写…

nginx 设置隐藏版本号

Nginx默认会在Server头里包含版本信息&#xff0c;比如“nginx/1.18.0”&#xff0c;这可能存在安全隐患&#xff0c;因为攻击者知道了版本号后&#xff0c;可以针对特定版本的漏洞进行攻击。所以&#xff0c;隐藏版本号是一个常见的安全措施。 可通过在http块里加上server_to…

29_项目

目录 http.js 1、先注册账号 register.html 2、再登录 login.html 3、首页 index.html 4 详情 details.html cart.html css index.css register.css details.css 演示 进阶 http.js let baseURL "http://localhost:8888"; let resgiterApi baseURL &…

排序算法1--插入排序

目录 1.常见排序算法 2.排序算法的预定函数 2.1交换函数 2.2测试算法运行时间的函数 3.插入排序 3.1直接插入排序 3.2希尔排序 3.3插入排序的时间复杂度分析 4.总结 1.常见排序算法 我将分别讲解五种排序算法&#xff0c;但是不代表只有五种固定的代码&#xff0c;之后…

业之峰与宏图智能战略携手,开启家装数字化新篇章

3月8日&#xff0c;业之峰装饰集团董事长张钧携高管团队与宏图智能董事长庭治宏及核心团队&#xff0c;在业之峰总部隆重举行了战略合作签约仪式&#xff0c;标志着双方将携手探索业之峰的数字化转型之路&#xff0c;共同推动家装行业的变革与发展。 近年来&#xff0c;家装行业…

matplotlib标题比x,y轴字体大,明明标题字体更大?

原始代码&#xff1a; plt.xlabel(训练轮次&#xff08;Epochs&#xff09;, fontsize14, fontweightbold, fontpropertieschinese_font) # 设置中文字体、加大、加粗 plt.ylabel(R值, fontsize14, fontweightbold, fontpropertieschinese_font) # 设置中文字体、加大、加粗…

【云原生】docker 搭建单机PostgreSQL操作详解

目录 一、前言 二、前置准备 2.1 服务器环境 2.2 docker环境 三、docker安装PostgreSQL过程 3.1 获取PostgreSQL镜像 3.2 启动容器 3.2.1 创建数据卷目录 3.2.2 启动pg容器 3.3 客户端测试连接数据库 四、创建数据库与授权 4.1 进入PG容器 4.2 PG常用操作命令 4.2…

免费使用!OpenAI 全量开放 GPT-4o 图像生成能力!

2025年3月26日&#xff0c;OpenAI正式推出GPT-4o原生图像生成功能&#xff0c;这一更新不仅标志着多模态AI技术的重大突破&#xff0c;更引发了全球AI厂商的激烈竞争。从免费用户到企业开发者&#xff0c;从创意设计到科学可视化&#xff0c;GPT-4o正在重塑图像生成的边界。本文…

jetson orin nano super AI模型部署之路(三)stable diffusion部署

先看一下部署后的界面和生成的图片。 在jetson orin nano super上部署stable diffusion比较简单&#xff0c;有现成的docker image和代码可用。 docker image拉取 使用的docker image是dustynv/stable-diffusion-webui&#xff0c;对于jetson orin nano super的jetpack6.2来说…

WebRTC的ICE之TURN协议的交互流程中继转发Relay媒体数据的turnserver的测试

WebRTC的ICE之TURN协议的交互流程和中继转发Relay媒体数据的turnserver的测试 WebRTC的ICE之TURN协议的交互流程中继转发Relay媒体数据的turnserver的测试 WebRTC的ICE之TURN协议的交互流程和中继转发Relay媒体数据的turnserver的测试前言一、TURN协议1、连接Turn Server 流程①…

HTTP---基础知识

天天开心&#xff01;&#xff01;&#xff01; 文章目录 一、HTTP基本概念1. 什么是HTTP&#xff0c;又有什么用&#xff1f;2. 一次HTTP请求的过程3.HTTP的协议头4.POST和GET的区别5. HTTP状态码6.HTTP的优缺点 二、HTTP的版本演进1.各个版本的应用场景2、注意要点 三、HTTP与…

DeepSeek接入飞书多维表格,效率起飞!

今天教大家把DeepSeek接入飞书表格使用。 准备工作&#xff1a;安装并登录飞书&#xff1b;可以准备一些要处理的数据&#xff0c;确保数据格式正确&#xff0c;如 Excel、CSV 等&#xff0c;也可直接存储到飞书多维表格。 创建飞书多维表格&#xff1a;打开飞书&#xff0c;点…

[FGPA基础学习]分秒计数器的制作

分秒计数器设计 ​ 本次实验内容为&#xff1a;DE2-115板子上用 Verilog编程实现一个 分秒计数器&#xff0c;并具备按键暂停、按键消抖功能 一、系统架构设计 顶层模块划分 顶层模块&#xff08;top&#xff09; ├── 按键消抖模块&#xff08;key_debounce&#xff09; ├…

每日算法-250329

记录今天学习的三道算法题&#xff1a;两道滑动窗口和一道栈的应用。 2904. 最短且字典序最小的美丽子字符串 题目描述 思路 滑动窗口 解题过程 题目要求找到包含 k 个 ‘1’ 的子字符串&#xff0c;并且需要满足两个条件&#xff1a; 最短长度&#xff1a;在所有包含 k 个 …

向量数据库学习笔记(2) —— pgvector 用法 与 最佳实践

关于向量的基础概念&#xff0c;可以参考&#xff1a;向量数据库学习笔记&#xff08;1&#xff09; —— 基础概念-CSDN博客 一、 pgvector简介 pgvector 是一款开源的、基于pg的、向量相似性搜索 插件&#xff0c;将您的向量数据与其他数据统一存储在pg中。支持功能包括&…

蓝桥杯 之 二分

文章目录 习题肖恩的n次根分巧克力2.卡牌 二分是十分重要的一个算法&#xff0c;常常用于求解一定范围内&#xff0c;找到满足条件的边界值的情况主要分为浮点数二分和整数二分二分问题&#xff0c;最主要是写出这个check函数&#xff0c;这个check函数最主要就是使用模拟的方法…

从零开始研发GPS接收机连载——18、北斗B1的捕获和跟踪

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 从零开始研发GPS接收机连载——18、北斗B1的捕获和跟踪 B1信号的捕获B1信号的跟踪 前面已经验证了射频能够接收到B1的信号&#xff0c;通过FPGA采集了IQ信号之后能够通过matl…

memtest86检测内存

上次在R730安装万兆网卡的时候&#xff0c;使用过memtest64进行测试。这个操作肯定是有用的&#xff0c;我就用这个方法查出有问题的内存条&#xff0c;及时找商家进行了更换。 但是该方案有个问题&#xff0c;只能锁定部分内存&#xff0c;如下图&#xff0c;只测试到了23G左…

验证linux多进程时间片切换的程序

一、软件需求 在同时运行一个或多个一味消耗 CPU 时间执行处理的进程时&#xff0c;采集以下统计信息。 ・在某一时间点运行在逻辑 CPU 上的进程是哪一个 ・每个进程的运行进度 通过分析这些信息&#xff0c;来确认本章开头对调度器的描述是否正确。实验程序的…