在HTML和CSS里存在着部分重复的功能，例如两者都可以设定一段文字的字体属性。既然如此，为啥还要CSS呢（至少，为啥CSS里存在着和HTML标签属性重复的东西呢）？

这是因为，HTML和CSS的用途是不同的：

  • HTML用于标记文档结构
  • CSS用于展现形式

上面的文字可能比较简单抽象；下面的blog有个例子：

https://www.jjxiaoliu.cn/?p=66

我们应该尽量避免使用HTML里遗存的那些和展现形式有关的标签，将它们都挪到CSS里去。

HTML与CSS：结构与表现的更多相关文章

  1. HTML+CSS结构与表现原则

    CSS网页布局即版式布局,是网页设计师将有限的视觉元素进行有机的排列组合.主要通过CSS的浮动.定位功能来实现UI设计的布局要求. 常见的布局有:一列布局,两列布局,三列布局和混合布局. HTML清除 ...

  2. 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则

    结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...

  3. 初学者用div+css结构写网页的几个误区

    1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布 ...

  4. 网页简单布局之结构与表现原则（HTML/CSS）

    结构 样式 行为真正的分离 前端初级人员会在页面上单纯的用各个div把相关内容独立开: 前端中级人员明白相关属性的设置会给元素带来什么改变,从而减少div的书写: 前端高级人员会以及其简单的和稳定的方 ...

  5. css的元素表现

    块级元素和行内元素的表现: 块级元素:块级元素和父元素的宽度一致,默认情况下就是和body的宽度一样,也可以说和浏览器窗口的宽度一致,致使同一行不能再放下另外的元素,所以块级元素表现为独占一行. 块级 ...

  6. CSS结构和层叠

    每个合法的文档都会生成一个文档树,从而能根据元素的祖先,属性,兄弟元素等创建选择器来选择元素.有了这个结构树,选择器才能起作用,这也是CSS继承的核心.继承是从一个元素向其后代元素传递属性值所采用的机 ...

  7. Web前端新人笔记之CSS结构和层叠

    上一篇文章介绍了如何利用CSS选择器为元素应用各种丰富的样式,每个合法的文档都会生成一个结构树,了解这一点,就能根据元素的祖先.属性.兄弟等元素穿件选择器选择元素. 本篇文章将讨论3中机制之间的关系: ...

  8. CSS结构伪类E:first-child/last-child/only-child/empty

    E:first-child解释:E的父元素的第一个子元素正好是E,给这个E定义样式 E:last-child解释:E的父元素的最后一个子元素正好是E,给这个E定义样式 E:only-child解释:E ...

  9. css结构选择器组合使用，选择父元素中多个子元素中某一段元素

    nth-of-type()和nth-child()写法一样,这里只用nth-of-type()演示,习惯type 直接上代码 /* 从前向后选择,第6个开始 */ li:nth-of-type(n+6 ...

随机推荐

  1. PHP协程入门详解

    概念 咱们知道多进程和多线程是实现并发的有效方式.但多进程的上下文切换资源开销太大:多线程开销相比要小很多,也是现在主流的做法,但其的控制权在内核,从而使用户(程序员)失去了对代码的控制,而且线程的上 ...

  2. Holer实现手机APP应用外网访问本地WEB应用

    手机APP应用公网访问内网WEB应用 本地安装了WEB服务端,手机APP应用只能在局域网内访问本地WEB,怎样使手机APP应用从公网也能访问本地WEB? 本文将介绍使用holer实现的具体步骤. 1. ...

  3. 网页中，鼠标点击与javascript的click事件怎么区分处理

    就下面问题发现另一个方式: js代码: <script> //IE if(document.all) { document.getElementById("clickme&quo ...

  4. Django REST framewor

      4.1 RESTfull 4.1.1.前后端不分离 前端看到什么效果,由后端决定,前端页面看到的效果是有后端控制的 前后端耦合度很高 比较适合纯网页设计,如果有APP,还需要开发APP后端借口 4 ...

  5. 2018-软工机试-C-和你在一起

    C. 和你在一起 单点时限: 1.0 sec 内存限制: 256 MB 我想和你在一起 直到我不爱你 宝贝 人和人 一场游戏 我愿意为你死去 如果我还爱你 宝贝 反正活着 也没意义 宝贝 我也只能 这 ...

  6. Python SyntaxError: invalid token

    python命名不能以数字开头,import时会报错

  7. 使用SQLsever批量查询TXT文本中的值

    测试文档如下,需要查到case_no值为以下时,对应的单据信息分别是什么. 步骤如下: 在txt文本中 Ctrl+H,输入如下,点击“全部替换” 在word文本中,复制以上信息到word文本中,目的是 ...

  8. install scrapy

    首先Python.lxml.OpenSSL这些工具Ubuntu是自带的,不用管它们. 其次安装pip,在命令行中执行以下命令: sudo apt-get install python-pip 1 1 ...

  9. react-redux性能优化之reselect

    在React-redux深入理解中,我们知道了 react-redux 是如何将 React 和 Redux 进行连接的,今天来说一下其中存在的性能问题以及改进的方式. 一.存在的性能问题 以 Red ...

  10. CF867E： Buy Low Sell High（贪心， STL） （hdu6438）

    Description 有nn个城市,第ii个城市商品价格为aiai​,从11城市出发依次经过这nn个城市到达n n城市,在每个城市可以把手头商品出售也可以至多买一个商品,问最大收益. Input 第 ...