《Web前端开发最佳实践》学习笔记

一、Web前端开发概述

• Web前端：前端UI+后端数据交互
• 具体技能：页面标记 + 页面样式 + 前端编程 + 跨平台、跨浏览器 + 前端框架 + 调试工具

---

二、高效Web前端开发

• 文件结构：

  js:
      lib
      custom.js(业务js)
  css:
      lib
      images(样式中的背景图)
      reset.css(统一元素默认样式css)
      custom.css(业务css)
  resource:
      存放资源背景图片
  index.html
  

  模块具体命名格式:

  用短横线表达父子关系

• 前端性能分析工具（YSlow）：后续使用

• 性能优化方案：

  ···· 1. 代码压缩

  ···· 2. html代码压缩

  ···· 3. 图片资源压缩

• 前端代码命名规范

  1.HTML代码所有标签名和属性名应该都为小写

  2.id关键词用下划线连接，class关键词用中划线连接

  3.缩进用4个空格表示层级

  4.在元素上方添加注释，不要在代码行后面添加

  5.css中代码表示空格页需要4个空格缩进

  6.JavaScript首字母小写，其他单词首字母大写，不要使用标识符变量类型作为前缀

  7.javascript使用单引号定义字符串

  8.文件头部都必须增加注释：类似这样

  /*文件头部信息*/
  /*
   * Copyright Version
   *
   *
   */
  

---

三、标准的html代码

• js和css外部文件，需要将外部文件的链接添加到head部分
• 不推荐使用单独设置样式的标签
• 样式和结构分离：
  1. 在HTML中链接CSS文件
  2. 在HTML中内嵌CSS样式（不推荐）
• 灵活使用meta标签

---

四、高可读性的HTML

• 精简HTML

  删除多余的容器

  删除多余的元素

  数据分类格式：

  元数据式内容：、 、

  流式内容: 、

  章节式内容:

  、

  、

  、

  标题式内容：

  ~

  、

  段落式内容: 、 等。基本上等同于行内元素的范围

  嵌入式内容:、、

  交互式内容:、、

  /指的是代码延迟执行/

  不使用HTML5中废弃的标签和属性