前端编码规范—html规范

发表于 | 分类于 |
前端编码规范—html规范

前端编码规范—html规范

文档类型

推荐使用 html5 的文档类型申明：

<!DOCTYPE html>

文件命名统一以.html结尾。

语言属性

根据 html5 规范：

强烈建议为html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。

这里列出了语言代码表。

<html lang="en"></html>

标准HTML文件结构

  • 标准html文件的基本结构应该由html、head、body等标签构成，结构分明、层次清晰。样式不可以在页面内以style标签存在，需单独生成样式文件，以<link rel="stylesheet" href="./static/css/index.css">的形式载入页面中。样式文件一般可分为基础样式（base.css、init.css）、支持类样式（jquery-easy-ui.min.css、scrollbar.min.css）、以及页面样式（index.css、list.css）。分别在页面的head标签中从上至下引入，这样可以有效的避免样式互相影响。
  • 同样的，脚本程序也不可以在页面内、或者行内存在，需要单生成单独的js文件，以<script src="./static/js/controller/login.js" ></script>的形式载入页面。js文件可根据功能及项目需要和实际情况选择载入的位置，可以在head标签内，或者在</body>标签的前面载入。因为js会阻塞页面的渲染，所以一般情况下，js文件都会放在</body>标签的前面载入。除非有特殊情况，例如进入页面时就改变页面的整体宽度，而不是当页面渲染完成后改变，这样就需要在head标签中载入对应的js文件。

渲染模式

  • IE 支持通过特定的 meta 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"">
  • 现在大多数的国内浏览器都是双核浏览器，即IE和webkit内核。为了更好的体验及渲染效果，可以在头部加入以下meta标签，通知双核浏览器用默认用webkit渲染当前网页。
<meta name="renderer" content="webkit">

设备适配

根据项目及产品的不同，可能需要适配不同的设备，手机、pad、PC等，每种设备适配的方法不同，下面分别说明。

PC端

  • PC端主要是不同分辨率APP显示效果的一致性，首先要高保真的还原效果图所给出分辨率的样式及交互。其次根据分辨率的不同做出对应的调整，保证网页显示正常、交互合理、不错位、不凌乱。
  • 其次是PC端不同浏览器之间的兼容性，根据不同的项目需要及产品要求，对相应的浏览器兼容性做出调整，还有重要的一点是浏览器的兼容性问题在项目的启动阶段就要确定好。因为浏览器的兼容性会影响整个项目框架、类库版本、语言类型、样式及交互的处理方式的选择。各种浏览器及各版本的css hack不在本文中涉及，如有问题，请自行往上查找。
  • 如果APP是以响应式开发的，可以在head标签中加入以下标签来实现移动端的缩放。如果是正常开发，没有做响应式及移动端的适配，则不要添加，否则样式会错乱严重。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

移动端

  • 移动端主要是针对不同品牌、不同型号、不同尺寸、不同分辨率手机的适配。目前我们采用js动态渲染meta标签来做到不同分辨率下APP的适配工作，视图部分布局宽度固定，可以是640px，也可以是750px，可以看具体的效果图而定。样式、切图及布局方式基本都和pc端一样，不过可以尽情使用css3及html5，绝大部分的手机浏览器都很好的支持了css3及html5。

    viewport.js

//添加viewport-mate标签缩放网页。
!function(userAgent){
    if(!!userAgent.match(/AppleWebKit.*Mobile.*/)){
        var screen_w = parseInt(window.screen.width),
            scale = screen_w / 640;//效果图及视图宽度
            if (/Android (\d+\.\d+)/.test(userAgent)) {
                var version = parseFloat(RegExp.$1);
                if(userAgent.indexOf("MX")>-1&&version>=5){
                    document.write('<meta name="viewport" content="width=640,minimum-scale = ' + scale + ", maximum-scale = " + scale + ', target-densitydpi=device-dpi">');
                }else{
                    document.write(version > 2.3 ? '<meta name="viewport" content="width=640, minimum-scale = ' + scale + ", maximum-scale = " + scale + ', target-densitydpi=device-dpi">': '<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
                };
            } else {
                document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
                }
        }       
}(navigator.userAgent);
  • 移动端完美适配的方案有很多，如：rem布局方案、Flexible方案等等，本文不一一列出，有兴趣可以在网上自行查找。
  • 不允许使用百分比宽度布局、适配移动端不同屏幕。百分比布局不能够高保真的还原效果图的样式，交互及对dom的操作变得复杂。百分比布局是移动端刚起步时候最初的解决方案，现在随着前端技术的发展，各种“完美适配”的方案出现，请至少去领悟一种方案。

不推荐

.left-img{width:65.7%}
.right-img{width:12.8%}

省略自闭合元素的斜线

不要在自闭合（self-closing）元素的尾部添加斜线 – html5 规范中明确说明这是可选的。
不推荐

<input type="text"/>

推荐

<input type="text">

不要省略结束标签

不要省略可选的结束标签（closing tag）。

不推荐

<ul>
    <li>
</ul>

推荐

<ul>
    <li></li>
</ul>

语义化

使用具有语义的标签，比如 h1、p 等等。移动端请使用header、footer、nav等标签。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="renderer" content="webkit">
        <title>Document</title>
    </head>
    <body>
        <h1>标题</h1>
        <h2>子标题</h2>
        <p>文本段落</p>
    </body>
    <script src="main.js"></script>
</html>

实用为王

尽量遵循 html 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度来实现页面的布局。
不推荐

<span class="avatar">
    <img src="avatar.jpg">
</span>

推荐

<img class="avatar" src="avatar.jpg">

结构，表现与行为分离

一个完整的页面分为三个部分：结构（html）、表现（css）和行为（js）。为了使它们成为可维护的干净整洁的代码，我们要尽可能的将它们分离开来。

严格地保证结构、表现、行为三者分离，并尽量使三者之间没有太多的交互和联系。就是说，尽量在文档和模板中只包含结构性的 html；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。

清晰的分层意味着：

  • 不使用超过一到两张样式表
  • 尽量合并脚本
  • 不使用内嵌样式（<style>.no-good {}</style>）
  • 不使用行内样式（<hr style="border-top: 5px solid black">）
  • 不使用内嵌脚本（<script>alert('no good')</script>）
  • 不使用js入侵式写法（<a onclick="showTime(this)">show</a>）
  • 不使用表现元素（<b>，<u>，<center>，<font>）
    注：关于js入侵式写法的深入了解-传送门

小写

html 标签及属性（包括自定义属性）都是小写字母，不要使用大写字母。

绑定数据

如果需要为标签绑定一些数据的话，请使用 html5 的自定义属性 data-* 来绑定相关数据。

<h1 data-age="20">张三</h1>

布尔型属性

布尔型属性可以在声明时不赋值。xhtml 规范要求为其赋值，但是 html5 规范不需要。

<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
    <option value="1" selected>1</option>
    <option value="2"></option>
</select>

html 引号

html 属性的引号请使用双引号而不是单引号。

坚持技术分享，您的支持将鼓励我继续创作！
7* WeChat Pay

微信打赏

7* Alipay

支付宝打赏