星空网 > 软件开发 > 网页设计

前端规范1

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

例,尽量写在一行

前端规范1
2命名(参1,)
class必须使用小写,单词间使用-,而不是_(下划线)来连接
尽量语义化(优先英文及英文缩写,其次拼音,再次使用使用部件位置等方式(例如con-left))

前端规范1

id必须保证本页面唯一
同一页面应避免name和id命名相同(IE混淆),参1
     解释:IE6的兼容问题
3标签(参1,)
在保证语义化与样式的前提下,尽可能的减少标签数量
标签名必须使用小写(例<p></p>)
闭合标签
     另起一篇讨论,链接:
标签使用必须符合标签嵌套规则
     另起一篇讨论,链接:
HTML标签遵循标签语义化
     另起一篇讨论,链接:
标签的使用尽量简洁,减少不必要的标签,减少层级,扁平化
     前端规范1
4属性名
     必须使用小写字母
     属性值必须使用双引号,而不是单引号,参1,
     自定义属性建议使用xxx-为前缀,推荐使用data-,参1
     顺序(参1,ctrl+F:属性顺序)
          id
          class
          name
          data-*
          src,for,type,href
          title,alt
          aria-*,role
     Boolean属性
          布尔值类型的属性(属性值==属性),建议不添加属性值
          一个元素中 Boolean 属性的存在表示取值 true,不存在则表示取值 false。
          例:
               前端规范1
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注释
     注释两端用空格,结束注释使用反斜杠"关闭"。
          例
          前端规范1前端规范1
图片
     禁止img的src为空,延迟加载的图片也要有默认的src
     避免加不必要的title属性,为重要图片加alt属性
          这两个也有异议,另起一篇讨论,链接:
     添加weidth和height属性,避免页面抖动
          这里的意思应该是在图片未加载完时和加载完图片后图片尺寸变化影响页面布局
     需要用户下载的图片使用img标签而不是使用background背景图
     使用sprite雪碧图
表单
     控件标题(<label>标签)
          1.将控件置于 label 内。(推荐)
          2.label 的 for 属性指向控件的 id。
          例子:
前端规范1
     按钮
          使用button元素必须指明type属性值(提交submit和取消button)
          为提高可访问性重要的标签代码应该在前(例如提交在重置前面),使用样式控制
     在针对移动设备开发的页面时,根据内容类型指定输入框的 type 属性。
     当使用 JavaScript 进行表单提交时,如果条件允许,应使原生提交功能正常工作。
多媒体
     音频:MP3、WAV、Ogg
     视频:MP4、WebM、Ogg
     优先使用audio和video标签定义音视频,且在object标签中指示浏览器不支持的标签说明。
     尽力不要自动播放。
模板



原标题:前端规范1

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

年增速接近200%!Lazada这个主力品类在不断爆发:https://www.ikjzd.com/articles/22106
贝索斯:要想80岁不后悔 问自己12个问题:https://www.ikjzd.com/articles/22107
来啊,互相伤害啊! 欧盟拟对美国加征215亿美元关税:https://www.ikjzd.com/articles/22109
外贸在回暖!别只看到一季度进出口增速低,3月出口增速高达21.3%:https://www.ikjzd.com/articles/22110
为什么刚开始做亚马逊会觉得很难?:https://www.ikjzd.com/articles/22112
盗你图还销得更好,你说气不气人?:https://www.ikjzd.com/articles/22114
无锡旅游景点竹海 - 无锡的竹海:https://www.vstour.cn/a/363178.html
5月贾汪好玩的地方 贾汪哪有好玩的地方:https://www.vstour.cn/a/363179.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流