• Web前端代码页面布局总结


    一.  html
    (1)编码:所有编码均采用xhtml,标签必须闭合,属性值用双引号包括,编码统一为utf-8。
    (2)语义化:语义化html,正确使用标签。
    (3)文件命名:命名以中文命名,依实际模块命名,方便查找
    (4)文件头部head的内容
    •  title,需要添加标题
    •   编码charset=UTF-8 
    •  缓存:Content=’-1’表示立即过期。
      在head标签内引入css文件,有助于页面渲染
      引入样式文件或JavaScript文件时, 须略去默认类型声明.
      页脚引入javascript文件
    (5)连接地址标签:书写链接地址时,避免重定向,如href=”http://www.xxx.com/”,需在地址后面加‘/’
    (6)尽可能减少div嵌套,如:根据重要性使用h1-6标签,段落使用p,列表使用ul,内联元素中不可嵌套块级元素,为含有描述性表单元素(input,tetarea)添加label
    (7)图片
      能以背景形式呈现的图片,尽量写入css样式中
      区分作为内容的图片和作为背景的图片,作为背景的图片采用Css sprite技术,放在一张大图里
      重要图片必须加上alt属性,给重要的元素和截断的元素加上title
    (8)注释:给区块代码及重要功能加上注释,方便后台添加功能
    (9)转义字符:特殊符号使用转义字符
    (10)避免使用行内样式,页面结构清晰,明了
    二. Css
    (1)页面内部尽量避免使用style属性
    (2)css放在head标签中,由link标签引入,使页面的结构与表现分离。
    (3)文件命名:以英文命名,后缀.css,共用:base.css,首页:index.css,其他页面样式依具体模块需求命名
    (4)编码统一为utf-8
    (5)Class与id的使用:
      Id:具有唯一性,是父级的,用于标识页面上的特定元素,如header/footer/wrapper/left/right之类
      Class:可以重复使用,可用于页面上任意多个元素.
      命名:以小写英文字母、数字、下划线组合命名,避免使用中文拼音,尽量使用简易的单词组合,采用驼峰命名法和划线命名法,提高可读性,如:Content,Content-img等。
    (6)为JavaScript预留钩子的命名, 以 js- 起始, 比如:js-right, js-left
    (7)书写代码前,考虑样式重复利用率,充分利用html自身属性及样式继承原理减少代码量,代码建议单行书写。方便修改.
    (8)图片
      命名:小写英文字母、数字、_ 的组合,使用有意义的名称或英文简写,最好不要使用汉语拼音,区分大写字。
      使用雪碧图技术, 减小http请求,sprite按模块制作
    (9)书写顺序:保证同类型属性写在一起,一般遵循布局定位属性–>自身属性–>文本属性–>(由整到零)其他属性的书写格式
    (10)书写顺序规则
      定位属性(比如:display, position, float, clear, visibility等)
      自身属性(比如:width, height, margin, padding, border等)
      文本属性(比如:font, line-height, text-align, text-indent, vertical-align等)
      其他属性(比如:color, background, opacity, cursor,content, list-style等)
    (13)减少影响性能的属性,如:position,float
    (14)清除浮动方法:⑴clear:both⑵设置空div,设置width:100%,overflow:hidden;
    (15)使用兄弟,子,相邻选择器,伪元素选择器:first-child,last-child,nth-child(n),n代表第几个元素,n可为:add表奇数,even表示偶数;(ie支持情况不好)
    3. Javascript
    (1)文件编码统一为utf-8, 书写时, 每行代码结束必须有分号‘;’,尽量根据需求编写原生代码开发.
    (2)在页脚引入javascript脚本body结束之前,采用外链引入形式,使页面的结构与行为分离
    (3)命名:
      文件命名:以英文命名,后缀为.js,共用:common.js,其他命名可根据模块需求命名
      变量命名:驼峰式命名,原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun。变量集中声明, 避免全局变量
      类命名:首字母大写, 驼峰式命名. 如 ITaoLun;
     函数命名: 首字母小写驼峰式命名. 如iTaoLun();
      命名语义化, 尽可能利用英文单词或其缩写;
    (4)
    Javascrpt的typeof返回那些数据类型?

    1.undefined未定义

    2.boolean布尔值

    3.string字符串

    4.number数值

    5.object对象

    6.nullfunction函数

    4.注释规范
    (1)html:注释格式,”-”只能在注释的始末位置,不可置入注释文字区域
    (2)Css:注释格式
    (3)Javascript:单行注释://这儿是注释,多行注释:
     
    5. Css Hack 特殊符号
    (1)* :IE6/7都能识别*,标准浏览器不识别
    (2)_:只有IE6识别
    (3)!Important:IE6不识别,Firefox,IE7/8/9、chorme等主流浏览器均识别
    (4)9:所有浏览器均识别,包括IE6/7/8
    (5)+:IE6/7/8识别
    (6)书写顺序:先写FF等非IE浏览器所需样式,其次IE8,再次IE7,最后写IE6

    6.执行时间
    window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
    $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。


    7.编写个数不同
    window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
    $(document).ready()可以同时编写多个,并且都可以得到执行

    $(document).ready()
    8.简化写法
    window.onload没有简化写法
    $(document).ready(function(){})可以简写成$(function(){})
     
  • 相关阅读:
    Kubernetes日常维护命令
    4-docker的三要素
    3-docker的安装
    2-docker介绍
    1-为什么要使用docker
    块存储、文件存储、对象存储意义及差异
    ceph分布式存储的搭建
    YAML入门:以创建一个Kubernetes deployment为例
    Zabbix通过SQL语句从数据库获取数据说明
    图解HTTP--03--http报文内的信息
  • 原文地址:https://www.cnblogs.com/cxy66/p/6050041.html
Copyright © 2020-2023  润新知