• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  广告

                  内容、表现和行为分离

                  2019-3-9 11:38| 作者: admin| 查看: 334| 评论: 0|来自: 蚂蚁部落

                  内容、表现和行为分离是前端页面基本原则,下面对此原则做一下简单阐述。

                  一.网页的组成部分:

                  应用于项目中的网页通常有如下几个部分构成:

                  (1).通过HTML结构创建的结构与填写的文本,它是页面基本框架与实质内容。

                  (2).CSS代码部分,负责对HTML结构和其中的文本内容进行美化修饰,也就是网页的表现部分。

                  (3).JavaScript代码部分,负责对内容增加一些动态效果,可以称之为行为。

                  上述三个部分的结合可以使网页更?#29992;?#35266;有动感,交互能力也更加强大,当你的网页?#37096;?#20197;只有内容部分,不需要CSS与JavaScript,这?#27604;?#26159;可以的,这是这样的网页很难满足实际项目的需求。

                  二.内容、表现和行为分离:

                  在文章起始位置已经提到过,内容、表现和行为分离是前端页面基本原则。

                  也就是将HTML结构与内部的文本内容、CSS代码和JavaScript分离开,首先看一段代码:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  </head>
                  <body>
                  <div><b>蚂蚁部落</b></div>
                  <div style="color:red;font-size:14px">蚂蚁部落一</div>
                  <di style="color:blue" onclick="this.style.color='green'">蚂蚁部落二</div>
                  </body>
                  </html>

                  上面代码汇总,CSS与JavaScript代码嵌套进HTML中,并且对"蚂蚁部落"加粗采用<b>标签。

                  如此简单的代码就让人感觉非常凌乱,可以想象,如果代码量庞大的话,页面代码会多么?#20998;住?/p>

                  修改页面的样式和行为非常困难,首先在HTML中找到对应的位置,然后再修改代码,程序员内心应该是崩溃的。

                  并且对搜索引擎优化也很不好友,因为搜索引擎真正想要的是页面中的内容,而不是嵌套的CSS代码和js代码。

                  代码修改如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  .a{font-weight:bold} 
                  .b{
                    color:red;
                    font-size:14px;
                  }
                  .c{color:blue}
                  </style>  
                  <script>
                  window.onload=function(){
                    let odiv=document.getElementsByClassName("c")[0];
                    odiv.onclick=function(){
                      this.style.color='green';
                    }
                  }  
                  </script>  
                  </head>
                  <body>
                  <div class="a">蚂蚁部落</div>
                  <div class="b">蚂蚁部落一</div>
                  <div class="c">蚂蚁部落二</div>
                  </body>
                  </html>

                  上面代码在一定实现三者分离效果,内容非常的简洁,无论对于程序员还是对于搜索引擎都比较友好。

                  代码较少情况下,是不错选择,如果代码量较大,页面依然会非常的?#20998;祝?#24341;入外部js和css文件是不错的选择。

                  上述代码修改如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <link rel="stylesheet" href="css.css"> 
                  <script src="js.js"></script>  
                  </head>
                  <body>
                  <div class="a">蚂蚁部落</div>
                  <div class="b">蚂蚁部落一</div>
                  <div class="c">蚂蚁部落二</div>
                  </body>
                  </html>

                  上面代码仅仅是一个引入演示,并没有对应的js和css文件。

                  上述方式,如果要修改样式和行为,甚至不需要去触碰这些HTML代码,只需要去修改CSS和js文件即可。

                  主要规则如下:

                  (1).CSS和js代码尽量不要嵌入HTML中。

                  (2).页面中尽量保持一个js文件引入,如果有多个,可以在部署时压缩为一个。

                  (3).CSS代码尽可能不适用内联样式,代码量小可以使用内部样式表。

                  (4).尽量使用css属性替代标签规定文本的表现,比如尽量避免使用<b>, <u>, <center>, <font>和<b>等。

                  关于内联样式与内部样式可以参阅HTML应用CSS代码方式一章节。

                  三.简单代码演示:

                  我们布局页面的最终目的是在于用户有良?#23186;?#20114;与视觉体验的前提下,能够做到页面以非常简洁的形式展现在开发者和搜索引擎面前,以便于代码开发维护和搜索引擎的抓取。

                  所以,不要引入一些特定的HTML 结构来解决一些视觉设计问题,代码片段如下:

                  [HTML] 纯文本查看 复制代码
                  <span class="text-box">
                    <span class="square"></span>
                    前面是一个矩形框。
                  </span>

                  上面通过一个span元素在文本前面添加一个矩形框。

                  CSS修饰代码如下:

                  [CSS] 纯文本查看 复制代码
                  .text-box > .square {
                    display: inline-block;
                    width: 1rem;
                    height: 1rem;
                    background-color: red;
                  }

                  上面是对span矩形框的一个样式设置。

                  其实代码可以更加简化,让HTML结构更加简单,代码片段如下:

                  [HTML] 纯文本查看 复制代码
                  <span class="text-box">
                    前面是一个矩形框。
                  </span>

                  CSS修饰代码如下:

                  [CSS] 纯文本查看 复制代码
                  .text-box:before {
                    content: "";
                    display: inline-block;
                    width: 1rem;
                    height: 1rem;
                    background-color: red;
                  }

                  通过伪元素选择器在文本前面添加一个伪元素,然后设置其样式。

                  这样是不是HTML结构就更加简洁了,?#27604;?#24182;不能一概而论,根据具体需要。


                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>