1.2、HTML规范 · 开发规范

[TOC] # HTML规范尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。 **标签** * 自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )； * 可选的闭合标签（closing tag），需闭合 ( 例如：</li> 或 </body> )； * 尽量减少标签数量； **Class 与 ID** * class 应以功能或内容命名，不以表现形式命名； * class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔； * 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class； **属性顺序** * id * class * name * data-xxx * src, for, type, href * title, alt * aria-xxx, role **引号** * 属性的定义，统一使用双引号。 **嵌套** * a 不允许嵌套 div这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如a 不允许嵌套 a。 * 严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。 **语义嵌套约束** ~~~ <li> 用于 <ul> 或 <ol> 下； <dd>, <dt> 用于 <dl> 下； <thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下； ~~~ **严格嵌套约束** ~~~ inline-Level 元素，仅可以包含文本或其它 inline-Level 元素; <a>里不可以嵌套交互式元素<a>、<button>、<select>等; <p>里不可以嵌套块级元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。 ~~~ 更多详情，参考WEB标准系列-HTML元素嵌套 **布尔值属性** * HTML5 规范中 disabled、checked、selected 等属性不用设置值。 # HTML命名规范 1. 所有的命名最好都小写 2. 属性的值一定要用双引号("")括起来，且一定要有值如 class="helloweb" , id="helloweb" 3. 每个标签都要有开始和结束，且要有正确的层次，排版有规律工整 4. 空元素要有结束的tag或于开始的tag后加上"/" 5. 表现与结构完全分离，代码中不涉及任何的表现元素，如：style、font、bgColor、border 等 6. h1到h6的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。 7. 给图片加上alt 标签，优点是在于在图片发生错误时，alt 可以体现给用户 8. 尽量使用英文命名原则 9. 尽量不缩写，除非一看就明白的单词 10. 用div等标签布局；表格型数据，table首选。 11. 代码风格采用树形结构，提高可读性；避免冗余嵌套。 12. 模块之间必须保持独立，区块化布局，方便随意增删改，多人协作维护。 # **HTML常用命名** **网站类** * index.html 首页 * 404.html 404错误页 * print.html 打印页 * header.html 页头 * footer.html 页脚 * sitemap.html 网站地图 * passport.html 通行证 * rank.html 排行榜 * roll.html 滚动新闻 * solution.html 解决方案 * joinus.html 加入我们 * partner.html 合作伙伴 * service.html 服务 * aboutus.html 关于我们 * contact.html 联系我们 * company.html 公司介绍 * organization.html 组织结构 * culture.html 企业文化 * strategy.html 发展策略 * honor.html 公司荣誉 * aptitudes.html 企业资质 * events.html 大事记 * business.html 商务合作 * contract.html 服务条款 * privacy.html 隐私声明 * CSR.html 企业社会责任 * news-开头.html 新闻相关 * article-开头.html 资讯相关 * picture-开头.html 图片相关 * photo-开头.html 相册相关 * product-开头.html 产品相关 * goods-开头.html 商品相关 * system-开头.html 系统相关 * tag-开头.html tag相关 * brand-开头.html 品牌相关 * help-开头.html 帮助相关 * member-开头.html 会员相关 * search-开头.html 搜索相关 **系统类** *暂无 # **HTML常见结构** **页面头部** ~~~ <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> //让360等双核浏览器使用极速模式 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> //告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> /* content属性值 : width:可视区域的宽度，值可为数字或关键词device-width height:同width intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。 user-scalable:是否可对页面进行缩放，no 禁止缩放 */ <title>网站标题，控制在25个字、50个字节以内</title> <meta name="keywords" content="关键词,5个左右,单个8汉字以内"> <meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！"> <link rel="Bookmark" href="favicon.ico" > //书签图标 <link rel="Shortcut Icon" href="favicon.ico" /> //浏览器标题左侧小图标 <script type="text/javascript" src="jquery.min.js"></script  <link href="h-ui/css/H-ui.css" rel="stylesheet" type="text/css" /> <link href="iconfont/iconfont.css" rel="stylesheet" type="text/css" /> <link href="h-ui/css/style.css" rel="stylesheet" type="text/css" />  </head> ~~~