├── .gitignore ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright 2017 doyoe.com 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML/CSS开发规范指南 2 | 3 | ## 目录 4 | 5 | 1. [规范概述](#intro) 6 | 2. [基本信息](#profile) 7 | 3. [通用约定](#general) 8 | * [文档目录结构](#directory) 9 | * [分离](#separate) 10 | * [文件命名](#file-name) 11 | * [缩进](#indentation) 12 | * [编码](#encoding) 13 | * [小写](#lowercase) 14 | * [注释](#comment) 15 | * [待办事项](#todo) 16 | * [行尾空格](#end-line-space) 17 | * [省略嵌入式资源协议头](#protocol-relative-url) 18 | * [代码有效性](#validator) 19 | 4. [HTML约定](#html) 20 | * [文档类型](#doctype) 21 | * [省略type属性](#type) 22 | * [省略属性值](#attribute) 23 | * [用双引号包裹属性值](#quots) 24 | * [嵌套](#nest) 25 | * [标签闭合](#close-tag) 26 | * [多媒体替代方案](#perceivable) 27 | * [有效操作](#friendly) 28 | * [按模块添加注释](#html-comment) 29 | * [格式](#format) 30 | * [语义化标签](#semantic) 31 | * [模块化](#html-module) 32 | 5. [CSS约定](#css) 33 | * [文件引用](#link) 34 | * [命名-组成元素](#element) 35 | * [命名-词汇规范](#word) 36 | * [命名-缩写规范](#abbr) 37 | * [命名-前缀规范](#prefix) 38 | * [id与class](#id) 39 | * [书写格式](#packaging) 40 | * [规则与分号](#semicolon) 41 | * [0与单位](#unit) 42 | * [0与小数](#decimal) 43 | * [去掉uri中引用资源的引号](#non-quotes) 44 | * [HEX颜色值写法](#hex) 45 | * [属性书写顺序](#order) 46 | * [注释规范](#css-comment) 47 | * [hack规范](#hack) 48 | * [避免低效率选择器](#low-selector) 49 | * [属性缩写与分拆](#override) 50 | * [模块化](#css-module) 51 | 6. [图像约定](#img) 52 | * [图像压缩](#img-compress) 53 | * [背景图](#background-image) 54 | * [前景图](#image) 55 | * [Sprite](#sprite) 56 | 7. [结语](#end) 57 | 58 | 59 | ## 规范概述 60 | 61 | 规范的制定是我们长期以来对工作的积累与沉淀的产物，帮助我们更快、更好、更高效的完成繁重、复杂、多样化的任务，我们制作规范的主要目的在于： 62 | 63 | * 降低每个组员介入项目的门槛成本； 64 | * 提高工作效率及协同开发的便捷性； 65 | * 高度统一的代码风格； 66 | * 提供一整套HTML、CSS解决方案，来帮助开发人员快速做出高质量的符合要求的页面。 67 | 68 | 69 | ## 基本信息 70 | 71 | 规范名称 | Cook 72 | --------|------| 73 | 当前版本 | v1.0 beta 74 | 规范发起 | [杜瑶(@doyoe)](http://weibo.com/doyoe) 75 | 参与人群 | Qunar FED 76 | 最后更新 | 2015.03.20 77 | 78 | 79 | ## 通用约定 80 | 81 | 82 | ### 1.文档目录结构 83 | 84 | ``` 85 | |-- 项目名 86 | |-- src 开发环境 87 | |-- html 静态页面模板目录 88 | |-- bgimg 背景图目录（假设有的话） 89 | |-- image 前景图目录（假设有的话） 90 | |-- font 字体目录（假设有的话） 91 | |-- scripts 脚本目录 92 | |-- styles（Yo） 样式目录 93 | |-- lib 基础库 94 | |-- core 核心代码：reset 95 | |-- element 元素 96 | |-- fragment 公用碎片 97 | |-- layout 布局 98 | |-- widget 组件 99 | |-- usage 项目具体实现 100 | |-- project 某个子项目 101 | |-- core 核心代码：桥接lib中的core，可以进行项目级扩展 102 | |-- fragment 项目公用碎片 103 | |-- module 模块 104 | |-- page page桥接文件目录：src-list 105 | |-- export page pack之后的文件目录 106 | |-- prd 生产环境 107 | |-- bgimg 背景图目录（假设有的话） 108 | |-- image 前景图目录（假设有的话） 109 | |-- font 字体目录（假设有的话） 110 | |-- scripts 脚本目录 111 | |-- styles（Yo） 样式目录 112 | |-- project1 子项目 113 | |-- index.css 114 | |-- login.css 115 | |-- and etc... 116 | |-- project2 子项目 117 | |-- index.css 118 | |-- login.css 119 | |-- and etc... 120 | |-- and etc... 121 | ``` 122 | 123 | > `src`, `scripts`, `styles` 三个目录是为了和现有项目保持一致，避免修改过大，所以保持不变。 124 | 125 | > `html` 目录，用于存放前端开发做的静态页面，以备查阅、备份、review或给后端套页面。 126 | 127 | > `bgimg`, `image`, `font` 三个目录在Qunar一般不会直接存在，因为我们有source服务器，这些资源都会在那上面管理；不过特殊情况也会有，比如一些独立的项目，没有使用source的，那么就需要遵循这样的目录划分。 128 | 129 | > 至于 `html`, `bgimg`, `image`, `font` 这几个目录为什么没有加 `s`，主要是因为不希望大家去想某个目录是否为复数，简单点就好。 130 | 131 | > `prd` 为生产环境目录，以 `xxx` 项目中的一个子项目 `mobile` 为例，其生产环境中的某个CSS外链大致如下：`//sitename.com/prd/styles/mobile/index.css` 132 | 133 | 134 | ### 2.分离 135 | 136 | 结构（HTML）、表现（CSS）、行为分离（JavaScript） 137 | 138 | > 将结构与表现、行为分离，保证它们之间的最小耦合，这对前期开发和后期维护都至关重要。 139 | 140 | 141 | ### 3.文件命名 142 | 143 | * CSS模块文件，其文件名必须与模块名一致； 144 | 145 | 假定有这样一个模块： 146 | 147 | .m-detail { sRules; } 148 | .m-detail-hd { sRules; } 149 | .m-detail-bd { sRules; } 150 | .m-detail-ft { sRules; } 151 | 152 | > 那么该模块的文件名应该为：`m-detail.css` 153 | 154 | * CSS页面文件，其文件名必须与HTML文件名一致； 155 | 156 | > 假定有一个HTML页面叫 `product.html`，那么其相对应的CSS页面文件名应该为：`product.css` 157 | 158 | > 假定现在有一个 `product.html`，里面有2个模块： 159 | 160 | +
161 | +
162 | 163 | 那么开发人员能快速找到与该页面相关的3个直接CSS文件，包括：`product.css`, `m-list.css`, `m-info.css` 164 | 165 | 166 | ### 4.缩进 167 | 168 | 使用tab（4个空格宽度）来进行缩进，可以在IDE里进行设置 169 | 170 | 171 | ### 5.编码 172 | 173 | * 以 UTF-8 无 BOM 编码作为文件格式； 174 | * 在HTML中文档中用 `` 来指定编码； 175 | * 为每个CSS文档显示的定义编码，在文档首行定义 `@charset "utf-8";` 176 | 177 | > 在 Sass 中，如果文档中出现中文，却未显示定义编码，将会编译出错，为了统一各种写法，且提前规避错误几率，统一要求每个CSS文档都需要定义编码 178 | 179 | 180 | ### 6.小写 181 | 182 | * 所有的HTML标签必须小写； 183 | * 所有的HTML属性必须小写； 184 | * 所有的样式名及规则必须小写。 185 | 186 | 187 | ### 7.注释 188 | 189 | 尽可能的为你的代码写上注释。解释为什么要这样写，它是新鲜的方案还是解决了什么问题。 190 | 191 | 192 | ### 8.待办事项 193 | 194 | 用 TODO 标示待办事项和正在开发的条目 195 | 196 | 197 |
198 | 199 | ... 200 | 201 | /* TODO: 图文混排 comm: g-imgtext */ 202 | .g-imgtext { sRules; } 203 | 204 | 205 | ### 9.行尾空格 206 | 207 | 删除行尾空格，这些空格没有必要存在 208 | 209 | 210 | ### 10.省略嵌入式资源协议头 211 | 212 | 省略图像、媒体文件、样式表和脚本等URL协议头部声明 ( http: , https: )。如果不是这两个声明的URL则不省略。 213 | 214 | 省略协议声明，使URL成相对地址，防止内容混淆问题和导致小文件重复下载（这个主要是指http和https交杂的场景中）。 215 | 216 | 不推荐： 217 | 218 | 219 | 220 | 推荐： 221 | 222 | 223 | 224 | 不推荐： 225 | 226 | ``` 227 | .example { 228 | background: url(http://www.google.com/images/example); 229 | } 230 | ``` 231 | 232 | 推荐： 233 | 234 | ``` 235 | .example { 236 | background: url(//www.google.com/images/example); 237 | } 238 | ``` 239 | 240 | > 注：省略协议头在IE7-8下会有一点小问题，外部CSS文件（link和@import）会被下载两遍，所以该条目的约定看具体项目。 241 | 242 | 243 | ### 11.代码有效性 244 | 245 | * 使用 [W3C HTML Validator](http://validator.w3.org/) 来验证你的HTML代码有效性； 246 | * 使用 [W3C CSS Validator](http://jigsaw.w3.org/css-validator/) 来验证你的CSS代码有效性。 247 | 248 | > 代码验证不是最终目的，真的目的在于让开发者在经过多次的这种验证过程后，能够深刻理解到怎样的语法或写法是非标准和不推荐的，即使在某些场景下被迫要使用非标准写法，也可以做到心中有数。 249 | 250 | 251 | ## HTML约定 252 | 253 | 254 | ### 1.文档类型 255 | 256 | * 统一使用HTML5的标准文档类型：``； 257 | 258 | > HTML5文档类型具备前后兼容的特质，并且易记易书写 259 | 260 | * 在文档doctype申明之前，不允许加上任何非空字符； 261 | 262 | > 任何出现在doctype申明之前的字符都将使得你的HTML文档进入非标准模式 263 | 264 | * 不允许添加 `` 标签强制改变文档模式。 265 | 266 | > 避免出现不可控的问题 267 | 268 | 269 | ### 2.省略type属性 270 | 271 | 在调用CSS和JavaScript时，可以将type属性省略不写 272 | 273 | 不允许： 274 | 275 | 276 | 277 | 278 | 应该： 279 | 280 | 281 | 282 | 283 | > 因为HTML5在引入CSS时，默认type值为text/css；在引入JavaScript时，默认type值为text/javascript 284 | 285 | 286 | ### 3.省略属性值 287 | 288 | 非必须属性值可以省略 289 | 290 | 不允许： 291 | 292 | 293 | 294 | 295 | 应该： 296 | 297 | 298 | 299 | 300 | > 这里的 readonly 和 disabled 属性的值是非必须的，可以省略不写，我们知道HTML5表单元素新增了很多类似的属性，如: required 301 | 302 | 303 | ### 4.用双引号包裹属性值 304 | 305 | 所有的标签属性值必须要用双引号包裹，同时也不允许有的用双引号，有的用单引号的情况 306 | 307 | 不允许： 308 | 309 | 去哪儿网 310 | 311 | 应该： 312 | 313 | 去哪儿网 314 | 315 | 316 | ### 5.嵌套 317 | 318 | 所有元素必须正确嵌套 319 | 320 | * 不允许交叉； 321 | 322 | 不允许： 323 | 324 | 交叉嵌套 325 | 326 | 应该： 327 | 328 | 交叉嵌套 329 | 330 | * 不允许非法的子元素嵌套。 331 | 332 | 不允许： 333 | 334 |
    335 |

    xx列表

    336 |
  • asdasdsdasd
    • 337 |
  • asdasdsdasd
    • 338 |
