网站建设前端关于架构规划之HTML语言解决方案。
网站建设公司认为作为前端架构师,你面临的第一个挑战就是标记的规范化,换言之,你希望开发人员写出或 CMS 产出什么样的标记。如果没有 HTML,Web 就不复存在。因此我们暂且把 CSS 和 JavaScript 放一边,先单独看原始的内容和控件。文字、图片、链接、表单和提交按钮都是所有 Web 真正需要的元素,也是在 Web 上创建所有东西的基础。深圳网站建设公司资深框架规划师提醒初始的标记做得不好,你将要写很多不必要的 CSS 和 JavaScript 来弥补。而初始的标记做得好,你就能写出更具可扩展性和可维护性的 CSS 和 JavaScript。
网站建设关于前端框架之过去处理标记的方法
过去,不少前端从业人员来自出版界,或者曾与出版界的设计师、产品负责人共事,因此 HTML 的布局跟手册、杂志或报纸等传统材料非常相似。现如今二者不能等同了。但是在响应式设计成为业界标准之前(甚至之后的一段时间),大多数网络媒体资源都被视为多页印刷品的集合。项目分工之后,你会被指定负责某个页面,从头开始创建 DOM。过去,我们的标记通常被细分为两大阵营:程序式和静态式。下面就来看一看。
网站建设关于前端框架规划之程序式标记:自动化程度100%,可控程度0%
在 Web 建站领域,前端团队没有标记的控制权是非常普遍的。这通常是由于在前端团队参与项目之前,项目的功能开发(包括 HTML 输出)就已经进行了几周甚至几个月了。如果标记源码被复杂的渲染过程打乱,而且还来自不同的模板,那么情况就会变得更加糟糕。这意味着,对于任何不熟悉 CMS 后端复杂性的人而言,更新标记将会异常困难。而往往到了这个时候,后端开发人员已经开始着手别的任务了,没有时间回过头来进行任何重大的修改。这种制约因素的影响是,为了把内容更好地嵌入到 HTML 中,CMS 编辑人员和后端开发人员宁可写一堆标记和 CSS 类名。最终,他们编写的代码如下:
<div id="header" class="clearfix">
<div id="header-screen" class="clearfix">
<div id="header-inner" class="container-12 clearfix">
<div id="nav-header" role="navigation">
<div class="region region-navigation">
<div class="block block-system block-menu">
<div class="block-inner">
<div class="content">
<ul class="menu">
<li class="first leaf">
<a href="/start">Get Started</a>
Drupal.org 首页的这一段代码显示了一个简单的页面顶部,即使在填充内容之前都可以包含 10 层嵌套,更可怕的是,在实际应用中这还不是一个特别夸张的现象。经验告诉我们,它还可能嵌套得更多。
以前,这种“div 乱炖”或许确实有助于我们把静态 Photoshop 图像做成标记化的页面,但随着我们的需求日渐成熟,我们急需更好的方法来驾驭它们。
网站建设前端架构规划之静态标记:自动化程度0%,可控程度100%
如果我们的项目规模比较小,或者任务只是开发一个需要填充一大块主体区域的页面,那么编写静态标记更为方便。虽然这种情况灵活性很大,但是也意味着我们必须负责维护所有的代码。一个原本在 CMS 模板中很容易的改动,现在需要每个页面单独手动修改。所以我们会写成这样:
<header>
<section>
<nav>
<div>
<ul>
<li>
<a href="/products">Products</a>
<ul>
<li>
<a href="/socks">Socks</a>
为了保持简洁,“语义化”的标记是首选,应用样式所依靠的是 HTML5 元素名称和它们的层级关系,而非 CSS 类名。我们的标记中没有 CSS 类名,主导航的样式会自动继承到二级导航的锚点上,我们深受其害,最终往往写出这样的后代选择器:
header > section > nav > div > ul > li > a {
color:white;
}
header > section > nav > div > ul > li > ul > li > a {
color:blue;
}
过去,这种静态标记的方式使得对于任何一个悬停状态或激活状态选择器,代码至少得写这么长。你根本不想看三级导航会被写成什么样。我们还是赶紧跳过这部分,看一下现在是如何处理的。好了,
深圳网站建设公司本文关于“网站建设前端关于架构规划之HTML语言”知识,就分享到这里,谢谢关注,博纳网络编辑整理。