HTML和CSS、JavaScript规范 第一部分(HTML部分)

麹义
• 阅读 587

表单元素的id必须加以下前缀

label: lbl text:txt password:txt textarea:txt file:txt
radio: rad checkbox:chk submit:btn reset:btn
button:btn hidden: hid

用于结构布局的元素id命名

主容器: main 页头:header 页脚:foote 内容区域:content
LOGO: logo 主导航:main-nav 二级导航:sub-nav

name命名

一般用于表单元素,根据当前元素id属性值命名,去掉id属性值的前缀和所有连接符,使用骆驼式命名法命名,例如:id=“txt-id-card”,那么name=“idCard”。

合理使用标签,语义化结构

  1. 标签合理嵌套
    a ,spam ,strong ,em ,p ,h1-h6等元素不能包含:div、ul、ol、dl、p
  2. 严禁多div症、多span症、多table症,正确使用标签表现DOM结构,在文档去除css的情况下,任然具有结构和可读性,以下是html标记的使用规范:
    p :文本段落 dl :定义列表,可包括标题和内容简介的列表
    ul :无序列表 ol :有序列表 strong/em :强调文本
    h1-h6 :文章标题、内容区块标题,根据重要性由大到小区分,h1一个页面只出现一次;
    img :图像。必须加上alt属性,当图像无法显示时,可表示图像信息,背景和按钮使用css处理,不使用img元素;
    table :数据网络,规则的分栏布局,尽可能显性的定宽和定高。
  3. 合理化表单结构
    A)使用fieldset元素包裹相同类别的字段。
    B)使用legen元素表示 字段类别名称。
    C)使用label表示字段文本,添加必要的for属性,以在点击字段文本时,文本框能获得焦点。
    D)文本框不使用size属性定义宽度,而使用css的width属性。
    E)添加maxlength属性限制输入字符的长度。
  4. 严禁使用已在xhtml1.0中已移除的标签
    s 、i 、b 、font
  5. 控制页面默认显示状态
    使用js来控制和切换现实的区块、导航、tab,必须先用css处理DOM默认显示状态。

    本文由博客一文多发平台 OpenWrite 发布!
点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Karen110 Karen110
4年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
List的Select 和Select().tolist()
List<PersondelpnewList<Person{newPerson{Id1,Name"小明1",Age11,Sign0},newPerson{Id2,Name"小明2",Age12,
Stella981 Stella981
3年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable