语义化的DOM结构1. 语义化的DOM结构这里我们讲的语义化的DOM结构，不仅仅包括语义化的html标签，也包括了语

1. 语义化的DOM结构

这里我们讲的语义化的DOM结构，不仅仅包括语义化的html标签，也包括了语义化的选择器，在前端开发中应该注意的是，所有的动态文本都应该有单独的 html 标签包裹，并最好赋予其语义化的 class 属性或 id 属性，这在版本功能的迭代中，对前端和后端的开发都是大有裨益的，比如下面的HTML代码：

css
复制代码
<div class="main-right fr">
    <p>编号：32490230</p>
    <p class="main-rightStage">模式：RGB</p>
    <p class="main-rightStage">体积：16.659 MB</p>
    <p class="main-rightStage">分辨率：72dpi</p>
</div>

这就是不够语义化的前端代码，32504070，RGB，16.659 MB，72dpi这些值都是动态属性，会跟随编号的改变而改变，在规范的开发中，应该将这些 动态变化的属性，分别用 <span> 这类行内标签包裹起来，并赋予其一定的语义化选择器，在上面的HTML结构中大致可以推测出这是后端直接使用 foreach 渲染出的页面，这是不符合前后端分离的思想的，如果有一天他们决定使用 jsonp 或 Ajax 渲染这些属性，由前端进行渲染，工作量无疑会上一个层次。语义化的DOM结构更倾向于下面这样：

css
复制代码
<p class="main-rightStage property-mode">
    模式：<span>RGB</span>
</p>

也可以将 property-mode 直接作为 span 的 class 属性，这样这些属性无论是后端渲染，还是前端动态渲染都减轻了产品迭代产生的负担。