"Web front-end development best practices" study notes

A, Web front-end development Overview

• Web front-end: the back-end data exchange front-end UI +
• Specific skills: page markup page style + + + programming front-end cross-platform, cross-browser debugging tools + + front-end framework

---

Second, efficient Web front-end development

• File Structure:

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

  DETAILED module naming format:

  Expression of parent-child relationship with a dash

• Front-end performance analysis tool (YSlow): subsequent use

• Performance optimization:

  1. code compression ????

  ···· 2. html code compression

  ???? 3. Image compression resources

• Front-end code naming

  1.HTML code for all tags and attribute names should be all lowercase

  2. idKey words underlined connection, classkeywords connecting underlined

  3. indention level with 4 spaces

  4. add comments above elements, do not add back line

  5.css code for the spaces page requires four spaces to indent

  6.JavaScript first letter lowercase, capitalized other words, do not use the variable type identifier as a prefix

  7.javascript defined string using single quotes

  8. The file header must add notes: like this

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

---

Third, the standard html code

• external js and css files, you need to add a link to an external file into the head section
• Not recommended to set the style of the individual labels
• Style and structure of the separation:
  1. CSS files in HTML link
  2. Inline CSS styles in HTML (not recommended)
• Flexible use of metalabels

---

Fourth, high readability of HTML

• Compact HTML

  Remove excess container

  Remove the extra elements

  Data classification format:

  元数据式内容：、 、

  流式内容: 、

  章节式内容:

  、

  、

  、

  标题式内容：

  ~

  、

  段落式内容: , And so on. Substantially identical to the elements within the scope of the line

  嵌入式内容:、、

  交互式内容:、、

  / Refers to code execution delay /

  HTML5 discarded without using tags and attributes