339 | 340 | 应该： 341 | 342 |
343 |

xx列表

344 |
    345 |
  • asdasdsdasd
    • 346 |
  • asdasdsdasd
    • 347 |
348 |
349 | 350 | * 不推荐inline元素包含block元素； 351 | 352 | 不推荐： 353 | 354 | 355 |

这是一个块级h1元素

356 |

这是一个块级p元素

357 | 358 | 359 | 推荐： 360 | 361 |
362 |

这是一个块级h1元素

363 |

这是一个块级p元素

364 |
365 | 366 | > 规则可参考： 367 | 368 | > HTML4/XHTML1.0 Strict: [嵌套规则](http://www.cs.tut.fi/~jkorpela/html/strict.html)。 369 | > 370 | > HTML5: [嵌套规则](http://www.w3.org/TR/html5/) 371 | > 372 | > 举个例子，在HTML5中，a元素同时属于 Flow content, Phrasing content, Interactive content, Palpable content 4个分类，那些子元素是 phrasing 元素的元素可以是 a 的父元素，a 允许的子元素是以它的父元素允许的子元素为准，但不能包含 interactive 元素。 373 | 374 | 375 | ### 6.标签闭合 376 | 377 | 所有标签必须闭合 378 | 379 | 不允许： 380 | 381 |
balabala... 382 | 383 | 384 | 应该： 385 | 386 |
balabala...
387 | 388 | 389 | > 虽然有些标记没有要求必须关闭，但是为了避免出错的几率，要求必须全部关闭，省去判断某标记是否需要关闭的时间 390 | 391 | 392 | ### 7.多媒体替代方案 393 | 394 | * 为img元素加上alt属性； 395 | * 为视频内容提供音轨替代； 396 | * 为音频内容提供字母替代等等。 397 | 398 | 不推荐： 399 | 400 | 401 | 402 | 推荐： 403 | 404 | 520即将到来，爱就大声说出来 405 | 406 | > alt属性的内容为对该图片的简要描述，这对于盲人用户和图像损毁都非常有意义，即无障碍。对于纯粹的装饰性图片，alt属性值可以留空，如 alt="" 407 | 408 | 409 | ### 8.有效操作 410 | 411 | 为表单元素label加上for属性 412 | 413 | 不允许： 414 | 415 | 416 | 417 | 418 | 应该： 419 | 420 | 421 | 422 | 423 | > for属性能让点击label标签的时候，同时focus到对应的 input 和 textarea上，增加响应区域 424 | 425 | 426 | ### 9.按模块添加注释 427 | 428 | 在每个模块开始和结束的地方添加注释 429 | 430 | 431 |
434 | 435 | 436 |
439 | 440 | > 注释内容左右两边保留和注释符号有1个空格位，在注释内容内不允许再出现中划线“-”，某些浏览器会报错。 441 | > 442 | > 注释风格保持与原生HTML的语法相似：成对出现 `` 443 | 444 | 445 | ### 10.格式 446 | 447 | * 将每个块元素、列表元素或表格元素都放在新行； 448 | * inline元素视情况换行，以长度不超过编辑器一屏为宜； 449 | * 每个子元素都需要相对其父级缩进（参见[缩进约定](#indentation)）。 450 | 451 | 不推荐： 452 | 453 |

asdas

dffasdasdasdsdasdasd

454 | 455 | 推荐： 456 | 457 |
458 |

asdas

459 |

dffasdasdasdsdasdasd

460 |
461 | 462 | 463 | ### 11.语义化标签 464 | 465 | * 根据HTML元素的本身用途去使用它们； 466 | * 禁止使用被废弃的用于表现的标签，如 center, font 等； 467 | * 部分在XHTML1中被废弃的标签，在HTML5中被重新赋予了新的语义，在选用时请先弄清其语义，如:b, i, u等。 468 | 469 | 不允许： 470 | 471 |

标题

472 | 473 | 应该： 474 | 475 |

标题

476 | 477 | > 虽然使用p标签，也可以通过CSS去定义它的外观和标题相同，但p标签本身的并不是表示标题，而是表示文本段落 478 | 479 | > 参阅：[HTML5 Elements](http://www.w3.org/TR/html5/) 480 | 481 | 482 | ### 12.模块化 483 | 484 | * 每个模块必须有一个模块名； 485 | * 每个模块的基本组成部分应该一致； 486 | * 模块的子节点类名需带上模块名（防止模块间嵌套时产生不必要的覆盖）； 487 | * 孙辈节点无需再带模块名。 488 | 489 | 代码如： 490 | 491 |
492 |
493 |

模块标题

494 |
495 |
496 |

一些实际内容

497 |
498 | 501 |
502 | 503 | > 其中 `.m-detail-hd`, `.m-detail-bd`, `.m-detail-ft` 为可选，视具体模块情况决定是否需要抽象为这种 **头，中，尾** 的结构 504 | 505 | 506 | ## CSS约定 507 | 508 | 509 | ### 1.文件引用 510 | 511 | * 一律使用link的方式调用外部样式 512 | * 不允许在页面中使用 `