• 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01

    河北十一选五基本走势:内容、表现和行为分离

    燕赵风采20选5走势图 www.fllv.net 2019-3-9 11:38| 作者: admin| 查看: 677| 评论: 1|来自: 蚂蚁部落

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

    一.网页的组成部分:

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

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

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

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

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

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

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

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

    [HTML] 纯文本查看 复制代码运行代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <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>标签。

    如此简单的代码就让人感觉非常凌乱,可以想象,如果代码量庞大的话,页面代码会多么臃肿。

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

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

    代码修改如下:

    [HTML] 纯文本查看 复制代码运行代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <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>

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

    代码较少情况下,是不错选择,如果代码量较大,页面依然会非常的臃肿,引入外部js和css文件是不错的选择。

    上述代码修改如下:

    [HTML] 纯文本查看 复制代码运行代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <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代码方式一章节。

    三.简单代码演示:

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

    所以,不要引入一些特定的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结构就更加简洁了,当然并不能一概而论,根据具体需要。

    发表评论

    最新评论

    引用 zxs 2019-5-5 10:35
    多媒体回溯页面挂了

    查看全部评论(1)

    返回顶部
  • 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01
  • 北京赛车pk10开奖直播 全国彩票走势图 彩票2345图表走势图表 体彩20选5怎么中奖 极速时时彩计划群 快乐十分开奖号码 中国竞彩网 香港极速快3开奖结果 体彩p3胆码 北京赛车开奖记录彩票控163 北京赛车改单谁搞过 排列 山东群英会害人啊 体彩大乐透20选5 2017079福彩开奖号码 北京赛车pk10直播开奖