博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端规范1-HTML规范
阅读量:7078 次
发布时间:2019-06-28

本文共 1659 字,大约阅读时间需要 5 分钟。

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

例,尽量写在一行

2命名(,)
class必须使用小写,单词间使用-,而不是_(下划线)来连接
尽量语义化(优先英文及英文缩写,其次拼音,再次使用使用部件位置等方式(例如con-left))
id必须保证本页面唯一
同一页面应避免name和id命名相同(IE混淆),
     解释:IE6的兼容问题
3标签(,)
在保证语义化与样式的前提下,尽可能的减少标签数量
标签名必须使用小写(例<p></p>)
闭合标签
     另起一篇讨论,链接:
标签使用必须符合标签嵌套规则
     另起一篇讨论,链接:
HTML标签遵循标签语义化
     另起一篇讨论,链接:
标签的使用尽量简洁,减少不必要的标签,减少层级,扁平化
     
4属性名
     必须使用小写字母
     属性值必须使用双引号,而不是单引号, ,
     自定义属性建议使用xxx-为前缀,推荐使用data-,
     顺序( ,ctrl+F:属性顺序)
          id
          class
          name
          data-*
          src,
for,type,href
          title,alt
          
aria-*,role
     Boolean属性
          布尔值类型的属性(属性值==属性),建议不添加属性值
          一个元素中 Boolean 属性的存在表示取值 true,不存在则表示取值 false。
          例:
               
5head内部标签()
     使用<!DOCTYPE html>
     
使用IE Edge模式,(但是现在用不到该属性,暂时保留)
     建议设置<html lang="zh-CN">
          利于语言工具翻译发音
     字符编码必须是<head>标签中的第一个<meta>
          <mata charset="UTF-8">
     title 必须作为 head 的直接子元素,并紧随 charset 声明之后。
     
引入CSS时必须指明rel="stylesheet"
     
引入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标签中指示浏览器不支持的标签说明。
     尽力不要自动播放。
模板

转载于:https://www.cnblogs.com/liu-zhen/p/4340201.html

你可能感兴趣的文章
在论坛中出现的比较难的sql问题:12(递归问题2)
查看>>
第十次课作业(风险管理、项目收尾、知识产权)
查看>>
spring-前置通知
查看>>
Transient修饰符的使用
查看>>
shell特殊符号,cut、sort、wc、uniq、tee、tr、split命令
查看>>
运维面试题
查看>>
java 消息摘要算法 MAC
查看>>
2011.11.6
查看>>
Linux系统获取命令帮助方法及简单命令介绍
查看>>
PyYAML序列化yaml文件数据
查看>>
Radmin远程连接TMG
查看>>
CCNA 学习笔记(三)--路由选择协议(静态路由协议)
查看>>
python 学习笔记(4)-转载
查看>>
python实例pyspark以及python中文显示
查看>>
一个典型核心网络故障分析
查看>>
获取lamp编译参数
查看>>
Shell理论学习(一)
查看>>
phpcms开发之模板语法规则
查看>>
CST UTC
查看>>
因为看见,所以发现:QBotVariant谢绝落幕
查看>>