前端代码规范-白红宇

一：html规范：文件以<!doctype>首行顶格开始，声明charset


    NEC：更好的CSS方案
    
    
    
    
    
    复制代码

结构顺序与视觉设计保持一致，如果便于搜索引擎抓取可将重要内容在html结构顺序上提前，除了表现具有明显表格形式的数据，不选table布局结构，表现，行为三者分离，避免内联，使用link引入css,放在head中使用script引入js文件，放在底部。保持良好的树形结构

在大的模块之间用空行隔开，使模块更清晰。每一个块级元素都另起一行，每一行都使用Tab缩进对齐（head和body的子元素不需要缩进）。删除冗余的行尾的空格。减少标签的嵌套，类名越少越好，结构多时要有开始注释：（文案两头空格）。和结束注释：（文案前加“/”符号，类似标签的闭合）。严格的嵌套尽可能以最严格的xhtml strict标准来嵌套，比如内联元素不能包含块级元素等等。正确闭合标签且必须闭合。严格的属性属性和值全部小写，每个属性都必须有一个值，每个值必须加双引号。没有值的属性必须使用自己的名称做为值（checked、disabled、readonly、selected）。可以省略style标签和script标签的type属性。标签语义嵌套常见错误常用属性（加粗的为不可缺少的或建议的）常用的标签:

超链接/锚 a不可嵌套a href,name,title,rel,target

换行按钮不可嵌套表单元素 type,disabled

定义列表中的定义（描述内容）只能以dl为父容器，对应一个dt 文本删除

块级容器

定义列表只能嵌套dt和dd

定义列表中的定义术语只能以dl为父容器，对应多个dd 强调文本

表单 action,target,method,name

标题从h1到h6，不可嵌套块级元素内嵌一个网页 frameborder,width,height,src,scrolling,name 图像 alt,src,width,height 各种表单控件 type,name,value,checked,disabled,maxlength,readonly,accesskey 标签为input元素定义标注 for

列表项只能以ul或ol为父容器

引用样式或icon 不可嵌套任何元素 type,rel,href

文档信息只用于head content,http-equiv,name

有序列表只能嵌套li select中的一个选项仅用于select value,selected,disabled

段落不能嵌套块级元素引用脚本不可嵌套任何元素 type,src 列表框或下拉框只能嵌套option或optgroup name,disabled,multiple 内联容器强调文本引用样式不可嵌套任何元素 type,media 下标上标

表格只可嵌套表格元素 width,align,background,cellpadding,cellspacing,summary,border 表格主体只用于table 表格中的单元格只用于tr colspan,rowspan 多行文本输入控件 name,accesskey,disabled,readonly,rows,cols 表格表尾只用于table 表格中的标题单元格只用于tr colspan,rowspan 表格表头只用于table 文档标题只用于head 表格行嵌套于table或thead、tbody、tfoot

无序列表只能嵌套li 复制代码

html应该使内容语义化：内容类型决定使用的语义标签，加强“资源型”内容的可访问性和可用性在资源型的内容上加入描述文案，比如给img添加alt属性，在audio内加入文案和链接。加强“不可见”内容的可访问性背景图上的文字应该同时写在html中，并使用css使其不可见，有利于搜索引擎抓取你的内容，也可以在css失效的情况下看到内容。使用实体：常用HTML字符实体（建议使用实体）：字符名称实体名实体数

"	双引号	"	"&	&符	&	&<	左尖括号（小于号）	<	<>	右尖括号（大于号）	>	> 	空格	 	  	中文全角空格	 	　常用特殊字符实体（不建议使用实体）：字符	名称	实体名	实体数¥	元	¥	¥¦	断竖线	¦	¦©	版权	©	©®	注册商标R	®	®™	商标TM	™	™·	间隔符	·	·«	左双尖括号	«	«»	右双尖括号	»	»°	度	°	°×	乘	×	×÷	除	÷	÷‰	千分比	‰	‰复制代码

避免css冲突或被覆盖，使用行内样式


    
复制代码

避免盒模型错误，doctype的不确定性，doctype影响最大的就是盒模型的解析，将盒模型拆分开来写，我们将原本要定义在某个div上的height和padding分别写到这个div和他的父元素或子元素上，

复制代码

这个文档生命是一个html5的文件，这个文件的标签是符合html5规范的，前端优化：1：静态资源，制作雪碧图，减少请求返回的数据量，压缩HTML，CSS，JS文件，小图标用iconfont代替。 2页面渲染速度优化：css放在顶端，优先渲染，js放在底部避免阻塞，服务端如果用node的话，使用compress可开启压缩， var express = require('express'); var compress = require('compression'); var app = express(); app.use(compress()); vue框架特点：1：mvvm:双向数据绑定，2：组件化：在vue中所有的都是组件化，3模块化：。应用：可以用在webapp，spa(单页面应用) 面试：h5新特性：语义化更好的内容元素，article,footer,header,nav,section,,表单控件：calendar,date,time,email,url,search,video,audio, 数据存储：本地离线存储数据localstorage长期存储数据，浏览器关闭后不丢失，sessionStorage:存储的数据，浏览器关闭后自动删除 7,8号 vue组件的封装，组件懒加载，打包优化 https:是浏览器和服务器建立的加密通道，处理网络中的应用层，组件懒加载原理：配置webpack,按需引入模块化将复杂系统分解成单一可管理，解耦成可替换模块，模块之间互不影响，可维护性高 require与import的区别 require是amd规范，import是nodejs规范

热门标签

最热TOP5