当前位置： 首页 > article >正文

解析 HTML 网站架构规范

article 2026/2/18 9:17:42

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 

 

相关文章：

解析 HTML 网站架构规范

2025/3/28 向全栈工程师迈进&#xff01; 一、网页基本的组成部分 网页的外观多种多样&#xff0c;但是除了全屏视频或游戏&#xff0c;或艺术作品页面&#xff0c;或只是结构不当的页面以外&#xff0c;都倾向于使用类似的标准组件。 1.1页眉 通常横跨于整个页面顶部有一…...

编程日记 2026/2/15 8:17:04

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

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

编程日记 2026/2/14 17:45:04

链表（C++）

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

编程日记 2026/2/17 19:56:59

nginx 设置隐藏版本号

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

编程日记 2026/2/13 16:31:39

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 &…...

编程日记 2026/2/13 14:05:00

排序算法1--插入排序

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

编程日记 2026/2/17 0:09:49

PolarDB数据库表恢复实战指南：通过控制台恢复表的完整操作流程

在数据库运维过程中，表数据恢复是一项常见且关键的操作。本文将详细介绍如何通过阿里云PolarDB控制台从备份中恢复特定表，并通过表重命名操作确保业务平稳过渡。 一、背景介绍 在日常数据库运维中，我们可能会遇到以下场景需要从备份中恢复表： 表数据被误删或损坏需要获取历…...

编程日记 2026/2/15 9:28:27

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

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

编程日记 2026/2/12 18:26:45

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

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

编程日记 2026/2/17 8:08:55

【云原生】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…...

编程日记 2026/2/14 21:14:18

解决 Gradle 构建错误：Could not get unknown property ‘withoutJclOverSlf4J’

解决 Gradle 构建错误&#xff1a;Could not get unknown property ‘withoutJclOverSlf4J’ 在构建 Spring 源码或其他基于 Gradle 的项目时&#xff0c;可能会遇到如下错误&#xff1a; Could not get unknown property withoutJclOverSlf4J for object of type org.gradle…...

编程日记 2026/2/12 19:44:02

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

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

编程日记 2026/2/15 2:05:38

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来说…...

编程日记 2026/2/6 10:22:28

深入理解：阻塞IO、非阻塞IO、水平触发与边缘触发

深入理解&#xff1a;阻塞IO、非阻塞IO、水平触发与边缘触发 在网络编程和并发处理中&#xff0c;理解不同的 I/O 模型和事件通知机制至关重要。本文将深入探讨阻塞IO&#xff08;Blocking IO&#xff09;、非阻塞IO&#xff08;Non-Blocking IO&#xff09;、水平触发&#x…...

编程日记 2026/2/15 16:46:21

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

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

编程日记 2026/2/14 1:00:22

HTTP---基础知识

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

编程日记 2026/2/13 17:17:16

Redis6数据结构之List类型

redis的List类型底层结构是双向链表&#xff0c;插入删除时间复杂度O(1)快,查找为O(n)慢。 应用场景&#xff1a;简单队列、最新评论列表、非实时排行榜&#xff08;定时计算榜单&#xff0c;如笔记本日销榜单&#xff09;。 常用命令&#xff1a; lpush将一个或多个值从左边…...

编程日记 2026/2/14 13:06:35

DeepSeek接入飞书多维表格，效率起飞！

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

编程日记 2026/2/13 15:08:46

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

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

编程日记 2026/2/12 18:48:22

【Spring Boot 与 Spring Cloud 深度 Mape 之十】体系整合、部署运维与进阶展望

【Spring Boot 与 Spring Cloud 深度 Mape 之十】体系整合、部署运维与进阶展望 #微服务实战 #Docker #Kubernetes #SpringSecurity #OAuth2 #分布式事务 #Seata #ServiceMesh #总结 #SpringCloud #SpringBoot 系列终章&#xff1a;经过前九篇 [【深度 Mape 系列】] 的系统学习…...

编程日记 2026/2/17 4:29:37

【商城实战(97)】ELK日志管理系统的全面应用

【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配，乃至运营推广策略，102 章内容层层递进。无论是想…...

编程日记 2026/2/14 9:07:34

高并发系统下的订单号生成服务设计与实现

目录 引言 订单号设计的关键考量因素 基础需求分析 唯一性保障 数据量预估 可读性设计 系统架构考量 分库分表兼容 可扩展性设计 技术选型与比较 性能优化 高可用性保障 实践案例&#xff1a;高并发系统订单号结构设计 结构详解 业务类型标识(2位) 唯一标识部分…...

编程日记 2026/2/15 0:11:48

每日算法-250329

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

编程日记 2026/2/16 0:36:32

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

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

编程日记 2026/2/8 17:34:51

蓝桥杯 之 二分

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

编程日记 2026/2/15 11:38:17

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

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

编程日记 2026/2/15 4:20:44

sqlalchemy:将mysql切换到OpenGauss

说明 之前python的项目使用的mysql&#xff0c;近期要切换到国产数据库OpenGauss。 之前的方案是fastapisqlalchemy&#xff0c;测试下来发现不用改代码&#xff0c;只要改下配置即可。 切换方案 安装openGauss-connector-python-psycopg2 其代码工程在&#xff1a;https:…...

编程日记 2026/2/15 10:09:39

memtest86检测内存

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

编程日记 2026/2/14 14:09:34

OpenCV图像拼接（10）用于实现图像拼接过程中的时间流逝（timelapse）效果的一个类cv::detail::Timelapser

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::detail::Timelapser 是 OpenCV 库中用于实现图像拼接过程中的时间流逝&#xff08;timelapse&#xff09;效果的一个类。它通常用于将一系列…...

编程日记 2026/2/14 4:06:02

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

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

编程日记 2026/2/13 1:26:34