网站建设前端关于架构规划之HTML语言解决方案

    网站建设前端关于架构规划之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语言”知识，就分享到这里，谢谢关注，博纳网络编辑整理。