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. JasperReports报表组15

    组在JasperReports的协助组织对报告的数据以逻辑方式.报告组代表连续记录的数据源中有一些共同点,比如某个报表字段的值的序列.报告组由<group>元素定义.一个报表可以有任意数量 ...

  2. python生成VOC2007的类库

    VOCAnnotation.py: # -*-coding:utf-8-*- from lxml import etree import os class VOCAnnotation(object): ...

  3. Java数据结构和算法(七)--AVL树

    在上篇博客中,学习了二分搜索树:Java数据结构和算法(六)--二叉树,但是二分搜索树本身存在一个问题: 如果现在插入的数据为1,2,3,4,5,6,这样有序的数据,或者是逆序 这种情况下的二分搜索树 ...

  4. apache https 双向认证

    Https分单向认证和双向认证 单向认证表现形式:网站URL链接为https://xxx.com格式 双向认证表现心事:网站URL链接为https://xxx.com格式,并且需要客户端浏览器安装一个 ...

  5. Struts Tiles框架使用（转）

    原文:Struts Tiles框架使用 Tiles框架 ++YONG原创,转载请声明 Tiles框架为创建Web页面提供了一种模板机制,它能将网页的布局和内容分离.它用模板定义网页布局,每个页面模板都 ...

  6. MySQL语句错误及解决方案

    1.group by查询错误 ERROR 1055 (42000): Expression #1 of SELECT list is not in GROUP BY clause and contai ...

  7. IO流9 --- 使用FileInputStream和FileOutputStream读写非文本文件 --- 技术搬运工（尚硅谷）

    字节流读写非文本文件(图片.视频等) @Test public void test5(){ File srcFile = new File("FLAMING MOUNTAIN.JPG&quo ...

  8. Mac下载Navicat premium提示文件损坏的解决方案

    首先打开终端,执行: sudo bash 这时会提示你输入你的账户密码, 输入完后就切换到了 root 用户,然后执行: xattr -cr /Applications/Navicat\ Premiu ...

  9. 集训队日常训练20180513-DIV2

    A.2176 给一个字符串s,问距离为D的字母对是否存在相同. 模拟. #include<bits/stdc++.h> using namespace std; int main() { ...

  10. 2016计蒜之道复赛A 百度地图的实时路况

    百度地图的实时路况功能相当强大,能方便出行的人们避开拥堵路段.一个地区的交通便捷程度就决定了该地区的拥堵情况.假设一个地区有 nnn 个观测点,编号从 111 到 nnn.定义 d(u,v,w)d(u ...