前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >编写灵活、稳定、高质量的HTML代码的规范

编写灵活、稳定、高质量的HTML代码的规范

作者头像
WEBING
发布2019-02-26 10:35:54
5840
发布2019-02-26 10:35:54
举报

一、唯一定律

无论有多少人共同参与同一项目,一定要确保每一行代码都像是唯一个人编写的。

二、HTML

2.1 语法

(1)用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。

(2)嵌套元素应当缩进一次(即两个空格)。

(3)对于属性的定义,确保全部使用双引号,绝不要使用单引号。

(4)不要在自闭合(self-closing)元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。

(5)不要省略可选的结束标签(closing tag)(例如,</li> 或 </body>)。

2.2 Example

三、HTML5 doctype

为每个 HTML 页面的第一行添加标准模式(standard mode)的声明,这样能够确保在每个浏览器中拥有一致的展现。

四、语言属性

根据 HTML5 规范:

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

五、IE 兼容模式

IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。

六、字符编码

通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是,可以避免在 HTML 中使用字符实体标记(character entity),从而全部与文档编码一致(一般采用 UTF-8 编码)。

七、引入 CSS 和 JavaScript 文件

根据 HTML5 规范,在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性,因为 text/css 和 text/javascript 分别是它们的默认值

八、实用为王

尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

九、属性顺序

9.1 从大到小

HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性

(1)class

(2)id, name

(3)data-*

(4)src, for, type, href, value

(5)title, alt

(6)role, aria-*

9.2 Example

9.3 说明

class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位。

十、布尔(boolean)型属性

10.1 注意

(1)布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值,但是 HTML5 规范不需要

(2)元素的布尔型属性如果有值,就是 true,如果没有值,就是 false

(3)如果属性存在,其值必须是空字符串或 ... 属性的规范名称,并且不要在首尾添加空白符。

简单来说,就是不用赋值

10.2 Example

十一、减少标签的数量

编写 HTML 代码时,尽量避免多余的父元素。很多时候,这需要迭代和重构来实现。

十二、减少 JavaScript 生成的标签

通过 JavaScript 生成的标签让内容变得不易查找、编辑,并且降低性能。能避免时尽量避免。

未完待续 编写灵活、稳定、高质量的CSS代码的规范

阅读更多

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、唯一定律
  • 二、HTML
    • 2.1 语法
      • 2.2 Example
      • 三、HTML5 doctype
      • 四、语言属性
      • 五、IE 兼容模式
      • 六、字符编码
      • 七、引入 CSS 和 JavaScript 文件
      • 八、实用为王
      • 九、属性顺序
        • 9.1 从大到小
          • 9.2 Example
            • 9.3 说明
            • 十、布尔(boolean)型属性
              • 10.1 注意
                • 10.2 Example
                • 十一、减少标签的数量
                • 十二、减少 JavaScript 生成的标签
                相关产品与服务
                语音合成
                语音合成(Text To Speech,TTS)满足将文本转化成拟人化语音的需求,打通人机交互闭环。提供多场景、多语言的音色选择,支持 SSML 标记语言,支持自定义音量、语速等参数,让发音更专业、更符合场景需求。语音合成广泛适用于智能客服、有声阅读、新闻播报、人机交互等业务场景。
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档