HTML规范
1代码风格(参1,)
使用Tab字符(四个空格长度)
层级关系太多时尽量写在一行,但保证每行代码不宜过长
 例,代码不宜过长

例,尽量写在一行

2命名(参1,)
class必须使用小写,单词间使用-,而不是_(下划线)来连接
尽量语义化(优先英文及英文缩写,其次拼音,再次使用使用部件位置等方式(例如con-left))
id必须保证本页面唯一
同一页面应避免name和id命名相同(IE混淆),参1
     解释:IE6的兼容问题
3标签(参1,)
在保证语义化与样式的前提下,尽可能的减少标签数量
标签名必须使用小写(例<p></p>)
闭合标签
     另起一篇讨论,链接:
标签使用必须符合标签嵌套规则
     另起一篇讨论,链接:
HTML标签遵循标签语义化
     另起一篇讨论,链接:
标签的使用尽量简洁,减少不必要的标签,减少层级,扁平化
     
4属性名
     必须使用小写字母
     属性值必须使用双引号,而不是单引号,参1
     自定义属性建议使用xxx-为前缀,推荐使用data-,参1
     顺序(参1,ctrl+F:属性顺序)
          id
          class
          name
          data-*
          src,for,type,href
          title,alt
          aria-*,role
     Boolean属性
          布尔值类型的属性(属性值==属性),建议不添加属性值
          一个元素中 Boolean 属性的存在表示取值 true,不存在则表示取值 false。
          例:
               
