html - 良好的编码习惯/模块化 HTML 结构

标签 html css modularity

我正在制作一个有两个级别的网页。第一个包含家庭、音乐、工程等内容。每个级别都有一个子级别。例如,工程学会有电路、编程等。我为导航设置了一个选项卡系统,看起来非常好。我是 html 的新手,但直觉上,我想像 Java 程序一样使这个模块化。所以我不确定最好的方法是什么。这是我的一些想法。为了便于讨论,我会尽量简化它。

一个包含文本框、标题和图像空间的主页。通过单击导航栏,图像、标题和文本框会更改为该页面的内容。 Ex* 通过单击工程-> 电路图像更改为电路图片,文本框显示电流。对图片和文本的引用存储在外部文件中(也许是 engineering/circuits.html)。

或者,

几个页面,每个页面都包含相似的代码(包括导航菜单的复制/粘贴版本)。每个页面都包含自己的内容。

我更喜欢第一个,因为它简单且模块化。当然,我们的目标是拥有整洁可读的代码。我讨厌在多个地方编写相同的代码(我相信大多数优秀的程序员都会这样做)。非常感谢任何反馈以及有关如何包含其他文件内容的信息。谢谢!

切特

最佳答案

我会使用 PHP include 来包含您的页眉和导航,而不必像您所说的那样进行剪切和粘贴。你可以包括任何你想要的。我认为 PHP 对此很有用。您还可以添加几个变量,例如页面标题,并在页面标题中回显它。你把 html 放在你的包含中,但用 PHP 扩展保存它。

<?php

 include 'includes/header.php';

?> 

关于html - 良好的编码习惯/模块化 HTML 结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9028747/

相关文章:

java - OSGi Bundle 无法自动解析

html - block anchor 选择问题内的内容可编辑

javascript - 在 $(this) 选择器之后选择特殊选择器

javascript - 在 Jquery 的列表中删除没有元素的列表

html - 如何在 ionic 3 中显示视频列表

CSS 导航栏 div 层无法在 IE 上正确显示

html - 在复选框 Accordion 中使用复选框?

javascript - 仅使用 Angular 和 css 在折叠元素上平滑过渡

javascript - 使用 PHP 或 Nodejs 的组件构建器

wpf - 模块化 WPF 应用程序的框架?