×

深圳网站建设—APP开发—网站制作—小程序开发_博纳网络公司

0755 -
82538016
82560826
网站制作资讯

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

当前文章链接:/construction/fach/14825.html
如果您觉得案例还不错请帮忙分享:

[声明]本网转载网络媒体稿件是为了传播更多的信息,此类稿件不代表本网观点,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的内容侵犯了您的版权,请您的相关内容发至此邮箱【qin@198bona.com 】,我们在确认后,会立即删除,保证您的版权。

相关案例推荐