美文网首页web
样式与结构分离

样式与结构分离

作者: DecadeHeart | 来源:发表于2017-03-06 22:56 被阅读13次

为表现样式编码和实现正确的语义编码,二者在基本原理上的差别上比较微妙。这里给出了一段示例代码来帮助我们更好的区别。
为表现样式的编码:




<b><font size="2">Our Family</font></b>



<font size="1">Pictured are Matt and Jeremy.</font>

表现差别的代码

<div id="family">
<h3>Our Family</h3>
<p>Pictured are Matt and Jeremy.</p>
</div>

第一个代码段中,所有的HTML标签都是用来表现样式的。
第二个代码段中,却一点都没有对页面显示样式进行说明。h3和p都是为了说明文字的功能,标题与段落。

关键之处在于,第二个代码段中并没有考虑这些元素要以何种样式呈现出来,因为元素的呈现样式将由CSS控制。之所以选择这些标签,是因为他们恰如其分地描述了其中的内容。这也正是HTML中语义的概念:选择何种HTML标签取决于标签本身的语义,而不是其默认显示出来的样式。

适当的、合理的div和span可以明显增强文档的结构性,但若文档中使用了太多的div和span,就应该考虑一下是不是还有更加合适的HTML元素供选择了。例如,能用h3表示的内容的含义,就不应该使用div。

相关文章

  • 样式与结构分离

    为表现样式编码和实现正确的语义编码,二者在基本原理上的差别上比较微妙。这里给出了一段示例代码来帮助我们更好的区别。...

  • CSS学习笔记1:基础、复合选择器

    CSS - Cascading Style Sheets 实现结构(HTML)与样式(CSS)的分离 1. 分类 ...

  • 内容与样式分离原则

    内容与样式分离原则,等同于现在比较火的概念:结构、样式和行为分离原则。它们的中心思想是一样的,实现不同作用的代码进...

  • CSS简单备忘

    结构、样式、行为分离 CSS的三种类型 内联样式表(inline style sheets) 内部样式表/内嵌样式...

  • 前端开发规范

    基本原则 结构、样式、行为分离 尽量确保分档和模板只包含HTML结构,样式都放到样式表里,行为都放到脚本里。 缩进...

  • 前端开发规范(W3C笔记)

    基本原则 结构、样式、行为分离 尽量确保文档和模板只包含HTML结构,样式都放到样式表里,行为都放到脚本里。 缩进...

  • 06 js01 数据类型、运算符、类型转换

    W3C标准规定:结构、样式、行为相分离,html负责结构、css负责样式、javascript负责行为;其可以动态...

  • 怎样理解内容与样式分离的原则

    怎样理解内容与样式分离的原则 在 Web 开发中,所谓内容与样式分离,就是让内容的归 HTML, 样式归 CSS,...

  • html概念学习总结

    html 超文本标记语言,是网页之骨。 结构样式行为分离 html只写结构,css只写样式,js只写行为。谁也不要...

  • 前端开发规范(HTML,CSS,JS,VUE)

    开发规范 一.HTML规范 1. 基本原则 结构、样式、行为分离尽量确保文档和模板只包含 HTML 结构,样式都放...

网友评论

    本文标题:样式与结构分离

    本文链接:https://www.haomeiwen.com/subject/fgkpgttx.html