# 一、HTML实践
- 使用标准的
HTML5简化的定义的方式- 定义文档类型
<!DOCTYPE html> - 定义页面的编码
<meata charset="UTF-8"> - 样式和页脚的引用，不需要写
type类型，如linkscript
- 定义文档类型
- 停止使用不标准的标签和属性，如
mqrquee - 不推荐在
HTML标签中添加样式属性，如img标签中添加宽高 - 不要使用
@import，此方式最大的缺点是引用css文件不能同时并行下载 - 增加
JavaScript禁用的提示信息，最常用的方式是使用<noscript> - 添加必要的
meta标签 - 使用频率较高的语义化标签
puldlpemstrongtablesiteblockquotenavheaderfooterarticlesectionasidehground
- 样式和结构的分离：把
HTML中用于表达外观的部分从HTML中删除，并用css实现。如<span>|</span>中的|用css的伪类实现即可 - 如果图片作为页面内容的一部分，应该使用
img标签，如果图片仅仅是装饰作用，应该使用背景图片方式 - 提高表单易用性的手段
- 使用
label标签，并设置label标签的for属性 - 给输入控件设置合理的
placehoder - 如有必要，给输入控件设置
tab顺序，tabindex用来设置输入控件的切换顺序<input type="text" tabindex="2"> - 使用
HTML5中引入的表单控件url email date search
- 使用
- 精简
HTML代码 - 删除多余的容器
- 装饰性的元素使用
css实现 - 避免使用
table布局
# 二、CSS实践
- 推荐的
css类的命名规则和元素的id命名规则相似，只是组成类名的关键字的连接符为中划线-.reder-content-title- 为了避免
class命名的重复，命名时取父元素的class作为前缀
- 为了避免
- 使用
css reset统一浏览器的显示效果 - 给
css样式定义排序，最佳是按类型分组排序 - 显示与浮动、定位、尺寸、边框相关属性、字体样式、背景、其他样式
- 合理利用
css的权重，提高代码的重用性css样式中尽量不要使用ID选择器，最佳实践尽可能使用较低权重的选择器作为基础样式- 减少自选择器的层级
- 使用组合的
css选择器
empx%w3c把尺寸单位分为相对长度单位和绝对长度单位两种。- 相对长度单位又分为字体相对单位和视窗相对单位
- 字体相对单位包括：
emexchrem - 视窗相对单位包括：
vwvhvminvmax - 使用最广泛的是
empx百分比
- 字体相对单位包括：
em计算是相对自身元素的字体尺寸的，rem相对于根元素的字体大小计算， 百分比是相对于父元素的尺寸的- 如何设置元素的尺寸和字体大小最佳实践
- 尽量设置相对尺寸（局部的尺寸要尽量使用相对尺寸，即局部自适应）
- 只有在可预知元素尺寸的情况下才使用绝对尺寸
- 使用
em设置字体大小
css选择器定义最佳实践- 避免使用通配符
- 避免使用标签选择器及单个属性选择器作为关键选择器
- 不要在
id选择器前使用标签名 - 尽量不要使在选择符中定义过多的层级，最好不要超过三层
css相关图片处理- 不要设置图片尺寸
- 使用
css雪碧图技术
- 减少
css代码量- 定义简洁的
css规则 - 合并相关的
css规则 - 定义简洁的属性值合并相同的定义
- 定义简洁的
# 三、JavaScript实践
- 避免定义全局变量或函数
- 使用
var - 使用
JavaScript的严格模式use strict;
- 使用
- 使用简化的编码方式
- 对象创建
pserson={age:22,name:"poetries"} - 数组创建
list=[12,23,55]
- 对象创建
- 使用
===和!==而不是==和!= - 避免使用
with语句和eval() - 使用更严格的编码格式
- 使用严格模式遵循：
- 不要在全局中启用严格模式
- 在已有代码中谨慎使用严格模式
- 严格模式主要对不合理的地方做了改进
- 禁用
width关键字 - 防止意外的全局变量
- 函数中的
this不在默认指向全局 - 防止函数参数重命名
- 更安全的使用
eval()
- 禁用
- 使用严格模式遵循：
- 事件处理和业务逻辑相分离
- 配置数据和代码逻辑相分离
- 逻辑与结构相似相分离
- 从
JavaScript逻辑中分离css样式 - 从
JavaScript中分离HTML结构
- 从
JavaScript模块化的开发，提高代码的可维护性JavaScript的两种模块化规范ComonJSAMD- 两者的主要区别在加载模块的方式上
ComonJS以同步的方式加载，使用require()方法来加载模块AMD以异步的方式加载模块
- 合理使用
Ajax技术，适合的使用场景有- 前端会根据用户的需求动态取得后端数据，然后更新网页界面
- 期望通过不刷新页面取得任何资源或页面
- 动态进行用户输入的认证
# 四、附录
# 附录一 DIV命名规范
-
企业
DIV
