亿企邦
  • 首页
    •
  • 解决方案&服务
    •
  • 客户&案例
    •
  • 营销资讯
    •
  • 关于我们
    •
    15158846557 或 在线咨询 在线咨询
    亿企邦
    15158846557 或 在线咨询
    亿企邦

    快捷入口

    所在位置： 首页 > 营销资讯 > 网站运营 > HTML编码规范

    HTML编码规范

    时间：2023-09-07 10:24:01 | 来源：网站运营

    时间：2023-09-07 10:24:01 来源：网站运营

    HTML编码规范：

    一、前言HTML作为描述网页结构的超文本标记语言，在百度一直有着广泛的应用。本文档的目标是使HTML代码风格保持一致，容易被理解和被维护。




    二、代码风格

    2.1. 缩进与换行

    ​





    示例

    <ul>

    <li>first</li>

    <li>second</li>

    </ul>







    解释：




    过长的代码不容易阅读与维护。但是考虑到 HTML 的特殊性，不做硬性要求。




    2.2. 命名










    示例

    <!-- good -->

    <div class="sidebar"></div>




    <!-- bad -->

    <div class="left"></div>







    解释：




    同一个页面中，不同的元素包含相同的id，不符合 id 的属性含义。并且使用 document.getElementById 时可能导致难以追查的问题。







    示例

    <!-- good -->

    <div id="nav"></div>

    <!-- bad -->

    <div id="navigation"></div>




    <!-- good -->

    <p class="comment"></p>

    <!-- bad -->

    <p class="com"></p>




    <!-- good -->

    <span class="author"></span>

    <!-- bad -->

    <span class="red"></span>










    解释：




    不允许 class 只用于让 JavaScript 选择某些元素，class 应该具有明确的语义和样式。否则容易导致 css class 泛滥。

    使用 id、属性选择作为 hook 是更好的方式。







    解释：




    IE 浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心。




    一个比较好的实践是，为 id 和 name 使用不同的命名法。




    示例

    <input name="foo">

    <div id="foo"></div>

    <script>

    // IE6 将显示 INPUT

    alert(document.getElementById('foo').tagName);

    </script>




    2.3. 标签







    示例

    <!-- good -->

    <p>Hello StyleGuide!</p>




    <!-- bad -->

    <P>Hello StyleGuide!</P>










    解释：




    常见无需自闭合标签有input、br、img、hr等。




    示例

    <!-- good -->

    <input type="text" name="title">




    <!-- bad -->

    <input type="text" name="title" />










    解释：




    对代码体积要求非常严苛的场景，可以例外。比如：第三方页面使用的投放系统。




    示例

    <!-- good -->

    <ul>

    <li>first</li>

    <li>second</li>

    </ul>




    <!-- bad -->

    <ul>

    <li>first

    <li>second

    </ul>
















    解释：




    比如 div 不得置于 p 中，tbody 必须置于 table 中。

    详细的标签嵌套规则参见 HTML DTD 中的 Elements 定义部分。
















    解释：




    下面是常见标签语义




    示例

    <!-- good -->

    <p>Esprima serves as an important <strong>building block</strong> for some JavaScript language tools.</p>




    <!-- bad -->

    <div>Esprima serves as an important <span class="strong">building block</span> for some JavaScript language tools.</div>










    解释：




    在兼容性允许的情况下应尽量保持语义正确性。对网格对齐和拉伸性有严格要求的场景允许例外，如多列复杂表单。







    示例

    <!-- good -->

    <img class="avatar" src="image.png">




    <!-- bad -->

    <span class="avatar">

    <img src="image.png">

    </span>







    2.4. 属性







    示例

    <!-- good -->

    <table cellspacing="0">...</table>




    <!-- bad -->

    <table cellSpacing="0">...</table>










    解释：




    不允许使用单引号，不允许不使用引号。




    示例

    <!-- good -->

    <script src="esl.js"></script>




    <!-- bad -->

    <script src='esl.js'></script>

    <script src=esl.js></script>










    示例

    <input type="text" disabled>

    <input type="checkbox" value="1" checked>










    解释：




    使用前缀有助于区分自定义属性和标准定义的属性。




    示例

    <ol data-ui-type="Select"></ol>




    三、通用




    3.1. DOCTYPE










    示例

    <!DOCTYPE html>







    示例

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">







    解释：




    有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。




    示例

    <html lang="zh-CN">




    3.2. 编码







    示例

    <html>

    <head>

    <meta charset="UTF-8">

    ......

    </head>

    <body>

    ......

    </body>

    </html>










    解释：




    UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。




    3.3. CSS和JavaScript引入







    示例

    <link rel="stylesheet" src="page.css">







    解释：




    text/css和text/javascript是type的默认值。







    解释：




    结构-样式-行为的代码分离，对于提高代码的可阅读性和维护性都有好处。







    解释：




    在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁。







    解释：




    将 script 放在页面中间将阻断页面的渲染。出于性能方面的考虑，如非必要，请遵守此条建议。




    示例

    <body>

    <!-- a lot of elements -->

    <script src="init-behavior.js"></script>

    </body>







    页面相同，建议省略协议前缀。




    解释：




    使用protocol-relativeURL引入CSS，在IE7/8下，会发两次请求。是否使用protocol-relativeURL应充分考虑页面针对的环境。




    示例

    <script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>




    四、 head




    4.1. title










    解释：




    title 中如果包含 ascii 之外的字符，浏览器需要知道字符编码类型才能进行解码，否则可能导致乱码。




    示例

    <head>

    <meta charset="UTF-8">

    <title>页面标题</title>

    </head>




    4.2. favicon







    解释：




    在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：







    示例

    <link rel="shortcut icon" href="path/to/favicon.ico">




    4.3. viewport







    解释:




    viewport meta tag可以设置可视区域的宽度和初始缩放大小，避免在移动设备上出现页面展示不正常。




    比如，在页面宽度小于 980px 时，若需 iOS 设备友好，应当设置 viewport 的 width 值来适应你的页面宽度。同时因为不同移动设备分辨率不同，在设置时，应当使用 device-width 和 device-height 变量。




    另外，为了使 viewport 正常工作，在页面内容样式布局设计上也要做相应调整，如避免绝对定位等。关于 viewport 的更多介绍，可以参见 Safari Web Content Guide的介绍




    五、图片










    解释:




    多余的 title 影响看图体验，并且增加了页面尺寸。







    解释:




    可以提高图片加载失败时的用户体验。










    解释:




    产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载。无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现。




    六、表单




    6.1. 控件标题







    解释:




    有两种方式：










    推荐使用第一种，减少不必要的 id。如果 DOM 结构不允许直接嵌套，则应使用第二种。




    示例

    <label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>




    <label for="username">用户名：</label> <input type="textbox" name="username" id="username">







    6.2. 按钮




    [强制] 使用 button 元素时必须指明 type属性值。




    解释:




    button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出 type 属性。




    示例

    <button type="submit">提交</button>

    <button type="button">取消</button>







    6.3. 可访问性 (A11Y)







    解释:




    负责主要功能的按钮应相对靠前，以提高可访问性。如果在 CSS 中指定了 float: right 则可能导致视觉上主按钮在前，而 DOM 中主按钮靠后的情况。




    示例

    <!-- good -->

    <style>

    .buttons .button-group {

    float: right;

    }

    </style>




    <div class="buttons">

    <div class="button-group">

    <button type="submit">提交</button>

    <button type="button">取消</button>

    </div>

    </div>




    <!-- bad -->

    <style>

    .buttons button {

    float: right;

    }

    </style>




    <div class="buttons">

    <button type="button">取消</button>

    <button type="submit">提交</button>

    </div>







    解释:




    当浏览器 JS 运行错误或关闭 JS 时，提交功能将无法工作。如果正确指定了 form 元素的 action 属性和表单控件的 name 属性时，提交仍可继续进行。




    示例

    <form action="/login" method="post">

    <p><input name="username" type="text" placeholder="用户名"></p>

    <p><input name="password" type="password" placeholder="密码"></p>

    </form>







    type 属性。




    解释:




    根据内容类型指定输入框类型，能获得能友好的输入体验。




    示例

    <input type="date">




    七、多媒体







    解释:




    音频应尽可能覆盖到如下格式：







    视频应尽可能覆盖到如下格式：







    示例

    <audio controls>

    <source src="audio.mp3" type="audio/mpeg">

    <source src="audio.ogg" type="audio/ogg">

    <object width="100" height="50" data="audio.mp3">

    <embed width="100" height="50" src="audio.swf">

    </object>

    </audio>




    <video width="100" height="50" controls>

    <source src="video.mp4" type="video/mp4">

    <source src="video.ogg" type="video/ogg">

    <object width="100" height="50" data="video.mp4">

    <embed width="100" height="50" src="video.swf">

    </object>

    </video>










    示例

    <object width="100" height="50" data="something.swf">DO NOT SUPPORT THIS TAG</object>




    八、模板中的 HTML







    示例

    <!-- good -->

    {if $display == true}

    <div>

    <ul>

    {foreach $item_list as $item}

    <li>{$item.name}<li>

    {/foreach}

    </ul>

    </div>

    {/if}




    <!-- bad -->

    {if $display == true}

    <div>

    <ul>

    {foreach $item_list as $item}

    <li>{$item.name}<li>

    {/foreach}

    </ul>

    </div>

    {/if}







    示例

    <!-- good -->

    <li class="{if $item.type_id == $current_type}focus{/if}">{ $item.type_name }</li>




    <!-- bad -->

    <li {if $item.type_id == $current_type} class="focus"{/if}>{ $item.type_name }</li>







    示例

    <!-- good -->

    <table>

    {foreach $item_list as $item_group}

    <tr>

    {foreach $item_group as $item}

    <td>{ $item.name }</td>

    {/foreach}

    <tr>

    {/foreach}

    </table>




    <!-- bad -->

    <table>

    <tr>

    {foreach $item_list as $item}

    <td>{ $item.name }</td>

    {if $item@iteration is div by 5}

    </tr>

    <tr>

    {/if}

    {/foreach}

    </tr>

    </table>

    公众号：电脑资讯


    关键词：规范,编码

    推荐文章

    新闻资讯

    整合营销 网络营销 网络推广 信息时代 建站知识 网站运营 电子商务 营销百科 公司新闻 行业动态 品牌营销

    推荐资讯

    74
    73
    25
    news

    微信公众号

    版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

    为了最佳展示效果，本站不支持IE9及以下版本的浏览器，建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
    关闭