5head内部标签(参1通用
     使用<!DOCTYPE html>
     使用IE Edge模式,参1(但是现在用不到该属性,暂时保留)
     建议设置<html lang="zh-CN">
          利于语言工具翻译发音
     字符编码必须是<head>标签中的第一个<meta>
          <mata charset="UTF-8">
     title 必须作为 head 的直接子元素,并紧随 charset 声明之后。
     引入CSS时必须指明rel="stylesheet",参1
     引入CSS和JS时无需指明type属性(因为指明的值即是默认值)
     JS脚本放在页面的底部或采用异步加载
     引入CSS和JavaScript 时不需要指明 type。
 
     使用favicon,浏览器默认请求Web Server根目录下的favicon.ico,必须使用以下方法的其中一种
          1.在 Web Server 根目录放置 favicon.ico 文件
          2.使用 link 指定 favicon。
          <link rel="shortcut icon" href="path/to/favicon.ico">
     viewport
6注释
     注释两端用空格,结束注释使用反斜杠"关闭"。
          例
          
图片
     禁止img的src为空,延迟加载的图片也要有默认的src
     避免加不必要的title属性,为重要图片加alt属性
          这两个也有异议,另起一篇讨论,链接:
     添加weidth和height属性,避免页面抖动
          这里的意思应该是在图片未加载完时和加载完图片后图片尺寸变化影响页面布局
     需要用户下载的图片使用img标签而不是使用background背景图
     使用sprite雪碧图
表单
     控件标题(<label>标签)
          1.将控件置于 label 内。(推荐)
          2.label 的 for 属性指向控件的 id。
          例子:

     按钮
          使用button元素必须指明type属性值(提交submit和取消button)
          为提高可访问性重要的标签代码应该在前(例如提交在重置前面),使用样式控制
     在针对移动设备开发的页面时,根据内容类型指定输入框的 type 属性。
     当使用 JavaScript 进行表单提交时,如果条件允许,应使原生提交功能正常工作。
多媒体
     音频:MP3、WAV、Ogg
     视频:MP4、WebM、Ogg
     优先使用audio和video标签定义音视频,且在object标签中指示浏览器不支持的标签说明。
     尽力不要自动播放。
模板

前端规范1-HTML规范的更多相关文章

  1. 前端开发规范:命名规范、html 规范、css 规范、js 规范

    上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...

  2. 前端开发规范:命名规范、HTML 规范、CSS 规范、JavaScript 规范

    一个好的程序员肯定是要能书写可维护的代码,而不是一次性的代码,怎么能让团队当中其他人甚至一段时间时候你再看你某个时候写的代码也能看懂呢,这就需要规范你的代码了.我是有一点强迫症的人,上周我们后端给我了 ...

  3. 团队开发前端VUE项目代码规范

    团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658   一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...

  4. 前端开发规范之命名规范、html规范、css规范、js规范

    在学习编程的时候,每次看到那些整齐规范的代码,心里顿时对这个程序员表示点点好感,有时,比如看到自己和朋友写的代码时,那阅读起来就是苦不堪言,所以,一些基本的开发规范是必须的,是为了自己方便阅读代码,也 ...

  5. 前端规范之CSS规范(Stylelint)

    代码规范是软件开发领域经久不衰的话题,几乎所有工程师在开发过程中都会遇到或思考过这一问题.而随着前端应用的大型化和复杂化,越来越多的前端团队也开始重视代码规范.同样,前段时间,笔者所在的团队也开展了一 ...

  6. AMD规范与CMD规范的区别

    AMD规范与CMD规范的区别是什么?    在比较之前,我们得先来了解下什么是AMD规范?什么是CMD规范?当然先申明一下,我个人也是总结下而已,也是网上看到的资料,自己总结下或者可以说整理下而已,供 ...

  7. JavaSript模块规范 - AMD规范与CMD规范介绍(转)

    JavaSript模块规范 - AMD规范与CMD规范介绍 JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者 ...

  8. AMD规范与CMD规范的区别是什么?

    AMD规范与CMD规范的区别是什么?    在比较之前,我们得先来了解下什么是AMD规范?什么是CMD规范?当然先申明一下,我个人也是总结下而已,也是网上看到的资料,自己总结下或者可以说整理下而已,供 ...

  9. 转:AMD规范与CMD规范的区别是什么?

    AMD规范与CMD规范的区别是什么?    在比较之前,我们得先来了解下什么是AMD规范?什么是CMD规范?当然先申明一下,我个人也是总结下而已,也是网上看到的资料,自己总结下或者可以说整理下而已,供 ...

  10. iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸

    iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸 iPhone界面尺寸 设备 分辨 ...

随机推荐

  1. [code] if (x<0)x=0;else if (x>255)x=255;

    //颜色范围0-255: // 1.原始: )tem_b=;)tem_b=; )tem_g=;)tem_g=; )tem_r=;)tem_r=; //2.使用条件状态值生成掩码来移除条件分支 tem_ ...

  2. Linq之Sum用法新体会

    1.简单应用,求数组的和,示例: , , , , , , , , , }; double numSum = numbers.Sum(); Console.WriteLine("The sum ...

  3. Hadoop 集群的建立与安装

  4. Hadoop 集群硬件配置

  5. finger 工具:用来查询用户信息,侧重用户家目录、登录SHELL等

    finger 工具侧重于用户信息的查询:查询的内容包括用户名(也被称为登录名Login),家目录,用户真实的名字(Name)... ... 办公地址.办公电话:也包括登录终端.写状态.空闭时间等: 我 ...

  6. Visual studio 编译错误 无法将文件obj\Debug\*.exe复制到bin\Debug\*.exe

    问题: 错误 未能将“obj\Debug\Server.exe”复制到“bin\Debug\Server.exe”.超出了重试计数 10.失败. Server 错误 无法将文件“obj\Debug\S ...

  7. Chai.js断言库API中文文档

    基于chai.js官方API文档翻译.仅列出BDD风格的expect/should API.TDD风格的Assert API由于不打算使用,暂时不放,后续可能会更新. BDD expect和shoul ...

  8. vmware三种网络模式配置(转载)

    虚拟机系统安装的是Linux系统 首先,在本机上查看所有网络配置连接,使用命令:ipconfig Microsoft Windows [版本 6.1.7600]版权所有 (c) 2009 Micros ...

  9. 傳説中的 jsonp

    jsonp的由來 1 . 網頁上的東西衹要跨域了就不能傳送或者接受數據了.不管是什麽衹要是跨域.Ajax直接请求普通文件存在跨域无权限访问的问题, 2 . 但是src這個東西比較厲害了,請求哪裏都可以 ...

  10. js的模块化写法

    记得前两天自己写一个动画首页,动画很复杂,我用的fullpage虽然相对比较简单,但是每个页面的animation各有差异,需要相对控制,估计有上千行的js代码,写的心情乱糟糟的. 如何让代码量巨大, ...